When to Use SVG Instead of PNG (And When Not To)

“Should this be an SVG or a PNG?” comes up dozens of times in any web project. The good news: about 90% of cases have a clear answer, and the remaining 10% have a simple test.

Use SVG when…

The graphic is drawn, not photographed. Logos, icons, illustrations, charts, diagrams, decorative shapes – anything a designer made from paths. SVG renders it sharper, smaller, and at every screen density from one file.

It needs to scale. Responsive layouts, retina screens, print – anywhere the display size isn’t fixed and known. Vectors re-render perfectly at any size; rasters don’t.

You want to style or animate it. Inline SVG responds to CSS: recolor icons with currentColor, theme illustrations per dark/light mode, animate paths. A PNG is a sealed box; an SVG is part of your document. (Patterns and techniques: how to use SVG in HTML.)

File size matters. A typical logo: 3–15 KB as SVG vs 30–200 KB as a retina-ready PNG. Across an icon set, the difference is real bandwidth.

It’s going to a cutting machine. Cricut, Silhouette, and laser cutters cut paths. SVG isn’t just better here – it’s the native format. (SVG for Cricut.)

Use PNG when…

The content is pixels. Photographs (though JPG/WebP usually fit better), screenshots, scans, pixel art. Vectors can only posterize these – see raster vs vector for why.

The platform blocks SVG. This is the big one in practice. Because SVG is scriptable XML, many platforms reject it for security: WordPress (by default), most email clients, social media uploads, many marketplaces and CMSs. No amount of format superiority helps if the upload form says no – export a PNG at 2× and move on.

Pixel-exact control matters. Platform asset pipelines (app stores, ad networks) often specify exact pixel dimensions. Render your vector to those specs once and submit the PNG.

The vector would be heavier. Rare but real: auto-traced photos and mega-complex illustrations can carry tens of thousands of paths. When an optimized SVG passes ~100 KB and does nothing interactive, a raster is the better engineering call.

The gray zone: complex illustrations

Detailed illustrations sit on the line. The test is concrete:

1. Run the SVG through an optimizer and check its weight.
2. Under ~50 KB → ship the SVG (sharpness + theming win).
3. Over ~100 KB and purely decorative → render to WebP at 2× and compare bytes.
4. In between → either is defensible; prefer SVG if you may ever restyle it.

Common mistakes, both directions

• Logo as PNG – the most common branding error on the web: blurry on retina, white-boxed on dark themes, re-exported for every size. Fix permanently by tracing it back to vector.
• Photo as SVG – produces a posterized art piece, usually enormous. Photos are raster; let them be.
• Screenshot as JPG, icon as JPG – wrong on both counts (smeared text, no transparency) but adjacent to this debate; PNG serves both.
• Fighting an upload validator – if a platform blocks SVG, that’s policy, not a bug to work around. Convert and ship.

The five-second test

Drawn → SVG. Captured → raster. Platform says no → PNG at 2×.

That covers nearly everything. For the three-way decision including JPG, see PNG vs JPG vs SVG; for the full format-by-format matchups, the comparison hub has them all.