Softonic

SVG rastergenerator

Stap 1 / 3
Volgende

Het rasterachtige achtergrondontwerp is een standaardelement in ontwerptools (Figma, Framer), ontwikkelaarsgerichte landingpagina’s (Linear, Vercel) en elke interface die een blauwdruk- of millimeterpapier-uitstraling nastreeft. Het behoort ook tot de lichtste achtergronden die beschikbaar zijn: een herhalende afbeelding van <pattern> met twee lijnen, meestal minder dan 300 bytes groot. De generator bouwt het raster op bij elke celgrootte, lijndikte en kleur, zodat u het kunt aanpassen voor een subtiel Figma-stijl raster of een krachtige blauwdruk-look.

Hoe bouwt u het raster op?

  1. 1

    Stel de afmetingen van het scherm in

    Stel breedte en hoogte in van 50 tot 3.000 px. Een veelvoud van de celgrootte voorkomt gedeeltelijke cellen aan de randen.

  2. 2

    Kies een celgrootte

    Kies van 5 tot 500 px. Probeer 20–40 px voor subtiele achtergronden, 8–12 px voor grafpapier en 60–80 px voor duidelijke wireframes.

  3. 3

    Kies de streepbreedte en kleur

    Strepen van 0,5–1 px worden als schone lijnen gelezen; strepen van meer dan 2 px beginnen erop te lijken alsof ze zijn getekend.

  4. 4

    Stel de achtergrond in

    Kies de effen achtergrondkleur die het SVG-bestand uitvoert. Voor een overlay kopieert u het SVG-bestand en wijzigt of verwijdert u de achtergrond-`<rect>` in uw eigen code.

  5. 5

    Kopieer de SVG

    Plak in een markering of als inline binnen een CSS-data-URL voor een afbeelding die kan worden gebruikt als achtergrond met tegelvormige structuur.

Het patronelement

Elke cel bestaat uit één <path>-element dat de rechter- en onderste rand aftekent; door deze vakjes te herhalen wordt het gehele rooster gevormd met slechts twee lijnsegmenten per cel, in plaats van vier.

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

De magie zit in de route M 40 0 L 0 0 0 40: vanaf (40, 0) via lijn naar (0, 0) en vervolgens naar (0, 40). Deze route tekent de bovenste lijn alleen tot de linkerbovenhoek en daarna verder naar beneden langs de linkerkant; wanneer deze wordt gebruikt voor het opstellen van een raster, vormt ze een compleet raster zonder dubbele strepen.

Gids voor patroonafmetingen

Gebruiksgeval Celgrootte Streep Kleuruitstraling
Figma-achtig doek 20–30 px 1 px #e5e7eb op #fafafa
Grafiekpapier 10–12 px 0,5 px #cbd5e1 op #ffffff
Blauwdruk 40–60 px 1 px #bfdbfe op #1e3a8a
Wireframe 80 px 1,5 px #9ca3af op #ffffff
Retro-terminal 16 px 1 px #22c55e op #000000

Hoofd- en subrasters

Als u een ontwerptekening wilt met een fijn raster en een sterker hoofdraster elke N cellen, stapel twee SVG-achtergronden op elkaar.

.grid {
  background:
    url("data:image/svg+xml,<svg>... major grid ...</svg>"),
    url("data:image/svg+xml,<svg>... minor grid ...</svg>");
}

De browser combineert beide elementen in één tekenbewerking, zonder prestatieverliezen.

Toegankelijkheid

Het raster is uitsluitend decoratief. Gebruik het op een pseudo-element (::before met position: absolute; inset: 0; z-index: -1;), zodat schermlezers en inhouds parsers alleen de echte inhoud zien, niet de achtergrond.

Veelgestelde vragen

SVG-strepen die worden weergegeven met sub-pixelbreedtes kunnen anti-aliasing ondergaan. Stel de streepbreedte vast op een gehele pixel (1 of 2) en verschuif de route met 0,5 px (voor strepen van 1 px) om deze uit te lijnen met het pixelrooster.

Met deze generator niet. Hexagonale roosters vereisen een vakje dat sqrt(3) keer breder is dan hoog, en een lijn die een halve hexagon vormt. Gebruik een speciaal hulpmiddel voor hexagonale roosters of teken de roosterstructuur in Figma.

Deze editor maakt een effen achtergrond. Voor een overlay kopieert u het SVG-bestand en wijzigt u de eerste achtergrond-<rect> naar fill="transparent" of verwijdert u die in uw eigen code.

Ja. SVG-grids hebben een grootte van 200 tot 500 bytes, schalen nauwkeurig bij elke DPI en kunnen de kleur worden gewijzigd met CSS-variabelen. Een PNG-grid heeft meestal een grootte van 5 tot 20 KB en wordt op Retina-schermen gepixelateerd.

De editor stuurt de huidige afmetingen en kleuren via onze servers om het SVG-bestand te renderen. In de drietrapsflow staan die instellingen ook in de pagina-URL. Voer geen vertrouwelijke waarden in; er is geen bronbestandsupload of opgeslagen project.

Gerelateerde tools

Material Design-kleurkiezer

Blader door het Material Design-kleurenpalet. Kopieer elke tint (van 50 tot A700) als HEX-, RGB- of HSL-waarde met één tik.

Gelinieerd papier generator

Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.

Instagram-grid-splitter

Verdeel een brede afbeelding in een 3×3 Instagram-grid, of in een willekeurig aantal rijen. De tegels zijn genummerd, zodat je ze eenvoudig in omgekeerde volgorde kunt uploaden.

Contactblad maken

Rangschik foto’s op afdrukbare A4- of Letter-contactbladen met bijschriften en voorvertoning en download JPEG-pagina’s of een pdf.

Afbeelding naar grijswaarden

Zet kleurenafbeeldingen in uw browser om naar grijswaarden. Gratis en privé, er wordt niets geüpload.

Kruissteekpatroon maken

Zet JPEG, PNG of WebP om in een afdrukbaar kruissteekpatroon van 10–150 steken met 2–40 eigen kleuren, symbolen, exacte aantallen en stofmaten.

Tool beschikbaar in andere talen