What an SVG is, why it scales forever, and when not to use it

Every image on a screen ends up as pixels, but not every image is stored that way. SVG — Scalable Vector Graphics — stores the instructions for drawing shapes, and a renderer produces pixels at whatever size is asked. That is why a logo in SVG is crisp at 16 px and at 4 metres, and why it is the wrong format for a photograph. This guide explains the format and the conversions between it and PNG, which SVG to PNG and PNG to SVG do in the browser.

Vector versus raster

A raster image (PNG, JPEG, WebP) is a grid of coloured pixels; enlarge it and the grid shows. A vector image is geometry — "a circle of radius 40 centred here, filled blue; a path through these points, stroked 2 units wide" — that is rasterised on demand. Text stays text, curves stay curves, and the file size depends on how many shapes there are, not how large they're shown. The trade is that vectors can only describe things made of shapes: a logo, yes; a face, no.

Inside an SVG file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#2563eb"/>
  <path d="M20 80 L50 20 L80 80 Z" fill="none" stroke="#fff" stroke-width="4"/>
</svg>

It is XML (What XML is, how it differs from HTML and JSON, and where it still runs the world), readable and editable by hand: a viewBox defining the coordinate system, then elements — rect, circle, ellipse, line, polygon, path (the general one, a mini-language of move/line/curve commands), text, and groups with transforms. Styling uses attributes or CSS; animation and scripting are possible, which is also why browsers treat SVGs from untrusted sources cautiously (an SVG can contain JavaScript). Because it's text, it compresses well: an .svgz is gzip-compressed SVG.

What belongs in SVG

• Logos, icons, illustrations with flat colour and clean edges — the core case. One file serves every size and density.
• Charts and diagrams — text stays selectable and searchable, lines stay sharp.
• UI graphics — icons that recolour with CSS, inline in the page for a single request.
• Print — a vector logo goes to any size without resampling (What DPI you actually need for printing).

Not photographs, scans or anything with gradients of texture: tracing those produces enormous, ugly files (How image upscaling works: interpolation, Lanczos and 'AI enhance' covers the raster alternatives).

Why SVG files bloat, and fixing it

Design tools export SVGs full of editor metadata, redundant groups, coordinates to eight decimal places, and embedded raster images (a "vector" file that is really a PNG in a wrapper). A 400 KB export can usually become 40 KB with no visible change: the SVG optimizer strips metadata, rounds numbers, merges paths and removes hidden elements. Two things to watch: text converted to outlines is safe on any machine but no longer editable or searchable; and an embedded bitmap means the "SVG" doesn't scale anyway.

Converting to and from pixels

SVG to PNG is rasterisation: choose the output size and the renderer draws it — exact, any size, transparent background preserved. Needed for platforms that don't accept SVG (most social networks, email, app stores, favicons for older browsers). PNG to SVG is tracing: an algorithm finds regions of similar colour and fits curves around them. It works well on logos and flat art from a clean source, and produces posterised blobs from photos — the tracer is honest about which is which. There is no way to recover a true vector from a low-resolution raster; a soft 200-pixel logo traces into wobbly edges, and the fix is finding the original file or redrawing.