Heb je ooit een logo vergroot en zag je het alleen maar waziger en blokkeriger worden? Dan ken je precies het probleem dat SVG oplost. Dit beeldformaat werkt totaal anders dan JPG en PNG — en dat verschil begrijpen is de sleutel tot het kiezen van het juiste formaat in elke situatie.
Waar staat SVG voor?
SVG staat voor Scalable Vector Graphics, oftewel schaalbare vectorafbeeldingen. Het is een open formaat, gestandaardiseerd door het W3C (hetzelfde consortium dat de specificaties van HTML en CSS vastlegt), en het wordt door alle moderne browsers native ondersteund.
JPG en PNG slaan een afbeelding op als een raster van gekleurde pixels. SVG doet het anders: het beschrijft de afbeelding in tekst, met wiskundige coördinaten voor vormen, lijnen, curven en kleuren. Een SVG-bestand is in feite een tekstbestand — je kunt het in elke code-editor openen en aanpassen.
Hoe werkt een SVG van binnen?
Een SVG-bestand is geschreven in XML, een opmaaktaal die sterk op HTML lijkt. Een rode cirkel ziet er in SVG bijvoorbeeld zo uit:
De browser leest die wiskundige instructies en tekent de afbeelding rechtstreeks op het scherm, waarbij hij de pixels ter plekke berekent. Daarom kun je een SVG in elk formaat tonen — van een favicon van 16x16 pixels tot een billboard van tien meter — zonder ook maar iets aan kwaliteit in te leveren.
Wat zijn de voordelen van SVG?
- Schaalbaar zonder kwaliteitsverlies: vergroot of verklein zoveel je wilt — de afbeelding blijft scherp op elke resolutie, ook op Retina- en 4K-schermen.
- Lichte bestanden: eenvoudige logo's en iconen zijn als SVG meestal veel kleiner dan als PNG, zeker in grote afmetingen.
- Aanpasbaar met code: kleuren, afmetingen en animaties pas je rechtstreeks aan via CSS of JavaScript, zonder beeldbewerker.
- Vindbaar voor zoekmachines: omdat de inhoud tekst is, kan Google de tekst in een SVG lezen en indexeren.
- Ondersteuning voor animatie: je maakt CSS- en SMIL-animaties direct in SVG, zonder GIF's of video's.
- Toegankelijkheid: je kunt titels en beschrijvingen aan een SVG toevoegen voor schermlezers.
Wat zijn de beperkingen van SVG?
- Niet geschikt voor foto's: een foto bevat miljoenen kleurvariaties en complexe verlopen. Dat in vectoren vangen levert enorme, inefficiënte bestanden op — voor foto's is JPG altijd de juiste keuze.
- Complexe illustraties worden zwaar: zeer gedetailleerde tekeningen met veel vormen en verlopen leveren grote SVG's op die traag renderen.
- Handmatig bewerken vraagt oefening: een SVG rechtstreeks in de code aanpassen vereist kennis van XML en vectorwiskunde. Tools als Illustrator of Figma maken dat een stuk makkelijker.
💡 Vuistregel: gebruik SVG voor logo's, iconen, illustraties, grafieken, kaarten en alle beelden die in meerdere afmetingen getoond moeten worden. Gebruik JPG of WebP voor foto's en beelden met veel detail en complexe kleurverlopen.
SVG, PNG of JPG — wanneer gebruik je wat?
| Kenmerk | SVG | PNG | JPG |
|---|---|---|---|
| Type | Vector | Raster (pixels) | Raster (pixels) |
| Schaalbaar zonder verlies | Ja | Nee | Nee |
| Transparantie | Ja | Ja | Nee |
| Ideaal voor foto's | Nee | Nee | Ja |
| Ideaal voor logo's en iconen | Ja | Ja | Nee |
| Aanpasbaar via CSS/JS | Ja | Nee | Nee |
| Ondersteund in browsers | Ja | Ja | Ja |
SVG gebruiken in websites en apps
Er zijn drie manieren om een SVG in een webpagina op te nemen:
- Als <img>-tag: de eenvoudigste manier. De SVG wordt behandeld als elke andere afbeelding, maar je kunt hem niet aansturen via CSS of JavaScript.
- Inline in de HTML: de SVG-code staat rechtstreeks in de HTML van de pagina. Zo heb je volledige controle via CSS en JS — kleuren, animaties en interactie. Dit is de voorkeursaanpak voor interactieve iconen.
- Als CSS-achtergrond: met
background-image: url('icoon.svg'). Handig voor decoratieve iconen, maar met beperkte toegang via JavaScript.
Hoe converteer je afbeeldingen naar SVG?
Een foto of PNG omzetten naar SVG kan via vectorisatie: pixels worden vertaald naar geometrische vormen. Dat werkt het best bij eenvoudige beelden met weinig kleuren en scherpe randen — denk aan een logo op een witte achtergrond. Met Converteren zet je bestanden om tussen de belangrijkste formaten, waaronder PNG en JPG naar andere webvriendelijke formaten.
Converteer je afbeeldingen nu
Zet bestanden snel en gratis om tussen de belangrijkste beeldformaten, rechtstreeks in je browser.
Afbeelding converterenIs SVG goed voor SEO?
Ja. Omdat SVG op tekst is gebaseerd, kan Google de inhoud crawlen en indexeren. Daar komt bij dat logo's en iconen in SVG meestal kleiner zijn dan in PNG, wat je pagina's sneller maakt — en snelheid is sinds de Core Web Vitals een directe rankingfactor bij Google.
Wil je een SVG optimaliseren voor SEO, voeg dan de elementen title en desc toe binnen de SVG-code; die werken als alternatieve tekst voor schermlezers en zoekmachines.