Hur man skapar och hanterar SVG Sprites

SVG vinner tävlingen när det gäller grafik som skala på webben. Designers och utvecklare väljer SVG istället för ikonfonter, rasterbilder och raster sprites.

Fördelarna med att använda SVG är många men för mig köljer det till skalbarhet.

Att använda SVG kan vara lika enkelt som att kopiera och klistra in den exporterade koden från ett vektorbaserat program. Därifrån ligger problemet med att leverera den grafiken på det mest effektiva sättet.

Ange SVG sprites. Dessa fungerar i ett liknande mönster som bildsprites, men hur de skapas och ingår på en webbsida är väldigt olika.

Varför använda Sprites alls?

Sprites hjälper till att öka hastigheten, upprätthålla en konsekvent utvecklings arbetsflöde och göra skapandet av ikoner mycket snabbare. SVG sprites skapas typiskt med hjälp av ikoner med liknande form eller form medan grafik med större skala är engångsapplikationer.

I många fall kommer en ikonbibliotek att skala i storlek. Att lägga till nya ikoner behöver vara effektiv och i sista hand lätt. SVG sprites hjälper till att göra detta till en verklighet.

Exportera SVG-kod

SVG kan exporteras från ditt favorit vektorgrafikprogram. Jag brukar använda en mix av verktyg och har funnit att alla har bra stöd för export av SVG. Skiss sticker ut, särskilt för att du kan välja en ikon eller ett grafik och tryck kommandot + c och ha den SVG-koden kopierad till ditt urklipp. Då kan du gå till kodredigeraren, klistra in koden och få grafiken att visas före dina ögon i webbläsaren.

Optimera SVG för webben

Tyvärr, om du skulle kopiera och klistra in från Sketch kan du upptäcka att koden är suboptimal och kan optimeras optimalt. Det finns några verktyg för det.

Om du använder Sketch i synnerhet, kolla in SVGO Kompressor plugin . När du exporterar SVGs optimerar plugin automatiskt dem innan du sparar filen.

Om du inte använder Sketch kolla in samma funktionalitet i appformulär eller om du föredrar webappar, Jake Archibald sätta ihop en för dig .

Skapa SVG Sprites manuellt

Skapa ett SVG-sprite kan göras manuellt. Du behöver ett vektordesignprogram som kan generera SVG-kod. För detta använder jag Sketch och exporterar några ikoner som SVG.

Efter att jag exporterat ikonerna och kör dem via SVGO Compressor-plugin, lämnas jag med följande för varje ikon. Observera att vid varje tillfälle varje ikon är en separat fil:

Nu när våra SVGs är alla optimerade kan vi börja skapa sprite med koden ovan. För att skapa en sprite börja med omgivningen

Lägg märke till hur SVG har en inline-stil på displayen: ingen . Detta krävs för att korrekt kunna använda SVG sprites. Även om ikonerna inte kommer att ge på sidan kommer en stor mängd utrymme att bli. För att undvika det extra utrymme som SVG skapar, döljer vi SVG med CSS.

Att helt enkelt inkludera koden från ikonerna är inte tillräcklig just nu. Vi måste använda sig av a element som gör att du kan bädda in SVG-koden och tillhandahålla den egna specifika viewBox- attributet, vilket är viktigt för ikoner som kan visas i olika bredder och höjder.

Element definierade inuti element kan endast göras till webbläsaren när det hänvisas av element.

Den sista sprite liknar följande kod:

Lägg märke till hur jag har lagt till id- attribut för varje symbolelement. Det här är viktigt eftersom när du refererar till en viss ikon i sprite behöver du ett unikt sätt att rikta in det. Observera också hur varje ikon har sin egen unika visaBox- parametrar. De två första parametrarna kommer nästan alltid att vara "0 0"; den andra två kommer att vara lika med storleken på ikonen som du exporterat.

Inkluderar en ikon på sidan

Med sprite allt redo att gå behöver vi ett sätt att inkludera specifika ikoner på en sida. För att göra detta kommer du att utnyttja element skrivet så här:

På din sida ska du se ikonen visas och det är verkligen allt det finns!

Automatiserar SVG Sprites

Skapa inline SVG sprites är inte så svårt. Problemet ligger i det faktum att många utvecklare behöver skapa sprites för hundratals ikoner eller mer för robusta applikationer. Att skapa något sådant för hand kan bli tidskrävande och tråkigt. Utvecklare behöver ett sätt att automatisera processen så att de inte slösar med tid skapar sprites för hand.

Lyckligtvis finns det verktyg för en sådan sak. Uppgiftshanterare som Grymta eller Klunk har plugins tillgängliga att använda. Dessa effektiviserar skapandet av SVG sprites. Genom att leverera varje SVG-fil inom en given katalog, kommer plugin både att optimera och generera alla SVG i din refererade katalog för att inkluderas i en ny ny sprite.

Om du behöver lägga till fler ikoner till sprite allt du verkligen behöver göra är att exportera ikonen som en SVG och lägga till den i samma mapp. Därifrån hanterar plugin den tidskrävande delen.

Några tillgängliga plugins i olika smaker: grunt-svgstore , klunk-svg-sprites , svg-sprite .

Slutsats

Som med alla saker i webbutveckling finns det mer än ett sätt att skapa SVG sprites. Du kan referera dem externt, inkludera dem via CSS , och till och med göra dem mottaglig .