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

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

Usage context

CategoriesGraphics element, Shape element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements

Attributes

Global attributes

Specific attributes

DOM_Interface

This element implements the SVGPathElement interface.

Example

SVG

<svg width="100%" height="100%" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">

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

Result

Specifications

Specification Status Comment
SVG Paths
The definition of '<path>' in that specification.
Working Draft  
Scalable Vector Graphics (SVG) 2
The definition of '<path>' in that specification.
Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<path>' in that specification.
Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1.5983
d1 Yes1.5983
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3 Yes Yes4 Yes3 ?
d3 Yes Yes4 Yes3 ?

See also

Document Tags and Contributors

 Last updated by: fscholz,