Så här använder du SVG-mönster som bakgrund

SVG-mönster erbjuder ett mer flexibelt sätt att repetera en bakgrundsbild på en webbsida än CSS-tegelsten. Låt oss titta på varför det är och hur du kan använda dem.

Vad du lär dig

Denna handledning finns i både video och textformat - här är en sammanfattning av vad du ska lära dig:

1. Vi börjar med att titta på den mer välbekanta metoden för CSS-kakel.
2. Då ska vi skapa ett par SVG-mönster, lära oss rätt syntax när vi går.
3. Vi ska jämföra de två tillvägagångssätten och diskutera fördelarna och nackdelarna.
4. Därefter tittar vi på några verktyg som du kan använda för att skapa SVG-mönster.
5. Slutligen kontrollerar vi webbläsarstöd för SVG.

Titta på Screencast

1. CSS-kakel

Låt oss börja med att kolla CSS-kakel-den mer traditionella metoden att upprepa en bild till en bakgrund. Idén är enkel: vi skickar en URL till bakgrund egenskapen hos det element vi vill täcka. URL-adressen pekar på en bildfil, i detta fall en PNG-fil. Som standard kommer bilden att repeteras längs båda axlarna.

kropp bakgrund: url ("cuadros.png"); 

Så här ser det ut:

2. SVG-mönster

Låt oss nu titta på SVG-mönster - något som, när det första mötet, är lite svårare att förstå. Vi börjar med handkodning ett exempel. 

Handkodning SVGs

För en uppfriskning om hur man handar kodar alla olika delar av en SVG, är dessa två nybörjarhandledning av Kezz Bracey verkligen till hjälp:

Börja med en SVG

För att starta skapar vi ett svg-element, vilket ger en höjd och bredd på 100% så att den upptar vilken behållare vi placerar den i.

För att skapa en mönster vi måste placera den i defs (definitioner) avsnitt av svg, som så:

Låt oss nu lägga till några attribut på det mönsterelementet. Vi ska ge det ett ID så vi kan referera det senare, då anger vi start X- och Y-koordinater, bredd och höjdvärden och anger att patternUnits är userSpaceOnUse (detta definierar koordinatsystemet, som du kan läsa mer om på MDN):

Efter att ha ställt in dessa parametrar behöver vi nu definiera bilden som kommer att upprepas. Låt oss skapa en grundläggande cirkel:

Inget mönster kommer ännu att vara synligt, men det beror på att vi har definierat det utan att faktiskt applicering det till någonting. Låt oss ändra det genom att tillämpa det på en utanför vår .

Avgörande ser du fylla attribut (som vanligtvis kan vara ett färgvärde eller namn) pekar på en webbadress som innehåller ID för vårt nyligen definierade mönster: fylla = "URL (# polka-punkter)".

Kolla in demo nedan:

Ett mer komplext SVG-mönster

För ett mer komplext exempel ska vi lämna handkodning bakom och skapa ett mönster med hjälp av ett tredje partverktyg. Vi använder heropatterns.com, en webbplats som låter dig välja fördefinierade SVG-mönster, ändra sina färger och attribut och sedan kopiera den genererade koden.

Jag ska använda sticksågsmönstret:

Istället för att kopiera den genererade CSS i sin helhet kommer jag bara att kopiera d = "" parameter, vilken är den faktiska vägen som ritats.

SVG-koden som vi ställer in kommer att vara nästan exakt samma som vårt tidigare exempel. ID inom kommer naturligtvis att vara annorlunda, och vi ger det lite olika dimensioner enligt vad som används på heropatterns.

Så där, i vårt sista exempel, definierade vi a , den här gången definierar vi en . Vi ger den en fyllnadsfärg, och vi klistrar in i den sökväg vi kopierade för en stund sedan. Det här är vad som ger oss:

3. CSS Kakel Vs. SVG-mönster

😀 CSS kakelprofiler:

• Lättare att använda, absolut för nybörjare
• Har ett brett webbläsarsupport

😡 CSS brickor:

• När det används med bitmappar är det inte skalbart
• Lägre prestanda
• Svårare att anpassa
• Begränsad till rektangulära repetitioner

😀 SVG mönstret proffs:

• Lättvikt
• Anpassa från CSS
• skalbar
• Kunna skapa komplexa mönster

😡 SVG mönsterskador:

• Relativt svår att använda
• Icke-universellt webbläsarstöd

4. SVG Mönsterverktyg

Ta en titt på dessa fyra resurser, som kan vara mycket användbara för att generera aktuell kod och idéer!

• heropatterns.com
• SVG Patterns Gallery
• Geopattern
• thepatternlibrary.com

5. Browser Support

SVG är en allmänt stödd teknik, även i äldre webbläsare som IE9. Vissa SVG-funktioner tycker dock inte om stöd i sådan utsträckning, och det finns verkligen inte mycket information tillgänglig för specifikationerna för egenskaper (t.ex. patternUnits, patternContentUnits, patternTransform etc.). Det finns några användbara länkar nedan, inklusive dokumentation från Mozilla-de ger dig en känsla av vilken information som finns tillgänglig.

Från mina egna tester kan jag berätta för dig att moderna webbläsare på både Windows och Mac OS helt enkelt handlade om SVG-mönster. Till och med ner till IE11.

Slutsats

Låt oss sammanfatta de viktigaste punkterna i denna handledning.

• SVG-mönster kan användas för att skapa repeterbara bakgrunder.
• De erbjuder ett livskraftigt och mer anpassningsbart alternativ till CSS-plattor.
• De har en ganska enkel (om detaljerad) syntax. Definiera ditt mönster inom defs, se till att det har ett ID, hänvisa därefter till det ID-en i din form.
• Det finns många fördelar med att använda SVG-mönster, som vi skisserade.

Läs mer

• Hur man handlar SVG av Kezz Bracey
• SVG Viewport och viewBox (för fullständiga nybörjare) av Kezz Bracey
• SVG Mönster på CSS Tricks
  
• SVG-webbläsarsupport
• SVG-mönster MDN Web Docs
•  MDN Web Docs