SVG vs PNG: which one do you want?
Vector scales, raster snapshots — pick by content, not habit.
Updated · 4 min read
SVG describes shapes with math; PNG stores a grid of pixels. Everything practical follows from that one difference: SVG scales to any size without quality loss and stays tiny for simple art; PNG reproduces exactly what was on screen, pixel for pixel, at one size. Pick by what the image is, and the decision makes itself.
When SVG wins
Logos, icons, illustrations, charts, background patterns — anything built from shapes and text. One file is sharp on a phone, a 4K display, and a printed banner alike; it's typically a fraction of a PNG's size for the same art; CSS can recolor and animate it; and text inside stays selectable and crawlable. The trade-off: complexity scales with detail. An SVG of a thousand paths can dwarf its raster equivalent and cost real rendering time — vector is for art that is structurally simple, however polished it looks.
When PNG wins
Screenshots, photos with transparency, and any effect that lives in pixels — noise grain, painterly texture, complex shadows. PNG is lossless: what you captured is what everyone sees, which is why it's the format for UI documentation. It also carries full alpha transparency, which JPEG can't. The trade-off is resolution dependence: you ship the largest size anyone needs (usually 2× for high-DPI screens), and it costs bytes — photographic content in PNG is dramatically heavier than JPEG or WebP, so PNG photos are for when you genuinely need losslessness or transparency.
The web-specific wrinkles
- Favicons: SVG works in modern browser tabs (and can honor dark mode), but install surfaces and manifests still require PNG at 192/512 — you end up shipping both.
- Social/OG images: platforms rasterize previews and expect PNG or JPEG at 1200×630 — SVG isn't accepted there.
- Email: SVG support across mail clients remains unreliable; PNG is the safe choice.
- Wallpapers and exports at fixed sizes: raster by definition — render the vector art out at target resolution.
Converting between them
Vector→raster is a render: pick the exact pixel dimensions and everything stays sharp — our SVG-to-PNG converter does it in the browser at any size, transparency preserved, nothing uploaded. Raster→vector, by contrast, is tracing — reconstruction by guesswork, and quality shows it. The practical rule: keep the SVG as your source of truth and export PNGs from it, never the other way around.