Slik lager og administrerer du SVG Sprites

SVG vinner turen når det gjelder grafikk som skaleres på nettet. Designere og utviklere velger SVG i stedet for ikonfonter, rasterbilder og raster sprites.

Fordelene ved å bruke SVG er mange, men for meg, det koker ned til skalerbarheten.

Bruke SVG kan være så enkelt som å kopiere og lime den eksporterte koden fra et vektorbasert program. Derfra ligger problemet med å levere disse grafikkene på den mest effektive måten.

Skriv inn SVG sprites. Disse arbeidene i et lignende mønster som bildet sprites gjør skjønt, hvordan de er opprettet og inkludert på en nettside, er svært forskjellige.

Hvorfor bruke Sprites i det hele tatt?

Sprites bidrar til å øke hastigheten, opprettholde en konsistent arbeidsflyt, og gjøre tilretteleggelsen av ikoner mye raskere. SVG sprites opprettes vanligvis ved hjelp av ikoner av en lignende form eller form, mens større skala grafikk er engangsapplikasjoner.

I mange tilfeller vil et ikonbibliotek skala i størrelse. Å legge til nye ikoner trenger å være effektiv og til slutt lett. SVG sprites bidrar til å gjøre dette til en realitet.

Eksporterer SVG-kode

SVGer kan eksporteres fra ditt favoritt vektorgrafikprogram. Jeg pleier å bruke en blanding av verktøy og har funnet ut at alle har stor støtte for eksport av SVGer. Skisse skiller seg ut spesielt fordi du kan velge et ikon eller et grafikk og trykk kommando + c og ha den SVG-koden kopiert til utklippstavlen. Deretter kan du hodet til kodeditoren din, lime inn koden og få grafikken til å se foran øynene dine i nettleseren.

Optimalisering av SVG for web

Dessverre, hvis du skulle kopiere og lime inn fra Sketch, kan du finne at koden er suboptimal og kan optimaliseres. Det er noen verktøy for det.

Hvis du bruker Sketch spesielt, sjekk ut SVGO kompressor plugin . Når du eksporterer SVG, optimerer pluginene dem automatisk før du lagrer filen.

Hvis du ikke bruker Sketch, sjekk ut samme funksjonalitet i app skjema eller hvis du foretrekker webapper, Jake Archibald sette sammen en for deg .

Skaper SVG Sprites manuelt

Å lage en SVG-sprite kan gjøres manuelt. Du trenger et vektordesignprogram som kan generere SVG-kode. For dette skal jeg bruke Sketch og eksportere noen få ikoner som SVG.

Etter at jeg har eksportert ikonene og kjørt dem gjennom SVGO-kompressor-plugin, er jeg igjen med følgende for hvert ikon. Merk at på dette punktet er hvert ikon en egen fil:

Nå som våre SVGer er alle optimalisert, kan vi begynne å lage sprite ved hjelp av koden ovenfor. For å lage en sprite start med omgivelsene

Legg merke til hvordan SVG har en inline-stil på skjermen: ingen . Dette kreves for å kunne utnytte SVG sprites riktig. Selv om ikonene ikke vil gjengis på siden, vil en stor mengde plass. For å unngå denne ekstra plassen som SVG oppretter, skjuler vi SVG med CSS.

Bare å inkludere koden fra ikonene, er ikke tilstrekkelig på dette punktet. Vi må gjøre bruk av a element som vil tillate deg å legge inn SVG-koden i tillegg til å levere sin egen spesifikke viewBox- attributt som er viktig for ikoner som kan vises i forskjellige bredder og høyder.

Elementer definert i element kan bare gjengis til nettleseren når referert til av element.

Den siste sprite ligner på følgende utdrag:

Legg merke til hvordan jeg har lagt til id- attributter for hvert symbolelement. Dette er viktig fordi når du refererer til et bestemt ikon i sprite, trenger du en unik måte å målrette mot. Legg også merke til hvordan hvert ikon har sin egen unike viewBox- parametere. De to første parameterne vil nesten alltid være "0 0"; den andre to vil være lik størrelsen på ikonet du har eksportert.

Inkludert et ikon på siden

Med sprite er alt klar til å gå, trenger vi en måte å inkludere bestemte ikoner på en side. For å gjøre dette vil du utnytte element skrevet slik:

På siden din bør du se ikonet vises, og det er egentlig alt der er til det!

Automatisering av SVG Sprites

Opprette inline SVG sprites er ikke så vanskelig. Problemet ligger i det faktum at mange utviklere trenger å lage sprites for hundrevis av ikoner eller mer for robuste applikasjoner. Å skape noe slikt for hånden kan bli tidkrevende og kjedelig. Utviklere trenger en måte å automatisere prosessen på, slik at de ikke kaster bort tid for å skape sprites for hånd.

Heldigvis finnes det verktøy for en slik ting. Oppgavebehandlere som Grynte eller Gulp Har plugins tilgjengelig for bruk. Disse strømlinjeforme opprettelsen av SVG sprites. Ved å levere hver SVG-fil i en gitt katalog, vil pluginet både optimalisere og generere alle SVGene i din refererte katalog for å bli inkludert i en ny, ny sprite.

Hvis du trenger å legge til flere ikoner til sprite alt du virkelig trenger å gjøre er å eksportere ikonet som en SVG og legge det til i samme mappe. Derfra håndterer plugin den tidkrevende delen.

Noen tilgjengelige plugins i forskjellige smaker: grynt-svgstore , svelge-SVG-fantomer , svg-sprite .

Konklusjon

Som med alle ting i webutvikling, er det mer enn en måte å lage SVG sprites. Du kan referere dem eksternt, inkludere dem via CSS , og til og med gjøre dem mottakelig .