Why fonts look different after SVG to PNG
The most common surprise with any browser-based SVG to PNG converter is text in the wrong font. It is not random: it comes from how browsers treat an SVG that is used as an image.
What is blocked
LocalSvgPng renders the SVG through an <img> element. For SVG in that mode, browsers refuse to load any external resource and do not run scripts. That is a security feature, and it is why the tool can open untrusted files safely. It also means:
- Web fonts loaded with
@import,@font-face url(https://…)or a<link>do not load. <image href="photo.jpg">orhref="https://…"shows nothing.<use href="other.svg#icon">pointing at another file does not resolve.
Text that asks for a missing font falls back to whatever the font-family list finds on your device, often a default serif or sans-serif. Results therefore differ between computers.
Fixes, in order of reliability
- Convert text to outlines/paths in your editor (Illustrator: Create Outlines; Inkscape: Object to Path; Figma: Outline stroke / Flatten). The PNG will match exactly.
- Embed the font as a data: URI inside an
@font-facerule in the SVG. Data URIs are not external, so they work in image mode. Check the font's license allows embedding. - Embed images as data: URIs instead of linking them. Most editors have an "embed images" option on export.
- Use a font installed on this device and name it in
font-family; then it renders here but maybe not on another machine.
FAQ
Why does the SVG look right in my browser tab but wrong in the PNG?
Opening an SVG file directly is document mode, where external fonts and images can load. The converter uses image mode, where they are blocked. Outline text or embed resources to make both match.
Can the tool download the fonts for me?
No. The page's security policy forbids script network requests, and SVG image mode would ignore them anyway. Fetching fonts from URLs inside untrusted files is exactly what this design avoids.
Do embedded data: URI fonts work?
Yes, in current Chrome, Firefox and Safari a font embedded as a data URI in an SVG font-face rule is used in image mode. Large embedded fonts make the SVG heavier.
Why is my linked photo missing?
An image element pointing to an external file or URL is blocked in image mode. Embed the photo as a base64 data URI in the SVG and convert again.
What about foreignObject text?
HTML inside foreignObject is often rendered unreliably or blank when SVG is used as an image, and may also taint or fail the canvas in some browsers. Replace it with native SVG text or paths.
Will emoji render?
Emoji use your device's emoji font, so they look like Apple, Google or Microsoft emoji depending on where you convert.