How to Convert SVG to PNG (Free, at Any Resolution)

SVG vs PNG: What Is the Difference?

An SVG (Scalable Vector Graphic) describes an image as maths: lines, curves and shapes. That means it scales to any size without ever becoming blurry, which is ideal for logos and icons. A PNG is a raster image, a fixed grid of pixels, with support for transparency. PNG is understood almost everywhere, while SVG is not always accepted.

The practical consequence is that the two formats fail in opposite ways. Scale an SVG up and it stays perfect. Scale a PNG up and it turns to mush. But hand an SVG to a system that does not support it and you get nothing at all, while a PNG works in essentially every piece of software ever written. Converting is how you get the reliability of one from the flexibility of the other.

When You Need a PNG Instead of an SVG

• Social platforms and marketplaces. Most reject SVG uploads for profile pictures, cover images and listing photos, so a logo has to be rasterised before it can be used as an avatar.
• Email. Support for SVG in mail clients is patchy at best, and several of the most widely used clients will not render it. An inline PNG is the only reliable option for a logo in a signature or a newsletter.
• Documents and slide decks. Word processors and presentation software often either refuse SVG or import it with the wrong dimensions and shifted text.
• Favicons and app icons. These are specified as fixed pixel sizes, so the export must be exact: 16, 32 and 48 pixels for a favicon set, 180 for an Apple touch icon, and 192 and 512 for a web app manifest.
• App store listings. Store submissions require raster icons at precise dimensions and reject vectors outright.
• Social preview images. The Open Graph card that appears when your link is shared has to be a raster file at 1200 by 630 pixels.
• Anything that must look identical everywhere, regardless of what fonts or renderer the viewer happens to have.

How to Convert SVG to PNG Online

Our free SVG to PNG converter rasterises vector files at the resolution you choose:

1. Open the converter and upload your SVG file.
2. Choose the output resolution or scale. Because SVG is infinitely scalable, you can export a small icon or a large high-resolution PNG from the same file.
3. Transparency is preserved, so areas with no background stay transparent.
4. Download your PNG. Everything runs in your browser with no upload.

Choosing the Right Export Size

The big advantage of starting from SVG is that you pick the exact pixel size you need with no quality loss up to that size. The question is which size, and the answer is almost always tied to screen density rather than to the design.

A screen described as retina packs two or three physical pixels into every CSS pixel. An image exported at exactly its display size therefore gets stretched on those screens and looks soft. The convention is to export at a multiple of the display size and let the browser scale it down, which always looks sharp:

• @1x matches the display size. Fine for older non-retina displays and print previews, and rarely enough on its own today.
• @2x is double the display size and the sensible default. It covers the large majority of phones and laptops.
• @3x is triple, which some high-end phones use. Worth exporting for app icons and anything shown large on a handset.

The obvious worry is file size, and it is smaller than people expect. Exporting the same logo through a browser canvas at increasing sizes produced this:

Doubling the export dimensions quadruples the pixel count but only about doubles the file, because flat vector artwork compresses extremely well and the extra pixels are mostly more of the same colour. Exporting a logo at @2x rather than @1x costs about five kilobytes. That is not a trade worth agonising over.

Beyond that: icons at their display size and again at 2x, logos at the largest size you will show them, and print work at a high resolution, since the SVG scales up without blurring. Compress the result with the Image Compressor if the file matters.

Transparent Backgrounds, and When to Flatten

An SVG with no background rectangle rasterises to a PNG with a genuinely transparent background, which is what you want for a logo that will sit on a coloured header or a photograph.

Transparency is not always the right answer, though. Flatten onto a solid colour when:

• The destination does not support transparency at all, such as any JPG export or an older document format.
• The logo is dark and will land on an unpredictable background. A dark mark on transparency vanishes on a dark theme, and you cannot control which theme a viewer uses.
• You are producing an app icon. Both major app stores expect fully opaque square icons, and transparent regions are commonly rejected or filled with black.
• The image is going into email, where transparent PNGs are inconsistently composited by different clients.

Flattening costs nothing in file size. In our test the same logo came out at 4.65 KB with transparency and 4.55 KB flattened onto white, which is noise. If you are unsure, export both.

Where SVG to PNG Goes Wrong

Rasterisation is usually uneventful, and when it is not, it is almost always one of these four causes.

Fonts that were never converted to paths. This is by far the most common failure. An SVG containing a <text> element does not store the letterforms, only the characters and a font name. The renderer has to find that font, and if it cannot, it substitutes something else. Your carefully spaced wordmark comes out in a default sans-serif at the wrong width. The fix belongs in your design tool: convert text to outlines, sometimes called flatten or create outlines, before exporting the SVG. Once the letters are paths, they render identically everywhere.

External references that never load. When an SVG is rasterised through an image element, which is how browser-based converters work, it runs in a restricted mode: no scripts execute, and external resources are not fetched. An SVG that pulls in a web font by URL, links to an external stylesheet, or embeds a bitmap by remote path will render with those parts missing. Anything the SVG needs has to be inside the file itself.

Fine detail lost at small sizes. Vectors scale down mathematically but pixels are whole numbers, so a hairline stroke eventually falls below one pixel and either disappears or turns grey. A stroke six units wide on a 240 unit wide artboard is 2.5% of the width, which is a solid 6 pixels at 240 px and only 0.8 of a pixel at 32 px. This is why detailed logos look wrong as favicons and why icon sets ship separately drawn small versions rather than shrinking the large one.

Gradients, filters and blend modes. Simple linear and radial gradients rasterise reliably. Filter effects, masks and blend modes are where renderers diverge, and an SVG that looks right in your design tool can come out flat or differently coloured in a browser. Always look at the exported PNG rather than assuming it matches, particularly if the artwork uses effects rather than plain shapes.

Keep the SVG as Your Master

Always keep the original SVG. It is your source of truth and can produce a PNG at any future size. Export PNGs as needed for specific uses rather than discarding the vector, because the conversion only runs in one direction: turning a PNG back into a true vector requires tracing and rarely matches the original. If you need other raster formats, the Image Converter can turn the PNG into JPG or WEBP.

Summary

Convert to PNG when the destination will not take a vector, which covers social platforms, email, documents, favicons and app stores. Export at 2x the display size, since the extra sharpness costs only about double the bytes rather than four times. Keep transparency unless the destination cannot handle it. And before you export anything containing text, convert that text to outlines, because a missing font is the one problem the converter cannot solve for you.