SVG vs PNG: I Converted 7 Real Images to Find Out Which Wins
SVG beats PNG on logos and icons, loses badly on photos. Real file-size measurements from 7 images, plus the file-size trap that makes SVG look better than it is.
If you only need the answer: use SVG for logos, icons, and anything drawn with flat shapes. Use PNG for photographs, screenshots, and anything with soft gradients or fine texture.
The reason is not really about file size, even though that is how the comparison is usually framed. It is about what each format stores. PNG stores a grid of pixels. SVG stores a list of shapes — “draw a circle here, fill it with this colour.” That single difference decides everything else.
To put numbers on it, I ran seven real images through our own tracing engine (imagetracerjs at 8 colours, then SVGO) and measured the actual bytes.
The measurements
| Image | Dimensions | Colours in original | PNG | SVG | SVG gzipped | Size ratio | Paths | Trace time |
|---|---|---|---|---|---|---|---|---|
| Icon (pencil) | 32×32 | 107 | 1.1 KB | 0.6 KB | 0.4 KB | 0.58× | 5 | 16 ms |
| Flat colour block | 1800×1800 | 1 | 15.1 KB | 0.13 KB | 0.13 KB | 0.01× | 1 | 529 ms |
| Marketing banner | 1200×630 | 13,288 | 250.3 KB | 154.4 KB | 43.6 KB | 0.62× | 93 | 589 ms |
| Photo, cut out | 614×407 | 256 | 122.8 KB | 306.6 KB | 83.6 KB | 2.5× | 178 | 654 ms |
| Photo, original | 614×407 | 256 | 154.5 KB | 315.2 KB | 89.4 KB | 2.0× | 193 | 619 ms |
| Photo, large | 1200×801 | 32 | 295.5 KB | 1460.5 KB | 391.2 KB | 4.9× | 779 | 6752 ms |
Ratios below 1.0 mean SVG won. The pattern is clean: the fewer distinct shapes an image contains, the more SVG wins — and the margin is enormous at the extremes. The flat colour block went from 15.1 KB to 131 bytes, because 3.24 million pixels collapse into a single rectangle instruction.
The photographs went the other way, and badly. Tracing a photo means approximating continuous tone with hundreds of hard-edged polygons. The 1200×801 photo produced 779 separate paths, a 1.4 MB file, and took 6.7 seconds — nearly 11× slower than any other image in the set.
The file-size trap
Here is the result I nearly published without checking, and the reason a size table alone will mislead you.
A seventh image — a 1200×716 gradient background with 2,452 distinct colours — traced down to 452 bytes and exactly one path. On the table it looks like the single most spectacular win in the set: 80.4 KB to 0.4 KB, a 182× reduction.
It is not a win. One path means the tracer gave up and painted the entire canvas as one flat shape. Every gradient, every bit of tonal variation, gone. The file is small because the image is no longer there.
So check the path count, not just the byte count. A useful rule from these runs:
- 1–10 paths on a graphic that genuinely has a handful of shapes → real win
- 1–2 paths on an image that visibly has gradients or detail → the content was destroyed
- 100+ paths → you are storing a photograph as geometry; use PNG
The marketing banner is the honest middle case. 13,288 colours compressed into 93 paths at 0.62× the size — smaller, but visibly posterised. Whether that is acceptable depends entirely on whether the banner is flat-design artwork or a photo composite.
Where SVG’s real advantage shows up
File size at one fixed dimension is the least interesting comparison, because it hides SVG’s actual structural advantage: an SVG’s size does not change with display size.
That 0.6 KB pencil icon renders identically at 16px in a toolbar and at 512px on a landing page. To match it, PNG needs a separate export at each size — which is why icon sets conventionally ship icon.png, icon@2x.png, and icon@3x.png, while an SVG ships once. On a page with twenty icons, that difference compounds well past whatever you saved on any single file.
SVG is also text. You can open it, diff it in Git, restyle it with CSS, and recolour it at runtime without re-exporting. A PNG is opaque bytes.
Where PNG is simply correct
PNG is not the legacy option here. It is the right answer whenever the source is pixels:
- Photographs — always, per the measurements above
- Screenshots — UI text traces into hundreds of fragmented paths and comes out fuzzy
- Anything with soft shadows, blur, or noise — these are continuous-tone effects with no shape representation
- Contexts that reject SVG — many email clients, and most social media profile-image uploads
PNG is also lossless, which matters when a screenshot has to stay pixel-accurate — a compression artefact in a code snippet or an error dialog is a real problem.
Decision table
| What you have | Use | Why |
|---|---|---|
| Logo, wordmark, brand icon | SVG | Few shapes, needs to scale, often needs recolouring |
| UI icon set | SVG | One file per icon instead of three PNG exports |
| Flat illustration, chart, diagram | SVG | Shape-based by construction |
| Photograph | PNG (or JPEG/WebP) | 2–5× larger as SVG, and slower |
| Screenshot | PNG | Text and UI detail fragment when traced |
| Image with gradients or soft shadows | PNG | No shape representation exists |
| Logo for an email signature | PNG, exported from the SVG | SVG support in email is unreliable |
Converting between them
Going SVG → PNG is always safe: you are rasterising shapes into pixels at whatever size you pick.
Going PNG → SVG only works when the original was shape-like to begin with. Tracing cannot recover vector data that was never there — it approximates. If your PNG is a logo someone flattened, tracing will get you most of the way back. If it is a photograph, it will not.
If you want to test where your own image falls, our PNG to SVG converter runs entirely in your browser and reports the path count after conversion, so you can apply the check above to your own file before committing to a format.
Frequently asked questions
Is SVG always smaller than PNG?
No. In our tests SVG was 42% smaller for a 32x32 icon and 99% smaller for a flat-colour graphic, but 2.0x to 4.9x larger for photographs. SVG stores drawing instructions, so file size scales with shape complexity, not pixel count.
Can I convert a photo to SVG?
Technically yes, but you should not. Our 1200x801 photo produced a 1.4 MB SVG containing 779 separate paths and took 6.7 seconds to trace. The PNG was 295 KB. You get a bigger, slower file that looks worse.
Does SVG lose quality when scaled up?
No. SVG stores coordinates rather than pixels, so the same file renders sharply at 16px or 1600px. A PNG needs a separate export per size, which is why icon sets ship 3-4 PNG variants but only one SVG.
Which format should I use for a logo?
SVG, with a PNG fallback for contexts that do not accept SVG such as some email clients and social media profile images. Export the PNG from the SVG so both stay in sync.