Every other format in this guide stores images as a grid of pixels — a raster image, resolution baked in at export time. SVG works differently at a fundamental level: it’s an XML text file that describes shapes, paths, curves and text with coordinates and mathematics. The browser reads those instructions and draws the image fresh at whatever size is needed. There are no pixels to stretch because there are no pixels to begin with.

01Where SVG wins, clearly

For logos, icons, UI illustrations, charts and typographic treatments, SVG is essentially unbeatable — and the reasons stack up fast:

StrengthWhat it means
Infinite scaleOne file serves a 16×16 favicon and a 3000px banner, sharp at every size.
Tiny for flat artA logo that’s 40–80 KB as PNG can be a few hundred bytes as SVG.
It’s codeStyle and animate it with CSS/JS — recolour on hover, animate a stroke, no framework.
Accessible & indexableInline SVG carries <title>/<desc>; its text stays real text.

02Where SVG loses, just as clearly

SVG is a geometry engine. It has no answer for photographs, textures, or any image that is fundamentally a record of captured light — describing a portrait as vector paths is a party trick that produces an enormous, slow file. For photographs use JPEG or AVIF; for pixel-detailed screenshots, PNG or WebP. Highly detailed illustrations with hundreds of thousands of nodes are the other case where a compressed raster wins.

03Practical tips for shipping SVG

Raw exports carry dead weight: editor metadata, redundant groups, default attributes. Run every SVG through SVGO before publishing — it routinely cuts 30–60% with no visual change. For icons, consider an SVG sprite: one file of <symbol> elements referenced with <use>.

# rasterise an SVG at the size you need, then scale DOWN
magick -density 144 input.svg output.png

Embedding inline for CSS control? Drop the root width/height and rely on viewBox. Using it as an <img src>? Keep them, to prevent layout shift.