Als designers & developers streven we ernaar om alles wat op onze websites verschijnt zo mooi en scherp mogelijk aan te bieden op alle schermen en devices. Daarnaast willen we ook de bestandsgrootte binnen de perken houden. Wat iconen, logo’s en illustraties betreft, is er eigenlijk maar één goede manier om aan deze verwachtingen te voldoen, namelijk aan de hand van Scalable Vector Graphics (SVG).

Omdat er zodanig veel informatie te delen valt omtrent SVG's zullen we deze informatie opsplitsen in 3 verschillende blogberichten. Houd dus onze sociale media kanalen in de gaten om het vervolg van dit blogartikel niet te missen!

Scalable Vector Graphics is een XML gebaseerd bestandsformaat voor 2-dimensionale vector afbeeldingen. SVG biedt verschillende mogelijkheden om animaties en interactiviteit toe te voegen aan de afbeelding. Een SVG-afbeelding kan met code (CSS & Javascript) gemanipuleerd worden en dat maakt het een veel krachtiger formaat dan JPG of PNG.

Waar JPG, PNG en GIF zich baseren op een pixelraster, wordt SVG opgebouwd uit vectoren. Een SVG-bestand ziet er uit als een XML-bestand, waarin de vectortekening wordt beschreven. Omdat vectoren wiskundig berekende lijnen zijn, zal een SVG afbeelding op alle groottes scherp worden getoond.

Alvorens we een SVG toevoegen aan een webpagina, moeten we het bestand voorbereiden. Dat is vrij eenvoudig. Je kan SVG’s exporteren vanuit je favoriete vector-editor (Illustrator, Sketch, Inkscape…) of zelfs vanuit Photoshop indien je Shape-layers gebruikt. In dit artikel wordt Adobe Illustrator als editor gebruikt, maar dezelfde principes gelden voor de meeste andere editors. Het doel van het voorbereidende werk is de SVG in filesize te beperken, terwijl we de manipulatie mogelijkheden behouden.

Paden, groepen en lagen

Een vector afbeelding in je editor bestaat vaak uit een verzameling van paden, al dan niet gegroepeerd. Complexere tekeningen kunnen over meerdere lagen gespreid zijn. Het is best om je SVG zo efficiënt mogelijk te vereenvoudigen. Hier kan je best al in gedachten houden wat je later met je afbeelding wil doen. Gaat het om een eenvoudig icoontje, of over een afbeelding waar later animatie in wordt toegevoegd?

Als je van plan bent delen van je afbeelding te animeren, dan kan je best hier al de verschillende componenten van je afbeelding groeperen. Wanneer je in illustrator je afbeelding exporteert, dan wordt er een groep gemaakt per laag met als id de naam van je laag (<g id=‘Laag_1’>).

In illustrator kan je meerdere paden combineren tot 1 pad via Compound path. Dit maakt de SVG-code veel overzichtelijker en korter. Je kan best paden met hetzelfde kleur op deze manier combineren.

Styles

Wanneer je een SVG exporteert in illustrator, dan zijn er verschillende opties. Je kan ervoor kiezen om CSS properties (onder andere) als Style-elements of Style-attributen te renderen. Beide methodes hebben hun voordelen.

CSS properties als Style-attributen zullen de css-properties toevoegen als inline-styles op de <path> of <g>-tags. Dit is vaak de beste optie voor eenvoudige afbeeldingen zoals icoontjes. Het nadeel is dat de css-properties per path-tag worden toegevoegd en dit kan dus leiden tot dubbele stijl-definities.

CSS properties toevoegen als Style-elements zal een style-tag toevoegen in je SVG waarin CSS-classes worden voorzien. Deze classes worden dan via het class-attribuut toegevoegd aan de <path> of <g>-tags. Je kan hierdoor dus meerdere paden dezelfde CSS-class laten gebruiken. Let er op dat illustrator de class namen zelf genereert (.st0, .st1, .st2 …). Als je meerdere SVG’s inline toevoegt aan een pagina, dan kan dit tot problemen leiden. De class-definities bestaan dan in de scope van de pagina. Zo kan het eerste icoon op de pagina plots het kleur erven van het laatste icoon op de pagina. Je kan dus best de class name aanpassen.

De filesize van je SVG beperkt houden is belangrijk. Hiervoor kan je gebruik maken van SVG optimizers. Er zijn verschillende systemen beschikbaar. SVGOMG is een makkelijk te gebruiken online-tool (https://jakearchibald.github.io/svgomg/) Je plakt eenvoudig je SVG-code in de editor en je kan je optimized afbeelding downloaden (of de optimized code kopiëren). Hiermee kan je de filesize al snel tot 60-70% verminderen.

Daarnaast kan je in de .htaccess file van je website ook gzip-compressie voor svg’s toevoegen.

Er zijn verschillende opties beschikbaar om een SVG-afbeelding toe te voegen aan je pagina. Sommige methodes hebben specifieke voordelen, andere methodes vermijd je best. Een overzicht...

<img>-tag

Net zoals je andere afbeeldingen toevoegd kan je ook SVG’s met een <img>-tag toevoegen aan je pagina. Deze methode biedt wel weinig mogelijkheden tot manipulatie.

background-image

In je CSS-file kan je een svg als background-image toevoegen. Deze methode biedt wel weinig mogelijkheden tot manipulatie. Je kan de afbeelding best niet base-64 encoden want dit blokkeert het laden van andere styles tijdens het downloaden. Let op: wanneer je de afbeelding responsive wil gebruiken, moet je een padding-bottom toevoegen met de %-verhouding van je afbeelding. Zoniet wordt de SVG niet getoond.

<object>-tag

De <object>-tag is de beste optie wanneer je SVG’s wil toevoegen aan je pagina zonder ze inline te zetten. Deze methode laat toe om de SVG te manipuleren.

Inline

Als je een SVG afbeelding inline toevoegd aan de pagina, dan spaar je een HTTP-request uit. Houd er wel rekening mee dat de afbeelding dan niet wordt gecached door de browser. Dit is de makkelijkste manier om SVG’s te manipuleren, maar veel inline SVG’s kunnen soms lastig te beheren zijn.

Welke manier je gebruikt om je SVG toe te voegen aan je pagina, hangt af van de specifieke situatie. Een <object>-tag zal in de meeste gevallen de beste oplossing zijn.

Binnenkort lees je verder over SVG in deel 2!

Wegwijs in SVG-land: Een SVG op je pagina

Wat is SVG?

Optimaliseren

De SVG op de pagina embedden

Conclusie