SVG vs PNG: Volledige
Vergelijkingsgids

Het Fundamentele Verschil

PNG (Portable Network Graphics) is een rasterformaat. Het slaat afbeeldingen op als een raster van gekleurde pixels. Elke pixel heeft een vaste positie, kleur en dekking. Het totale aantal pixels — de resolutie — bepaalt hoeveel detail de afbeelding kan bevatten. Een PNG van 1000×1000 pixels bevat precies 1 miljoen pixelwaarden. Als je de afbeelding vergroot voorbij de oorspronkelijke resolutie, moet de software nieuwe pixels interpoleren (bedenken) tussen de bestaande, wat een wazig resultaat oplevert.

SVG (Scalable Vector Graphics) is een vectorformaat. Het beschrijft afbeeldingen aan de hand van wiskundige definities: paden, bogen, vormen, lijnen en vullingen. Een cirkel wordt opgeslagen als een middelpuntcoördinaat en straal — niet als duizenden gerangschikte pixels. Omdat de afbeelding wordt gedefinieerd door vergelijkingen in plaats van een vast pixelraster, kan ze worden weergegeven op elke grootte met perfecte scherpte. De rendering-engine herberekent simpelweg de wiskunde voor de doelafmetingen.

Dit is geen kwestie van het ene formaat "beter" zijn dan het andere. Het gaat erom dat elk formaat is ontworpen voor verschillende soorten inhoud. PNG blinkt uit in het weergeven van fotografische en complexe rasterinhoud. SVG blinkt uit in het weergeven van geometrische graphics, logo's, iconen en illustraties.

Uitgebreide Vergelijking

Wanneer SVG Gebruiken

SVG is de optimale keuze voor elke afbeelding die fundamenteel geometrisch is — opgebouwd uit vormen, lijnen en bogen in plaats van fotografische pixeldata.

Logo's en Huisstijl

Een bedrijfslogo verschijnt overal: website-favicon (16px), headerafbeelding (200px), visitekaartje (300 DPI afdruk), beursbanner (10 meter). Een PNG voor elke grootte gebruiken betekent het bijhouden van meerdere bestanden, elk met een andere resolutie. Met SVG onderhoud je één enkel bestand dat op elke grootte perfect wordt weergegeven. CSS kan de kleur van het logo bij hover, donkere modus of afdrukken wijzigen. En het bestand is doorgaans 2–15 KB — kleiner dan zelfs de kleinste PNG-versie.

Iconen en UI-elementen

Iconensets (navigatie, sociale media, functie-iconen) zijn ideale SVG-kandidaten. Elk icoon is een eenvoudige geometrische vorm die profiteert van:

• Resolutieonafhankelijkheid: Scherp op 1x-, 2x- en 3x-schermen zonder meerdere PNG's te hoeven gebruiken
• CSS-styling: Kleuren aanpassen met fill- of stroke-eigenschappen — geen aparte iconvarianten nodig
• Animatie: Hover-effecten, laadspinners, micro-interacties
• Kleine bestandsgrootte: Een typische icoon-SVG is 200–500 bytes. Een set van 50 inline iconen in HTML voegt minder dan 25 KB in totaal toe.

Vlakke Illustraties en Infografieken

Illustraties met effen kleuren, strakke randen en geometrische vormen vertalen zich van nature naar vectorformaat. Marketingillustaties, onboarding-schermen en infografieken worden doorgaans ontworpen in vectortools (Illustrator, Figma) en geëxporteerd als SVG. Het resultaat is scherp op elke viewportbreedte, stijlbaar met CSS, en aanzienlijk kleiner dan equivalente hoge-resolutie PNG's.

Grafieken en Datavisualisaties

Staafdiagrammen, lijngrafieken, cirkeldiagrammen en interactieve datavisualisaties zijn van nature vectorafbeeldingen. Bibliotheken zoals D3.js, Chart.js en Highcharts renderen rechtstreeks naar SVG. De uitvoer is resolutieonafhankelijk, interactief (tooltips, klikgebeurtenissen) en toegankelijk (schermlezers kunnen de SVG-DOM verwerken).

Responsief Webontwerp

SVG past zich automatisch aan elke containergrootte aan. Een hero-illustratie die op desktop 1200px vult en op mobiel 360px, gebruikt hetzelfde SVG-bestand. De browser herberekent de vectorwiskunde op elke grootte. PNG vereist ofwel te grote afbeeldingen (bandbreedte verspillen op mobiel) of meerdere srcset-varianten (meer complexiteit en meer bestanden om bij te houden).

Wanneer PNG Gebruiken

PNG blinkt uit in het weergeven van inhoud die van nature raster is — inhoud die is vastgelegd of gemaakt als pixels en niet zinvol kan worden teruggebracht tot geometrische vormen.

Foto's

Een foto bevat miljoenen unieke kleurwaarden met vloeiende, continue overgangen over huidstinten, lucht, bladeren en stof. Vectorformaat kan deze data niet efficiënt weergeven. Een foto omzetten naar SVG zou duizenden kleine paden opleveren, waardoor een bestand ontstaat dat 10–100x groter is dan de PNG, terwijl het er slechter uitziet. Voor fotografische inhoud zijn PNG (lossless) of JPEG (lossy, kleiner) de juiste keuzes.

Schermafbeeldingen en Interface-opnamen

Schermafbeeldingen bevatten gerenderde tekst, UI-elementen, verlopen en anti-aliased randen die als pixels door elkaar gemengd zijn. De specifieke pixelopstelling is belangrijk. PNG bewaart dit exact. Het vectoriseren van een schermafbeelding zou een onbetrouwbare interpretatie van de pixeldata opleveren, geen getrouwe weergave.

Complex Digitaal Artwork

Digitale schilderijen, aquareleffecten, textuurrijke illustraties en artwork met duizenden kleuren en verlopen zijn beter af als PNG. Hoewel het origineel misschien met vectorelementen is gemaakt, zijn de uiteindelijke gerenderde uitvoer met mengingen, effecten en texturen fundamenteel rasterdata.

Pixelprecieze Weergave

Wanneer exacte pixelplaatsing belangrijk is — pixelart, sprite-sheets, game-assets met lage resolutie — is PNG het juiste formaat. SVG-rendering omvat anti-aliasing en subpixelberekeningen die elementen met fracties van een pixel kunnen verschuiven, wat de precieze uitlijning die pixelart vereist, vernietigt.

Vergelijking Webprestaties

Het kiezen van het juiste formaat voor elk onderdeel heeft direct invloed op de laadsnelheid van je site en je Core Web Vitals-scores.

Bestandsgrootte

Voor iconen en logo's wint SVG overtuigend. Een typisch icoon:

• SVG: 200–800 bytes (platte tekst, comprimeert naar 100–400 bytes met gzip)
• PNG @1x: 1–5 KB
• PNG @2x (Retina): 3–15 KB
• PNG @3x (Hi-DPI): 5–25 KB

Eén SVG gebruiken vervangt drie PNG-bestanden terwijl het kleiner is dan het kleinste. Voor een site met 20 iconen bespaart dit 100–400 KB aan afbeeldingsdata.

Voor logo's:

• SVG: 2–15 KB (gzipped: 1–8 KB)
• PNG @2x: 20–200 KB

Compressie (Gzip/Brotli)

SVG is XML-tekst, wat uitzonderlijk goed comprimeert met gzip (50–70% reductie) en Brotli (60–80% reductie). Webservers comprimeren SVG on-the-fly, zodat de overdrachtsgrootte veel kleiner is dan het bestand op schijf. PNG heeft ingebouwde deflate-compressie en profiteert niet significant van extra gzip/Brotli.

Voordeel van Inline SVG

SVG kan rechtstreeks in HTML worden ingesloten met een <svg>-tag, waardoor het HTTP-verzoek volledig wordt geëlimineerd. Voor kritieke iconen en logo's boven de vouw kan dit de Largest Contentful Paint (LCP) verbeteren, omdat de browser niet hoeft te wachten op een afzonderlijke download van de afbeelding. PNG vereist altijd een apart HTTP-verzoek (of een data-URI, wat de HTML-grootte met ~33% vergroot).

Google Core Web Vitals

Drie belangrijke statistieken worden beïnvloed door keuzes in afbeeldingsformaat:

• LCP (Largest Contentful Paint): Kleinere afbeeldingsbestanden laden sneller. SVG-logo's en iconen dragen minder bij aan LCP dan hoge-resolutie PNG's.
• CLS (Cumulative Layout Shift): SVG met expliciete viewBox-afmetingen stelt de browser in staat ruimte te reserveren vóór het renderen, waardoor lay-outverschuivingen worden voorkomen. PNG vereist expliciete width- en height-attributen voor hetzelfde voordeel.
• INP (Interaction to Next Paint): Minder afbeeldingsverzoeken betekent minder werk voor de main thread. Inline SVG vermindert HTTP-overhead.

Converteren tussen Formaten

PNG naar SVG (Vectorisatie)

PNG naar SVG converteren is een vectorisatieproces (tracering). De converter analyseert pixelgrenzen, detecteert randen en genereert Bézier-bogen die die randen benaderen als wiskundige paden. Dit werkt goed voor:

• Logo's met effen kleuren op schone achtergronden
• Lijnkunst, schetsen en handgetekende ontwerpen
• Iconen en eenvoudige illustraties
• Tekst en typografie

Het werkt niet goed voor foto's, complexe verlopen of gedetailleerde texturen. De uitvoer is een interpretatie, geen pixelprecieze kopie.

SVG naar PNG (Rasterisatie)

SVG naar PNG converteren is rasterisatie — de wiskundige paden renderen op een specifieke pixelresolutie. Dit is een eenvoudig proces zonder kwaliteitsverlies bij de gekozen resolutie. Je specificeert simpelweg de doelafmetingen en de renderer vult pixels in. Tools zoals ImageMagick, Inkscape en elke webbrowser kunnen SVG naar PNG rasteriseren.

Veelvoorkomende redenen om SVG naar PNG te converteren:

• Sociale-mediaplatforms die geen SVG-uploads accepteren
• E-mailclients met slechte SVG-rendering
• Oudere software die alleen rasterformaten ondersteunt
• Vaste-resolutie-thumbnails genereren voor afbeeldingsgalerijen

Tips voor SVG-optimalisatie

SVG-bestanden die worden geëxporteerd vanuit ontwerptools bevatten vaak onnodige data die de bestandsgrootte vergroot zonder de visuele uitvoer te beïnvloeden. Optimalisatie kan de SVG-bestandsgrootte met 60–80% verminderen.

Editor-metadata Verwijderen

Illustrator, Figma en Sketch sluiten eigen metadata, opmerkingen en generatorinformatie in in geëxporteerde SVG's. Deze data is onzichtbaar voor browsers, maar kan 30–50% van het bestand uitmaken. Tools zoals SVGO (SVG Optimizer) verwijderen dit automatisch.

Paden Vereenvoudigen

Vectoreditors maken vaak paden met meer controlepunten dan visueel noodzakelijk. Het verminderen van het aantal punten in elk pad (padsvereenvoudiging) kan de SVG drastisch verkleinen terwijl de visueel identieke uitvoer behouden blijft. Gebruik in Inkscape Pad > Vereenvoudigen (Ctrl+L). De convertPathData-plugin van SVGO regelt dit automatisch.

De XML Minimaliseren

Verwijder witruimte, regeleindes en onnodige attributen. Converteer absolute padcoördinaten naar relatieve (kortere tekenreeksen). Verwijder standaard attribuutwaarden. SVGO verwerkt al deze optimalisaties in één keer.

SVG-symbolen Gebruiken voor Iconensets

Als je meerdere iconen op een pagina gebruikt, definieer ze dan eenmalig in een SVG-<symbol>-sprite en verwijs ernaar met <use>. Dit voorkomt dat dezelfde paddata op de pagina wordt gedupliceerd.