Hoe je SVG naar PNG omzet zonder kwaliteitsverlies

Een SVG bestaat niet uit pixels. Het is een reeks instructies: teken hier een lijn, vul deze vorm met die kleur, waardoor hij op elke grootte getekend kan worden en toch perfect scherp blijft. Daarom zijn logo's en iconen zo vaak SVG's: hetzelfde bestand oogt scherp op een visitekaartje en op een billboard.

Een PNG is het tegenovergestelde: een vast rooster van pixels. Zodra je exporteert op, zeg, 512 pixels breed, is dat wat je krijgt. Vergroot het voorbij zijn eigen formaat en het wordt blokkerig, precies als inzoomen op een foto. SVG omzetten naar PNG betekent die tekeninstructies omzetten in een vast rooster, een stap die rasterisatie heet.

Omdat een PNG een vaste pixelgrootte heeft, bestaat er geen enkele "lossless" SVG-naar-PNG-conversie: je kiest een resolutie, en de kwaliteit volgt uit die keuze. De truc is renderen op een voldoende hoge resolutie voor hoe je de afbeelding daadwerkelijk gaat gebruiken.

Een goede vuistregel is exporteren op twee of drie keer de grootte waarop je de afbeelding toont. Als een logo op een pagina 200 pixels breed wordt getoond, exporteer hem dan op 400 of 600 pixels zodat hij haarscherp blijft op schermen met hoge resolutie. Nodig voor print? Ga dan nog groter. De enige echte fout is te klein exporteren en daarna vergroten: dat is het enige wat echt kwaliteit kost.

De conversie draait op je eigen apparaat, dus het bestand wordt nooit geüpload:

• Open de SVG → PNG-converter en sleep je SVG erin.
• Stel de uitvoergrootte in: voer de gewenste pixelbreedte in (groter betekent scherper, en een groter bestand).
• Exporteer en download je PNG.

Omdat alles rechtstreeks in je browser gebeurt, kun je offline gaan nadat de pagina is geladen en het werkt nog steeds: het bewijs dat de SVG niet naar een server wordt gestuurd. Geen account, geen watermerk en geen limiet op hoeveel je omzet.

SVG's hebben vaak een transparante achtergrond, en dat blijft behouden: exporteer naar PNG en de transparante gebieden blijven transparant, omdat PNG een alfakanaal ondersteunt. Je logo krijgt niet plotseling een wit vlak erachter.

Weet je niet zeker welke pixelbreedte je moet kiezen, ga dan uit van waar de afbeelding zal verschijnen. Een favicon heeft misschien maar 64 pixels nodig; een hero-afbeelding kan wel 2,000 pixels of meer nodig hebben. Twijfel je, kies dan een grotere maat: je kunt achteraf altijd de PNG comprimeren om het bestand te verkleinen, maar je kunt geen detail meer toevoegen aan een bestand dat te klein is geëxporteerd. En heb je later toch een JPG nodig, dan kost een PNG → JPG-conversie maar een seconde.