SVG COMPARISONS ·
Raster vs Vector Graphics, Explained Properly
The fundamental split behind every image format decision – how pixels and paths actually work, why scaling behaves so differently, and how conversion between the two really functions.
Every image file you will ever touch belongs to one of two families. Understand the split once, and format choices, scaling behavior, file sizes, and conversion results all stop being mysterious.
Two ways to describe a picture
Imagine describing a red circle to someone who’ll redraw it.
The raster way: divide the image into a grid and read out every square: “white, white, white, red, red, white…” – a million entries for a 1000×1000 image. This is what PNG, JPG, WebP, GIF, BMP, and TIFF do. Cameras and scanners produce rasters because reality arrives as light samples, not shapes.
The vector way: “a circle, centered at (500,500), radius 300, filled red.” One instruction. This is what SVG does (and the vector parts of PDF, AI, and EPS). Design tools produce vectors because designed graphics are shapes.
Neither is “better” – they describe different kinds of content honestly.
Why scaling separates them
Ask each description for a 10× larger image.
The vector redraws perfectly: the instruction “radius 300” becomes “radius 3000” and the renderer draws a flawless circle at the new size. There was never a resolution to outgrow.
The raster has no new information to offer. The renderer must invent the missing pixels by interpolating between existing ones – which is mathematically guaranteed to produce blur. There is no algorithm that can truly restore detail that was never stored (upscalers hallucinate plausible detail; they don’t recover real detail).
This asymmetry is the entire reason logos and icons should live as vectors: they’re drawn once and displayed at every size from favicon to billboard. Deep dive: why SVG scales better than PNG.
Why file sizes behave oppositely
- Raster size scales with dimensions. Double a PNG’s width and height and you quadruple its pixels – and roughly its bytes. Content barely matters: a blank white 4000×4000 PNG is still huge.
- Vector size scales with complexity. A logo’s SVG is the same 5 KB whether displayed at 16px or 16 feet. But a traced photograph balloons into thousands of paths – complexity is what costs.
Hence the rule: each family is cheap at its natural content and expensive at the other’s. A logo as PNG wastes bytes; a photo as SVG wastes even more.
Conversion: rendering vs tracing
The two directions are completely different operations.
Vector → raster is rendering – just drawing the instructions onto a pixel grid at a chosen size. It’s exact, fast, and resolution is your choice at export time. (SVG to PNG does this at 1×–8×.)
Raster → vector is tracing – inferring what shapes would have produced these pixels. For flat-color graphics the inference is nearly perfect; for photographs it’s an artistic interpretation (posterization), because photos don’t contain shapes to recover. (Image to SVG – and the full mechanics in how PNG to SVG conversion works.)
This asymmetry explains the classic confusion: “I converted my photo to SVG and it looks weird.” It’s not a bad converter – it’s the nature of asking for shapes from something that has none.
The practical decision table
| Content | Family | Formats |
|---|---|---|
| Logo, icon, illustration, chart, type | Vector | SVG (web), PDF (print) |
| Photograph | Raster | JPG/WebP |
| Screenshot, pixel art, scan | Raster | PNG |
| Mixed document | Both | PDF (vector text + raster images) |
And the one-question shortcut: could a designer redraw it with shapes? Vector. Is it captured light? Raster.
Where the families meet
Real projects mix them constantly – an SVG can embed a bitmap, a PDF layers vector text over raster photos, a Figma file composites both. The skill isn’t choosing a side; it’s keeping each piece of content in its native family until output forces a conversion, then converting in the right direction with the right tool. The format comparison hub covers every specific matchup.