HTML & CSS reference

<svg>

Vector graphics right in HTML: shapes, icons, diagrams.

Syntax

<svg width="100" height="100" viewBox="0 0 100 100">…</svg>

Attributes

Parameter	Type	Description
viewBox	x y width height	The coordinate system of the drawing.
width, height	number	The size on the page.

Examples

A circle, a square and a line:

<svg width="200" height="100" viewBox="0 0 200 100">
  <circle cx="50" cy="50" r="40" fill="tomato" />
  <rect x="110" y="10" width="80" height="80" fill="teal" />
  <line x1="0" y1="95" x2="200" y2="95" stroke="black" stroke-width="2" />
</svg>

An icon that follows the text colour:

<style>
  .like { color: crimson; font-size: 20px; }
</style>
 
<p class="like">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 21 3 12a5 5 0 0 1 9-6 5 5 0 0 1 9 6z" />
  </svg>
  Like
</p>

Notes

SVG stays sharp at any scale and is lightweight. fill="currentColor" takes the text colour, so the icon is recoloured with plain color. Hide decorative icons from screen readers with aria-hidden="true".

Related recipes

How to add an icon to a button

In the tutorial

SVG graphics — SVG vector graphics right in HTML — shapes, viewBox and scaling, strokes and outlines, path, fill and currentColor.

Thanks for reading!