# SVG
## What it is
SVG, short for Scalable Vector Graphics, is a language for describing
two-dimensional graphics as shapes rather than as a grid of pixels. The file
says what to draw: a circle here, a line from this point to that one, this
outline filled in blue. The browser works out the pixels at whatever size the
drawing is shown, and that is where the scaling comes from: there are no pixels
in the file to stretch.
The W3C defines it. Its latest version, SVG 2, is a Candidate Recommendation
Snapshot dated 6 October 2026, expected to become a Recommendation no earlier
than 1 December 2026, and it builds on SVG 1.1 Second Edition. As the
specification sums itself up, SVG is built on XML, can combine vector shapes
with raster images, and takes styles, script and animation. A drawing can stand
alone, sit inside an HTML page or be embedded in another XML language.
The vocabulary is small. Six basic shapes, `rect`, `circle`, `ellipse`, `line`,
`polyline` and `polygon`, cover the simple cases, and a `path` draws anything
else from a short string of commands. `text` places real, selectable text, a
group (`g`) lets several shapes share a style or a transform, and a gradient or
a pattern can paint a shape in place of a single colour. Filter effects, a
chapter of SVG 1.1, now have a specification of their own. Every drawing has a
coordinate system with its origin at the top left, x growing to the right and y
growing downwards.
The specification defines SVG in terms of a document object model rather than
one particular file format. A drawing can be a file of its own, served as
`image/svg+xml` with the extension `.svg`, or it can be an `svg` element written
straight into an HTML page. A standalone file must declare the SVG namespace; in
HTML the parser puts the elements in the right namespace by itself, so no
`xmlns` attribute is needed.
SVG is not a raster format like PNG or JPEG, which store a colour for every
pixel and go soft when enlarged. A photograph belongs in one of those. SVG suits
what was drawn: icons, logos, diagrams, charts, maps and lettering. It can also
carry a raster image inside it, which is what the specification means by mixed
graphics.
## Why it matters
One file serves every screen. An icon drawn once is sharp on an old monitor, on
a phone with several device pixels to every CSS pixel and on paper, with no
separate exports at each size to keep in step. Simple artwork also makes a small
file, because it describes a few outlines instead of storing thousands of
pixels, and the specification registers `.svgz` for an SVG file compressed with
gzip.
Because the markup is text, it fits the way a team already works. A designer's
export can be read in a code review and compared line by line in version
control, and a script can generate a drawing from data, which is how many charts
are made. Written inline in a page, the drawing's elements are part of the DOM:
CSS styles them, a script can change them, and they follow hover, focus and the
reader's colour scheme like everything else on the page.
It also carries meaning that a bitmap cannot. Text in an SVG stays text, and the
specification requires a browser to let the reader search for it and select it.
A `title` element gives a drawing, or one part of it, an accessible name, and
SVG 2 gives the `svg` element the implicit ARIA role `graphics-document`. A
chart drawn in SVG can have labelled parts that a screen reader reaches one by
one; the same chart exported as a PNG is a single picture with a single text
alternative.
## What it looks like in practice
Here is a small arrow in a rounded frame, written inline in an HTML page:
```html
```
`viewBox` gives the drawing its own coordinates: four numbers for the left edge,
the top edge, the width and the height of the area to show, here 120 units wide
and 40 high. `width` and `height` ask for 240 by 80 CSS pixels, so each unit is
drawn two pixels wide. Change those two numbers to 60 and 20 and the whole
drawing shrinks with them, line widths included, because nothing inside it is
measured in pixels.
The group sets the paint once. Fill, stroke and stroke width are inherited, so
the frame and the arrow both take them from the `g`. The `rect` draws the frame,
its corners rounded by `rx`. The path reads like instructions to a pen:
`M 20 20` moves to a point without drawing, `H 92` draws a horizontal line to x
= 92, the second `M` lifts the pen and puts it down at the top of the arrowhead,
and the two `L` commands draw its two strokes. Upper-case commands take absolute
coordinates and lower-case ones relative, so the same path can be written as
`m 20 20 h 72 m -12 -10 l 20 10 l -20 10`, each step measured from where the pen
stopped.
`currentColor` makes the stroke the value of the CSS `color` property, which an
inline `svg` inherits from the HTML around it. Put the arrow in a link and it is
drawn in the link's colour; switch the page to a dark theme and it follows,
without a second file. The `title` is not drawn. It gives the drawing its
accessible name, and SVG 2 notes that browsers commonly show it as a tooltip
when the pointer rests on the drawing.
The same drawing as a file of its own needs the namespace on its root element,
`