SVG Path Element

The Path Element

The <path> element uses the d attribute with drawing commands: M (move), L (line), C (curve), Z (close path).

Example

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <!-- Triangle -->
  <path d="M 100 10 L 190 110 L 10 110 Z"
        fill="gold" stroke="darkorange" stroke-width="2"/>
  <!-- Curve -->
  <path d="M 10 80 C 40 10, 160 10, 190 80"
        fill="none" stroke="steelblue" stroke-width="3"/>
</svg>

HTML

Full Editor

Pro Tip

Export SVG paths from Figma or Inkscape — no need to write them manually.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned