SVGPathElement

Baseline Widely available *

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.

Instance properties

This interface inherits properties from its parent, SVGGeometryElement.

SVGPathElement.pathLength Read only: This property reflects the pathLength attribute.

Instance methods

This interface also inherits methods from its parent, SVGGeometryElement.

SVGPathElement.getPathData(): 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(): Sets the sequence of path segments as the new path data.
SVGPathElement.getPathSegmentAtLength(): Returns the segment at a given distance along the path.

Deprecated methods

SVGPathElement.getPathSegAtLength(): Returns an unsigned long representing the index within the pathSegList utilizing the user agent's distance-along-a-path algorithm.
SVGPathElement.createSVGPathSegClosePath(): Returns a stand-alone, parentless SVGPathSegClosePath object.
SVGPathElement.createSVGPathSegMovetoAbs(): Returns a stand-alone, parentless SVGPathSegMovetoAbs object.
SVGPathElement.createSVGPathSegMovetoRel(): Returns a stand-alone, parentless SVGPathSegMovetoRel object.
SVGPathElement.createSVGPathSegLinetoAbs(): Returns a stand-alone, parentless SVGPathSegLinetoAbs object.
SVGPathElement.createSVGPathSegLinetoRel(): Returns a stand-alone, parentless SVGPathSegLinetoRel object.
SVGPathElement.createSVGPathSegCurvetoCubicAbs(): Returns a stand-alone, parentless SVGPathSegCurvetoCubicAbs object.
SVGPathElement.createSVGPathSegCurvetoCubicRel(): Returns a stand-alone, parentless SVGPathSegCurvetoCubicRel object.
SVGPathElement.createSVGPathSegCurvetoQuadraticAbs(): Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticAbs object.
SVGPathElement.createSVGPathSegCurvetoQuadraticRel(): Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticRel object.
SVGPathElement.createSVGPathSegArcAbs(): Returns a stand-alone, parentless SVGPathSegArcAbs object.
SVGPathElement.createSVGPathSegArcRel(): Returns a stand-alone, parentless SVGPathSegArcRel object.
SVGPathElement.createSVGPathSegLinetoHorizontalAbs(): Returns a stand-alone, parentless SVGPathSegLinetoHorizontalAbs object.
SVGPathElement.createSVGPathSegLinetoHorizontalRel(): Returns a stand-alone, parentless SVGPathSegLinetoHorizontalRel object.
SVGPathElement.createSVGPathSegLinetoVerticalAbs(): Returns a stand-alone, parentless SVGPathSegLinetoVerticalAbs object.
SVGPathElement.createSVGPathSegLinetoVerticalRel(): Returns a stand-alone, parentless SVGPathSegLinetoVerticalRel object.
SVGPathElement.createSVGPathSegCurvetoCubicSmoothAbs(): Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothAbs object.
SVGPathElement.createSVGPathSegCurvetoCubicSmoothRel(): Returns a stand-alone, parentless SVGPathSegCurvetoCubicSmoothRel object.
SVGPathElement.createSVGPathSegCurvetoQuadraticSmoothAbs(): Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothAbs object.
SVGPathElement.createSVGPathSegCurvetoQuadraticSmoothRel(): Returns a stand-alone, parentless SVGPathSegCurvetoQuadraticSmoothRel object.

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGPathElement

Browser compatibility

See also

<path> SVG Element

Help improve MDN

Learn how to contribute

This page was last modified on Apr 3, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content