The fundamental difference
A PNG is a raster image — a fixed grid of colored pixels. An SVG is a vector image — a set of mathematical instructions (lines, curves, shapes). This single difference drives every trade-off between them.
When SVG wins
- Logos and icons: they scale to any size with zero quality loss and stay razor-sharp on any screen.
- Small file size for simple graphics — a flat icon can be a few hundred bytes.
- Styleable and animatable with CSS/JS since it's just markup.
When PNG wins
- Photographs and complex images: vectors can't efficiently describe millions of subtly different pixels.
- Screenshots and detailed textures.
- Guaranteed identical rendering everywhere — no dependence on how a renderer interprets paths.
A simple rule
If you could draw it with shapes and it needs to scale — use SVG. If it's a photo or richly detailed — use PNG (or JPEG/WebP for photos to save more space). For transparency with photos, PNG; for transparency with flat graphics, SVG.
File size in practice
An SVG's size depends on how complex the drawing is; a PNG's depends on how many pixels it has and how varied they are. A flat two-color logo might be under 2 KB as SVG and 10–30 KB as a PNG large enough for high-density screens. Reverse the picture and the result flips: an SVG produced by auto-tracing a photo can run to megabytes of path data and still look worse than a modest PNG or JPEG. If an SVG is large, open it in a text editor — thousands of tiny paths usually mean it should have been a raster image.
Sharpness on high-density screens
Phones and many laptops draw two or three physical pixels for every CSS pixel. A 100×100 PNG displayed at 100×100 CSS pixels on such a screen gets stretched and looks soft. To keep it sharp you export it at 2× or 3× and let the browser scale it down, which multiplies the file size. An SVG avoids the problem entirely because it is drawn at whatever resolution the screen has.
Security and embedding
SVG is markup, so it can contain scripts and links. That is harmless when you embed your own files with an <img> tag, because browsers do not run scripts inside images loaded that way. It matters when you accept SVG uploads from users and serve them back directly — treat them like HTML and sanitise them, or convert them to PNG on upload.
Where WebP and AVIF fit
PNG is lossless, which makes it ideal for screenshots and UI captures with sharp text, but heavy for photographs. For photos, WebP or AVIF are usually much smaller than PNG at the same visual quality and are supported by all current major browsers — see our WebP guide. For practical ways to cut image weight further, read how to reduce image file size.
Checklist
- Logo, icon, simple illustration, chart: SVG.
- Screenshot, UI capture, image with sharp text and few colors: PNG.
- Photograph: WebP/AVIF, with JPEG as a fallback.
- Need a fixed-size raster version of an SVG (for email, favicons on old platforms, social previews): export a PNG at the exact size needed, using our aspect ratio calculator to keep proportions.
Frequently Asked Questions
Is SVG always smaller than PNG?
For simple graphics like icons, usually yes. For complex or photographic content, SVG becomes huge or impossible — PNG wins there.
Can SVG display photos?
Technically you can embed a raster image inside an SVG, but a true photo can't be efficiently drawn as vectors. Use PNG/JPEG/WebP for photos.
Which is better for a website logo?
SVG — it stays perfectly crisp at every size and on high-density displays, and is typically a tiny file.