SVG vs PNG: Complete Gids voor het Kiezen van het Juiste Formaat
Ontdek de fundamentele verschillen tussen SVG en PNG en leer wanneer je welk formaat moet gebruiken om je grafische projecten te optimaliseren.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Waarom de keuze van beeldformaat echt uitmaakt
SVG of PNG? Kies verkeerd en je hero-sectie laadt een 2 MB rasterbestand dat wazig wordt op Retina-schermen. Of je besteedt uren aan het converteren van een foto naar vectorpaden die uitdijen tot 14 MB XML.
SVG en PNG zijn geen concurrenten — het zijn complementaire tools voor fundamenteel verschillende taken. Dit onderscheid begrijpen is het meest impactvolle dat je kunt doen voor de performance, toegankelijkheid en visuele kwaliteit van je site.
Hoe SVG onder de motorkap werkt
SVG (Scalable Vector Graphics) is een op XML gebaseerde opmaaktaal. In plaats van kleurwaarden voor elke pixel op te slaan, slaat het instructies op: «teken een cirkel op (50, 50) met straal 40 en vul deze blauw.» De browser voert deze instructies uit bij het renderen — de output is daardoor resolutie-onafhankelijk by design.
<!-- Een simpel SVG-icoon — 247 bytes -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#4F46E5" />
<path d="M35 50 L45 60 L65 40" stroke="#fff" stroke-width="6"
fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>Omdat SVG in de DOM leeft, kun je het stylen met CSS, animeren met JavaScript en interactief maken — uniek krachtig voor visualisaties en dynamische UI's.
- Wiskundig renderen — scherp van een 16-px favicon tot een 3-meter billboard.
- Tekst blijft tekst — indexeerbaar door zoekmachines, leesbaar door schermlezers.
- Stylbaar en scriptbaar — verander kleuren dynamisch, voeg hover-effecten toe, maak animaties.
- Uitstekende compressie — gzip reduceert SVG met 60-80% omdat XML repetitief is.
Hoe PNG onder de motorkap werkt
PNG (Portable Network Graphics) is een lossless rasterformaat dat de exacte kleur van elke pixel opslaat. Toon een 1000×1000 PNG en de browser mapt die miljoenen waarden naar schermpixels. Is het weergavegebied groter, dan interpoleert de browser — daar komt de wazigheid vandaan.
- Pixel-perfecte weergave — elke kleurwaarde exact bewaard.
- Volledige alfatransparantie — gladde randen op elke achtergrond.
- Universele ondersteuning — elke browser, e-mailclient en OS verwerkt PNG.
- Voorspelbaar renderen — geen complexe padanalyse; de browser toont direct pixels.
De definitieve vergelijkingstabel
| Eigenschap | SVG | PNG | Winnaar |
|---|---|---|---|
| Schaalbaarheid | Oneindig — scherp bij elke resolutie | Vast — wazig bij vergroting | SVG |
| Bestandsgrootte (simpel) | Klein (vaak < 1 KB voor iconen) | Groter (vaak 5-50 KB) | SVG |
| Bestandsgrootte (complex) | Enorm (miljoenen paden) | Redelijk met compressie | PNG |
| Animatie | CSS, SMIL, JS, Lottie, GreenSock | Niet native (APNG nodig) | SVG |
| Toegankelijkheid | Title/desc/aria-labels in markup | Alleen alt-attribuut | SVG |
| Beveiliging | XSS-risico bij inline SVG | Geen script-uitvoeringsrisico | PNG |
Performancebenchmarks
| Metriek | SVG Sprite | Losse SVG's | PNG Sprite | Losse PNG's |
|---|---|---|---|---|
| Totale grootte | 12 KB | 18 KB (24 req.) | 48 KB | 96 KB (24 req.) |
| Gzip-overdracht | 4 KB | 6 KB | 44 KB | 88 KB |
| Parsetijd | 2,1 ms | 3,8 ms | 0,4 ms | 0,6 ms |
| Eerste weergave (3G) | 120 ms | 340 ms | 180 ms | 890 ms |
Gebruiksmatrix
Wanneer SVG wint
- Logo's en merktekens — één bestand, elke grootte, voor altijd.
- Iconen en UI-elementen — style met CSS custom properties voor theming.
- Datavisualisaties — D3.js, Chart.js, Recharts genereren allemaal SVG.
- Geanimeerde illustraties — Lottie, GreenSock of puur CSS.
- Kaarten en diagrammen — zoombaar, interactief, toegankelijk.
Wanneer PNG wint
- Foto's — miljoenen unieke kleuren met vloeiende gradiënten.
- Screenshots — pixelnauwkeurigheid telt.
- Complexe texturen — organische details vertalen niet naar vectoren.
- E-mailcampagnes — veel e-mailclients ondersteunen geen SVG.
Snelle beslisregel: «Kan ik dit in Figma namaken met alleen vormgereedschap?» Zo ja → SVG. Als je een foto zou moeten importeren → PNG. Raster naar vector converteren? VectoSolve's AI-vectorizer doet het in seconden.
SVG-beveiliging: de XSS-vector die je moet kennen
Inline SVG kan JavaScript uitvoeren. Een bestand met <script>-tags of onload-handlers voert willekeurige code uit in de browser van de gebruiker. Render nooit door gebruikers geüploade SVG inline zonder sanitisatie.
Moderne best practices
- SVG: Verwerk door VectoSolve's optimizer of SVGO.
- PNG: Gebruik pngquant of oxipng voor lossy/lossless compressie.
Een PNG-logo dat SVG zou moeten zijn? VectoSolve gebruikt AI om rasterafbeeldingen om te zetten in schone vectorpaden — vaak 90% kleiner.
Conclusie: er is geen «beter» formaat
SVG en PNG bestaan omdat afbeeldingen in twee smaken komen: geconstrueerd (vormen, tekst, geometrie) en vastgelegd (foto's, scans, screenshots). Match het formaat met de inhoud, optimaliseer agressief, en je levert pagina's die snel, scherp en toegankelijk zijn op elk apparaat.
| Eigenschap | SVG | PNG |
|---|---|---|
| Type | Vector (wiskundig) | Raster (pixels) |
| Schaalbaarheid | Oneindig — geen kwaliteitsverlies | Vast — wazig bij vergroting |
| Ideaal voor | Logo's, iconen, UI-elementen | Foto's, screenshots, complexe beelden |
| Typische grootte (icoon) | 1–5 KB | 10–50 KB |
| Animatie-ondersteuning | CSS + JS animaties | Alleen APNG (beperkte ondersteuning) |