SVG-rutmönsterbakgrund

Vad en mönsterbakgrund består av

Den genererade filen innehåller en liten kakel som definieras en gång som ett mönster, och en rektangel som fyller duken med det mönstret. Eftersom webbläsaren upprepar kaklet förblir filen några hundra byte stor, oavsett om rutnätet har 20 eller 2 000 celler. Den första rektangeln målar bakgrundsfärgen och den andra målar linjerna ovanpå.

Varje kakel ritar bara sin övre kant och sin vänstra kant. Grannkakel levererar resten, så ingen linje ritas två gånger. En konsekvens är värd att känna till: linjen på allra första kolumnen och raden ligger på duksens kant, så halva bredden hamnar utanför. En linje på 1 px visas därför som en tunn halv-pixelkant upptill och till vänster. Om duksens bredd är en exakt multipel av cellstorleken slutar högra och nedre kanten utan avslutande linje.

Välj värden som fungerar som bakgrund

En bakgrund ska stödja texten ovanpå den. Dessa utgångspunkter är säkra:

Håll kontrasten mellan linjerna och bakgrunden låg. Om brödtext ligger ovanpå blir en linje som nästan är lika mörk som texten tröttsam att läsa.

Ett genomarbetat exempel

För en hjältesektion som är 1200 px bred och 800 px hög ger en 40 px cell 30 kolumner och 20 rader, alltså 600 celler. Eftersom 1200 och 800 båda är multipler av 40 slutar rutnätet snyggt på båda kanterna. Med en 50 px cell får du 24 x 16 celler, också rent. En 45 px cell skulle lämna en partiell cell till höger och nederst, eftersom 1200 delat med 45 är 26,67.

Använda resultatet

Klistra in SVG-koden direkt i din kod, spara den som fil och referera den som en bild, eller placera den bakom ditt innehåll som ett dekorativt lager. Kom ihåg att bakgrundsfärgen är en del av SVG-filen. Om du vill ha rutnätet över en annan färg redigerar du den första rektangeln i den kopierade koden.

Anpassa bakgrunden till layouten

Om din innehållskolumn är 960 px bred håller en 32 px eller 40 px cell rutnätet och kolumnkanterna i takt, eftersom 960 delas jämnt med båda. Att linjera rutnätet med layouten gör att linjerna känns genomtänkta i stället för slumpmässiga.