SVG rasterpatroon achtergrond

Waaruit een patroonachtergrond bestaat

Het gegenereerde bestand bevat één kleine tegel, eenmalig gedefinieerd als patroon, en een rechthoek die het canvas met die tegel vult. Omdat de browser de tegel herhaalt, blijft het bestand een paar honderd bytes, of het raster nu 20 cellen heeft of 2.000. De eerste rechthoek schildert de achtergrondkleur, de tweede schildert de lijnen erbovenop.

Elke tegel tekent alleen zijn bovenste en linkerrand. De buurtegels leveren de rest, zodat geen lijn dubbel wordt getekend. Eén gevolg is goed om te weten: de lijn van de eerste kolom en de eerste rij ligt precies op de rand van het canvas, dus de helft van de dikte valt erbuiten. Een lijn van 1 px ziet er daardoor bovenaan en links uit als een dunne rand van een halve pixel. Is de breedte van het canvas een exact veelvoud van de celgrootte, dan eindigen de rechter- en onderrand zonder afsluitende lijn.

Waarden die als achtergrond werken

Een achtergrond moet de tekst erboven ondersteunen. Deze startpunten zijn veilig:

Houd het contrast tussen lijnen en achtergrond laag. Staat er lopende tekst bovenop, dan vermoeit lezen als een lijn bijna even donker is als de tekst.

Een voorbeeld uitgewerkt

Voor een hero-sectie van 1200 px breed en 800 px hoog geeft een celgrootte van 40 px 30 kolommen en 20 rijen, dus 600 cellen. Omdat 1200 en 800 veelvouden van 40 zijn, eindigt het raster netjes op beide randen. Met cellen van 50 px krijg je 24 bij 16 cellen, ook netjes. Een celgrootte van 45 px laat rechts en onder een gedeeltelijke cel achter, want 1200 gedeeld door 45 is 26,67.

Het resultaat gebruiken

Plak de SVG direct in je opmaak, sla hem op als bestand en verwijs ernaar als afbeelding, of plaats hem achter je inhoud als decoratieve laag. Onthoud dat de achtergrondkleur deel uitmaakt van de SVG. Wil je het raster over een andere kleur, bewerk dan de eerste rechthoek in de gekopieerde code.

De achtergrond op de layout afstemmen

Is je inhoudskolom 960 px breed, dan houdt een celgrootte van 32 of 40 px het raster en de kolomranden in de pas, omdat 960 door beide deelbaar is. Als het raster op de layout aansluit, lijken de lijnen ontworpen in plaats van willekeurig.