Sådan oprettes og administreres SVG Sprites

SVG vinder løbet når det kommer til grafik, der skalere på nettet. Designere og udviklere vælger SVG i stedet for ikon skrifttyper, rasterbilleder og raster sprites.

Fordelene ved at bruge SVG er mange, men det koger mig ned til skalerbarheden.

Brug af SVG kan være så simpelt som at kopiere og indsætte den eksporterede kode fra et vektorbaseret program. Derefter ligger problemet ved at levere disse grafikker på den mest effektive måde.

Indtast SVG sprites. Disse arbejder i et lignende mønster som image sprites gør dog, hvordan de oprettes og inkluderet på en webside er meget forskellige.

Hvorfor bruge Sprites overhovedet?

Sprites hjælper med at øge hastigheden, opretholde en ensartet udviklingsarbejdsproces og gøre oprettelsen af ​​ikoner meget hurtigere. SVG sprites er typisk lavet ved hjælp af ikoner af en lignende form eller form, mens større skala grafik er engangsapplikationer.

I mange tilfælde vil et ikonbibliotek skala i størrelse. Tilføjelse af nye ikoner skal være effektiv og i sidste ende nemt. SVG sprites bidrager til at gøre dette til en realitet.

Eksport af SVG-kode

SVG'er kan eksporteres fra dit foretrukne vektorgrafikprogram. Jeg plejer at bruge en blanding af værktøjer og har fundet ud af, at alle har stor støtte til eksport af SVG'er. Skitse skiller sig ud især fordi du kan vælge et ikon eller en grafik og hit kommando + c og få den SVG kode kopieret til dit udklipsholder. Derefter kan du gå til din kodeditor, indsætte koden og få grafikken til at vises foran dine øjne i browseren.

Optimering af SVG til web

Desværre, hvis du skulle kopiere og indsætte fra Sketch, kan du opleve, at koden er suboptimal og bedre optimeret. Der er nogle værktøjer til det.

Hvis du bruger Sketch specielt, skal du tjekke SVGO Kompressor plugin . Når du eksporterer SVG'er optimerer pluginerne dem automatisk, før du gemmer filen.

Hvis du ikke bruger Sketch, skal du tjekke den samme funktionalitet i app formular eller hvis du foretrækker web apps, Jake Archibald sætte sammen en for dig .

Oprettelse af SVG Sprites manuelt

Oprettelse af en SVG-sprite kan udføres manuelt. Du skal bruge et vektor design program, der kan generere SVG kode. Til dette vil jeg bruge Sketch og eksportere nogle få ikoner som SVG.

Efter at jeg har eksporteret ikonerne og kørt dem gennem SVGO Compressor-plugin, er jeg tilbage med følgende for hvert ikon. Bemærk at på dette tidspunkt er hvert ikon en separat fil:

Nu da vores SVG'er er alle optimerede, kan vi begynde at oprette sprite ved hjælp af koden ovenfor. For at skabe et sprite start med omgivelserne

Bemærk, hvordan SVG har en inline-stil på displayet: none . Dette er nødvendigt for at kunne udnytte SVG sprites korrekt. Selv om ikonerne ikke vil give på siden, vil der være meget plads. For at undgå denne ekstra plads skaber SVG, skjuler vi SVG med CSS.

At blot inkludere koden fra ikonerne, er ikke tilstrækkelig på dette tidspunkt. Vi skal gøre brug af a element, som giver dig mulighed for at indlejre SVG-koden og give den egen specifikke viewBox- attribut, som er vigtig for ikoner, der kan vise forskellige bredder og højder.

Elementer defineret inde i element kan kun gendannes til browseren, når den henvises til af element.

Den endelige sprite ligner følgende uddrag:

Bemærk, hvordan jeg har tilføjet id- attributter til hvert symbolelement. Dette er vigtigt, fordi når du henviser til et bestemt ikon i sprite, har du brug for en unik måde at målrette mod. Bemærk også, hvordan hvert ikon har sin egen unikke viewBox- parametre. De to første parametre vil næsten altid være "0 0"; den anden to vil svare til størrelsen af ​​det ikon, du har eksporteret.

Herunder et ikon på siden

Med sprite er alle klar til at gå, har vi brug for en måde at inkludere specifikke ikoner på en side. For at gøre dette vil du udnytte element skrevet som dette:

På din side skal du se ikonet vises, og det er virkelig alt der er til det!

Automatisering SVG Sprites

Oprettelse af inline SVG sprites er ikke så hårdt. Problemet ligger i, at mange udviklere skal skabe sprites til hundredvis af ikoner eller mere til robuste applikationer. At skabe noget sådan i hånden kan blive tidskrævende og kedelig. Udviklere har brug for en måde at automatisere processen på, så de ikke spilder tid på at skabe sprites for hånden.

Heldigvis er der værktøjer til sådan en ting. Task ledere som Grynte eller Gulp har plugins til rådighed til brug. Disse strømline oprettelsen af ​​SVG sprites. Ved at levere hver SVG-fil i en given mappe, vil plugin'et optimere og generere alle SVG'erne i dit refererede bibliotek, der skal inkluderes i et nyt nyt sprite.

Hvis du skal tilføje flere ikoner til sprite, skal du kun eksportere ikonet som en SVG og føje det til den samme mappe. Derefter håndterer plugin den tidskrævende del.

Nogle tilgængelige plugins i forskellige smag: grynt-svgstore , sluge-svg-sprites , svg-sprite .

Konklusion

Som med alle ting i webudvikling er der mere end en måde at oprette SVG sprites på. Du kan henvise dem eksternt, inkludere dem via CSS , og endda gøre dem lydhør .