SVG Sprites maken en beheren

SVG wint de race als het gaat om grafische afbeeldingen op het web. Ontwerpers en ontwikkelaars kiezen SVG in plaats van pictogramlettertypen, rasterafbeeldingen en rastersprites.

De voordelen van het gebruik van SVG zijn talrijk, maar voor mij komt dit neer op schaalbaarheid.

Het gebruik van SVG kan net zo eenvoudig zijn als het kopiëren en plakken van de geëxporteerde code van een vector-gebaseerd programma. Vanaf daar ligt het probleem bij het leveren van die afbeeldingen op de meest efficiënte manier.

Voer SVG-sprites in. Deze werken in een vergelijkbaar patroon als afbeeldingssprites, hoewel hoe ze worden gemaakt en opgenomen op een webpagina is heel anders.

Waarom zou u Sprites helemaal gebruiken?

Sprites helpen de snelheid te verhogen, een consistente ontwikkelingsworkflow te behouden en het maken van pictogrammen veel sneller te maken. SVG-sprites worden meestal gemaakt met pictogrammen van een vergelijkbare vorm of vorm, terwijl afbeeldingen met een grotere schaal eenmalige toepassingen zijn.

In veel gevallen wordt een pictogrambibliotheek in omvang geschaald. Het toevoegen van nieuwe pictogrammen moet efficiënt en uiteindelijk gemakkelijk zijn. SVG-sprites helpen om dit te realiseren.

SVG-code exporteren

SVG's kunnen worden geëxporteerd vanuit uw favoriete grafische vectorprogramma. Ik gebruik meestal een mix van hulpmiddelen en heb ondervonden dat ze allemaal grote steun hebben bij het exporteren van SVG's. Schetsen valt met name op omdat je een pictogram of afbeelding kunt selecteren en op commando + c kunt drukken en die SVG-code naar je klembord kunt kopiëren. Ga dan naar je code-editor, plak de code en laat de afbeelding voor je ogen in de browser verschijnen.

SVG optimaliseren voor internet

Helaas, als u vanuit Sketch zou moeten kopiëren en plakken, kan het zijn dat de code niet optimaal is en beter kan worden geoptimaliseerd. Daar zijn enkele hulpmiddelen voor.

Als je Sketch in het bijzonder gebruikt, bekijk dan de SVGO-compressorinvoegtoepassing . Terwijl u SVG's exporteert, optimaliseert de plug-in deze automatisch voordat het bestand wordt opgeslagen.

Als je Sketch niet gebruikt, check je dezelfde functionaliteit in app-formulier of als je de voorkeur geeft aan web-apps, Jake Archibald stel er een voor je samen .

SVG Sprites handmatig maken

Het maken van een SVG-sprite kan handmatig worden gedaan. U hebt een vectorontwerpprogramma nodig dat SVG-code kan genereren. Hiervoor maak ik gebruik van Sketch en exporteer ik enkele pictogrammen als SVG.

Na het exporteren van de pictogrammen en ze door de SVGO-compressorinvoegtoepassing te hebben geleid, blijf ik voor elk pictogram achter met het volgende. Merk op dat elk pictogram op dit moment een afzonderlijk bestand is:

Nu onze SVG's allemaal zijn geoptimaliseerd, kunnen we beginnen met het maken van de sprite met behulp van de bovenstaande code. Om een ​​sprite start te maken met de omgeving

U ziet hoe de SVG een inline weergavestijl heeft: geen . Dit is vereist om SVG-sprites correct te gebruiken. Hoewel de pictogrammen niet op de pagina worden weergegeven, zal er een grote hoeveelheid ruimte zijn. Om te voorkomen dat deze extra ruimte door de SVG wordt gecreëerd, verbergen we de SVG met CSS.

Het eenvoudigweg toevoegen van de code van de pictogrammen is op dit moment niet voldoende. We moeten gebruik maken van een element waarmee u de SVG-code kunt insluiten en een eigen specifiek kenmerk ViewBox kunt bieden dat belangrijk is voor pictogrammen die op verschillende breedten en hoogten kunnen worden weergegeven.

Elementen gedefinieerd in de element kan alleen naar de browser worden gerenderd wanneer ernaar wordt verwezen door de element.

De laatste Sprite lijkt op het volgende fragment:

Let op hoe ik id- attributen aan elk symboolelement heb toegevoegd. Dit is belangrijk omdat wanneer u naar een specifiek pictogram in de sprite verwijst, u een unieke manier nodig hebt om het te targeten. Merk ook op hoe elk pictogram zijn eigen unieke ViewBox- parameters heeft. De eerste twee parameters zullen bijna altijd "0 0" zijn; de tweede twee zijn gelijk aan de grootte van het pictogram dat je hebt geëxporteerd.

Inclusief een pictogram op de pagina

Met de sprite helemaal klaar voor gebruik, hebben we een manier nodig om specifieke pictogrammen op een pagina op te nemen. Om dit te doen, gebruikt u de element geschreven als volgt:

Op je pagina zou je het pictogram moeten zien verschijnen en dat is echt alles wat er is!

SVG Sprites automatiseren

Het maken van inline SVG-sprites is niet zo moeilijk. Het probleem ligt in het feit dat veel ontwikkelaars sprites moeten maken voor honderden pictogrammen of meer voor robuuste toepassingen. Zoiets met de hand maken kan tijdrovend en vervelend zijn. Ontwikkelaars hebben een manier nodig om het proces te automatiseren, zodat ze geen tijd verspillen met het handmatig maken van sprites.

Gelukkig zijn er hulpmiddelen voor zoiets. Taakbeheerders zoals knorren of Slok er zijn plug-ins beschikbaar om te gebruiken. Deze stroomlijnen de creatie van de SVG-sprites. Door elk SVG-bestand in een bepaalde map aan te leveren, optimaliseert en genereert de plug-in alle SVG's in uw directory waarnaar wordt verwezen in een nieuwe nieuwe sprite.

Als u meer pictogrammen aan de sprite wilt toevoegen, hoeft u het pictogram alleen maar als SVG te exporteren en toe te voegen aan dezelfde map. Van daaruit verwerkt de plug-in het tijdrovende gedeelte.

Enkele beschikbare plug-ins in verschillende smaken: grunt-svgstore , gulp-svg-sprites , svg-sprite .

Conclusie

Zoals met alle dingen in webontwikkeling, is er meer dan één manier om SVG-sprites te maken. Je kunt ze extern raadplegen, neem ze op via CSS en maak ze zelfs sympathiek .