Slik bruker du SVG-mønstre som bakgrunn

SVG-mønstre gir en mer fleksibel tilnærming til å gjenta et bakgrunnsbilde på en nettside enn CSS-fliser. La oss se på hvorfor det er, og hvordan du kan bruke dem.

Hva du vil lære

Denne opplæringen er tilgjengelig i både video og tekstform, her er en oversikt over hva du skal lære:

1. Vi begynner med å se på den mer kjente metoden til CSS fliser.
2. Da skal vi lage et par SVG-mønstre, lære riktig syntaks når vi går.
3. Vi vil sammenligne de to tilnærmingene og diskutere fordeler og ulemper.
4. Etterpå ser vi på noen få verktøy som du kan bruke til å lage SVG-mønstre.
5. Endelig sjekker vi nettleserstøtte for SVG.

Se på Screencast

1. CSS Flislegging

La oss begynne med å sjekke ut CSS-fliser - den mer tradisjonelle metoden for å gjenta et bilde for en bakgrunn. Ideen er enkel: Vi sender en URL til bakgrunn Egenskapen til elementet vi ønsker å dekke. Nettadressen peker på en bildefil, i dette tilfellet en PNG-fil. Som standard gjentar vårt bilde langs begge aksene.

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

Slik ser det ut:

2. SVG Mønstre

La oss nå se på SVG-mønstre - noe som, når det først oppstod, er litt vanskeligere å forstå. Vi begynner med å håndkode et eksempel. 

Håndkoding SVGs

For en oppdatering på hvordan å håndkode alle de ulike delene av en SVG, er disse to nybegynnerens opplæringsprogrammer av Kezz Bracey veldig hjelpsomme:

Begynn med en SVG

For å starte opp, lager vi et svg-element som gir den en høyde og bredde på 100% slik at den inntar hvilken beholder vi plasserer den i.

Å opprette en mønster vi må plassere den i defs (definisjoner) delen av svg, slik som:

La oss nå legge til noen attributter til det mønsterelementet. Vi gir den en ID slik at vi kan referere til den senere, da vil vi angi start X- og Y-koordinater, bredde og høydeverdier, og angi at patternUnits er UserSpaceOnUse (dette definerer koordinatsystemet, som du kan lese mer om på MDN):

Etter å ha satt opp disse parameterne, må vi nå definere bildet som vil gjenta. La oss lage en grunnleggende sirkel:

Ingen mønster vil fremdeles være synlig, men det er fordi vi har definert det uten egentlig søknad det til noe. La oss endre det ved å bruke det på en utenfor vår .

Viktigst, du vil se fylle Attributt (som vanligvis kan være en fargeverdi eller et navn) peker på en nettadresse som inneholder IDen til vårt nylig definerte mønster: fylle = "url (# polka-prikker)".

Sjekk ut demoen nedenfor:

Et mer komplekst SVG-mønster

For et mer komplisert eksempel skal vi forlate håndkoding bak og generere et mønster ved hjelp av et tredjepartsverktøy. Vi bruker heropatterns.com, et nettsted som lar deg velge forhåndsdefinerte SVG-mønstre, endre deres farger og attributter, og kopier deretter den genererte koden.

Jeg skal bruke stikksagsmønsteret:

I stedet for å kopiere den genererte CSS i sin helhet, skal jeg bare kopiere d = "" parameter, som er den faktiske banen tegnet.

SVG-koden vi oppretter, vil være nesten nøyaktig den samme som vår tidligere eksempel. IDen i vil være annerledes selvsagt, og vi gir det litt forskjellige dimensjoner i henhold til hva som brukes på heropatterner.

Så hvor, i vårt siste eksempel, definerte vi a , denne gangen definerer vi en . Vi gir den en fyllfarge, og vi limer inn i banen vi kopierte for et øyeblikk siden. Dette er det som gir oss:

3. CSS Tiling Vs. SVG-mønstre

😀 CSS fliseprosjekter:

• Lettere å bruke, absolutt for nybegynnere
• Har bred nettleserstøtte

😡 CSS flisebelegg:

• Når det brukes med bitmaps, er det ikke skalerbart
• Lavere ytelse
• Sværere å tilpasse
• Begrenset til rektangulære repetisjoner

😀 SVG mønsterproffer:

• Lett
• Tilpass fra CSS
• skalerbar
• Kunne lage komplekse mønstre

😡 SVG mønster ulemper:

• Relativt vanskelig å bruke
• Ikke-universell nettleserstøtte

4. SVG Mønsterverktøy

Ta en titt på disse fire ressursene, som kan være veldig nyttige for å generere faktisk kode og ideer!

• heropatterns.com
• SVG Mønstre Galleri
• Geopattern
• thepatternlibrary.com

5. Nettleserstøtte

SVG er en allment støttet teknologi, selv i eldre nettlesere som IE9. Noen SVG-funksjoner, men ikke liker støtte i en slik grad, og det er virkelig ikke mye informasjon tilgjengelig for spesifikkene til egenskaper (for eksempel patternUnits, patternContentUnits, patternTransform etc.). Det er noen nyttige koblinger nedenfor, inkludert dokumentasjon fra Mozilla-de gir deg en følelse av hvilken informasjon som er tilgjengelig for øyeblikket.

Fra mine egne tester kan jeg fortelle deg at moderne nettlesere på både Windows og Mac OS alle handlet med SVG-mønstre helt fint. Selv ned til IE11.

Konklusjon

La oss oppsummere nøkkelpunktene i denne opplæringen.

• SVG-mønstre kan brukes til å lage repeterbare bakgrunner.
• De tilbyr et levedyktig og mer tilpassbart alternativ til CSS fliser.
• De har en ganske enkel (hvis detaljert) syntaks. Definer mønsteret ditt i defs, sørg for at den har en ID, og ​​referer deretter til ID-en i din form.
• Det er mange fordeler med å bruke SVG-mønstre, som vi skisserte.

Lære mer

• Hvordan håndkode SVG av Kezz Bracey
• SVG Viewport og viewBox (For Complete Beginners) av Kezz Bracey
• SVG-mønstre på CSS-triks
  
• SVG nettleserstøtte
• SVG Mønster MDN Web Docs
•  MDN Web Docs