SVG to PNG

PNG, JPEG or WebP at an exact or print size, after a check for fonts and files that would go missing.

Or drop them here, or paste. SVG files, plus any fonts or images they link to, which get embedded. Nothing is uploaded.

Sample

  • Sample · harbour-logo.svg689 B
    Checking…

A Google Font loaded by @import, and a font this device may not have.

Rendering…

0 × 0 px out · no viewBox

Checks before converting

Reading the file…

Output

Format
Size by
Scale
Background
More optionsResolution in the file: auto, 96 ppi

This file cannot be converted until its blocking check is fixed.

In short

Drop an SVG and it is drawn by your own browser at the size you ask for, then saved as PNG, JPEG or WebP. Before that, the file is checked for the things a browser will not load when it draws an SVG as an image: web fonts, linked images and stylesheets. Drop the missing files alongside and they are embedded. The resolution is written into the PNG, so a 300 ppi export opens at its print size.

What SVG to PNG conversion is

Drawing a vector file onto a grid of pixels at a chosen size and saving the grid. In a browser the SVG is drawn as an image, and an image may not fetch web fonts, linked pictures or stylesheets, so whatever the file loads from elsewhere is missing from the PNG unless it is embedded first.

What this tool does that others do not

  • Checks for what will go missing, before converting

    Each file is read for web fonts, linked images, sprites in other files, external stylesheets, embedded HTML, scripts, animation and currentColor. Every finding names the font, the path or the element, and says how to fix it. Fonts are checked on this device by drawing the text twice and comparing pixels.

    document.fonts.check() returned true for all ten names tried in Chromium and WebKit, including one that does not exist, so it cannot tell you a font is missing.

  • Linked files are embedded when you drop them in

    Drop the photo or the .woff2 file alongside the SVG and it is matched by file name and inlined as a data: URL, so it appears in the output. An SVG copied from a web page without its xmlns attribute, which no browser will draw as a file, has it added. Both repairs can be downloaded as a fixed SVG.

  • The ppi is written into the file

    Choose a print size in mm, cm or inches at any ppi, and the PNG carries that resolution in its pHYs chunk; a JPEG carries it in its JFIF header. Layout and print apps then open it at the size it was made for instead of assuming 72 or 96.

    Measured: Chromium’s canvas PNG holds only IHDR, IDAT and IEND, and WebKit’s adds sRGB and eXIf. Neither writes pHYs.

  • The preview is the output, to the pixel

    The viewer shows the encoded file, zoomed up to 1600% with a pixel grid on a checkerboard, white or black. Beside it are the element list with each bounding box and the markup with highlighting, so a missing shape can be traced to the element that drew it.

How to use it

  1. Drop your SVGs, with any fonts and images they link to

    Drop them anywhere on the page, use "Choose SVG files", or paste SVG code anywhere outside a text box; or start from a sample to see each check at work. Each file gets a card with its check summary, and several files convert with the same settings.

  2. Read "Checks before converting"

    Blocks means nothing can be exported; Changes the output means the PNG will differ from your design; Fixed means the repair is already in the file being drawn.

  3. Choose the size by Scale, Width, Height or Print size

    Print size takes a width in mm, cm or inches and a ppi, and works out the pixels. The Output figures show the pixels, the printed size and the file size; the resolution written into the file for other sizes is under More options.

  4. Pick the format and background, then download

    PNG keeps transparency; JPEG gets white or a colour behind it. "@1x @2x @3x as .zip" makes the three sizes an app hand-off expects.

Worked examples

Real input, real figures.

A shelf label drawn in millimetres, for a 300 ppi printer

You give it

An SVG with width="90mm" height="50mm", converted at Print size, 90 mm, 300 ppi.

You get

The file’s own size is 340.2 × 189 px at 96 per inch. At 300 ppi the output is 1063 × 591 px (90 ÷ 25.4 × 300 = 1,063), and the PNG says 300 ppi, stored as 11,811 pixels per metre, so it lays out 90 mm wide.

An icon copied out of a web page

You give it

A 24 × 24 viewBox, no xmlns, stroke="currentColor", no width or height.

You get

Unfixed, a browser draws nothing for it; with xmlns added it would draw black and 300 px wide. Here the namespace is added, the 1× size is taken from the viewBox as 24 × 24, and the colour you choose is set on the root element for currentColor to read.

Against a typical SVG to PNG site

AspectThis toolA typical converter
Fonts and linked imagesNamed before converting, and embedded if you drop the files inSilently replaced or left out
Resolution in the fileAny ppi, in the PNG pHYs chunk or JPEG headerNone, or a fixed 150 and 300
Files per batchNo cap; ZIP download20 files, or one at a time
Sizes in mmResolved exactly at 96 per inchWhatever the engine rounds to
Your fileNever sentUploaded, or local without checks

Guide

What it will not do

  • Your browser draws the file, so filters and text follow its engine rather than Inkscape’s. Chromium and WebKit were measured; Firefox was not.
  • A file containing <foreignObject> cannot be exported: Chromium and WebKit both block reading the canvas after drawing it. The tool says so instead of producing nothing.
  • Remote fonts and images are never fetched, because that would send a request from your browser to another site. Drop the files instead.
  • WebP has no standard field for a ppi outside EXIF, so a WebP carries none. The canvas ceiling of 8,192 px a side and 16.7 million pixels applies, and the size is reduced to fit with a note.

What browsers do to an SVG drawn as an image

Every converter that runs in a browser draws the SVG as an image, and an image may not run scripts or load other files. That rule is the same everywhere; what each engine does about it is not. Each row was measured in Chromium and WebKit on 8 October 2026.

In the SVGChromium (Chrome, Edge)WebKit (Safari)
A Google Font loaded with @importDropped: same pixels as a font name that does not existDropped, the same
A font embedded as a data: URLUsedUsed
An <image> at a full URLPaints its broken-image icon; no request is madeLeaves a hole
An <image> at a relative pathLeaves a holeLeaves a hole
fill="currentColor"BlackBlack
No xmlns attributeDraws nothingDraws nothing
width="210mm"794 px793 px
A viewBox and no width or height300 px wide300 px wide
<foreignObject>Draws, then refuses to exportDraws, then refuses to export
ppi in the PNG it encodesNone (no pHYs chunk)None (no pHYs chunk)

The broken-image icon is the one to watch for. A converter built on Chromium does not leave a gap where a linked photo was; it paints a small grey picture-frame icon into your PNG, and no request for the photo is ever made.

Pixels, ppi and the size it prints at

A PNG is a grid of pixels. How large it prints depends on a separate number, the pixels per inch stored in its pHYs chunk. Browsers write none, so print and layout apps assume one: Photoshop 72, and most Microsoft apps 96. A file made for 300 ppi then comes out three or four times too large.

Choose Print size and the arithmetic is done for you: 90 mm at 300 ppi is 90 ÷ 25.4 × 300 = 1,063 pixels, and the file says 300 ppi (stored as 11,811 pixels per metre). In the other modes, Auto writes 96 ppi for each 1× of scale, so a 2× export of a 24 px icon is 48 px at 192 ppi and still lays out at 24 px wide.

For screen sizes in other units, the pixel converter does the same arithmetic for inches, centimetres and points. If the SVG itself needs to be smaller first, run it through the SVG optimiser and drop the result here.