How to convert an SVG to PNG without losing its fonts or images

Most SVG to PNG converters, including the ones that run in your browser, do the same thing: draw the SVG as an image, then save the pixels. The drawing step is where things disappear. An image is not allowed to run scripts or fetch anything, so a font from Google Fonts, a photo linked by its path and a stylesheet in another file are all quietly left out, and the PNG looks different from the design with no error anywhere.

Convert a file with the tool

1. Open SVG to PNG. It starts on a sample, Logo with a web font, so the checks are visible before you add anything. The Or try a sample list has six more, one for each kind of problem.
2. Drop your files anywhere on the page, or press Choose SVG files; SVG code pasted anywhere outside a text box works too. Add the fonts (.woff2, .woff, .ttf or .otf) and images the SVG links to in the same drop: they are matched by file name and embedded. Each file gets a card with its check summary.
3. Read Checks before converting. Each finding is labelled Blocks, Changes the output, Note or Fixed, names the font, path or element, and gives the fix.
4. Under Size by, choose Scale, Width, Height or Print size. Print size asks for a width in mm, cm or inches and a ppi.
5. Pick a Format (PNG, JPEG or WebP) and a Background. If the file uses currentColor, a currentColor picker appears.
6. Check the Preview tab. It shows the encoded file itself; zoom to 800% or more and the Pixel grid appears.
7. Press Download PNG (also on the bar at the foot of the screen), or @1x @2x @3x as .zip under Output for an app hand-off. With several files, All 4 as .zip (or however many you added) converts every one with the same settings. If anything was repaired, Download fixed SVG keeps the repaired file.

What a browser leaves out, measured

SVG as an image is the restricted mode a browser uses when an SVG arrives through an <img> element, a CSS background or a canvas: scripts off, and no external resources unless they are inlined as data: URLs (MDN). Every in-browser converter works in this mode. Each row below was measured in Chromium and WebKit on 8 October 2026.

In the SVG	Chromium (Chrome, Edge)	WebKit (Safari)	Fix before converting
A Google Font loaded with @import	Dropped: the text matched a made-up font name pixel for pixel	Dropped	Embed the font file, or outline the text
A font embedded as a data: URL	Used	Used	Nothing to do
An <image> at a full URL	Paints a broken-image icon; no request is made	Leaves a hole	Embed the image
fill="currentColor"	Black	Black	Set a colour on the root element
No xmlns attribute	Draws nothing	Draws nothing	Add xmlns="http://www.w3.org/2000/svg"
<foreignObject>	Draws, then blocks the export	Draws, then blocks the export	Replace the HTML with SVG text

The broken-image icon is the surprise. In Chromium, a photo linked by a full URL does not become a gap; a small picture-frame icon is painted where it should be, so the PNG looks finished until someone looks closely.

Why “is the font installed” is hard to answer

Fonts installed on your own computer do work: Helvetica, Georgia, Arial, Times New Roman and Courier New all rendered in both engines. A font you do not have falls back to a default, and nothing tells you. The browser’s own question for this, document.fonts.check(), answered yes for all ten names tried, including one invented for the test.

So the tool asks by drawing. It renders a line of text in the requested font with serif as the fallback, then again in plain serif, and repeats with sans-serif. If both pairs match pixel for pixel, the font is not there. A designer who exported with Inter installed can then see that a colleague’s laptop without it will produce a different PNG from the same file.

Size: pixels, and the ppi a print shop reads

Pixels per inch (ppi) is how many of the image’s pixels are meant to fill one printed inch. A PNG stores it in a pHYs chunk as pixels per metre. Neither engine writes one: Chromium’s PNG contains only the IHDR, IDAT and IEND chunks, and WebKit’s adds sRGB and eXIf. An app opening the file has to assume a value, and Photoshop assumes 72.

That makes the arithmetic yours. For a shelf label 90 mm wide at 300 ppi:

90 mm ÷ 25.4 = 3.543 in
3.543 in × 300 ppi = 1,063 px
300 ppi ÷ 0.0254 = 11,811 pixels per metre, written into pHYs

Choose Print size and the tool does both steps. Files sized in millimetres have one more trap: CSS fixes 96 px to the inch, so width="210mm" is 793.7 px, which Chromium rounded to 794 and WebKit to 793. The tool keeps the exact figure.

An SVG with a viewBox and no width or height has no size of its own. Browsers draw it 300 px wide. The tool takes one viewBox unit as one pixel instead, as design tools do, so a 24 × 24 icon is 24 × 24 at 1× and 72 × 72 at 3×.

Other ways to do it

Inkscape converts from the command line and, unlike a browser, renders as a document, so linked images and installed fonts load. Its manual gives this form, where -w and -h set the pixel size and --export-dpi (96 by default, one SVG pixel to one output pixel) sets the resolution instead:

inkscape --export-filename=filename.png -w 600 -h 400 filename.svg

Figma exports PNG at a scale and records 72 dpi at 1×, 144 at 2× and 216 at 3×, with no way to set it; its SVG export can outline text, which removes the font question before the file ever reaches a converter.

Check nothing was uploaded

Open the browser’s developer tools on the Network tab, then drop a file and download the result. No request carries your file, because the drawing and the encoding happen in the tab. The tool also never fetches the fonts or images an SVG links to: that would send a request to whoever hosts them, so it asks you to drop the files instead.

Next

Open SVG to PNG and try the Card with linked files sample to see the checks for a linked photo, a sprite in another file and a small embedded bitmap. To make the SVG lighter first, use the SVG optimiser. For sizes in inches, centimetres or points without converting anything, the pixel converter explains which pixel each answer assumes.