How to download an SVG image — or convert it

Watch it — 19 seconds

Vector out, or raster out

tutorial · convert

Watch the suffix on the filename field change from .svg to .png, and the size selector appear beside the segment — the popup only offers a size when a size is meaningful.

What the recording shows

1. The image is an SVG, so it has no fixed size
2. Pick the image you want
3. Take the vector if you will edit it
4. Or switch to PNG if you need a raster
5. Rendered on your machine at 1×, 2× or 4×
6. Same icon, now a pixel-perfect PNG

Choose deliberately

Which one do you actually need?

This is a decision worth making on purpose, because converting is one-way. A vector can always become a raster later; a raster can never become a vector again.

Keep the SVG when the destination is a website or app, a design tool where you will edit the shapes, print of any kind, or anywhere the size is not yet decided. It stays sharp at every size, the file is usually smaller than an equivalent PNG, and you can restyle it with CSS.

Convert to PNG when the destination will not accept an SVG — and quite a lot will not. Most email clients, many older CMS uploaders, some chat and social platforms, and plenty of slide templates either reject SVG or render it unreliably. PowerPoint and Keynote are notoriously inconsistent with it. If you are pasting into a document that has to look identical on somebody else's machine, PNG is the safe answer.

Convert to JPG rarely, and only for a photographic-style illustration. JPG has no transparency, so an icon comes out on a solid background, and its compression puts visible artefacts around the hard edges that icons are made of. For anything with flat colour and sharp edges, PNG is both smaller and cleaner.

Downloading either way

The first two steps are shared; the format segment is where they diverge.

1. Open the popup and find the image. Click the toolbar button and page to the graphic you want. It works whether the image is an <img> source, inline markup or a CSS background.
2. For the vector, just download. Leave the format on SVG, type a filename and press Download current. You get the original markup, namespace repaired.
3. For a raster, switch the format first. Press PNG or JPG in the segment. A size selector appears beside it, and the suffix on the filename field changes to match.
4. Pick a size, then download. 1×, 2× or 4× the vector’s intrinsic size. The conversion runs on your machine, on a canvas, and the result downloads like anything else.

What the size multiplier is a multiple of

It scales the vector's own intrinsic size — its width and height if it declares them, otherwise the extent of its viewBox. So a 24×24 icon at 4× gives you a 96×96 PNG. If the vector declares no size at all, which is common for sprite symbols, it falls back to a sensible square rather than the 300×150 a bare canvas would default to.

In practice: 2× is the right default for anything appearing on a screen, since it covers retina displays. 4× is for print or for a graphic that will be displayed large. 1× is for when you need to match an exact pixel size and know what you are doing.

Transparency

PNG keeps the transparent background; JPG cannot, and will fill it. If you convert an icon to JPG and get an unexpected white or black box behind it, that is not a bug — the format has no way to express transparency. Use PNG.

The conversion happens here, not somewhere else

Worth stating plainly, because "SVG to PNG converter" is otherwise a category of website that requires you to upload your file. Here the vector is drawn to a canvas inside the popup and read back as an image. It is the same sanitised markup that a download would produce, rendered through a sandboxed image element so nothing in it executes. Nothing is uploaded, and the conversion works with your network disconnected.

When conversion fails

One case reliably breaks it: an SVG that embeds a cross-origin raster image inside itself. Drawing that to a canvas taints it, and the browser then refuses to let the pixels be read back — a security rule, not a limitation of the extension. You will get a specific message saying so. The vector itself still downloads fine; it is only the raster conversion that cannot proceed.

Keep SVG for

Web, apps, design tools, print — anywhere the final size is not fixed.

Convert for

Email, slide decks, older CMS uploaders and anywhere SVG is rejected.

Sizes

1×, 2× or 4× the vector’s intrinsic size. 2× suits most screens.

Where

On your machine, on a canvas. Nothing is uploaded to convert it.

Good to know

Frequently asked