SVG to PNG

Turn a vector SVG into a PNG image

SVG to PNG draws an SVG file, or SVG code you paste, as a PNG at the size you pick. It’s handy when a site or app accepts PNG but not SVG, or when you need a fixed-size copy of a logo or icon.

Your browser does the drawing: the SVG is read on your device, drawn onto a canvas and saved as a PNG. Nothing is uploaded.

How to convert an SVG to PNG

1. On the File tab, drop an .svg file on the upload area or click it to choose one. To use code instead, switch to Paste code and paste everything from <svg to </svg>.
2. Check the original size shown above the options, and whether it came from the width and height or from the viewBox.
3. Under Size, pick 1×, 2× (the default), 3× or 4×, or choose Custom width and type a width in pixels — the height follows the SVG’s shape.
4. Under Background, keep Transparent or choose Solid colour and pick a colour.
5. Check the preview, then click Download PNG. A file called logo.svg downloads as logo.png; pasted code downloads as image.png.

What size the PNG comes out

The starting point is the SVG’s own size. Width and height in pixels are used as they are, and physical units such as mm, cm, in, pt and pc are converted at 96 pixels per inch, so 25.4 mm becomes 96 px. If a dimension is a percentage or missing, the size comes from the viewBox; an SVG with neither is treated as 300 × 150 px, as browsers do.

The scale multiplies that size and rounds to whole pixels. The output can be up to 8,192 px on its longest side and 40 megapixels in total; larger requests show a message instead of a download.

When a PNG copy of an SVG is useful

• Uploading a logo: many profile, shop and form uploads only take PNG or JPG.
• Documents and slides: some editors show SVG poorly or not at all, while a 2× or 3× PNG looks crisp.
• App and favicon sizes: use Custom width to make the exact pixel widths a platform asks for.

Tips for a clean PNG

• Pick 2× or higher for anything shown on high-resolution screens; a 1× icon can look soft there.
• If text in the PNG uses the wrong typeface, the SVG relies on a font that isn’t installed or is linked from outside. Convert the text to outlines in your design app and export the SVG again.
• To shrink the PNG’s file size afterwards, try the Image Compressor; to change its dimensions later, use the Image Resizer.

How an SVG becomes pixels

Why scaling an SVG stays sharp

An SVG describes shapes rather than pixels, so the tool sets the requested width and height on the SVG before drawing it. Lines and text are drawn fresh at the new size instead of being stretched from a small image. If the SVG has no viewBox, one is added from its original size so the drawing can scale.

What doesn’t carry over

The SVG is drawn the way browsers draw an SVG used as an image, which comes with limits. Images, fonts and stylesheets it links to on other sites or files don’t load, so they are missing from the PNG; the tool lists this under the preview when it finds such links. Scripts don’t run, animations show their first frame, and CSS from the page the SVG came from doesn’t apply — only styles inside the SVG itself.

SVG to PNG: common questions