What Is SVG? The Format, Explained From Zero

SVG – Scalable Vector Graphics – is the web’s standard format for images made of shapes rather than pixels. It’s also the only image format you can open in a text editor and read. Those two facts explain everything else about it.

An image that’s actually a document

Here is a complete, working SVG file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#0070f3"/>
</svg>

Save that as circle.svg, open it in any browser: a blue circle. The file doesn’t contain a picture of a circle – it contains the instructions for drawing one, written in XML. The browser performs the drawing fresh every time, at whatever size is asked.

Compare a PNG of the same circle: a grid of thousands of colored pixels, no concept of “circle” anywhere inside – just dots that happen to form one. That’s the raster/vector split, and it’s the most important idea in graphics formats (the full explanation).

Why “scalable” is the headline feature

Because the file is instructions, scaling is just arithmetic: render the same circle at radius 40 or 4,000 and it’s mathematically perfect either way. No blur, no pixelation, ever – one logo file serves a favicon and a billboard. Rasters can’t do this; enlarging them invents pixels by interpolation, which is blur (why, exactly).

The same property makes SVGs typically tiny: a logo is a few kilobytes of instructions versus hundreds of kilobytes of retina-resolution pixels.

What’s in the toolbox

The format’s vocabulary, briefly: shapes (<circle>, <rect>, <line>, <polygon>) for geometry; <path> – the power element – for any curve a pen tool can draw (paths decoded); <text> for real, selectable text; <g> for grouping; gradients, patterns, masks, and filters for styling; and the viewBox – the coordinate system that makes scaling work (explained).

Because it’s XML living in the browser, SVG also does things no other image format can:

• Styled by CSS – recolor an icon on hover, theme it for dark mode (how)
• Animated – paths can move, draw themselves, morph
• Scripted – interactive charts and diagrams are usually SVG
• Accessible & searchable – text in SVG is real text

What SVG is for – and not for

Natural fits: logos, icons, illustrations, charts, diagrams, UI graphics – anything drawn. Plus the physical world: cutting machines (Cricut), laser engravers, and plotters consume vector paths directly (SVG for Cricut).

Wrong tool: photographs. A photo has no shapes to describe – converting one to SVG produces a posterized art piece, not a copy. Photos belong in JPG/WebP; the decision guide covers every case.

One quirk worth knowing: because SVG is XML and can technically carry scripts, many platforms (WordPress, email clients) block SVG uploads for security. The graphic isn’t dangerous; the format’s capabilities are, so validators are conservative. PNG export is the universal fallback (SVG to PNG).

Where to start

The fastest way to get SVG is to touch one: paste any SVG into our live code editor and change numbers – move a coordinate, swap a fill, resize the viewBox – watching the render update. Ten minutes of that teaches more than any article. From there: grab ready-made icons, convert your images, or go deeper into how SVG works under the hood.