Understanding vector & raster
Pixels, paths, and the gulf between them.
When SVG is the right answer, when it isn't, and what really happens when you try to convert one into the other.
Two ways to draw a circle.
A raster image stores a colour per pixel — millions of them. A vector image stores instructions: "draw a circle of radius 50 at point (100, 100)". The renderer carries those instructions out at whatever size the screen needs. A vector icon stays crisp at 16 pixels and at 1600; a raster of the same icon either pixelates or blurs the moment it leaves its native size.
raster: pixels vector: instructions
SVG is text, with all that implies.
An SVG file is XML. You can open it in a text editor, search and replace the colours, change a path, or compress it with gzip the way any other text compresses. That makes SVGs versionable, diffable, and friendly to tooling — which is part of why the modern web settled on SVG for icons. Designers can ship from Figma; developers can edit in VS Code; CI can lint the markup.
SVG → PNG: easy.
Going from vector to raster is just rendering — the same operation the screen does anyway. Pick a target resolution, ask the renderer for that many pixels, save the result. The fidelity is exact at the chosen size; you can render the same SVG at 16, 32, 64, 256 and get a clean version of each. Almost every favicon and app-icon pipeline starts with one SVG and renders it many times.
PNG → SVG: lossy in spirit.
The other direction — turning a raster into a vector — is guesswork. The vectoriser scans the pixels and emits paths that approximate the shapes it finds. Logos, line art and flat illustrations vectorise well: the algorithm finds clean contours and the output is small and scalable. Photographs do not vectorise well: every pixel becomes its own region, the path data balloons, and the result looks like a posterised version of the photo. If you want a "scalable" photo, the right answer is a higher-resolution raster, not a vector.
Optimising SVG.
Designer-exported SVG is rarely tight. Editors leave metadata, default attribute values, hidden layers, and generous decimal precision in the path data. SVGO is the canonical optimiser and routinely shrinks files by half without changing the picture. The cheap 80% it does — drop comments, remove default fills, round path coordinates, collapse useless groups — is what most browser-based SVG minifiers replicate. The expensive 20% — merging paths, re-ordering attributes for compression — is rarely worth chasing.
When to pick which.
Logos, icons, illustrations with clean lines, anything you want to display at multiple sizes — SVG. Photographs, screenshots, anything with continuous gradient — PNG or JPG. If you find yourself converting back and forth, you usually have the wrong source: produce the original in the format the destination expects.
Read next