Tooltrusty

SVG to PNG Converter

Vectors are resolution-independent — so the only real question is what size PNG you need.

Drop an image here or click to choose a file — an .svg file

Runs in your browser. Everything you type or load here is processed locally by JavaScript on this page. Nothing is uploaded to Tooltrusty or to any third party.

What the sVG to PNG Converter does

An SVG is a set of drawing instructions rather than a grid of pixels, which is why it stays sharp at any size. Rasterising one to PNG means deciding on a size and asking the renderer to draw it at that resolution. This tool does exactly that using the browser's own SVG renderer — the same engine that draws vectors on every web page you visit — so the output matches what a browser would show.

Because there are no fixed pixels in the source, the width you choose is the only thing that determines quality. Ask for 2048 pixels and you get a crisp 2048-pixel image; there is no upscaling penalty of the kind you get from enlarging a photograph. The height is calculated from the SVG's aspect ratio so the drawing never distorts.

The retina multiplier exists because of how high-density screens work. An image displayed at 400 CSS pixels on a 2× display needs 800 actual pixels to look sharp. Setting the width to 400 and the multiplier to 2× produces the 800-pixel file you want, without you having to do the arithmetic.

One important limitation applies to every browser-based SVG rasteriser, including this one: for security reasons the browser will not load external resources referenced from inside an SVG that is rendered this way. Fonts loaded by URL, linked images and external stylesheets are all blocked. If your SVG contains text, convert that text to paths in your vector editor before exporting, or the text may render in a fallback font or not at all. Everything drawn with shapes, paths, gradients and inline styles renders exactly as expected.

How to use it

  1. Upload an .svg file, or switch tabs and paste your SVG markup directly.
  2. Set the output width. The height follows automatically from the aspect ratio.
  3. Choose a retina multiplier if the PNG is for a high-density screen, and set a background if you do not want transparency.
  4. Download the PNG.

A worked example

Exporting a logo for three different destinations from the same 120 × 120 SVG:

DestinationWidthMultiplierResult
Email signature1802×360×360 PNG, sharp on retina mail clients
App store icon10241×1024×1024 PNG with a solid background
Slack emoji1281×128×128 PNG, transparent

All three come from the same source file with no loss of quality, because the vector is redrawn at each size rather than scaled. That is the whole advantage of keeping your logo as an SVG and rasterising on demand rather than storing a PNG and resizing it.

Frequently asked questions

Why is the text in my SVG missing or in the wrong font?

Browsers block external resources — including web fonts — when rendering an SVG this way, as a security measure. Convert text to outlines or paths in your vector editor before exporting, and the shapes will render perfectly.

Can I convert a PNG back into an SVG here?

No, and be wary of tools that claim to. Going from pixels to vectors requires tracing, which guesses at shapes and rarely produces clean, editable output. If you need a vector, redraw it or go back to the original source file.

What size should I export?

Whatever the largest place it will be displayed needs, multiplied by the pixel density of the screen. For anything on the web, exporting at 2× the CSS size covers retina displays. For print you need considerably more — or better, use the SVG or a PDF directly.

Does the SVG code I paste get sent anywhere?

No. The markup is turned into a blob URL in your browser and rendered by your browser's own SVG engine. It never leaves the page.