This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
The SVGPathElement interface corresponds to the <path> element.
Note: In SVG 2 the getPathSegAtLength() and createSVGPathSeg* methods were removed and the pathLength property and the getTotalLength() and getPointAtLength() methods were moved to SVGGeometryElement.
This interface inherits properties from its parent, SVGGeometryElement.
SVGPathElement.pathLength Read only
This property reflects the pathLength attribute.
This interface also inherits methods from its parent, SVGGeometryElement.
SVGPathElement.getPathData() Experimental
Returns the sequence of path segments that corresponds to the path data, optionally normalizing the values and segment types.
SVGPathElement.getPointAtLength()Returns the point at a given distance along the path.
SVGPathElement.getTotalLength()Returns the user agent's computed value for the total length of the path in user units.
SVGPathElement.setPathData() Experimental
Sets the sequence of path segments as the new path data.
SVGPathElement.getPathSegmentAtLength() Experimental
Returns the segment at a given distance along the path.
SVGPathElement.getPathSegAtLength() Deprecated
Returns an unsigned long representing the index within the pathSegList utilizing the user agent's distance-along-a-path algorithm.
SVGPathElement.createSVGPathSegClosePath() Deprecated
Returns a stand-alone, parentless SVGPathSegClosePath object.
SVGPathElement.createSVGPathSegMovetoAbs() Deprecated
Returns a stand-alone, parentless SVGPathSegMovetoAbs object.
SVGPathElement.createSVGPathSegMovetoRel() Deprecated
Returns a stand-alone, parentless SVGPathSegMovetoRel object.
SVGPathElement.createSVGPathSegLinetoAbs() Deprecated
Returns a stand-alone, parentless SVGPathSegLinetoAbs object.
SVGPathElement.createSVGPathSegLinetoRel() Deprecated
Returns a stand-alone, parentless SVGPathSegLinetoRel object.
SVGPathElement.createSVGPathSegCurvetoCubicAbs() Deprecated
Returns a stand-alone, parentless SVGPathSegCurvetoCubicAbs object.
SVGPathElement.createSVGPathSegCurvetoCubicRel() Deprecated
Returns a stand-alone, parentless SVGPathSegCurvetoCubicRel object.
SVGPathElement.createSVGPathSegCurvetoQuadraticAbs() Deprecated
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticAbs object.
SVGPathElement.createSVGPathSegCurvetoQuadraticRel() Deprecated
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticRel object.
SVGPathElement.createSVGPathSegArcAbs() Deprecated
Returns a stand-alone, parentless SVGPathSegArcAbs object.
SVGPathElement.createSVGPathSegArcRel() Deprecated
Returns a stand-alone, parentless SVGPathSegArcRel object.
SVGPathElement.createSVGPathSegLinetoHorizontalAbs() Deprecated
Returns a stand-alone, parentless SVGPathSegLinetoHorizontalAbs object.
SVGPathElement.createSVGPathSegLinetoHorizontalRel() Deprecated
Returns a stand-alone, parentless SVGPathSegLinetoHorizontalRel object.
SVGPathElement.createSVGPathSegLinetoVerticalAbs() Deprecated
Returns a stand-alone, parentless SVGPathSegLinetoVerticalAbs object.
SVGPathElement.createSVGPathSegLinetoVerticalRel() Deprecated
Returns a stand-alone, parentless SVGPathSegLinetoVerticalRel object.
SVGPathElement.createSVGPathSegCurvetoCubicSmoothAbs() Deprecated
Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothAbs object.
SVGPathElement.createSVGPathSegCurvetoCubicSmoothRel() Deprecated
Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothRel object.
SVGPathElement.createSVGPathSegCurvetoQuadraticSmoothAbs() Deprecated
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothAbs object.
SVGPathElement.createSVGPathSegCurvetoQuadraticSmoothRel() Deprecated
Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothRel object.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
SVGPathElement |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 | 1 |
createSVGPathSegArcAbs |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegArcRel |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegClosePath |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegCurvetoCubicAbs |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegCurvetoCubicRel |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegCurvetoCubicSmoothAbs |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegCurvetoCubicSmoothRel |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegCurvetoQuadraticAbs |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegCurvetoQuadraticRel |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegCurvetoQuadraticSmoothAbs |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegCurvetoQuadraticSmoothRel |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegLinetoAbs |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegLinetoHorizontalAbs |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegLinetoHorizontalRel |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegLinetoRel |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegLinetoVerticalAbs |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegLinetoVerticalRel |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegMovetoAbs |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
createSVGPathSegMovetoRel |
1–48 | 12–79 | 1.5–59 | ≤12.1–35 | 3 | 18–48 | 4–59 | ≤12.1–35 | 1 | 1.0–5.0 | 4.4–48 | 1 |
getPathData |
No | No | 137 | No | No | No | 137 | No | No | No | No | No |
getPathSegAtLength |
1–62 | 12–79 | 1.5–97 | ≤12.1–49 | 3 | 18–62 | 4–97 | ≤12.1–46 | 1 | 1.0–8.0 | 4.4–62 | 1 |
getPathSegmentAtLength |
No | No | 137 | No | No | No | 137 | No | No | No | No | No |
getPointAtLength |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
getTotalLength |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
pathLength |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
setPathData |
No | No | 137 | No | No | No | 137 | No | No | No | No | No |
<path> SVG Element
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement