What is SVG?

How SVG Works

SVG (Scalable Vector Graphics) is fundamentally different from formats like PNG and JPG. Those are raster formats: they store an image as a grid of pixels, so enlarging them makes the pixels visible and the image blurry. SVG is a vector format: instead of pixels, it stores a set of mathematical instructions describing shapes, lines, curves, and text. Because the image is drawn from those instructions at display time, it can be scaled to any size, from a tiny favicon to a billboard, and stay perfectly crisp.

An SVG file is actually text, specifically an XML document. Open one in a text editor and you see human-readable tags like <path>, <rect>, <circle>, and <text>, each with coordinates and styling. These shapes are positioned inside a declared viewBox, a coordinate system that lets the whole drawing scale proportionally. Because it is plain text, an SVG can be edited by hand, generated by code, searched, and compressed well, and it integrates directly into web pages where browsers render it natively.

This text-based, mathematical nature gives SVG abilities raster images cannot match. SVG graphics can be styled with CSS and animated with JavaScript, made interactive, and recolored on the fly, all without exporting a new file. A single SVG icon can change color on hover, animate, and remain razor-sharp on any screen resolution, which is why SVG dominates modern web icons, logos, charts, and illustrations.

What SVG Is Good For, and What It Is Not

SVG excels at geometric, designed graphics: logos, icons, line illustrations, charts and data visualizations, maps, and any artwork made of distinct shapes and text. For these, SVG is usually smaller than a raster equivalent, infinitely scalable, and editable. It is the right default for a company logo or an interface icon set.

What SVG cannot do is represent photographs. A photo is a complex field of millions of subtly varying pixels with no clean geometric structure, and describing that as vector shapes would require an enormous, inefficient file that still looked wrong. Photographs belong in raster formats like JPG or WebP. So the dividing line is simple: designed graphics and text go in SVG; photographic content goes in a raster format.

Security and Practical Notes

Because an SVG is code that browsers execute, it carries a security consideration that image formats normally do not: an SVG can contain embedded JavaScript, which means a malicious SVG could in principle run a script. For this reason, many platforms sanitize or restrict uploaded SVGs, and you should only display SVGs from sources you trust. When you control the files, this is a non-issue; it mainly matters for sites accepting user-uploaded SVGs.

SVGs are often delivered gzipped (sometimes with the .svgz extension) to reduce their text size over the network. And because SVG is resolution-independent, a single file replaces the multiple sizes a raster icon would need for different screen densities, simplifying responsive design.

Converting To and From SVG

An important practical point: converting to SVG only makes sense when the source is already vector-like. You cannot meaningfully turn a photograph into a true SVG; automated "tracing" of a photo produces a bloated, blurry approximation, not a clean vector. Converting from SVG to a raster format like PNG, on the other hand, is straightforward and common, done whenever a destination cannot render vector markup, such as some email clients or older software. The usual workflow is to keep the master artwork as SVG and export PNGs at specific sizes when a raster copy is required.