SVG DOM Methods and Interfaces Reference

All SVG-specific JavaScript interfaces, methods, and properties. Standard DOM methods (querySelector, addEventListener, etc.) work on SVG elements too but aren't listed here.

SVGElement (base interface)

All SVG elements inherit from this. Extends Element (so querySelector, classList, dataset, etc. all work).

Properties

Property	Type	Description
`.ownerSVGElement`	SVGSVGElement	The nearest ancestor `<svg>` element. `null` on the outermost `<svg>` itself.
`.viewportElement`	SVGElement	The element that established the current viewport (usually the nearest `<svg>`).
`.dataset`	DOMStringMap	Access to `data-*` attributes (same as HTML elements).
`.style`	CSSStyleDeclaration	Inline styles. Works for CSS-compatible SVG properties (`fill`, `opacity`, `transform`, etc.).
`.className`	SVGAnimatedString	Note: returns an SVGAnimatedString, not a plain string. Use `.classList` instead for manipulation.

SVGSVGElement (<svg> root)

The <svg> element's interface. Has the richest set of SVG-specific methods - coordinate transforms, viewBox control, animation timing.

Coordinate Methods

Method	Returns	Description
`.createSVGPoint()`	SVGPoint	Creates a blank point object for coordinate transforms.
`.createSVGMatrix()`	SVGMatrix	Creates a blank identity matrix.
`.createSVGRect()`	SVGRect	Creates a blank rect object.
`.createSVGTransform()`	SVGTransform	Creates a blank transform object.
`.createSVGNumber()`	SVGNumber	Creates a typed number wrapper.
`.createSVGLength()`	SVGLength	Creates a typed length value.
`.createSVGAngle()`	SVGAngle	Creates a typed angle value.

ViewBox & Viewport

Property	Type	Description
`.viewBox`	SVGAnimatedRect	Access to the `viewBox` attribute. `.viewBox.baseVal` gives `{x, y, width, height}`.
`.currentScale`	Number	Current zoom level (for outermost SVG only). Settable.
`.currentTranslate`	SVGPoint	Current pan offset (for outermost SVG only). Mutable.

Animation Timing (SMIL control)

Method	Returns	Description
`.getCurrentTime()`	Number (seconds)	Current document time for SMIL animations.
`.setCurrentTime(seconds)`	void	Seek SMIL animations to a specific time.
`.pauseAnimations()`	void	Pause all SMIL animations in this SVG.
`.unpauseAnimations()`	void	Resume paused SMIL animations.
`.animationsPaused()`	Boolean	Whether SMIL animations are currently paused.

Element Lookup

Method	Returns	Description
`.getElementById(id)`	Element	Finds element by ID within this SVG fragment (useful for embedded SVG).

SVGGraphicsElement (shapes, groups, text, <use>)

All renderable SVG elements inherit from this. Provides bounding box and coordinate transform methods.

Methods

Method	Returns	Description
`.getBBox()`	SVGRect `{x, y, width, height}`	Bounding box in local coordinate space (before any transforms on this element). Does not include stroke width.
`.getCTM()`	SVGMatrix	Current Transformation Matrix from this element's coordinate space to the nearest viewport's coordinate space.
`.getScreenCTM()`	SVGMatrix	Matrix from this element's coordinate space to screen pixels. Accounts for all ancestor transforms, viewBox, scroll, CSS transforms, zoom.

Properties

Property	Type	Description
`.transform`	SVGAnimatedTransformList	Access to the element's `transform` attribute. `.transform.baseVal` is the list of transform functions.

Common usage pattern

// Convert client coords → SVG coords const pt = svg.createSVGPoint(); pt.x = event.clientX; pt.y = event.clientY; const svgPt = pt.matrixTransform(svg.getScreenCTM().inverse());

SVGGeometryElement (all shape elements)

Inherited by <circle>, <rect>, <ellipse>, <line>, <polyline>, <polygon>, and <path>.

Methods

Method	Returns	Description
`.getTotalLength()`	Number	Total arc length of the shape's outline (computed via numerical integration for curves). Works on all shapes, not just paths.
`.getPointAtLength(distance)`	SVGPoint `{x, y}`	Coordinates at the given distance along the outline. `distance` is in the same units as `getTotalLength()`.
`.isPointInFill(point)`	Boolean	Whether the given SVGPoint is inside the element's fill area (respects `fill-rule`).
`.isPointInStroke(point)`	Boolean	Whether the given SVGPoint is on the element's stroke (respects `stroke-width`).

Properties

Property	Type	Description
`.pathLength`	SVGAnimatedNumber	The `pathLength` attribute value. Affects how `stroke-dasharray`/`stroke-dashoffset` are interpreted.

Usage notes

getTotalLength() and getPointAtLength() work on all geometry elements in modern browsers - not just <path>. You can call them on <circle>, <rect>, etc. to find positions along their outlines.

isPointInFill() is useful for custom hit testing - for example, checking whether a click landed inside a complex path shape without relying on browser event targeting.

SVGPathElement (<path>)

Extends SVGGeometryElement. In SVG 1.1, <path> had additional methods (now deprecated or removed in SVG 2):

Method	Status	Description
`.getTotalLength()`	Current	Inherited from SVGGeometryElement.
`.getPointAtLength(d)`	Current	Inherited from SVGGeometryElement.
`.getPathSegAtLength(d)`	Removed (SVG 2)	Was: returns which path segment contains the given distance. No longer available.
`.pathSegList`	Removed (SVG 2)	Was: list of path segments. Replaced by parsing the `d` attribute string directly.

In practice, you interact with <path> via getAttribute('d') / setAttribute('d', ...) for path data, plus the inherited geometry methods.

SVGTextContentElement (text elements)

Inherited by <text>, <tspan>, <textPath>. Provides character/glyph-level access.

Methods

Method	Returns	Description
`.getNumberOfChars()`	Number	Number of rendered characters (after bidi reordering, ligatures, etc.).
`.getComputedTextLength()`	Number	Total advance width of the rendered text (in user units).
`.getSubStringLength(startIdx, nChars)`	Number	Advance width of a character range.
`.getStartPositionOfChar(idx)`	SVGPoint	Starting position of character at index.
`.getEndPositionOfChar(idx)`	SVGPoint	End position of character at index.
`.getExtentOfChar(idx)`	SVGRect	Bounding box of character at index.
`.getRotationOfChar(idx)`	Number (degrees)	Rotation angle of character at index (relevant for text on a path).
`.getCharNumAtPosition(point)`	Number	Index of the character at the given SVGPoint, or -1.
`.selectSubString(startIdx, nChars)`	void	Selects a range of characters (creates a text selection).

SVGAnimationElement (SMIL animation elements)

Methods

Method	Returns	Description
`.getStartTime()`	Number (seconds)	Resolved start time of this animation element.
`.getCurrentTime()`	Number (seconds)	Current time within this animation's active duration.
`.getSimpleDuration()`	Number (seconds)	Simple (one iteration) duration. Throws if `indefinite`.
`.beginElement()`	void	Programmatically start this animation (as if `begin` condition was met).
`.endElement()`	void	Programmatically end this animation.
`.beginElementAt(offset)`	void	Start after `offset` seconds from now.
`.endElementAt(offset)`	void	End after `offset` seconds from now.

Properties

Property	Type	Description
`.targetElement`	SVGElement	The element being animated (the parent element).

Usage note

beginElement() is the way to trigger SMIL animations from JavaScript - set begin="indefinite" on the animation element, then call .beginElement() when you want it to start. This bridges JS event handling with SMIL animation.

SVGPoint & SVGMatrix (helper objects)

SVGPoint (DOMPoint in modern spec)

Property/Method	Description
`.x`	X coordinate (mutable).
`.y`	Y coordinate (mutable).
`.matrixTransform(matrix)`	Returns a new SVGPoint transformed by the given SVGMatrix. This is how you convert between coordinate spaces.

SVGMatrix (DOMMatrix in modern spec)

A 2D affine transformation matrix (3×2 values: a, b, c, d, e, f). Each method returns a new matrix (immutable pattern).

Method	Returns	Description
`.multiply(other)`	SVGMatrix	Matrix multiplication (compose transforms).
`.inverse()`	SVGMatrix	The inverse matrix. Used to convert from screen to SVG coordinates.
`.translate(x, y)`	SVGMatrix	Post-multiply by a translation.
`.scale(factor)`	SVGMatrix	Post-multiply by a uniform scale.
`.scaleNonUniform(sx, sy)`	SVGMatrix	Non-uniform scale.
`.rotate(angle)`	SVGMatrix	Post-multiply by a rotation (degrees).
`.rotateFromVector(x, y)`	SVGMatrix	Rotate to align with the vector (x, y).
`.flipX()`	SVGMatrix	Flip horizontally.
`.flipY()`	SVGMatrix	Flip vertically.
`.skewX(angle)`	SVGMatrix	Horizontal skew (degrees).
`.skewY(angle)`	SVGMatrix	Vertical skew (degrees).

Properties (matrix components)

Property	Description
`.a`	Scale X component
`.b`	Skew Y component
`.c`	Skew X component
`.d`	Scale Y component
`.e`	Translate X
`.f`	Translate Y

Modern note: Browsers are transitioning from SVGPoint/SVGMatrix to DOMPoint/DOMMatrix. The SVG-specific versions still work but may be deprecated in future specs. DOMMatrix also supports 3D transforms.

SVGLength, SVGAngle, SVGNumber (typed values)

SVG attributes that represent lengths, angles, or numbers have typed DOM interfaces. These are accessed via properties like circle.r, rect.width, etc.

SVGAnimatedLength (e.g. `circle.r`)

Property	Type	Description
`.baseVal`	SVGLength	The base (non-animated) value.
`.animVal`	SVGLength (read-only)	The current animated value (reflects SMIL animations).

SVGLength (the actual value)

Property/Method	Description
`.value`	The value in user units (pixels). Settable.
`.valueInSpecifiedUnits`	The value in its declared unit (e.g. if `"50%"`, this is `50`).
`.unitType`	Numeric constant for the unit: `SVG_LENGTHTYPE_PX`, `_PERCENTAGE`, `_EM`, etc.
`.convertToSpecifiedUnits(unitType)`	Convert the value to a different unit in place.
`.newValueSpecifiedUnits(unitType, value)`	Set a new value with a specific unit.

Practical example

// Read circle radius as a number (no string parsing needed) const radius = circle.r.baseVal.value; // e.g. 40 // Set it directly circle.r.baseVal.value = 60; // Check what it currently looks like during animation const animatedR = circle.r.animVal.value;

Element Creation & Namespace

Method	Context	Description
`document.createElementNS(ns, tag)`	Document	Create an element in a specific namespace. Required for SVG elements.
`element.setAttributeNS(ns, name, value)`	Element	Set a namespaced attribute. Only needed for `xlink:href` (legacy). Modern SVG uses plain `href`.
`element.setAttribute(name, value)`	Element	Set a non-namespaced attribute. Works for all common SVG attributes.

Namespace URIs

Namespace	URI	When needed
SVG	`http://www.w3.org/2000/svg`	Every `createElementNS` call for SVG elements.
XLink (legacy)	`http://www.w3.org/1999/xlink`	Only for `xlink:href` on older SVG. Use plain `href` instead.
XML	`http://www.w3.org/XML/1998/namespace`	Rarely needed. For `xml:lang`, `xml:space`.

Helper pattern

const SVG_NS = 'http://www.w3.org/2000/svg'; function svgEl(tag, attrs = {}, parent = null) { const el = document.createElementNS(SVG_NS, tag); for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v); if (parent) parent.appendChild(el); return el; }

SVG DOM Methods & Interfaces

SVGElement (base interface)

Properties

SVGSVGElement (<svg> root)

Coordinate Methods

ViewBox & Viewport

Animation Timing (SMIL control)

Element Lookup

SVGGraphicsElement (shapes, groups, text, <use>)

Methods

Properties

Common usage pattern

SVGGeometryElement (all shape elements)

Methods

Properties

Usage notes

SVGPathElement (<path>)

SVGTextContentElement (text elements)

Methods

SVGAnimationElement (SMIL animation elements)

Methods

Properties

Usage note

SVGPoint & SVGMatrix (helper objects)

SVGPoint (DOMPoint in modern spec)

SVGMatrix (DOMMatrix in modern spec)

Properties (matrix components)

SVGLength, SVGAngle, SVGNumber (typed values)

SVGAnimatedLength (e.g. `circle.r`)

SVGLength (the actual value)

Practical example

Element Creation & Namespace

Namespace URIs

Helper pattern

Notes

SVG DOM Methods & Interfaces

SVGElement (base interface)

Properties

SVGSVGElement (<svg> root)

Coordinate Methods

ViewBox & Viewport

Animation Timing (SMIL control)

Element Lookup

SVGGraphicsElement (shapes, groups, text, <use>)

Methods

Properties

Common usage pattern

SVGGeometryElement (all shape elements)

Methods

Properties

Usage notes

SVGPathElement (<path>)

SVGTextContentElement (text elements)

Methods

SVGAnimationElement (SMIL animation elements)

Methods

Properties

Usage note

SVGPoint & SVGMatrix (helper objects)

SVGPoint (DOMPoint in modern spec)

SVGMatrix (DOMMatrix in modern spec)

Properties (matrix components)

SVGLength, SVGAngle, SVGNumber (typed values)

SVGAnimatedLength (e.g. circle.r)

SVGLength (the actual value)

Practical example

Element Creation & Namespace

Namespace URIs

Helper pattern

Notes

SVGAnimatedLength (e.g. `circle.r`)