GRAPHICS FUNDAMENTALS
Vector vs raster, properly explained.
Every image format you’ll ever meet belongs to one of two families: instructions for drawing shapes (vector) or grids of colored pixels (raster). Understand the split once and every format decision – and every conversion result – makes sense.
The zoom thought experiment
Zoom 10× into a raster circle: staircase pixels. Zoom into a vector circle: still a circle – the renderer re-draws the math at every scale. That’s the entire difference.
Why conversion is asymmetric
Vector→raster is trivial (just render). Raster→vector means inferring shapes from pixels – perfect for flat graphics, interpretive for photos.
Try both directions
Render vectors at any size with SVG to PNG; trace pixels into shapes with image to SVG.
Why each family exists
Rasters exist because reality is continuous: a photograph has no “shapes,” just light values, and a pixel grid is the honest way to store it. Vectors exist because designed graphics ARE shapes: a logo is genuinely “a blue rounded rectangle behind a white glyph,” and storing those instructions is more faithful – and vastly more efficient – than storing a million pixels that happen to show them.
The cost structure follows: raster file size scales with resolution (a 2× logo PNG is 4× the bytes), vector size scales with complexity (a logo’s SVG is the same 5 KB at every display size, but a traced photograph balloons into thousands of paths). Each family is cheap at what it’s for and expensive at what it isn’t.
The hybrid reality
Real documents mix families: a PDF holds vector text above raster photos; an SVG can embed a bitmap; a Figma design composites both. The skill isn’t loyalty to one family – it’s noticing which kind of content you’re holding and keeping it in its native family until output forces a conversion. Full conversion guidance: the deep-dive article.
Vector vs raster at a glance
| Vector | Raster | |
|---|---|---|
| Stores | Shapes as math (paths, curves) | A grid of colored pixels |
| Formats | SVG, AI, EPS, PDF (vector parts) | PNG, JPG, WebP, GIF, BMP, TIFF |
| Scaling up | Perfect at any size | Interpolation → blur |
| File size driver | Complexity (number of shapes) | Dimensions (number of pixels) |
| Natural content | Logos, icons, type, diagrams | Photos, scans, paintings |
| Editing | Move/restyle individual shapes | Repaint pixels |
| Created by | Design tools, code | Cameras, scanners, screenshots |
VERDICT
Content decides: drawn → vector, captured → raster. Conversion raster→vector is tracing (inference, great for flat art); vector→raster is rendering (exact, at one chosen size).
FAQ
Frequently asked questions
What’s the difference between vector and raster?
Vectors store drawing instructions (shapes, curves, fills) that render perfectly at any size; rasters store a fixed grid of pixels that blurs when scaled beyond its resolution.
Is SVG vector or raster?
Vector – it’s the web’s standard vector format. PNG, JPG, and WebP are its raster counterparts.
Can a photo be a vector?
Only as a stylized approximation – tracing posterizes continuous tones into discrete shapes. Striking as art, but not a faithful copy. Photos belong in raster formats.
Which should I learn to design in?
Both, by content: vector tools (Figma, Illustrator, Inkscape) for logos/icons/UI, raster tools (Photoshop, Affinity Photo) for photo work. They’re complements, not competitors.
KEEP EXPLORING
Related tools & guides
SVG vs PNG
The definitive comparison, with rules for every case.
Image to SVG
Universal vectorizer for PNG, JPG, WebP, GIF, BMP, and AVIF.
SVG to PNG
Export SVGs as high-resolution PNGs with transparency.
PNG vs JPG vs SVG
The three-question test that picks your format.
Design, convert, and ship SVGs in one place.
The full Free SVG Online studio – catalog, visual editor, and code inspector. No account, no limits, free forever.