Français

<svg>

Embedding an accessible vector graphic directly in HTML

— 2 min read

  • HTML
  • accessibility
  • semantics
  • SVG

<svg> — Vector graphics

The <svg> element embeds a vector graphic in your page. Unlike raster images, an SVG is crisp at any size and can be manipulated with CSS and JavaScript.

When to use it

You have three options for embedding an SVG:

  • Inline (<svg> in the HTML): you want to style, animate, or make the content accessible via <title> and <desc>.
  • Via <img> (<img src="icon.svg">): the image is decorative or needs no interaction. Simpler, but no internal CSS control.
  • Via <object>: rare case, when you want an isolated interactive SVG document.

Choose inline when the accessibility of the SVG content matters.

What you gain

Accessibility: an inline SVG with role="img" and a <title> is read by assistive technologies. An <img src=".svg"> relies solely on its alt. Inline SVG offers finer control.

Code example

<svg role="img" aria-labelledby="chart-title chart-desc"
     viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <title id="chart-title">Completion rate</title>
  <desc id="chart-desc">A circular progress indicator showing 75% completion</desc>
  <circle cx="100" cy="100" r="90" fill="none" stroke="#e0e0e0" stroke-width="12" />
  <circle cx="100" cy="100" r="90" fill="none" stroke="teal" stroke-width="12"
          stroke-dasharray="424" stroke-dashoffset="106" />
</svg>

Further reading