Français

<path>

Draw a free-form or complex shape

— 1 min read

  • HTML
  • accessibility
  • semantics
  • svg

<path> — SVG free-form path

The <path> element is the most powerful SVG primitive. It draws any shape using the d attribute, which contains a series of commands: M (move to), L (line to), C (cubic Bezier curve), Z (close path).

When to use it

You want to draw a shape that is not a simple circle, rectangle, or polygon: a custom icon, a logo, a chart line, an organic shape. Most SVG icons are <path> elements.

What you gain

Accessibility: a <path> alone has no semantics. If the shape conveys information, wrap it in an <svg> with <title> and <desc>, or in a <g> with aria-label.

Code example

<svg role="img" aria-labelledby="check-title"
     viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <title id="check-title">Validated</title>
  <path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" fill="currentColor" />
</svg>

Further reading