SVG naar PNG — wanneer je echt pixels nodig hebt (en wanneer niet)

Er bestaat een bepaald soort frustratie in het hebben van een perfect logo en nergens om het neer te zetten. De SVG is scherp op elk formaat, weegt vrijwel niets, en oogt vlekkeloos in de browser — en dan probeer je hem in een e-mail te zetten, of als social-previewafbeelding in te stellen, of in een net iets te oud stukje software te plakken, en hij verschijnt gewoon niet. Leeg. Het bestand is prima. De plek waar je hem neerzet spreekt simpelweg geen vector.

Dat is de hele reden dat SVG-naar-PNG als taak bestaat. Niet omdat PNG beter is — dat is het meestal niet — maar omdat een groot deel van de wereld alleen pixels kan lezen.

Vector en raster, in het kort

Een SVG is geen plaatje. Het is een set instructies — teken hier een cirkel, dit pad daar, vul het met deze kleur. De browser volgt de instructies en rendert ze vers op welk formaat je ook vraagt, dus het is messcherp op 16 pixels of 16.000, en het bestand blijft piepklein omdat het gewoon wiskunde is.

Een PNG is het tegenovergestelde. Het is een vast raster van gekleurde pixels, één keer bepaald, op één resolutie. Blaas het op voorbij zijn eigen formaat en het wordt zacht en blokkerig, want er zijn geen pixels meer om te tekenen — alleen de ingebakken. Het voordeel is dat alles een raster van pixels kan lezen. Het is de universele munt van afbeeldingen.

Dus SVG naar PNG omzetten is oneindige schaalbaarheid inruilen voor universele compatibiliteit. Of dat een goede ruil is, hangt volledig af van waar de afbeelding heen gaat.

Wanneer je echt PNG nodig hebt

Drie gevallen waarin ik zonder aarzelen raster, omdat vector simpelweg niet werkt:

E-mail. E-mailclients renderen geen SVG — Gmail, Outlook, Apple Mail, zo goed als allemaal weigeren ze het om veiligheidsredenen. Een logo in een e-mailhandtekening of een nieuwsbrief moet een rasterformaat zijn. PNG, omdat je de transparantie wilt.

Social- en OG-previewafbeeldingen. Het kaartje dat verschijnt als je een link deelt — de Open Graph-afbeelding — moet een raster van vast formaat zijn, meestal 1200x630. De platforms renderen daar geen SVG. Is je bronmateriaal vector, dan exporteer je een PNG op precies dat formaat.

Oudere of offline software. Talloze desktop-apps, presentatietools, documenteditors en drukwerkstromen kunnen SVG óf niet importeren óf maken er een zooitje van. Ze een PNG op een royale resolutie geven werkt gewoon, elke keer, zonder verrassingen.

In alle drie is de doorslaggevende factor dezelfde: de bestemming kan fysiek geen vector lezen, dus schaalbaarheid is irrelevant. Een formaat dat wél weergeeft wint van een formaat dat het niet doet, altijd.

Het ene dat je goed moet doen: resolutie

Hier is de fout die ik het vaakst zie, en zelf vroeg maakte. Omdat een PNG vaststaat op het formaat waarop je hem exporteert, moet je hem groot genoeg exporteren — en idealiter op precies het formaat waarop je hem toont.

Exporteer een logo als een PNG van 100x100 en toon het dan op 300 pixels op een scherm met hoge dichtheid, en het oogt zacht en gekarteld. De pixels om die ruimte te vullen bestaan niet. De oplossing is makkelijk: exporteer op het formaat dat je echt gebruikt, of groter, vooral voor Retina- en 4K-schermen waar je vaak 2x het nominale formaat wilt. Dit is het ene echte voordeel dat je opgeeft door vector te verlaten, dus neem even de tijd om de doelresolutie goed te krijgen.

Wanneer je NIET moet rasteren

Kan de bestemming wel SVG lezen, houd dan de SVG. Punt.

Op je eigen website hoort een icoon of logo vector te blijven. Het is scherp op elk scherm bij elk zoomniveau, het is kleiner dan de equivalente PNG, en je hoeft nooit een grotere versie opnieuw te exporteren als er een nieuw scherm met hogere dichtheid uitkomt. Het daar rasteren is puur nadeel — je zou de beste eigenschap van het formaat weggooien om compatibiliteit te winnen die je al hebt.

En raster je master niet. De SVG is de bron van waarheid; hij kan op elk moment een PNG op elk formaat genereren. Een PNG kan niet de andere kant op — je kunt geen schone vectorpaden terughalen uit een raster van pixels. Dus houd de SVG, en behandel elke PNG als een wegwerp-export voor één specifieke plek. Hetzelfde principe als bij al het andere: zet de kopie om die je uitlevert, bewaar het origineel dat je bewerkt.

Hoe ik het echt doe

Wanneer ik pixels uit een vector nodig heb, gebruik ik de SVG-naar-PNG-converter hier. Hij rendert de SVG in je browser en reikt je de PNG aan, dus er wordt niets geüpload — het hele ding gebeurt op je machine. Kies een formaat dat past waar het heen gaat, en krijg een schone PNG met de transparantie intact.

Maar de echte vaardigheid is niet de omzetting. Het is de vraag die je eerst stelt: leest deze plek vector? Zo ja, laat de SVG met rust en geniet van de scherpste, kleinste optie die er is. Zo nee — e-mail, OG-kaart, een of andere koppige oude app — dan raster je, op het juiste formaat, en houd je je SVG veilig voor de volgende keer. Krijg die afweging goed en je hebt nooit meer een leeg vakje waar je logo hoort te staan.