De 6 voordelen van SVG: waarom designers er allemaal mee werken

Voordeel één: onbeperkt schalen zonder vervorming

De SVG beschrijft vormen met wiskundige paden en bij vergroten tekent de browser de tekening simpelweg opnieuw op de nieuwe maat. Een pictogram blijft scherp op een Retina-scherm en een logo blijft helder ook op billboardformaat, zonder dat je net als bij bitmaps meerdere resoluties hoeft te maken. Dat is het belangrijkste voordeel van vectorgrafiek en de fundamenteelste reden waarom logo's en pictogrammen vectoraal moeten zijn. In een responsieve pagina dekt één SVG-pictogram alle situaties van telefoon tot 4K-scherm, zonder dat je per apparaat aparte afbeeldingen hoeft te snijden.

Voordeel twee: kleine bestanden en snelle websites

De SVG van een eenvoudig pictogram is vaak maar een paar KB, veel kleiner dan meerdere resoluties in PNG. En omdat de SVG tekst is, werkt gzip/Brotli-inkeping uitstekend en daalt het overgedragen volume nog eens met 60 tot 80%. Op pagina's vol pictogrammen vermindert het gebruik van SVG het bandbreedteverbruik merkbaar. Natuurlijk moet je bij complexe illustraties het aantal paden in de hand houden; de methode staat in de optimalisatietips voor SVG. Zodra een pictogramsysteem overstapt op SVG, halveert het totale aantal bytes aan afbeeldingen boven de vouw vaak, met een duidelijk voordeel op langzame verbindingen.

Voordeel drie: programmeerbaar, interactief en animeerbaar

De SVG maakt deel uit van het DOM: je kunt met CSS de vulkleur van een pictogram wijzigen, met JavaScript een tekendeffect aansturen en reageren op klikken en muisovergangen. Pictogrammen wisselen van kleur in de donkere modus, grafieken lichten op bij mouse-over en laadanimaties: allemaal direct met SVG op te lossen, zonder afbeelding te vervangen of animatie per beeld te maken. Dat kan een bitmapformaat helemaal niet. Datavisualisatie is de grootste begunstigde: elke balk en elke lijnstuk in een grafiek is een zelfstandig pad, waardoor mouse-over en drill-down rechtstreeks aan events gekoppeld kunnen worden.

Voordeel vier: tekst bewerkbaar, goed voor SEO en toegankelijkheid

Tekst in een SVG is echte tekst: selecteerbaar, doorzoekbaar en vertaalbaar. Beschrijf de afbeelding met <title> en <desc> en schermlezers spreken de inhoud uit, terwijl zoekmachines de betekenis begrijpen. In bitmaps is tekst slechts een verzameling pixels, onzichtbaar voor zoekmachines en voor mensen met een visuele beperking. Meertalige sites kunnen de tekst in de SVG bovendien rechtstreeks vertalen, zonder alles opnieuw te moeten snijden.

Voordeel vijf: één bronbestand, hergebruik op elk platform

Dezelfde SVG werkt op het web, kan als hoge-resolutie-PNG in documenten worden gebruikt en kan aan druk- en lasergraveerapparaten worden overhandigd. Verandert de merkleur, dan past één bronbestand alle plekken tegelijk aan, zonder elk formaat opnieuw te maken. Voor teams betekent dat een forse daling van de onderhoudskosten van materiaal. E-commerce- en merkteams profiteren daar extra van: één vectorisatie is bruikbaar voor de productpagina, de verpakking en beursmateriaal, en een kleurwijziging vraagt om één bronbestand.

Voordeel zes: open standaard, volwassen ecosysteem

De SVG is een open W3C-standaard die alle moderne browsers native ondersteunen, en die programma's als Illustrator, Figma en Inkscape kunnen lezen en schrijven: geen leveranciersbinding. Eerlijk is gezegd heeft de SVG ook beperkingen: hij is niet geschikt voor fotografische beelden, bij zeer complexe paden daalt de renderprestatie, en voor foto's blijf je bij JPG/WEBP. De opensourcegemeenschap heeft er ook een volwassen gereedschapsketen omheen gebouwd: compressie met SVGO, bibliotheken met pictogrammen en animaties, allemaal direct bruikbaar.

Wil je beginnen met SVG? Gebruik de afbeelding naar SVG-tool om je bitmaps om te zetten in vectoors, of blader door de PolySVG-galerij en download gratis vectormateriaal. Begin met Wat is SVG en Het verschil tussen PNG en SVG.