SVG graphics

SVG (Scalable Vector Graphics) is a vector graphics format. A regular JPEG or PNG image consists of dots called pixels and gets blurry when enlarged. SVG describes a drawing with shapes — "a circle of this radius, a line from here to there" — so it stays sharp at any size. Icons, logos and simple diagrams are almost always made in SVG.

A first drawing

You can write SVG right in HTML with the <svg> tag. Shapes go inside — a <circle>, for example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="teal" />
</svg>

cx and cy are the coordinates of the centre, r is the radius, fill is the fill colour. Coordinates start at the top-left corner: the x axis goes right, the y axis goes down.

Shapes

Tag	Shape	Main attributes
`<rect>`	Rectangle	`x`, `y`, `width`, `height`, `rx` — rounding
`<circle>`	Circle	`cx`, `cy`, `r`
`<line>`	Line	`x1`, `y1`, `x2`, `y2`
`<polygon>`	Polygon	`points` — a list of corners
`<text>`	Text	`x`, `y`

<svg width="300" height="100">
  <rect x="10" y="10" width="80" height="80" rx="10" fill="gold" />
  <polygon points="150,10 190,90 110,90" fill="tomato" />
  <line x1="220" y1="10" x2="290" y2="90" stroke="black" stroke-width="4" />
</svg>

Shapes are drawn in the order they are written: each next one lies on top of the previous.

viewBox and scale

The viewBox attribute sets the drawing's own coordinate system: "0 0 100 100" means "a drawing 100 by 100 units". After that width can be anything — the whole drawing stretches to fit:

<svg viewBox="0 0 100 100" width="40">
  <circle cx="50" cy="50" r="40" fill="teal" />
</svg>
<svg viewBox="0 0 100 100" width="120">
  <circle cx="50" cy="50" r="40" fill="teal" />
</svg>

The shape code is the same, yet the circles differ in size — and both are sharp.

Strokes

fill paints the inside of a shape, stroke is the outline colour and stroke-width is its thickness. fill="none" leaves the shape hollow:

<svg viewBox="0 0 200 80" width="200">
  <circle cx="40" cy="40" r="30" fill="none" stroke="royalblue" stroke-width="6" />
  <rect x="100" y="10" width="80" height="60" fill="lavender" stroke="purple" stroke-width="2" stroke-dasharray="6 4" />
</svg>

stroke-dasharray makes a dashed line: 6 units of dash, 4 of gap.

The path outline

<path> draws a shape of any form. Its d attribute holds commands: M moves to a point, L draws a line, Q draws a curve, Z closes the outline:

<svg viewBox="0 0 120 100" width="120">
  <path d="M 10 90 L 60 10 L 110 90 Z" fill="none" stroke="green" stroke-width="4" />
  <path d="M 20 60 Q 60 0 100 60" fill="none" stroke="orange" stroke-width="4" />
</svg>

People rarely write path by hand: complex icons are drawn in a graphics editor (Figma, Inkscape) and exported to SVG.

Icons in the text colour

The currentColor value takes the text colour of the parent. An icon inside a link or a button is coloured together with its text automatically:

<p style="color: crimson;">
  <svg viewBox="0 0 24 24" width="20" height="20">
    <path d="M12 21 L3 12 A5 5 0 0 1 12 6 A5 5 0 0 1 21 12 Z" fill="currentColor" />
  </svg>
  In favourites
</p>

SVG can also be stored as a separate .svg file and added like a regular image: <img src="logo.svg" alt="Logo">. But then you cannot change its colours from the page's CSS.

Common mistake

Without viewBox a drawing does not scale: you change width and part of the drawing is simply cut off:

<svg width="50" height="50">
  <circle cx="50" cy="50" r="40" fill="teal" />
</svg>
<svg viewBox="0 0 100 100" width="50" height="50">
  <circle cx="50" cy="50" r="40" fill="teal" />
</svg>

On the left only a corner of the circle is visible, on the right — the whole circle. Always set viewBox on your SVGs.

Thanks for reading!