PNG versus SVG.

Raster versus vector.

Misschien is het belangrijkste verschil tussen PNG en SVG dat de een een raster- en de ander een vectorbestandstype is.

PNG is een rasterbestand, dat wil zeggen op pixels gebaseerd. Als je een rasterafbeelding te veel vergroot, wordt deze korrelig en treedt verpixeling op. Maak je de afbeelding te klein, dan is die wellicht onduidelijk. PNG's ondersteunen zeer hoge resoluties, maar zijn niet oneindig schaalbaar.

SVG-bestanden zijn gebaseerd op vectoren, opgebouwd uit een complex wiskundig netwerk van lijnen, punten, vormen en algoritmen. Ze kunnen naar elk formaat worden uitgebreid zonder verlies van resolutie.

Meer informatie over raster versus vector

Bestandsgrootte.

PNG-bestanden zijn vaak groot, zodat ze hoge resoluties kunnen verwerken. Hierdoor kost het verwerken, delen, opslaan en openen ervan meer tijd. Dit kan ook voor een langere paginalaadtijd zorgen – de reden waarom online foto's meestal een JPEG-bestand zijn. Er is een kleinere 8-bits PNG-variant, maar deze ondersteunt slechts 256 kleuren.

SVG-bestanden zijn veel kleiner dan PNG's en maken je computer of website niet gauw trager. (Behalve wellicht als het gaat om zeer gedetailleerde ontwerpen.) Omdat SVG een vectorbestandstype is, kun je SVG-bestanden zonder verlies van kwaliteit vergroten en verkleinen.

Compressie.

SVG biedt 'lossless' compressie – je kunt het tot een kleiner bestand comprimeren zonder verlies van definitie, details of kwaliteit.

PNG's profiteren ook van een 'lossless' compressie van 5-20% en dat scheelt in de bestandsgrootte. Maar ze blijven waarschijnlijk groter dan SVG's.

Fotografie.

PNG-bestanden worden niet vaak gebruikt voor webfoto's, zoals hierboven beschreven. Ze zijn echter wel geschikt voor gedetailleerde digitale foto's van hoge kwaliteit voor afdrukken, bewerking en andere doeleinden. Het is een veelgebruikt bestandstype in Adobe Photoshop.

SVG's gebruiken geen pixels – dus de weergave van foto's van hoge kwaliteit is lastig.

Webgebruik.

Zowel PNG- als SVG-bestanden kunnen webafbeeldingen, illustraties, logo's, infographics en tabellen zeer gedetailleerd weergeven.

SVG heeft echter het grote voordeel van de XML-programmeertaal. Dit betekent dat elk SVG-bestand is geschreven in tekst en niet in code. Hierdoor kunnen schermlezers en zoekmachines ze analyseren en is de toegankelijkheid en SEO veel groter.

SVG-bestanden zijn meestal kleiner, waardoor ze sneller op een pagina worden geladen. Paginalaadtijd is ook een cruciaal element als het gaat om de ranking in zoekmachines.

PNG ondersteunt ook sommige tekstgebaseerde afbeeldingen – maar niet in dezelfde mate.

Compatibiliteit en complexiteit.

SVG wordt beschouwd als een geavanceerder bestandstype dan PNG, maar is niet compatibel met elke browser en elk besturingssysteem. Bovendien is de programmeertaal en vectorgebaseerde samenstelling soms onbekend en lastig voor nieuwe gebruikers.

PNG is het standaard online bestandstype dat breed wordt ondersteund door webbrowsers en besturingssystemen.

Animatie.

PNG ondersteunt geen animatie, in tegenstelling tot GIF, een vergelijkbaar rastergebaseerd afbeeldingsbestand.

SVG ondersteunt wel animatie, maar niet zo goed als andere bestandstypen zoals het eigen AI-bestandstype van Adobe Illustrator.

Meer informatie over AI-bestanden

Transparantie.

PNG en SVG ondersteunen transparantie, dus ze zijn beide zeer geschikt voor online logo's en afbeeldingen.

PNG is een van de beste opties voor een rastergebaseerd transparant bestand. Als je met pixels en transparantie werkt, is PNG geschikter dan SVG.

1. Open Adobe Illustrator.
2. Selecteer Bestand > Openen en kies op de computer de gewenste afbeelding.
3. Klik op Openen.
4. Klik in het bovenste menu op Traceren en selecteer Afbeeldingen overtrekken.
5. Geef de gewenste instellingen op voor de conversie. Je kunt bijvoorbeeld de kleur veranderen.
6. Selecteer na afloop van het proces de overgetrokken afbeelding en klik op Degroeperen. Hiermee scheid je de kleurvormen.
7. Klik op Bestand > Exporteren.
8. Sla het bestand op als SVG.

1. Open Adobe Photoshop.
2. Klik op Bestand > Openen.
3. Selecteer het SVG-bestand op je computer.
4. Klik op Exporteren > Exporteren als > PNG.
5. Sla het bestand op als PNG.