PNG vs SVG: when to use which
Use SVG for icons, logos, illustrations and anything that must scale or change color; use PNG for photos, screenshots and complex gradients. SVG is vector — it stays sharp at any size, is usually smaller, and can be recolored with CSS. PNG is raster and blurs once you exceed its native pixels.
Key differences
| Aspect | PNG | SVG |
|---|---|---|
| Nature | Raster — stores every pixel | Vector — stores drawing instructions |
| When scaled up | Blurs and shows jagged edges | Stays crisp |
| File size | Grows with the square of dimensions | Independent of display size, usually tiny |
| Recolorable with CSS | No | Yes — set fill / stroke directly |
| Animation and interaction | No | Yes — CSS or JS |
| Best content | Photos, screenshots, complex lighting | Icons, logos, charts, illustrations |
| Browser support | Universal | Universal |
PNG
PNG records color per pixel, so it reproduces photographs, gradients and shadows exactly, with lossless compression and a full alpha channel. But size grows with the square of the dimensions: scaling a 200x200 image to 400x400 quadruples the pixels and roughly quadruples the file, and beyond native resolution it inevitably looks soft.
SVG
SVG describes how to draw something using XML — it is literally text. It stays razor sharp at ten times the size, usually weighs a few kilobytes, and you can recolor it, animate it and react to hover with plain CSS. Icon systems (the modern replacement for icon fonts), logos and data charts should almost all be SVG. The limit: it is bad at photo-grade imagery, and forcing that kind of content into vector makes the file explode.
How to choose
- Icons, logos, charts, simple illustrations → SVG
- Photos, screenshots, images with complex lighting → PNG
- Icons that follow the theme color → SVG (use currentColor)
Related tools
FAQ
Can I use SVG in an img tag
Yes, <img src="a.svg"> works fine. But an SVG loaded that way cannot be recolored by the page CSS — inline it into the HTML or use an <svg> element when you need color control.
Are there security risks with SVG
Yes. SVG is XML and can carry embedded script. Never inline an SVG from an untrusted source without sanitising it first.
Why did my PNG get bigger after converting to SVG
That is bitmap tracing — turning pixels into vector paths. Photographic content is not meant for vector; the path count explodes and the result far exceeds the original file.