Raster vs vector: how SVG actually works
A PNG remembers what colour every pixel was. An SVG remembers how to draw the picture. Almost every conversion decision follows from that one difference.
Two ways to store a picture
A raster image (PNG, JPG, WebP, GIF) is a grid. A 512×512 PNG holds 262,144 pixels, each with a red, green, blue and alpha value. Scale it up and the software has to invent pixels that were never stored, which is where blur and jagged edges come from.
A vector image stores geometry instead: “start at this point, curve to that point, fill the result purple.” The browser recalculates the shape at whatever size it is displayed, so a vector logo is as sharp on a 4K monitor as on a favicon. SVG, the W3C’s Scalable Vector Graphics format, writes that geometry as plain XML text you can open in any code editor.
What that means for file size
Vector file size depends on how complicated the drawing is, not how big it is displayed. A simple icon may be 400 bytes of SVG whether it is shown at 16 px or 1,600 px. A PNG of the same icon grows with the square of its dimensions. That is why icons, logos and diagrams belong in SVG, while a photograph, where every pixel differs from its neighbour, is far smaller as a JPG, WebP or AVIF.
The concept that makes Bézier curves click for most people is seeing the construction move rather than reading the formula. ahaboo takes the same idea further, letting you manipulate a model to understand it instead of memorizing an equation.
Converting between them
Vector to raster is exact: the renderer just runs the drawing instructions at a chosen size. Use SVG to PNG for transparency, SVG to JPG for maximum compatibility and SVG to WebP for the smallest web files.
Raster to vector is reconstruction. A tracer reduces the image to a small palette, outlines every colour region and fits curves to those outlines. The image to SVG page lets you step through each stage on a real 20×20 image.
Quick reference
| Format | Type | Transparency | Best for |
|---|---|---|---|
| SVG | Vector | Yes | Logos, icons, diagrams, UI |
| Vector (can hold raster) | Yes | Print, documents | |
| PNG | Raster, lossless | Yes | Screenshots, flat graphics |
| JPG | Raster, lossy | No | Photos, maximum compatibility |
| WebP | Raster, both | Yes | Web images of all kinds |
| ICO | Raster container | Yes | favicon.ico, Windows icons |
Questions
Is SVG a vector or raster format?
SVG is a vector format: an XML text file that describes shapes with coordinates. It can embed raster images inside it, but the format itself is vector.
Are PNG and JPG vector files?
No. PNG, JPG, WebP, GIF and BMP are raster formats that store a colour for every pixel. Renaming a PNG to .svg does not make it a vector; it has to be traced.
When should I not use SVG?
For photographs and anything with continuous tone. Describing a photo as shapes produces enormous files that still look worse than a JPG, WebP or AVIF.
Can I print an SVG at any size?
Yes, as long as it contains only vector shapes. Embedded raster images inside the SVG still have a fixed resolution.