SVG slaat een afbeelding op als wiskundige vormen die naar elk formaat kunnen worden geschaald zonder vervaging, terwijl PNG een vast raster van pixels opslaat. Dat ene verschil bepaalt de keuze: SVG voor logo's, pictogrammen en platte afbeeldingen die moeten worden geschaald, PNG voor foto's en complexe details. SVG (Scalable Vector Graphics) is een op XML gebaseerd formaat dat in 2001 door het W3C is gestandaardiseerd; PNG (Portable Network Graphics) is een rasterformaat uit 1996. Deze vergelijking legt vector versus raster uit, hoe elk omgaat met schaling en bestandsgrootte, transparantie, bewerking, browserondersteuning en een duidelijke regel waarvoor deze waar moet worden gebruikt.

Geen van beide formaten is over het algemeen beter, omdat ze verschillende problemen oplossen. SVG is onverslaanbaar voor afbeeldingen die in vele formaten verschijnen; PNG is de enige verstandige keuze voor foto's en gedetailleerde afbeeldingen. Weten tot welke familie uw afbeelding behoort, beantwoordt de vraag voordat u zelfs maar een converter opent.

Vector versus raster

De twee formaten beschrijven afbeeldingen op tegenovergestelde manieren. SVG geeft instructies zoals teken hier een cirkel, vul dit pad met die kleur, zodat de browser het op elk formaat fris weergeeft. PNG slaat de werkelijke kleur op van elke pixel in een raster, zoals een mozaïek. Vector past bij vormen met strakke randen; raster past bij foto's, waarbij miljoenen unieke pixels geen vorm hebben om te beschrijven. Dit is de wortel van elk praktisch verschil tussen hen.

Een analogie helpt. Een vector is een recept: volg het op elke schaal en je krijgt hetzelfde gerecht. Een raster is een foto van het voltooide gerecht: vergroot het en je ziet alleen maar grotere, onscherpe pixels. Het recept blijft perfect op elk formaat; de foto niet.

Schalen: SVG wint

Schaalbaarheid is het doorslaggevende voordeel van SVG. Een SVG-logo blijft haarscherp van een 16-pixel favicon tot een billboard, omdat de wiskunde bij elke grootte opnieuw wordt berekend. Een PNG vervaagt zodra je het vergroot tot voorbij de resolutie, omdat de software pixels moet bedenken die nooit zijn vastgelegd. Voor alles dat in meerdere formaten wordt weergegeven, levert SVG één bestand, waarbij PNG meerdere exports met verschillende resoluties nodig heeft.

Dit is belangrijker dan het klinkt. Moderne schermen variëren van kleine telefoons tot grote 4K-monitoren, en een ontwerp moet er op allemaal helder uitzien. Een SVG verwerkt elk scherm vanuit één bestand. Een PNG heeft een kleine versie, een grote versie en vaak een retinaversie nodig, waardoor de assets die u beheert, worden vermenigvuldigd.

Bestandsgrootte

De bestandsgrootte is afhankelijk van de complexiteit, niet van de afmetingen, wat het tegenovergestelde is van PNG. Een eenvoudig tweekleurig logo zoals SVG kan wegen een paar kilobytes en blijf op elke schaal dat formaat, vaak kleiner dan de PNG. Maar de SVG-grootte groeit met het aantal vormen, dus een getraceerde foto wordt vele malen groter dan de PNG en wordt langzaam weergegeven. Het PNG-formaat groeit met het aantal pixels, dus een grote foto is hoe dan ook zwaar.

De les is om het format af te stemmen op de inhoud. Voor een plat pictogram is SVG zowel kleiner als oneindig schaalbaar. Voor een gedetailleerde foto worden SVG-ballonnen in duizenden paden weergegeven, terwijl PNG een voorspelbare grootte behoudt. Complexiteit, en niet de formaatnaam, bepaalt het gewicht.

Transparantie

Beide formaten ondersteunen transparantie, dus geen van beide wint hier. SVG verwerkt dit native, omdat een vorm eenvoudigweg geen vulling kan hebben, en PNG een volledig alfakanaal voor vloeiende, gedeeltelijke transparantie. Een logo blijft in beide formaten doorzichtig over elke achtergrond. Het verschil is alleen dat de transparantie van SVG deel uitmaakt van de vormbeschrijving, terwijl PNG voor elke pixel een dekkingswaarde opslaat.

Redactie en flexibiliteit

Bewerken geeft de voorkeur aan SVG voor afbeeldingen. Omdat een SVG tekst is die vormen en paden beschrijft opnieuw kleuren en animeren met CSS, en alle tekst erin blijft echte tekst die een schermlezer kan lezen en die een zoekmachine kan indexeren. Een PNG bestaat uit vaste pixels, dus het veranderen van een kleur betekent opnieuw exporteren vanuit de bron. Voor een logo dat u wilt restylen, thematiseren of animeren, is SVG veel flexibeler.

Browser-ondersteuning

Ondersteuning is voor beide universeel en bepaalt dus niet de keuze. Elke browser leest SVG en PNG zonder plug-ins, en beide doen dat al jaren. Het praktische verschil is de context: SVG hoort thuis in webpagina's en app-interfaces, terwijl PNG ook werkt in e-mail, documenten en oudere software die SVG mogelijk niet accepteert. Voor een website zijn beide veilig; voor een e-maillogo is PNG de betrouwbaardere keuze.

Wanneer moet u ze allemaal gebruiken?

De regel is eenvoudig en de moeite waard om te onthouden:

Gebruik SVG voor logo's, pictogrammen, grafieken, diagrammen en lijntekeningen die moeten worden geschaald en scherp moeten blijven.
Gebruik PNG voor schermafbeeldingen, gedetailleerde afbeeldingen en elke afbeelding met zachte randen of veel kleuren.
Gebruik geen van beide voor foto's op de lange termijn: JPG of WebP comprimeren foto's die veel kleiner zijn dan PNG.

Bewaar een hoofdvectorbestand voor merkitems en exporteer PNG-kopieën waar SVG niet wordt geaccepteerd, zoals e-mail of bepaalde app-uploads.

SVG en responsief ontwerp

Responsief ontwerp is waar SVG zijn geld verdient. Een moderne site moet er scherp uitzien op een telefoon, een laptop en een 4K-monitor, en een SVG kan alle drie aan één bestand met elke pixeldichtheid. Er is geen noodzaak voor afzonderlijke kleine, grote en retina-exports, en er is geen onscherpte wanneer de browser het beeld opschaalt voor een scherm met hoge resolutie. De vector tekent zichzelf eenvoudig opnieuw, ongeacht de grootte die de lay-out vereist.

PNG kan hier niet aan voldoen. Om scherp te blijven op een retina-display moet een PNG worden geëxporteerd met een dubbele resolutie, waardoor de bestandsgrootte verdubbelt, en zelfs dan wordt het onscherp als het verder wordt uitgerekt. Het beheren van meerdere PNG-formaten voor responsieve lay-outs brengt echte onderhoudskosten met zich mee die met één enkele SVG worden geëlimineerd.

Wanneer PNG in de praktijk SVG verslaat

PNG wint in meer gevallen dan de reputatie doet vermoeden. Elke afbeelding met fotografische details, kleurverlopen, texturen of zachte schaduwen hoort thuis in PNG, omdat het traceren ervan naar SVG een opgeblazen, lelijke puinhoop oplevert. Schermafbeeldingen zijn PNG-territorium, omdat ze tekst combineren met interfacedetails die niet vectoriseren. En een complexe illustratie met honderden kleuren is kleiner en overzichtelijker als PNG dan als een gigantische SVG met duizenden paden.

De fout die mensen maken is dat SVG altijd de moderne, superieure keuze is. Het is alleen superieur voor platte afbeeldingen met harde randen. Duw een gedetailleerde afbeelding naar SVG en je krijgt een groter bestand dat langzaam wordt weergegeven, het tegenovergestelde van wat je wilde.

Een opmerking over SVG en beveiliging

SVG heeft een overweging die PNG niet heeft: omdat het code is, een SVG-bestand kan scripts bevatten. Een kwaadaardige SVG die naar een site wordt geüpload, kan in theorie JavaScript uitvoeren wanneer deze wordt weergegeven. Dit is de reden waarom veel platforms door gebruikers geüploade SVG's opschonen of weigeren, en waarom u alleen SVG's van een bekende bron moet vertrouwen. PNG, dat pure pixelgegevens is, brengt een dergelijk risico niet met zich mee. Voor uw eigen logo's en iconen is dit geen probleem, maar het verklaart wel waarom sommige uploadformulieren PNG accepteren en niet SVG.

Veel voorkomende fouten bij het converteren naar SVG

Twee fouten bederven de meeste PNG-naar-SVG-conversies. De eerste is proberen een foto te vectoriseren, wat duizenden paden oplevert en een bestand dat groter is dan het origineel. De tweede is het achterlaten van de originele bitmap ingesloten in de SVG na een automatische tracering, zodat het bestand in werkelijkheid een PNG is in een SVG-wrapper, zonder dat er iets bijkomt. Traceer alleen platte afbeeldingen en teken een merklogo opnieuw in een vectoreditor in plaats van te vertrouwen op een automatische tracering, die een zuivere geometrie en het kleinste bestand oplevert.

Hoe PNG naar SVG te converteren

Het converteren van een PNG naar SVG betekent vectoriseren: de pixels in paden overtrekken. Dit werkt voor platte logo's, pictogrammen en lijntekeningen, en faalt voor foto's, die geen zuivere vormen hebben om te traceren. Onze PNG naar SVG-converter traceert eenvoudige afbeeldingen in uw browser, zodat er niets wordt geüpload. Voor een merklogo waarvan u de eigenaar bent, levert het opnieuw tekenen ervan in een vectoreditor een schoner resultaat op dan welk automatisch trace dan ook. Voor foto's kunt u onze gebruiken PNG naar JPG-converter in plaats daarvan.

Veelgestelde vragen

Is SVG goed voor responsief ontwerp?

Ja, ideaal. Eén SVG blijft scherp op elk scherm en elke pixeldichtheid, waardoor er geen afzonderlijke kleine, grote en retina-PNG-exports meer nodig zijn.

Waarom weigeren sommige sites SVG-uploads?

Omdat een SVG kan scripts bevatten, in tegenstelling tot een PNG. Platforms zuiveren of blokkeren gebruikers-SVG's om veiligheidsredenen. Daarom accepteren sommige formulieren alleen PNG.

Waarom is mijn geconverteerde SVG groter dan de PNG?

Jij waarschijnlijk een foto getraceerd of de bitmap ingesloten gelaten. Vectoriseer alleen platte afbeeldingen en verwijder de originele afbeelding na het overtrekken, zodat de SVG paden bevat en geen pixels.

Is SVG beter dan PNG?

Voor graphics wel. SVG schaalt zonder onscherpte op een klein formaat. Voor foto's wint PNG, omdat foto's geen zuivere vormen hebben om als vectoren op te slaan.

Wat is het verschil tussen SVG en PNG?

SVG-is schaalbare wiskunde; PNG is een vast raster van pixels. SVG blijft scherp op elk formaat, terwijl PNG vervaagt wanneer het groter wordt dan de resolutie.

Kan ik SVG gebruiken voor foto's?

Nee, niet nuttig. Foto's hebben miljoenen kleuren en zachte randen er zijn geen vormen om over te trekken, dus een SVG-foto is groot en rommelig. Gebruik PNG of JPG.

Wat is kleiner, SVG of PNG?

Voor eenvoudige afbeeldingen, SVG. Een tweekleurig logo is als SVG een paar kilobytes op elke maat. Voor foto's is PNG kleiner, omdat er een getraceerde fotoballon is.

Behoudt SVG de transparantie?

Ja. SVG ondersteunt native transparantie, zoals het alfakanaal van PNG, zodat een logo doorzichtig blijft over elke achtergrond.

Ondersteunen alle browsers SVG?

Ja. Elke moderne browser leest SVG en PNG zonder plug-ins. SVG past bij webpagina's, terwijl PNG ook werkt in e-mail en oudere software.

Hoe converteer ik PNG naar SVG?

Traceer het. Een vectorizer traceert een platte PNG naar SVG-paden, dat werkt voor logo's en pictogrammen, maar niet voor foto's.

Kan ik een SVG bewerken nadat ik deze heb gemaakt?

Ja. SVG-paden kunnen in elke vectoreditor worden geopend en opnieuw inkleuren of animeren met CSS, aangezien het bestand tekst is die vormen beschrijft, en geen vaste pixels.

Welk formaat moet ik gebruiken voor een websitelogo?

SVG. Het schaalt scherp op elk scherm vanuit één bestand, en de tekst blijft leesbaar voor zoekmachines. Bewaar een PNG voor e-mail waarbij SVG niet wordt geaccepteerd.

Is PNG of SVG beter voor een pictogram?

SVG, voor schalen. Een SVG-pictogram blijft op elk formaat scherp, terwijl een PNG-pictogram meerdere exports nodig heeft en vervaagt wanneer het wordt vergroot.

SVG en PNG lossen verschillende problemen op: SVG slaat schaalbare wiskunde op die op elk formaat scherp blijft, terwijl PNG een vast raster van pixels opslaat dat vervaagt bij vergroting. SVG wint voor logo's, pictogrammen en lijntekeningen die moeten worden geschaald, bewerkt en geanimeerd met CSS, en die elk scherm vanuit één bestand bedienen. PNG wint voor foto's, schermafbeeldingen en gedetailleerde afbeeldingen, en werkt waar SVG niet wordt geaccepteerd. Pas het formaat aan de inhoud aan en gebruik onze bovenstaande converters om een eenvoudige afbeelding te vectoriseren of een rasterfoto te verwerken, allemaal in uw browser.

Snelle referentie: SVG of PNG

Reik naar SVG wanneer de afbeelding een logo, pictogram, diagram of lijntekening is die moet worden geschaald, wanneer u deze opnieuw wilt kleuren of animeren met CSS, of wanneer één bestand voor elke schermgrootte moet geschikt zijn. Reik naar PNG wanneer de afbeelding een screenshot is, een gedetailleerde afbeelding of iets anders met verlopen, texturen of zachte randen, en wanneer u deze nodig heeft om te werken in e-mail of oudere software die SVG afwijst. De scheidslijn is eenvoudig: platte afbeeldingen met harde randen worden vector, alles gedetailleerd wordt raster.

Een vectormeester houden

Bewaar voor elk merkitem het origineel als vectormodel en exporteer indien nodig rasterkopieën. Eén enkel SVG-logo kan een favicon, een sociale avatar en een printbestand genereren, die elk op aanvraag naar het juiste formaat en formaat worden geëxporteerd. Andersom werken, van een raster-PNG terug naar een vector, betekent traceren, waardoor de schone geometrie nooit volledig wordt hersteld. Bewaar de master dus indien mogelijk als SVG en behandel PNG-exports als wegwerpkopieën die u op elk gewenst moment opnieuw kunt genereren.

De bottom-line

SVG en PNG zijn niet zozeer rivalen als wel specialisten. Omdat vectoren vormen en schaal voor altijd beschrijven, behoren logo's en pictogrammen tot SVG. Pixels leggen details vast, dus foto's en schermafbeeldingen behoren tot PNG. Kies door één vraag te stellen: heeft deze afbeelding strakke, platte vormen of fijne fotografische details? Dat antwoord bepaalt elke keer het formaat, en het bijhouden van een vectormaster betekent dat u altijd de rasterkopie kunt exporteren die u nodig heeft.