Hoe converteer ik een SVG naar PNG zonder de lettertypen te verliezen?

Waarom de uitvoer van SVG naar PNG op 2x de opgegeven grootte uitkomt, en waarom de browser sandbox stilletjes externe lettertypen en gelinkte afbeeldingen tijdens het renderen weglaat.

August 9, 2026

Een SVG heeft geen pixels. Het is XML: paden, vulkleuren, een viewBox en misschien een <text>-element dat een lettertype benoemt dat het bestand eigenlijk niet bevat. Rasterisatie naar PNG betekent het kiezen van een pixelrooster en het schilderen van die vormen erop, dus twee dingen bepalen of je het resultaat leuk vindt. Hoeveel pixels je hebt gevraagd en wat de renderer mocht laden terwijl hij schilderde.

We voeren die render uit in je browser. Het bestand gaat naar een blob-URL, een <img>-element laadt het, de browser schildert het op een OffscreenCanvas en een WebAssembly-encoder schrijft de PNG. Deze app heeft geen API-routes en geen serveracties, dus een niet vrijgegeven logo zit nooit in iemands tijdelijke opslag te wachten op een verwijdering cron. De meeste SVG naar PNG-converters uploaden eerst en beloven later op te ruimen. De onze verzendt nooit de bytes ergens naartoe, wat het hele punt van ons privacy model is.

Wat gebeurt er eigenlijk wanneer een browser een SVG rasteriseert?

Je SVG wordt doorgegeven aan een <img>-element, en dat detail stuurt alles op deze pagina aan. Een SVG die als afbeelding wordt geladen, draait in een beperkte verwerkingsmodus waarin scripts niet worden uitgevoerd en externe referenties niet worden opgehaald, wat de SVG 2 conformiteitsregels definieert als de veilige verwerkingsmodi. Zodra de laadopdracht is opgelost, schilderen we het met drawImage op een OffscreenCanvas, lezen we de pixels terug, coderen met @jsquash/png en draaien dan oxipng op niveau 3 over de bytes. Die stap is verliesvrij. Alpha overleeft de hele reis, dus een transparant logo komt transparant uit.

Wat zal de PNG daadwerkelijk zijn?

Onze converter rendert op twee keer de intrinsieke grootte van de SVG. Een 500x500 SVG komt uit op 1000x1000. De verdubbeling levert je gratis een bestand van retina-kwaliteit op, en het is ook het ding waar mensen over struikelen wanneer een specificatie een exact aantal pixels vereist. Als de browser geen bruikbare intrinsieke grootte rapporteert, vervangen we dat door 1024x1024 voordat we verdubbelen, zodat de PNG op 2048x2048 uitkomt. De CSS Images specificatie behandelt waarom een grootte in de eerste plaats kan ontbreken: een vervangen element zonder intrinsieke breedte of hoogte valt terug op een standaard objectgrootte, en een viewBox op zichzelf levert een verhouding zonder bijbehorende grootte. Stel dus de breedte en hoogte in op de root <svg> op de helft van je doel. 256 in, 512 uit.

Waarom kwam mijn tekst in het verkeerde lettertype uit?

Dit is de meest voorkomende klacht en het is geen bug in de converter. Een @font-face regel die naar een .woff2 URL wijst, telt als een externe referentie, dus de veilige modus blokkeert die opvraging voordat deze begint. Lettertypen die door de pagina rond de afbeelding zijn geladen, bereiken ook niet de binnenkant, omdat een SVG in een <img> een apart document is dat zijn eigen lettertype-resolutie uitvoert. Wat je krijgt is wat de machine kan matchen uit de lettertype-familielijst, wat op de laptop van een beoordelaar betekent dat er een fallback is die je nooit hebt gekozen. De oplossing is om tekst niet als tekst te verzenden. Illustrator noemt het Type > Create Outlines. Inkscape noemt het Pad > Object naar Pad. Beide converteren elke glyph naar een pad, het bestand groeit een beetje en de render stopt met afhankelijk zijn van de machine.

Waarom ontbreekt de foto in mijn SVG?

Zelfde regel, ander symptoom. Als je SVG een bitmap binnenhaalt via een <image>-element met een absolute https URL, wordt die URL niet opgehaald, en de PNG komt terug met een gat waar de foto zou moeten zijn. Een data: URI werkt prima, omdat er geen netwerkverzoek is dat geblokkeerd kan worden. Er is een tweede reden om in te bedden: een cross-origin bitmap die in een canvas wordt geschilderd vervuilt het, en het teruglezen van de pixels gooit dan een SecurityError. Die fout kondigt zich tenminste aan. Een geblokkeerde referentie is stil, wat mensen een middag kost. Open het bestand in een teksteditor en zoek naar http voordat je converteert.

Kan ik een PNG terug converteren naar een SVG?

Nee, en we doen alsof dat niet zo is. Onze converter decodeert SVG en kan het niet coderen: de encoders in de build schrijven JPEG, PNG, WebP, AVIF en PDF, en geen van de 24 paren over 11 formaten heeft SVG als doel. Van pixels terug naar paden gaan is traceren, een machine die raadt waar de randen horen, en een getraceerd woordmerk is zelden dicht genoeg om te verzenden. Exporteer opnieuw vanuit het origineel als je het nog hebt. Als wat je echt nodig hebt de raster is in een grotere grootte, draait onze upscaler Real-ESRGAN en schrijft altijd PNG: het nam een 400x269 bestand naar 1600x1076 op 4x.

Hoe maak ik een SVG om een favicon-set?

De icon generator accepteert SVG direct, wat de compressor, resizer en cropper niet doen: die drie accepteren alleen JPEG, PNG, WebP, AVIF en GIF. Het rendert je SVG op een vierkant canvas dat is afgestemd op de grotere van de twee afmetingen of 512 pixels, welke ook wint, zodat een 64x64 pictogram nog steeds een 512 canvas krijgt om van te downsample. Er komen zeven bestanden uit: favicon.ico met 16, 32 en 48, favicon-16x16.png, favicon-32x32.png, een 180px apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png en site.webmanifest. Waarom die ene .ico nog steeds zijn 4,6 KB verdient is een apart argument. Eén bestand tegelijk, 10 MB limiet. De converter is de batchtool: 10 bestanden en 50 MB per run.

Moet ik de PNG daarna comprimeren?

Gewoonlijk, en de modus is belangrijker dan welke schuifregelaar dan ook. Op een 942,4 KB transparante PNG van 900x606 kwam het verliesvrije pad (oxipng niveau 3) uit op 383,9 KB, een vermindering van 59% met elke pixel bit-identiek aan de invoer. Het paletpad (imagequant) bracht datzelfde bestand naar 98,3 KB, een vermindering van 90%, door het te reduceren tot 256 kleuren. Vlakke vector kunst is de beste case voor de paletmodus, aangezien een logo met zes vullingen niets heeft dat lijkt op 256 kleuren om op te geven. Comprimeren verwijdert ook alle metadata. Voer beide uit in de compressor en houd degene die het beste presteert.

Doe dit vervolgens: open de SVG in een teksteditor, zoek naar http om gelinkte lettertypen en afbeeldingen te vangen, outline eventuele live tekst, stel vervolgens de breedte en hoogte in op de root <svg> op de helft van je doelgrootte en drop het op /convert/svg-to-png. Als de PNG bedoeld is voor een webpagina, stuur deze dan rechtstreeks naar de compressor, en de PNG tegen WebP-cijfers voor een bestand met transparantie vertelt je of je het formaat überhaupt moet wijzigen. Als het in een document moet, behandelen onze aantekeningen over JPG naar PDF de paginagrootte waar een geconverteerd beeld mee eindigt.