What Is SVG and When Should You Use It Instead of a Raster Image?

Every image discussed elsewhere on this site — JPEG, PNG, WebP — is a raster format, built from a fixed grid of pixels. SVG works on a completely different principle, and understanding that difference explains why it's the right choice for some content and a poor fit for others.

Vector vs raster: the fundamental difference

A raster image is a fixed grid of individually colored pixels — enlarge it, and you're stretching or interpolating that fixed pixel data, which is why raster images lose quality when scaled up. A vector image, which is what SVG is, stores an image as mathematical descriptions of shapes — points, curves, lines — rather than pixels. A vector shape can be scaled to any size, tiny or enormous, and redrawn fresh from the same mathematical description every time, with no pixelation or blurring at any size.

What SVG is specifically

SVG (Scalable Vector Graphics) is a vector image format built on XML, a text-based markup language, which means an SVG file is actually readable and editable as plain text, not just as a visual image — a genuinely distinctive property compared to raster formats. This also means SVG files can be extremely small for simple graphics, since a shape is described mathematically rather than pixel by pixel.

When SVG is the better choice

• Logos, especially ones used at many different sizes across a site (favicon, header, print materials) — one SVG file scales perfectly to all of them.
• Icons and simple illustrations with clean lines and flat colors.
• Charts, diagrams, and data visualizations that benefit from staying crisp at any zoom level.
• Any graphic that needs to be animated or interactively manipulated via code, since SVG shapes remain accessible as editable elements, not fixed pixels.

When SVG is a poor fit

SVG is fundamentally unsuited to photographs and other complex, continuous-tone imagery — describing a photograph's countless subtle color variations as mathematical shapes would produce an enormous, impractical file, far larger than a well-compressed JPEG of the same photo. For photographic content, a raster format (JPEG or WebP) remains the appropriate choice; SVG's advantages are specific to graphics, illustrations, and geometric content, not photography.

Converting between vector and raster

A vector image can always be converted to a raster format ("rasterizing" it) by rendering its shapes into a fixed pixel grid at a chosen size, a straightforward, lossless-in-concept process since the vector data is simply being drawn out. The reverse — converting a raster photo into genuine vector shapes — is much harder and generally can't be done automatically with full accuracy for complex images, since it requires inferring clean mathematical shapes from what's actually just a grid of independent colored pixels with no inherent shape information attached.