SVG vs PNG — when to use vector and when to use raster
Pick between SVG and PNG for logos, icons, diagrams, and photos using four axes: resolution dependence, file size, editability, and browser support. Includes the trade-offs when converting between them.
Vector or raster — four axes that decide
SVG and PNG live in different worlds. SVG describes shapes (paths, rectangles, circles, text) in XML — it is a vector format. PNG stores a grid of pixels — it is a raster format. The two can look identical on screen, but everything about their behaviour downstream is different. Four axes drive the choice.
Resolution independence is the headline difference. SVG holds coordinates and shapes, so it stays crisp on a 4K display, on an 8K display, and at 400 % zoom. PNG holds the pixels themselves, so any upscale shows jagged edges or softness. File size flips depending on content. A simple logo is a few kilobytes as SVG and tens to hundreds as PNG; a photo turned into SVG balloons into megabytes of paths and runs slower than the PNG it replaced. Editability clearly favours SVG — colours, dimensions, and shapes can be rewritten in a text editor, while PNG requires a raster editor like Photoshop or GIMP. Compatibility clearly favours PNG — Word, PowerPoint, older operating systems, and print pipelines all accept PNG without thinking, while SVG support is still uneven.
Side-by-side comparison
| Property | SVG | PNG |
|---|---|---|
| Structure | XML text (vector) | Binary pixels (raster) |
| Upscaling | Sharp at any zoom | Jagged / blurry when upscaled |
| Transparency | Yes (alpha + masks) | Yes (8-bit alpha) |
| Animation | Yes (SMIL / CSS / JS) | No (APNG extension only) |
| Editing | Plain text editor works | Photoshop / GIMP required |
| Logo file size | Often 2-15 KB | Often 20-150 KB |
| Photo file size | Unsuitable (multi-MB) | Hundreds of KB to a few MB |
| Colour range | Unlimited | Unlimited (24-bit + alpha) |
| Compatibility | Modern browsers / Illustrator / Figma | Nearly everywhere (Word, print, legacy OSes) |
| Year introduced | 2001 (W3C recommendation) | 1996 |
| Photoshop native support | Limited (version-dependent) | First-class |
A Twitter-style single-path logo is around 1.5 KB as SVG and 8-15 KB as a 256x256 PNG. Photographs and rich gradients reverse the relationship — try to trace them into SVG and the path count explodes into the multi-megabyte range, defeating the point.
Use case → recommended format
Logos, icons, UI assets: SVG. One file covers Retina, 4K, and high-DPI print, and CSS can recolour the artwork at runtime (handy for dark mode). The currentColor trick makes icons inherit text colour for free.
Photos, screenshots, complex imagery: PNG. Raster is the right tool for content that does not have clean edges. If transparency is not needed, JPG is smaller; but for UI screenshots where text edges matter, PNG keeps them legible.
Web diagrams, charts, graphs: SVG. D3.js and Chart.js emit SVG, which means hover states and animations can be added in CSS or JavaScript later. PNG charts are frozen at export time.
Office documents and print submission: PNG. Word and PowerPoint SVG support is missing or buggy in older versions, and print workflows usually demand PNG, JPG, or TIFF.
Retina-ready UI imagery: SVG is the safer bet. The PNG alternative is shipping @2x and @3x variants, which is more files to maintain.
Converting in the browser, with the gotchas
To take a raster image and reconstruct it as vector (for example, recreating a logo you only have as PNG), image-to-svg traces the bitmap in-browser. Tracing is not a silver bullet: photographs and subtle gradients produce tens of thousands of paths, ballooning the file and destroying editability. Tracing works for logos, icons, and diagrams — content with few colours and clear outlines.
Going the other direction, when you already have SVG and need a PNG, image-convert rasterises the SVG at a resolution you choose. When an SVG is unexpectedly large, slow to load, or messy to paste, svg-optimize drops unused attributes, hidden metadata, and editor-injected comments, typically shaving 30-70 % off the file.
One security note: SVG can carry <script> tags and onload attributes, so embedding an SVG from an untrusted source can become an XSS vector. Loading via <img src="...svg"> blocks script execution, but <object> and inline SVG do not. svg-optimize can strip those dangerous attributes as a final pass before distribution. The source is on GitHub, and DevTools’ Network tab will confirm that none of these conversions leave your device.