SVG vs PNG vs WebP, measured on a real logo and a real photo

Every "which image format" answer says the same thing: SVG for logos, WebP for photos, PNG for transparency. It is right, but nobody shows the numbers. So I measured two real images.

TL;DR: SVG for shapes, WebP for anything with a photo in it, PNG only when the pixels must stay exact and the file has to open everywhere.

The test

1. A flat bird logo, one path, 716 bytes as SVG. Rendered in headless Chrome at 128, 512 and 1024 px, then saved as PNG and WebP.
2. An app screen with an aerial photo map, 739 x 1600, saved as PNG, lossless WebP and WebP at quality 80.

Pillow 12.3 did the encoding: PNG with optimize=True, WebP with method=6.

from PIL import Image
im = Image.open("map.png").convert("RGB")
im.save("map.webp", quality=80, method=6)
im.save("map-lossless.webp", lossless=True, method=6)

What the numbers say

SVG does not grow. It is 716 bytes at every size, because the browser draws it fresh. The pixel formats grow with the export size. And a small PNG blown up shows its pixels:

Lossy WebP is pointless on flat art. On the logo, quality 80 was slightly bigger than lossless. Two flat colours leave nothing to throw away.

On photos, lossy WebP wins by a lot. The screen went from 1,396,101 bytes to 139,446, about ten times smaller. The mean pixel difference was 2 levels out of 255.

Lossless WebP still beats PNG: 37 percent smaller on the photo, 69 percent on the logo. PNG earns its place only when a file leaves the web, for example a screenshot someone will edit in a tool that does not read WebP.

The rule

If your logo only exists as a PNG, trace it back to vector paths first, then tidy the trace with SVGO. The photo in my test is from an app screen a Claude model designed through the SVG Lab MCP, which draws logos, icons and illustrations through SVG Lab's Design Engine as real vector shapes you can export as SVG.

Full write-up with the FAQ: https://svglab.app/blog/svg-vs-png-vs-webp