SmallNook

SVG to PNG Converter

Drag SVG files here to convert them to PNGor click to browse

Is the PNG heavier than you wanted? Squeeze it down

About this tool

How this SVG to PNG converter works

Drop an SVG, set a width, download the PNG. Your browser already carries a full SVG renderer, so the page loads your file into an image element, draws it onto a canvas at the size you named, and reads a PNG back out. No library gets downloaded to help. The drawing stays in the tab.

An SVG stores shapes rather than pixels, so the width you pick is the width the browser redraws at. Nothing gets enlarged from a smaller picture. A 120 × 60 test logo comes out with the same hard edges at 2048 wide as it has at 512.

That is also why the download row prints one number instead of a percentage. That logo is 204 bytes of text. As a PNG it weighs 4 KB at 512 wide, 12 KB at 1024, and 44 KB at 2048, which is how the row rounds 3,713, 12,539 and 44,563 bytes. A tool reporting "+21,744%" would read like it had wrecked your file, when all it did was write down every pixel.

Before drawing anything, the tool reads your root tag as text. Chrome's own answer for how big an SVG is comes from the CSS default box rather than from the artwork: hand it a file whose viewBox is 0 0 60 20 and it reports 300 × 100, and a file that states no size at all reports 300 × 150 whatever it draws. The width, height and viewBox you wrote are the honest answer, so the converter parses those. width="10cm" becomes 378 px, which is what Chrome makes of it too.

Convert without touching the control and you get your file's own width, lifted to 512 px for small marks. A 2048-wide illustration keeps 2048.

When you'd reach for it

  • An upload form rejects .svg. Slack emoji, Shopify product images, print shops, older content systems. A 1024 px PNG walks straight in.
  • A slide or a document. Keynote, PowerPoint and Word each place a PNG where you put it. Their SVG support varies by version, and a colleague's copy can re-draw the same file its own way.
  • Several sizes of one mark. Convert at 512, change the width, convert again. Each download carries its size in the name (logo-512x256.png), so nothing overwrites anything in your downloads folder.
  • An SVG from a stranger. Drawing it as a picture leaves any script it carried behind, and that script never ran while the picture was being made.

What this tool cannot do

Fonts you did not embed do not arrive. An SVG that asks for a font by name gets whatever your browser falls back to, and your browser never fetches an @font-face that points at a font file on a server. The text still draws, which is the trap: in a 200 × 60 test render the letters laid down 961 pixels of ink in the wrong face. Convert your text to outlines in the editor before you export.

Links to other servers get cut. A remote <image>, an external stylesheet, an @import. Chrome refuses to fetch them while drawing an SVG as a picture, and left alone it paints its own broken-image glyph into the hole. This tool removes the reference first, so you get empty space rather than someone else's error graphic baked into your logo. The file's row says links dropped when it happens.

An SVG with a web page inside it gets refused. Illustrator and Figma can export text as a foreignObject, an HTML fragment wrapped in vector. Chrome draws it, marks the canvas as untrusted, then answers the export with SecurityError: ... Tainted canvases may not be exported. The tool spots that tag in your file and says so before it starts, instead of failing at the last step. Flatten the frame in your editor.

A file that never states a size gets refused too. With no width, no height and no viewBox, the browser scales the drawing from a 300 × 150 box instead of from its own contents. Asking for 1024 × 512 then produces a picture where 3,200 pixels out of 524,288 carry the artwork, huddled in the top-left corner. One viewBox attribute in your editor fixes it, and the same drawing then fills all 524,288.

Animation freezes. SMIL and CSS animations hold their opening values, so you get the first frame.

Scripts never run. Safe, and worth knowing if part of your drawing is built in JavaScript. That part will be missing.

There is no way back. A PNG is a grid of pixels with nothing shaped in it, so this page cannot hand your SVG back. Turning pixels into curves is tracing, which invents the shapes, and it belongs to a different tool.

White artwork on transparency looks like an empty file. Finder, Explorer and Slack all preview a PNG on white, so a white logo with a transparent background shows as a blank square. The pixels are there. Drop the file on something dark to check.

One width per run. Every file in a batch is drawn at the same width, each keeping its own proportions. Two sizes means two runs.

16.7 million pixels is the ceiling, and 8192 pixels on a side. Ask a phone browser for more and it hands back a picture that is transparent corner to corner, with no error anywhere. So a square drawing stops at 4096 × 4096. A long, thin one hits the side limit first: a 600 × 100 banner asked for at 20000 wide comes out 8192 × 1365, which is 11.2 million pixels. The row says when it capped, and the line under the list names the limit that did it.

Frequently asked questions

What width should I pick?

If a form told you a number, type that number. For a logo going into a slide deck or a README, 1024 px is plenty. For anything headed to print, start at 2048.

Does the transparent background survive?

Yes. The canvas is never painted before your drawing lands on it, and PNG carries an alpha channel, so the corners of the file come back at 0,0,0,0. The test suite reads those four zeros out of a downloaded file on every run.

Why is the PNG so much larger than the SVG?

Your SVG stores a couple of shapes and their colors. The PNG stores every pixel those shapes cover, and the count grows with the square of the width. The 204-byte logo becomes 44 KB at 2048 wide.

Can I get the SVG back from a PNG?

No. The shapes are gone the moment they become pixels. Tracing software guesses new curves from the picture, which is a different job with a different result.

Is my drawing uploaded?

No. Your first click fetches the converter script from this site, and everything after that happens in the tab. While converting a file that points at a font server and an image server, the browser sends zero requests to either, which the test suite checks by logging every request the page makes.

How long does it take?

A drawing with 2,000 circles took 17 ms to redraw and encode at 1024 × 1024 on a desktop, and 100 ms at 4096 × 4096, where the PNG came out at 2.0 MB. A logo is faster than the click.

Can I drop a .svgz file?

No. Your desktop reports a gzipped .svgz as a different file type, and the picker turns it away. Uncompress it back to plain .svg first, or re-export it without compression.

Will it look the same as in my editor?

Gradients, filters, masks and clipping paths all render, and they render the way your browser renders them, which can differ by a shade from Illustrator. Every number on this page was measured in Chrome, the browser the tests run in. Firefox and Safari draw SVG with their own engines, so treat those as untested here.