SVG to PNG Blank, Tiny or Missing Fonts? Causes and Fixes

The short answer

When an SVG converts to a broken PNG, the problem is almost always inside the SVG file, not the converter. The SVG to PNG converter loads your file as an image in the browser and draws it onto a canvas, and in that mode a browser refuses to load anything outside the file. So an SVG that relies on a web font, a linked image or a website's CSS comes out without them. Missing size information gives a 300 × 150 pixel PNG, and a missing xmlns attribute or an unescaped & makes the file unreadable. Each fix below takes a minute in a text editor.

How the converter reads your SVG

Knowing the process explains every symptom:

You choose an .svg file (up to 30 MB). It is read in your browser and not uploaded.

The browser loads it as an image, exactly as it would for an <img> tag on a web page.

The PNG is created at the SVG's own pixel size, taken from its width and height.

Transparent areas stay transparent, because PNG supports transparency.

When a browser loads an SVG as an image, it treats it as a sealed picture: scripts do not run and external files (fonts, images, stylesheets) are not fetched. That is a security rule built into browsers, and it is the reason most of the problems below happen.

We checked each case by converting test files in Chromium (the engine behind Chrome and Edge). Firefox and Safari follow the same image rules, but exact default sizes can differ.

Problem 1: "Could not read this image file"

This error means the browser could not parse the SVG at all. Two causes cover most cases.

The xmlns attribute is missing

SVG pasted from a web page's HTML often starts like this:

<svg width="200" height="100" viewBox="0 0 200 100">

Inside HTML that works, but a standalone SVG file must declare its namespace. Add it to the opening tag:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 200 100">

In our test, the same drawing failed without xmlns and converted correctly with it.

An unescaped ampersand or other XML error

SVG is XML, which is stricter than HTML. Text such as Tom & Jerry inside a <text> element breaks the file. Write & instead of &, and < instead of < inside text. Other common XML errors are an unclosed tag and two attributes with the same name. Opening the file directly in a browser tab usually shows an error message with the line number.

Problem 2: The PNG is 300 × 150 pixels

If the converted PNG is exactly 300 × 150, your SVG has no fixed size. This happens when:

• it has a viewBox but no width and height, or
• its width and height are percentages, such as width="100%".

300 × 150 is the default size browsers use for an image with no intrinsic size. In our test, an SVG with only viewBox="0 0 200 100" and another with width="100%" height="100%" both came out at 300 × 150.

Fix: add pixel values that match the viewBox ratio. For viewBox="0 0 200 100", use width="200" height="100", or a multiple such as width="2000" height="1000" for a sharp, large PNG. Because SVG is a vector format, a bigger width and height gives a bigger PNG with no loss of quality. The guide to converting SVG to PNG at a high resolution covers sizing in more detail.

Problem 3: Part of the drawing is cut off

If the SVG has neither a size nor a viewBox, the browser shows only the top-left 300 × 150 pixels. Shapes drawn outside that area are clipped. Add a viewBox that covers the whole drawing, plus width and height.

To find the right viewBox, open the file in a vector editor such as Inkscape, select everything and read the size, or use the editor's "resize page to drawing" option before saving.

Problem 4: Text appears in the wrong font

An SVG that loads a web font with @import or a <link> to Google Fonts, or that names a font installed only on the designer's computer, will draw its text in a fallback font such as Times or Arial. In our test, text set in a Google web font loaded via @import rendered, but in the browser's default font.

Fixes, best first:

Convert text to outlines (paths) in the design tool before exporting. In Inkscape use Path, then Object to Path; in Illustrator use Type, then Create Outlines; in Figma select the text layer and use Flatten. The text is then shapes and looks the same everywhere.

Embed the font inside the SVG as a Base64 data URI in an @font-face rule. This works because nothing is fetched from outside. The Image to Base64 tool shows how data URIs work, though for fonts you would encode the font file with a separate tool.

Use a common system font if the exact typeface does not matter.

Problem 5: The PNG is blank or a picture inside is missing

If your SVG contains <image href="photo.jpg"> or links to another file, the linked file is not loaded. In our test, an SVG that pointed to a second file produced a fully transparent PNG of the right size. Transparent output can look "blank" or white depending on your viewer.

Fix: embed the picture inside the SVG as a data URI (href="data:image/png;base64,..."). Most design tools have an "embed images" option on export. Inkscape asks whether to embed or link when you import a picture.

Problem 6: Icons come out black

Icons copied from a website often have no colours of their own. They rely on the site's CSS, for example class="icon-blue" or fill: currentColor. Outside the website, that CSS does not exist, so shapes are filled with the SVG default, which is black.

Fix: add the colour directly to the element, such as fill="#4f6ef7" on the <path>, or put a <style> block inside the SVG itself. Replace currentColor with a real colour value.

Problem 7: Animations or interactive parts are lost

A PNG is a single still frame. Scripts in the SVG do not run when it is loaded as an image, and you get the first frame of any CSS animation at best. If you need motion, export a GIF or video from an animation tool instead.

Quick checklist before converting

Check	What to look for
Namespace	xmlns="http://www.w3.org/2000/svg" in the opening tag
Size	width and height in pixels, matching the viewBox ratio
Fonts	Text converted to paths, or font embedded
Pictures	Embedded as data URIs, not linked
Colours	Set on the elements, not in a website stylesheet
XML	No raw & or < in text

After fixing the file, convert again. If you need a smaller file afterwards, run the PNG through Compress Image or convert it with PNG to JPG when transparency is not needed.