Getting started
This tutorial will help get you started using SVG paths.

The path element is the generic element to define a shape. All the basic shapes can be created with a path element.

Usage context

Categories Graphics element, Shape element
Permitted content Any number of the following elements, in any order:
Animation elements »
Descriptive elements »
Normative document SVG 1.1 (2nd Edition)


<svg width="100%" height="100%" viewBox="0 0 400 400"

  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="orange" stroke="black" stroke-width="3" />

Live result:


Global attributes

Specific attributes


This element implements the SVGPathElement interface.

Browser compatibility

Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 1.0 (1.8) Not supported (Yes) 3.0.4

The chart is based on these sources.

See also

Document Tags and Contributors

Last updated by: Sebastianz,