SVG naar PNG omzetten

Vectorbestanden zijn het juiste om te bewaren en het verkeerde om te versturen. Een SVG schaalt naar elk formaat zonder ooit wazig te worden, en daarom liggen logo’s en pictogrammen als SVG klaar. En daarom weigeren nogal wat dingen hem ook: oudere Office-versies, veel uploadvelden, de gereedschappen voor app-pictogrammen, bijna elke drukkerijworkflow.

De PNG is de kleinste gemene deler. Hij wordt overal gelezen, ziet er overal hetzelfde uit, en het is het formaat waarmee een vector de vectorwereld verlaat.

Dit is de enige beslissing die je hoeft te nemen, want een SVG heeft echt geen formaat. Hij beschrijft vormen, geen beeldpunten, dus de omzetting moet een resolutie kiezen. De schaalinstelling bepaalt dat, en een groter getal kost geen kwaliteit: de tekening wordt opnieuw getekend in plaats van uitvergroot, dus hij is haarscherp op elk formaat dat je vraagt.

Een bruikbare gewoonte is de grootste plek waar de afbeelding komt te staan te nemen en die te verdubbelen — dat dekt schermen met een hoge pixeldichtheid af. Voor een app-pictogram zet je de schaal zo dat je precies op het aantal pixels uitkomt dat het platform vraagt.

SVG bewaart tekst als tekst en verwijst met een naam naar een lettertype. Zit het lettertype niet in het bestand, dan vervangt de tekenaar het door een ander en komt je zorgvuldig gespatieerde woordmerk scheef terug. Dit is verreweg de meestvoorkomende reden dat een omzetting van SVG naar PNG kapot oogt.

De blijvende oplossing zit in het tekenprogramma: zet tekst vóór het exporteren om naar paden, dan worden de letters vormen die niet vervangen kunnen worden. Meteen is het bestand ook veilig om aan iemand anders te geven.

Transparante gebieden blijven transparant, dus een logo landt op elke achtergrond zonder een wit vlak achter zich aan te slepen.

Het tekenen doet resvg en niet je browser, wat betekent dat de uitvoer op elke machine identiek is. Een omzetter die via een canvas tekent geeft in Chrome en Safari subtiel andere resultaten — precies het soort verschil dat pas opvalt als het bestand al is goedgekeurd.

Eenvoudige vormen, lijnen en vullingen komen er exact door. Waar tekenprogramma’s uiteen gaan lopen is aan het ingewikkelde eind van de specificatie: gaussiaanse vervaging, slagschaduwfilters, overvloeimodi en maskers die uit andere maskers zijn opgebouwd.

resvg voert de delen van de specificatie uit die echte bestanden gebruiken en is over de rest bewust eerlijk: een niet-ondersteund filter wordt weggelaten in plaats van benaderd door iets dat er bijna goed uitziet. Doet een effect ertoe, kijk dan naar de PNG in plaats van het aan te nemen, en ontbreekt het, plet het dan in het tekenprogramma vóór je exporteert.

Een SVG is vaak een paar kilobyte omdat het een beschrijving is en geen plaatje. De PNG is een raster van beeldpunten, en dat raster groeit met het kwadraat van de schaal: de schaal verdubbelen maakt het bestand vier keer zo groot.

Een logo van 4 KB als SVG kan als PNG van 4000 beeldpunten meerdere megabytes wegen. Dat is geen fout, dat is de rekenkunde van het formaat — maar het is wel een goede reden om de resolutie te kiezen die je echt nodig hebt in plaats van de grootste die wordt aangeboden.

Dit is een van de meestvoorkomende redenen voor deze omzetting, en het antwoord is streng: platforms vragen exacte pixelmaten, dus zet de schaal zo dat je er precies op landt en niet ernaast. De PNG achteraf verkleinen gooit de reden weg om met een vector te beginnen.

Voor een favicon geldt bovendien dat meestal een ICO wordt gevraagd en geen PNG, omdat een ICO meerdere formaten in één bestand houdt. Zet om naar PNG op het grootste formaat dat je nodig hebt en gebruik de pagina van PNG naar ICO voor de rest.

Een SVG kan verwijzen naar een externe afbeelding, een extern lettertype of een stijlblad in een ander bestand. Die verwijzingen zijn geen onderdeel van de SVG, dus als het bestand hier alleen aankomt, komt waar ze naar wezen niet mee.

Het resultaat is een PNG met een ontbrekende foto of een vervangen lettertype. Zag de tekening er in het ontwerpprogramma compleet uit en hier niet, dan is dit vrijwel altijd de reden: exporteer opnieuw met ingesloten in plaats van gekoppelde bronnen.

Zet de hele map neer. Elk bestand wordt op dezelfde schaal getekend en komt terug als ZIP, wat een iconenset meestal wil: eenvormigheid over de set telt zwaarder dan dat elk bestand op zichzelf ideaal is.

Omdat het tekenen op je eigen machine gebeurt is er geen limiet per bestand en geen wachtrij, en omdat het resvg is en geen browsercanvas, wordt het tweehonderdste pictogram precies zo getekend als het eerste.