SVG naar WebP omzetten

Een SVG is een reeks instructies — teken dit pad, vul deze vorm — zonder eigen resolutie. Renderen volgt die instructies op één specifieke grootte en legt het resultaat vast als pixels, en vanaf dat moment is de tekening weg en blijft alleen het beeld over.

De grootte die je bij de omzetting kiest, is dus de grootte die je hebt. De WebP achteraf vergroten kan alleen de tussenliggende pixels verzinnen — precies wat vectorwerk juist wil vermijden.

Een telefoonscherm propt twee of drie apparaatpixels in elke CSS-pixel, dus een beeld gerenderd op precies de weergavegrootte oogt zacht op de meeste apparaten die het te zien krijgen. Renderen op twee- of drievoud en laten verkleinen door de browser is de gangbare praktijk en kost minder dan het klinkt.

De uitzondering is alles wat echt groot is. Een hero-afbeelding over de volle breedte op 3× levert een bestand op dat niemand zou moeten downloaden — render daar op 2× en accepteer dat, of overweeg de SVG rechtstreeks te serveren.

Een SVG noemt zijn lettertypen alleen, zonder ze mee te sturen. Heeft de renderer het lettertype, dan wordt de tekst correct getekend; heeft hij het niet, dan komt er iets anders voor in de plaats, op andere breedtes — dus een woordmerk in een gelicentieerd lettertype komt aan in een generieke schreefloze letter, met een verstoorde lay-out eromheen.

De oplossing hoort thuis in het tekenprogramma, vóór het exporteren: zet tekst om naar contouren, zodat de letters paden worden die van niets afhangen. Voor een diagram met labels die je wilt kunnen bewerken, kun je het lettertype beter in de SVG insluiten.

De WebP die hier wordt geschreven is altijd lossy — er is geen verliesvrije modus op dit paar. De standaard van 82 is afgestemd op foto’s, en op vectorwerk valt dat op de verkeerde plek op: een lijn van één pixel krijgt een waas, en de grens tussen twee vlakke kleuren krijgt een halo van tussenliggende pixels.

Zet de waarde op 95 of hoger voor een logo, icoon of diagram, en die artefacten verdwijnen terwijl het bestand klein blijft — vlakke kleur comprimeert goed op elke instelling. Moet het beeld exact blijven, render dan naar PNG.

Vaak. Is de tekening een logo, icoon of eenvoudige illustratie op een pagina die je zelf beheert, dan is de SVG meestal kleiner dan elke raster ervan, scherp op elke zoom en elk scherm, en herkleurbaar vanuit CSS zonder een tweede bestand.

Converteer wanneer iets SVG weigert, en dat gebeurt: social-media-voorbeeldbeelden moeten PNG of JPG zijn op vaste afmetingen, e-mailclients zijn onbetrouwbaar, veel uploadformulieren weigeren het formaat, en platforms die gebruikersuploads accepteren, weigeren SVG vaak om veiligheidsredenen.

Iconen komen in sets, niet los. Sleep de hele map erin: elk bestand wordt op de gekozen schaal gerenderd, behoudt de naam met verwisselde extensie, en alles komt terug als één ZIP klaar voor een build.

Twee gewoontes houden het resultaat consistent: render elk icoon op dezelfde schaal in plaats van op het oog, en houd de SVG’s in versiebeheer als bron.

Het renderen gebeurt in het browsertabblad op de eigen processor. Er wordt niets geüpload, dus geen wachtrij, geen daglimiet en geen account — en geen derde partij die tijdelijk nog niet gepubliceerde merkmiddelen op een server heeft staan.

Het betekent ook dat een map met tweehonderd iconen zo snel omzet als de machine kan tekenen, niet zo snel als bestanden geüpload en teruggehaald kunnen worden.