How to Convert SVG to PNG (And When You Should)

SVG is perfect on the web, but plenty of places won't take it: social platforms, email clients and many print services all want a raster image instead. Converting SVG to PNG takes a minute, and if you pick the right export size it will be exactly as sharp as the original. One caveat: PNG doesn't go back to SVG cleanly, so keep your original file. If you already know what you need, jump straight to the SVG to PNG converter; otherwise this guide covers when to convert, what pixel size to export at for web, retina and print, and how to keep your transparent background intact.

SVG vs PNG in one minute

SVG is a vector format: a set of drawing instructions (paths and shapes) that renders crisply at any size, 16px or 16,000px, and stays a small file for logos, icons and geometric art. It's editable in a text editor and even supports animation.

PNG is a raster format: a fixed grid of pixels. Sharp at its native size, blurry when upscaled. It excels at gradients, shadows and photographic detail, and it renders predictably everywhere.

The main thing people get wrong: converting SVG to PNG doesn't "lose" quality at export time. The pixels are generated from the vector math, so a properly sized export is pixel-perfect. The real cost is that the PNG is locked to one resolution forever.

Rule of thumb: keep SVG as your source of truth, and export a PNG whenever a destination demands one.

When you should convert SVG to PNG

You convert when the destination can't handle SVG, not because PNG is somehow better. In practice, these situations come up constantly:

• Social media. Instagram, X/Twitter, Facebook and LinkedIn don't accept SVG uploads. Convert to PNG or JPG before posting.
• Email. Most email clients have limited or no SVG support. Use PNG for newsletter images and email signatures.
• Favicons and app icons. Modern browsers accept SVG favicons, but Apple touch icons and older browsers still need PNG versions. Our guide on how to create a favicon from a logo walks through that end to end.
• Print services. Many photo-product printers (stickers, business cards, merchandise) accept PNG but not SVG.
• Legacy software and some CMSs. Older tools and document workflows may render SVG incorrectly or not at all; a PNG is the safe bet. Some versions of Office and older document workflows handle SVG inconsistently.

And when not to convert: on websites. There, SVG stays sharp at every size, can be styled and animated with CSS, and often weighs less than a large PNG. If your only destination is your own site, skip the conversion entirely.

Source for the platform-support points above: ConverterUp.

How to convert SVG to PNG in Tool Cloud (step by step)

1. Open the SVG to PNG converter page.
2. Upload your SVG. You can upload several files at once if you're converting a set.
3. Convert and download the PNG. To get an exact pixel size, set the width and height fields (or use the resolution option, which runs from 72 to 1200) before converting; there's also a maintain-aspect-ratio toggle. Uploaded files are deleted automatically after processing.

Because the converter takes an explicit width and height, you don't need to touch your SVG's viewport or resize anything in a design editor: just decide the output size (next section) and type it in.

Convert SVG to PNG without a web tool

You don't need an online converter for this. Every design tool exports PNG directly:

• Figma, Illustrator, Affinity, Inkscape: use the export dialog, choose PNG, and set the export size in pixels (this is where you apply the scale factor below). This is the best option if you have the source file, because you can convert text to outlines and remove unwanted background rectangles in the same pass.
• From a website: right-click the SVG (or the SVG file itself once opened in a browser tab) and use "Save image as" — you'll usually get the SVG, so export or convert from there.
• Last resort, no tools at all: open the SVG in a browser, zoom in as far as it stays crisp, and take a screenshot. You'll lose transparency unless you use a capture tool that supports it, and the edges won't be as clean as a real export. Fine for a quick mockup, not for production.

What pixel size should you export? (Scale-factor guide)

Pick your export size by multiplying the SVG's viewport dimensions by a scale factor: an SVG with a 200×200 viewport exported at 1x gives a 200×200px PNG, at 2x gives 400×400px, and at 3x gives 600×600px. In the converter, that same math just becomes the width and height you type in. Then match the scale to the destination:

For everyday web icons and logos, 2x is the practical sweet spot: one file at 2x covers both standard and retina screens, since it downscales gracefully on standard displays. If a spec literally calls for one fixed size, 1x of the matching viewport is the answer. For print, go 3x–4x; that gives enough pixels for small printed items like stickers or business cards, while large prints need proportionally more.

There's no quality penalty for exporting larger than you need, because the pixels come from vector math, not from stretching. The only downside is file size, which grows with the square of the scale: a 4x PNG is sixteen times the pixels of a 1x. So pick your size based on where the file is going, not "bigger is safer."

Keeping transparency (and when to use a white background)

PNG's alpha channel preserves SVG transparency natively, which is exactly what you want for logos and icons that need to sit on different backgrounds. Export at any scale and the transparency carries over untouched.

There's a classic gotcha here, though. An SVG can look like it has a white background in a browser when you're actually seeing the page behind it. Before converting, test it on a dark background. If the shape still reads correctly, you have real transparency; if you see a white box, your SVG has a background rectangle baked in.

When to fill a background instead: some platforms and older tools don't handle transparency well. For those uploads, a solid background (usually white) is the safer choice.

And if your SVG does contain a background rectangle you don't want, remove it in your design file before exporting. That's a design-file fix, not a conversion setting.

Gotchas that break SVG exports

Most SVG-to-PNG conversions go fine. The ones that don't usually fail in one of these three ways:

• Fonts. SVG text is rendered using fonts available to the rendering machine, per the SVG 1.1 spec. If the rasterizer doesn't have your font, you get text substitution or broken layout. The fix is simple: convert text to paths/outlines in your design tool before exporting the SVG. This is the single most common cause of "why does my logo look wrong in the PNG?"
• Cropping. Some converters clip output to the SVG's declared viewport, and SVG content can extend beyond it, so anything outside may be lost. Check that nothing important sits outside the canvas before you export.
• Fancy filters. Rendering of SVG filters and gradients can vary between renderers. Server-side rasterizers handle them differently than browsers; for example, ImageMagick delegates to librsvg when available and falls back to a weaker internal renderer otherwise. Gradients themselves rasterize cleanly at any scale (MDN), but complex filter chains can look different from your browser preview. If that happens, simplify the effects or pre-rasterize them in your design tool.

Bulk-converting an icon set

Icon sets live or die on consistency. A mix of sizes, or some icons with transparent backgrounds and others with white, looks broken in a product or app UI, even when each individual file is fine.

So decide two things up front:

1. One scale. 2x for web is the usual choice.
2. One background policy. Usually transparent, unless the destination can't handle alpha.

Then apply both to every file. The practical way: upload several SVGs at once into the converter and export the whole batch at the same width and height, rather than converting files one by one and drifting.

If you need several sizes from one source SVG afterwards (16, 32 and 512px, say), re-export from the SVG at each size, or run the PNG through an image resizer — don't upscale a small PNG, which just blurs it.

Common questions, answered in one place

Will converting SVG to PNG lose quality?

No, not if you export at the right size. The PNG's pixels are generated from the vector math, so the result is exactly as sharp as the SVG at that resolution. The one real loss is flexibility: the PNG is fixed at one pixel size forever.

Can I convert PNG back to SVG?

Not cleanly. Tracing approximates the pixel grid rather than restoring the original paths, so it's never lossless — flat-colour logos trace acceptably, while photos and gradients trace poorly. Keep your original SVG as the master file and you won't need tracing in the first place.

What background should I use?

Transparent for anything that sits on varying backgrounds, which PNG's alpha channel handles natively. Only fill a solid background (usually white) when the destination doesn't support transparency.