You are here

Wegwijs in SVG-land: Een SVG op je pagina

Development

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, maar we willen ook de filesize binnen de perken houden. Wat iconen, logos en illustraties betreft, is er eigenlijk maar één goeie manier om aan deze verwachtingen te voldoen - SVG.

In deze reeks artikels overlopen we de basics van SVG’s gebruiken op een website.

SVG logo

Wat is SVG?

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 pixel-raster, 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.

Layers to groups

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.

<svg viewBox="0 0 117.9 117.7">
    <g id="Groen">
        <path style="fill:#85C441;" d="M59.2,51c-3.5,0-6.4,2.9-6.4,6.4c0,4.1,1.1,19.8,2.6,34.4c0.1"/>
    </g>
</svg>

 

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 genereerd (.st0, .st1, .st2 …). Als je meerdere SVG’s inline toevoegd 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.

<svg viewBox="0 0 117.9 117.7">
    <style type="text/css">
        .st0{fill:#85C441;}
    </style>
    <g id="Groen">
        <path class="st0" d="M59.2,51c-3.5,0-6.4,2.9-6.4,6.4c0,4.1,1.1,19.8,2.6,34.4c0.1"/>
    </g>
</svg>

Tekst

Wanneer je teksten gebruikt in SVG dan kan je deze best naar outlines omzetten. Zo kan je vermijden dat je SVG tekst niet goed wordt weergegeven door ontbrekende lettertypes.

Optimaliseren

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.

AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "image/svg+xml" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript"
                                      ... etc
    </IfModule>
</IfModule>

De SVG op de pagina embedden

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.

<img src="https://www.calibrate.be/sites/all/themes/seagull_theme/images/logo.svg" alt="Calibrate Logo" width="130" height="35" />

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.

.logo {
  background-image: url(https://www.calibrate.be/sites/all/themes/seagull_theme/images/logo.svg);
  padding-bottom: 27%;
}

<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.

<object type="image/svg+xml" data="https://www.calibrate.be/sites/all/themes/seagull_theme/images/logo.svg">
    Your browser does not support SVGs
</object>

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.

<svg viewBox="0 0 595.3 117.7">
  <path d="M63.5 117.6c.8-2.7 1.6-6.2 2.2-10.1 ... 24.9-16.5-24.9-32z"/>
  <path d="M59.2 51c-3.5 0-6.4 2.9-6.4 6.4 0 ... 1.9-9.8.5-3.5 1-7.6" fill="#85c441"/>
  <path d="M197.9 47c-2.4-4.5-5.4-7.8-8.8-10 ... 7.2-16.1h55.4zm-55.2"/>
</svg>

Binnenkort lees je verder over SVG in deel 2!