PNG versus SVG.

Als je met digitale logo's en afbeeldingen van hoge kwaliteit werkt, kun je overwegen de bestanden op te slaan als PNG of als SVG. Beide bestandstypen zijn veelzijdig en hebben een hoge resolutie, zelfs op grote schaal. Lees over de belangrijkste verschillen tussen PNG en SVG en ontdek hoe je elk bestandstype het beste kunt gebruiken.

Marquee-afbeelding PNG versus SVG

Wat je leert.

 

  • Wat is een PNG-bestand?
     
  • Wat is een SVG-bestand?
     
  • Wat is het verschil tussen een PNG- en een SVG-bestand?

  • Veelgestelde vragen over PNG versus SVG

 

 

Wat is een PNG-bestand?

PNG staat voor Portable Network Graphics en is een rastergebaseerd bestand. Kenmerken zijn hoge resolutie, 'lossless' compressie, transparantie en ondersteuning voor 16 miljoen kleuren. Het is een uitstekende keuze voor afbeeldingen, logo's, grafieken en illustraties, maar ook voor zeer gedetailleerde foto's. Vanwege de grote bestanden zijn PNG's niet ideaal voor online foto's.

 

Meer informatie over PNG-bestanden

 

 

Wat is een SVG-bestand?

SVG staat voor Scalable Vector Graphics en is zeer geschikt voor logo's en afbeeldingen omdat je deze voor verschillende doeleinden wilt kunnen verkleinen en vergroten. Het bestandstype is ook populair voor webontwerp, omdat zoekmachines zoals Google de XML-programmeertaal ervan kunnen lezen. Dit heeft een positief effect op de SEO en websiterankings.

 

Anders dan PNG's zijn SVG's gebaseerd op vectoren. Dit betekent dat ze op basis van wiskundige algoritmen afbeeldingen weergeven, waarvan je de grootte vervolgens onbeperkt en zonder kwaliteitsverlies kunt aanpassen.

 

Meer informatie over SVG-bestanden

 

 

Wat is het verschil tussen een PNG- en een SVG-bestand?

Er zijn veel overeenkomsten tussen PNG en SVG. Ontdek waarin ze van elkaar verschillen.

 

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.

 

 

Veelgestelde vragen over PNG versus SVG.

Hoe converteer ik een rasterafbeelding naar SVG?

Volg deze eenvoudige stappen om een standaard rasterafbeeldingsbestand, zoals een JPEG of PNG, te converteren naar een vectorgebaseerde 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.

 

Hoe converteer ik SVG naar PNG?

Volg deze eenvoudige stappen om in Adobe Photoshop een SVG-bestand te converteren naar PNG:

 

  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.

 

Wat is het beste vectorbestand voor drukwerk?

Er zijn uitstekende vectorbestanden voor drukwerk en welke je kiest, hangt af van het document. PDF is het meest veelzijdige vectortype voor dagelijkse afdruktaken. Voor grootschalig drukwerk kun je SVG of AI kiezen.

 

Moet ik PNG of JPEG gebruiken?

Door de 'lossy' compressie en 24-bits kleuren van JPEG is het bestandstype heel geschikt voor webfoto's. JPEG's zijn echter minder gedetailleerd dan PNG's als het om afdrukken gaat. Ze hebben bovendien niet dezelfde schaalbaarheid en definitie, dus het is niet de beste keuze voor logo's en graphics.

 

Wat is het verschil tussen PNG en GIF?

Het zijn beide standaard rasterbestandstypen voor het web. PNG is eigenlijk de opvolger van GIF. Er zijn echter wel een aantal verschillen. PNG ondersteunt bijvoorbeeld geen animatie.

 

Zijn PNG- en SVG-bestanden beperkt in grootte?

PNG heeft een limiet van 2.500 megapixels. Er zijn geen limieten voor de grootte van vectorbestanden en dus ook niet voor SVG.

PNG's en SVG's vergelijken met andere bestandstypen.

Afbeelding EPS- versus SVG-bestand

EPS versus SVG

Ontdek wat de overeenkomsten en verschillen zijn tussen SVG en het oudere EPS.

Afbeelding JPEG- versus PNG-bestand

JPEG versus PNG

Kies uit deze standaard rasterafbeeldingsbestanden de juiste optie.

Afbeelding PNG- versus TIFF-bestand

PNG versus TIFF

Ontdek hoe deze bestanden omgaan met grootschalige afbeeldingen met een hoge definitie. 

Afbeelding GIF- versus PNG-bestand

GIF versus PNG

Lees waarom PNG de opvolger van GIF is en ontdek of het de juiste keuze is voor je volgende project.

Koop Adobe Illustrator

Creëer prachtige vectorafbeeldingen en -illustraties.

7 dagen gratis, daarna € 24,19 per maand.