SVG vs PNG voor iconen: wat kun je het beste gebruiken?

Iconen zijn bijna altijd eenvoudige, effen gekleurde vormen — precies wat vectorpaden efficiënt weergeven. Een SVG-icoon blijft scherp of hij nu op 16px of 160px wordt gerenderd, en één bestand dekt elke grootte die een responsieve lay-out nodig heeft, in plaats van aparte PNG's te exporteren voor elke resolutie.

Omdat de vulling en lijndikte van een SVG gewoon attributen zijn, kun je een icoon met CSS van kleur laten veranderen om een hover-status of donkere modus te matchen, zonder een tweede afbeeldingsbestand nodig te hebben. De kleuren van een PNG-icoon zitten vastgebakken in de pixels, dus een andere kleur betekent een compleet apart geëxporteerd bestand.

Als een "icoon" eigenlijk een kleine foto-achtige of zeer gedetailleerde afbeelding is — zoals een realistisch app-icoon met kleurverlopen, schaduwen en textuur — kan PNG dat detail getrouwer weergeven dan een vectortrace. Voor puur grafische, effen gekleurde iconen is SVG echter bijna altijd de betere keuze. Begin je met een bestaande set PNG-iconen, dan kun je die omzetten naar SVG en beide formaten beschikbaar houden.