PNG of SVG: welk formaat moet je gebruiken?

1. Het wezenlijke verschil: pixelrasters tegenover wiskundige paden

Een PNG is een bitmap: hij snijdt een beeld in losse pixels en legt de kleur van elk pixel vast. Een PNG vergroten betekent simpelweg die pixels oprekken, en daarom zie je karteling en onscherpte. Een SVG is een vectorafbeelding: hij beschrijft vormen met wiskundige aanwijzingen zoals coördinaten en Bézier-curves, en de browser tekent de afbeelding opnieuw op de nieuwe maat, zodat ze op elke schaal scherp blijft. Die ene eigenschap is de wortel van vrijwel elk verschil tussen de twee formaten.

Wat transparantie betreft: PNG ondersteunt een alfakanaal en kan een transparante achtergrond bewaren. SVG is van nature transparant — zolang je geen achtergrondrechthoek tekent, blijft alles buiten de vorm transparant. Als kanttekening: JPG kent helemaal geen transparantie, de witte achtergrond is een echt ingekleurde kleur.

2. Bestandsgrootte en laadgedrag

Voor eenvoudige graphics zoals pictogrammen en logo's is een SVG vaak maar een paar KB, en één bestand past bij elke schermdichtheid. PNG heeft daarentegen meestal @2x- en @3x-versies nodig om scherp te blijven op Retina-schermen, waardoor de bestandsgrootte vermenigvuldigt. Bij foto's is het precies omgekeerd: foto's hebben ontzettend veel kleurovergangen, en geforceerd vectormaken levert een enorme hoeveelheid paden op, waardoor de SVG juist veel groter wordt dan een JPG of WEBP. Dat loopt niet de moeite.

De reden zit in het compressieprincipe: PNG legt pixels vast met verliesvrije compressie, dus hoe complexer het beeld, hoe groter het bestand. SVG is platte tekst, waarin herhaalde padopdrachten en coördinaten heel goed te comprimeren zijn. Daarom gedragen twee formaten die allebei "verliesvrij" heten zich zo verschillend qua grootte.

Gebruik	Aanbevolen formaat	Reden
Websitepictogrammen / logo's	SVG	Eén bestand voor elke resolutie, en CSS kan de kleur aanpassen
Foto's	JPG / WEBP	Klein bestand met fotografische getrouwheid
Schermafbeeldingen	PNG	Pixelnauwkeurig en verliesvrij gecomprimeerd
Datagrafieken	SVG	Scherp bij zoomen en eenvoudig interactief te maken
Profielfoto's op sociale media	PNG / JPG	De meeste platformen accepteren alleen bitmaps

3. Wanneer gebruik je PNG

• Foto's, complexe belichting en delicate verlopen;
• Schermafbeeldingen en interface-opnames die pixelnauwkeurig moeten zijn;
• Situaties waarin het platform alleen bitmaps accepteert, zoals het uploaden van een profielfoto in sommige beheerpakketten;
• Als compatibiliteitsoplossing voor zeer oude omgevingen die geen SVG ondersteunen.

4. Wanneer gebruik je SVG

• Websitepictogrammen en logo's: één bestand voor elke resolutie, nog steeds scherp op Retina-schermen;
• Graphics die je met CSS of JavaScript wilt herkleuren of met een tekendeffect wilt animeren;
• Datagrafieken: visualisatiebibliotheken zoals ECharts geven standaard SVG uit;
• Druk, lasergravure en snijden, waarbij het apparaat vectorpaden leest.

5. Kunnen PNG en SVG in elkaar worden omgezet?

Ja. PNG naar SVG: gebruik de PNG naar SVG-tool van PolySVG of de afbeelding naar SVG-tool, upload het bestand en klik op genereren om het te vectoriseren — voor pictogrammen en logo's is het resultaat uitstekend, foto's krijgen een illustratiestijl. De conversie is gratis en een transparante PNG behoudt zijn transparante achtergrond. De verkregen SVG kun je nog steeds in de editor openen om kleuren aan te passen en de achtergrond te verwijderen, zo ontstaat een volledige workflow. SVG naar PNG: open het bestand in de online SVG-editor en exporteer een PNG in de resolutie die je wilt, ideaal voor documenten of voorbeeldafbeeldingen.

Belangrijk om te weten: PNG naar SVG is geen simpele "opslaan als", maar een vectormaking die de contouren opnieuw tekent. Grafisch materiaal levert nette paden op, terwijl foto's tot kleurblokken worden samengevat. Bekijk het resultaat eerst in de tool en controleer of de stijl aansluit op wat je verwacht, vóór je het downloadt.

Regel in één regel: pictogrammen, logo's en grafieken → SVG; foto's en schermafbeeldingen → PNG/JPG/WEBP. Twijfel je, dan heeft grafisch materiaal de voorkeur met SVG. Wil je meer weten, lees dan Wat is SVG en Drie manieren om een afbeelding naar SVG te maken.