SVG vs PNG: When to Convert (and When Not To)
· Cosyslabs
Convert SVG to PNG when the destination cannot render vectors: social preview images, email clients, app store assets, and older design tools all require raster input. Keep the SVG everywhere the browser accepts it, because it scales to any size from one file. Rasterizing is one-way — the vector data is gone.
Vector and raster, concretely
A PNG is a grid of pixels. A 64×64 icon holds 4,096 color values, and that is all it holds. Ask a browser to draw it at 256×256 and there is no extra information to draw with, so the renderer interpolates — the result is soft edges, or blocky ones if you disable smoothing.
An SVG is XML that describes shapes. The same icon might be a rounded rectangle, a circle and a path:
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
<rect width="120" height="120" rx="24" fill="#5C5BFE"/>
<circle cx="60" cy="48" r="20" fill="#F2A03D"/>
<path d="M24 104c6-22 24-32 36-32s30 10 36 32z" fill="#FBF8F2"/>
</svg>
Nothing there is a pixel. The renderer solves the geometry at whatever size it is asked for, so 16×16 and 1024×1024 come from the same file with the same crispness. That is what "scales losslessly" means — not that the file is compressed losslessly, but that resizing costs nothing because the drawing instructions are resolution-independent.
The comparison
| SVG | PNG | |
|---|---|---|
| Model | Vector shapes described in XML | Fixed grid of pixels |
| Scaling | Any size, no quality loss | Loses quality above native size |
| File size driver | Number and complexity of shapes | Pixel dimensions and color variety |
| Best for | Logos, icons, flat illustration, charts, diagrams | Photographs, screenshots, textures, anything highly detailed |
| Transparency | Anything not drawn is transparent | 8-bit alpha channel per pixel |
| Editable after export | Yes — it is text | No |
| Animatable / styleable with CSS | Yes, when inlined | No |
| Searchable text | Yes, inside <text> | No |
| Email client support | Poor | Universal |
Social preview (og:image) | Not rendered | Required |
File size behaves differently in each
For flat artwork, SVG usually wins by a wide margin, and the margin grows with size. A logo is a few hundred bytes of path data whether it is displayed at 40 pixels or 4,000; the same logo as a PNG needs a separate export per size, and the largest export dominates. SVG is also text, so it gzips or brotlis well — a 6 KB SVG often goes over the wire in under 2 KB. Every CDN compresses image/svg+xml by default and none can compress a PNG further, because PNG is already deflate-compressed internally.
PNG wins as soon as the content stops being flat. A photograph has no shapes to describe. Expressing it as SVG means embedding the raster data inside the SVG anyway, adding roughly 33% of base64 overhead on top of the original bytes and buying nothing. Screenshots, textures, soft gradients with noise and hand-drawn art all fall on the PNG side.
There is also a rendering cost that file size does not show. An SVG with thousands of paths, heavy filters (feGaussianBlur, feTurbulence) or large clipping groups can be slower to paint than a PNG of the same visual result, because the browser solves the geometry on every repaint. If a complex illustration is causing jank, rasterizing it is a legitimate optimization.
Where SVG is not supported
These are the real reasons to convert, and none of them are about quality.
Social and Open Graph previews. Facebook, X, LinkedIn, Slack and Discord do not render SVG in og:image or twitter:image. Point one at an SVG and the card renders blank. Preview images have to be raster, and 1200×630 is the conventional size.
Email. Gmail strips <svg> from HTML mail, and support across Outlook, Yahoo and the mobile clients is inconsistent enough that the practical answer is "no". Email images are PNG, GIF or JPEG.
App stores and platform assets. iOS app icons, Android launcher icons in most pipelines, Windows tiles, Chrome Web Store listings and favicon fallbacks all take raster files at specified pixel sizes.
Documents and older tooling. Many PowerPoint, Word and PDF workflows either refuse SVG or convert it themselves, unpredictably. Some CMSes reject .svg uploads on purpose, because an SVG is a script-capable document.
Anywhere an SVG would be a security question. SVG can carry <script>, inline event handlers and javascript: URLs. Sites that accept user uploads frequently ban it rather than sanitize it. Converting to PNG removes the question entirely — a PNG cannot execute anything.
Transparency works in both, with a catch
PNG stores an 8-bit alpha channel, so every pixel can be fully opaque, fully transparent, or anything between. SVG is transparent wherever nothing is drawn. Converting from one to the other preserves this: an SVG with no background rectangle becomes a PNG with a transparent background.
The catch is downstream. If the PNG will be flattened onto an unknown background — email, a print workflow, a JPEG conversion — transparent pixels become whatever that pipeline defaults to, which is often black. When the destination does not handle alpha, set an explicit background color at conversion time rather than letting something else decide.
Rasterizing is one-way
There is no meaningful SVG-to-PNG round trip. Once the shapes are resolved to pixels, the paths, the text, the layer names and the ability to recolor by editing a fill attribute are all gone. "SVG to PNG converters" are common; genuine PNG-to-SVG converters are auto-tracers, and they guess. They produce a new set of paths that approximate the bitmap, usually with far more nodes than a human would draw and no relationship to the original geometry.
The practical rule: the SVG is the master. Keep it in version control, generate PNGs from it as build artifacts, and never let a PNG become the only copy of a piece of artwork.
Choosing a size when you convert
Pick the pixel size from the destination, then multiply for pixel density.
- 1× — the size the asset is actually displayed at.
- 2× for retina. A 64 px icon on a 2× display needs a 128 px file to look sharp. This is the default worth reaching for.
- 3× only where the platform asks for it — some Android densities and iOS
@3xassets. - Fixed dimensions where a platform specifies them. 1200×630 for Open Graph, 512×512 for a Chrome Web Store icon. Do not scale to those; set them.
Above 2× the returns fall off quickly and the byte cost does not — a 4× export is four times the pixel count of a 2× one.
One detail specific to browser-based conversion: when an SVG is rasterized through an <img> element, external resources it references are not fetched and the page's stylesheets do not apply, so text set in a web font renders in a fallback font. If the artwork contains type, convert the text to paths in your vector editor first.
Try it now
Rasterize any SVG with the SVG to PNG Converter. Paste or upload the markup, set an exact width and height or a scale multiplier, choose a transparent or solid background, and download the PNG — the conversion runs on a canvas in your own tab, so nothing is uploaded and nothing is watermarked. It reads the intrinsic size from the width/height attributes or the viewBox, and refuses to rasterize an SVG carrying a script, an inline event handler, a javascript: URL or a <foreignObject>.
It is worth running the file through the SVG Optimizer first — a smaller SVG is a smaller master file. For inlining a small icon directly into CSS or HTML instead of shipping a separate request, see the Data URI Encoder and What is Base64 Encoding?.
Summary
- SVG describes shapes and resolves them at draw time; PNG stores a fixed pixel grid
- SVG wins on file size and scaling for logos, icons, flat illustration and diagrams
- PNG wins for photographs, screenshots and anything highly detailed
- Convert because the destination requires raster — social previews, email, app stores — not because of quality
- Both support transparency; set an explicit background when the destination will not honor alpha
- Rasterizing is one-way, so keep the SVG as the master and treat PNGs as build output
- Export at 2× for retina; use exact dimensions where the platform specifies them
More tools from Cosyslabs
- PDF Convert All — Convert, merge and compress PDFs, including image-to-PDF workflows where the raster resolution you exported at determines the print quality.
- Unit Convert All — Convert data sizes and lengths (px, pt, mm, in) when working out the pixel dimensions an asset needs at a given physical size and density.
- Instant Template Hub — Printable templates where the same vector-versus-raster tradeoff decides whether a design prints crisply at A4 or not.
- Cosyslabs — The studio behind Dev Tools !, Routine Toolkit, Astrilio, CastFleet, and more.