PNG vs SVG: Wat is het verschil?

Een PNG-bestand (Portable Network Graphics) is een rasterafbeelding: een vast raster van gekleurde pixels, vergelijkbaar met een JPEG. Elke pixel slaat zijn eigen kleurwaarde op, en het totale aantal pixels ligt vast op het moment dat het bestand wordt aangemaakt. PNG ondersteunt ook echte alphatransparantie, waardoor het het standaardformaat is voor iconen, screenshots en logo's met transparante achtergronden.

Omdat een PNG simpelweg een raster van pixels is, betekent vergroten dat diezelfde pixels over een groter oppervlak worden uitgerekt — en juist dat veroorzaakt de wazigheid of zichtbare "blokkerigheid" wanneer je een PNG groter maakt dan de oorspronkelijke afmetingen.

Een SVG-bestand (Scalable Vector Graphics) beschrijft een afbeelding als een set wiskundige vormen en paden — lijnen, curves en vlakken — in plaats van losse pixels. Een cirkel wordt opgeslagen als "een cirkel met deze straal", niet als duizenden losse gekleurde stippen.

Dat maakt SVG's oneindig schaalbaar: een browser of ontwerptool tekent de vormen elke keer opnieuw op de gewenste grootte, zodat een SVG-logo er op een telefoonicoon precies zo scherp uitziet als op een billboard. SVG's zijn bovendien gewone tekst (XML), dus ze zijn te bewerken in elke teksteditor of vectorontwerptool.