Widely availableSupported across all major browsers. Safe to use in production.
SVG Widely available

SVG

The SVG image format, represented by the <svg> element, creates two-dimensional vector graphics with declarative or scripted interaction and animation.

SVG

Overview

The SVG image format, represented by the <svg> element, creates two-dimensional vector graphics with declarative or scripted interaction and animation.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
clip-rule
≤15
79
3.5
≤5
18
≤4.2
DOM API
drawImage (SVGImageElement source image)

SVGImageElement as source image
59
12
56
17
59
17
parseFromString (svg)

SVG (`image/svg+xml`) support
4
12
10
3
18
1
SVGAElement

The SVGAElement interface provides access to the properties of an a element, as well as methods to manipulate them.
1
12
3
3
18
1
href

The href read-only property of the SVGAElement returns an SVGAnimatedString object reflecting the value of the href attribute, and, in certain cases, the xlink:href attribute. It specifies the target URI associated with the link.
1
12
4
3
18
1
hreflang

The hreflang property of the SVGAElement interface returns a string indicating the language of the linked resource.
144
144
61
26.2
144
26.2
referrerPolicy
144
144
61
144
rel

The rel property of the SVGAElement returns a string reflecting the value of the rel attribute of the SVG a element.
136
136
61
14
136
14
relList

The read-only relList property of the SVGAElement returns a live DOMTokenList reflecting the space-separated string values of the rel attribute of the SVG a element.
136
136
61
14
136
14
target

The SVGAElement.target read-only property of SVGAElement returns an SVGAnimatedString object that specifies the portion of a target window, frame, pane into which a document is to be opened when a link is activated.
1
12
3
3
18
1
type

The type property of the SVGAElement interface returns a string indicating the MIME type of the linked resource.
144
144
61
26.2
144
26.2
SVGAngle

The SVGAngle interface is used to represent a value that can be an &lt;angle&gt; or &lt;number&gt; value.
1
12
1.5
3
18
1
convertToSpecifiedUnits

The convertToSpecifiedUnits() method of the SVGAngle interface allows you to convert the angle's value to the specified unit type.
1
12
1.5
3
18
1
newValueSpecifiedUnits

The newValueSpecifiedUnits() method of the SVGAngle interface sets the value to a number with an associated SVGAngle.unitType, thereby replacing the values for all of the attributes on the object.
1
12
1.5
3
18
1
unitType

The unitType property of the SVGAngle interface is one of the unit type constants and represents the units in which this angle's value is expressed.
1
12
1.5
3
18
1
value

The value property of the SVGAngle interface represents the floating point value of the in degrees.
1
12
1.5
3
18
1
valueAsString

The valueAsString property of the SVGAngle interface represents the angle's value as a string, in the units expressed by SVGAngle.unitType.
1
12
1.5
3
18
1
valueInSpecifiedUnits

The valueInSpecifiedUnits property of the SVGAngle interface represents the value of this angle as a number, in the units expressed by the angle's SVGAngle.unitType.
1
12
1.5
3
18
1
SVGCircleElement

The SVGCircleElement interface is an interface for the circle element.
1
12
1.5
3
18
1
cx

The cx read-only property of the SVGCircleElement interface reflects the cx attribute of a circle element and by that defines the x-coordinate of the circle's center.<
1
12
1.5
3
18
1
cy

The cy read-only property of the SVGCircleElement interface reflects the cy attribute of a circle element and by that defines the y-coordinate of the circle's center.
1
12
1.5
3
18
1
r

The r read-only property of the SVGCircleElement interface reflects the r attribute of a circle element and by that defines the radius of the circle.
1
12
1.5
3
18
1
SVGComponentTransferFunctionElement

The SVGComponentTransferFunctionElement interface represents a base interface used by the component transfer function interfaces.
5
12
3
6
18
6
amplitude

The amplitude read-only property of the SVGComponentTransferFunctionElement interface reflects the amplitude attribute of the given element.
5
12
3
6
18
6
exponent

The exponent read-only property of the SVGComponentTransferFunctionElement interface reflects the exponent attribute of the given element.
5
12
3
6
18
6
intercept

The intercept read-only property of the SVGComponentTransferFunctionElement interface reflects the intercept attribute of the given element.
5
12
3
6
18
6
offset

The offset read-only property of the SVGComponentTransferFunctionElement interface reflects the offset attribute of the given element.
5
12
3
6
18
6
slope

The slope read-only property of the SVGComponentTransferFunctionElement interface reflects the slope attribute of the given element.
5
12
3
6
18
6
tableValues

The tableValues read-only property of the SVGComponentTransferFunctionElement interface reflects the tableValues attribute of the given element.
5
12
3
6
18
6
type

The type read-only property of the SVGComponentTransferFunctionElement interface reflects the type attribute of the given element. It takes one of the SVGFECOMPONENTTRANSFERTYPE_* constants defined on this interface.
5
12
3
6
18
6
SVGDefsElement

The SVGDefsElement interface corresponds to the defs element.
1
12
1.5
3
18
1
SVGDescElement

The SVGDescElement interface corresponds to the desc element.
1
12
1.5
3
18
1
SVGElement

All of the SVG DOM interfaces that correspond directly to elements in the SVG language derive from the SVGElement interface.
1
12
1.5
3
18
1
attributeStyleMap

The attributeStyleMap read-only property of the SVGElement interface returns a live StylePropertyMap object that contains a list of style properties of the element that are defined in the element's inline style attribute, or assigned using the SVGElement.style property of the SVGElement interface via script.
66
79
16.4
66
16.4
blur

The SVGElement.blur() method removes keyboard focus from the current SVG element.
1
17
51
3
18
1
error_event

The error event is fired when an SVG element does not load properly or when an error occurs during script execution.
10
12
1.5
6
18
6
focus

The SVGElement.focus() method sets focus on the specified SVG element, if it can be focused. The focused element is the element that will receive keyboard and similar events by default.
1
17
51
3
18
1
focus (options preventScroll parameter)

`options.preventScroll` parameter
78
17
68
15
78
15.5
load_event

The load event fires on an SVGElement when it is loaded in the browser, e.g., in the DOM in the case of an embedded . It is basically the same as the standard load DOM event.
1
12
4
3
18
1
nonce

The nonce property of the SVGElement interface returns the Nonce that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.
61
79
75
15.4
61
15.4
ownerSVGElement

The ownerSVGElement property of the SVGElement interface reflects the nearest ancestor svg element. null if the given element is the outermost element.
1
12
1.5
3
18
1
style

The read-only style property of the SVGElement interface returns the inline style of an element in the form of a live CSSStyleProperties object. This object can be used to get and set the inline styles of an element.
1
12
1.5
3
18
1
tabIndex

The tabIndex property of the SVGElement interface represents the tab order of the current SVG element.
36
17
51
8
36
8
viewportElement

The viewportElement property of the SVGElement interface represents the SVGElement which established the current viewport. Often the nearest ancestor svg element. null if the given element is the outermost element.
1
12
1.5
3
18
1
SVGEllipseElement

The SVGEllipseElement interface provides access to the properties of ellipse elements.
1
12
1.5
3
18
1
cx

The cx read-only property of the SVGEllipseElement interface describes the x-axis coordinate of the center of the ellipse as an SVGAnimatedLength. It reflects the computed value of the cx attribute on the ellipse element.
1
12
1.5
3
18
1
cy

The cy read-only property of the SVGEllipseElement interface describes the y-axis coordinate of the center of the ellipse as an SVGAnimatedLength. It reflects the computed value of the cy attribute on the ellipse element.
1
12
1.5
3
18
1
rx

The rx read-only property of the SVGEllipseElement interface describes the x-axis radius of the ellipse as an SVGAnimatedLength. It reflects the computed value of the rx attribute on the ellipse element.
1
12
1.5
3
18
1
ry

The ry read-only property of the SVGEllipseElement interface describes the y-axis radius of the ellipse as an SVGAnimatedLength. It reflects the computed value of the ry attribute on the ellipse element.
1
12
1.5
3
18
1
SVGForeignObjectElement

The SVGForeignObjectElement interface provides access to the properties of foreignObject elements, as well as methods to manipulate them.
1
12
3
3
18
1
height

The height read-only property of the SVGForeignObjectElement interface describes the height of the element. It reflects the computed value of the height attribute on the foreignObject element.
1
12
3
3.1
18
2
width

The width read-only property of the SVGForeignObjectElement interface describes the width of the element. It reflects the computed value of the width attribute on the foreignObject element.
1
12
3
3.1
18
2
x

The x read-only property of the SVGForeignObjectElement interface describes the x-axis coordinate of the element. It reflects the computed value of the x attribute on the foreignObject element.
1
12
3
3.1
18
2
y

The y read-only property of the SVGForeignObjectElement interface describes the y-axis coordinate of the element. It reflects the computed value of the y attribute on the foreignObject element.
1
12
3
3.1
18
2
SVGGElement

The SVGGElement interface corresponds to the g element.
1
12
1.5
3
18
1
SVGGeometryElement

The SVGGeometryElement interface represents SVG elements whose rendering is defined by geometry with an equivalent path, and which can be filled and stroked. This includes paths and the basic shapes.
56
79
53
12
56
12
getPointAtLength

The SVGGeometryElement.getPointAtLength() method returns the point at a given distance along the path.
56
79
61
12
56
12
getTotalLength

The SVGGeometryElement.getTotalLength() method returns the user agent's computed value for the total length of the path in user units.
56
79
61
12
56
12
isPointInFill

The isPointInFill() method of the SVGGeometryElement interface determines whether a given point is within the fill shape of an element. The point argument is interpreted as a point in the local coordinate system of the element.
33
79
69
12
33
12
isPointInFill (point parameter DOMPoint)

Accepts a `DOMPoint` as `point` parameter
136
136
69
12
136
12
isPointInStroke

The isPointInStroke() method of the SVGGeometryElement interface determines whether a given point is within the stroke shape of an element. The point argument is interpreted as a point in the local coordinate system of the element.
33
79
69
12
33
12
isPointInStroke (point parameter DOMPoint)

Accepts a `DOMPoint` as `point` parameter
136
136
69
12
136
12
pathLength

The SVGGeometryElement.pathLength property reflects the pathLength attribute and returns the total length of the path, in user units.
57
79
61
12
57
12
SVGGradientElement

The SVGGradient interface is a base interface used by SVGLinearGradientElement and SVGRadialGradientElement.
1
12
1.5
3
18
1
gradientTransform

The gradientTransform read-only property of the SVGGradientElement interface reflects the gradientTransform attribute of the given element.
1
12
1.5
3
18
1
gradientUnits

The gradientUnits read-only property of the SVGGradientElement interface reflects the gradientUnits attribute of the given element. It takes one of the SVGUNITTYPE_* constants defined in SVGUnitTypes.
1
12
1.5
3
18
1
href

The href read-only property of the SVGGradientElement interface reflects the href or xlink:href attribute of the given element.
1
12
2
3
18
1
spreadMethod

The spreadMethod read-only property of the SVGGradientElement interface reflects the spreadMethod attribute of the given element. It takes one of the SVGSPREADMETHOD* constants defined on this interface.
1
12
1.5
3
18
1
SVGGraphicsElement

The SVGGraphicsElement interface represents SVG elements whose primary purpose is to directly render graphics into a group.
30
12
20
7
30
7
getBBox

The SVGGraphicsElement.getBBox() method allows us to determine the coordinates of the smallest rectangle in which the object fits. The coordinates returned are with respect to the current SVG space (after the application of all geometry attributes on all the elements contained in the target element).
1
12
1.5
3
18
1
getCTM

The getCTM() method of the SVGGraphicsElement interface represents the matrix that transforms the current element's coordinate system to its SVG viewport's coordinate system.
1
12
1.5
3
18
1
getScreenCTM

The getScreenCTM() method of the SVGGraphicsElement interface represents the matrix that transforms the current element's coordinate system to the coordinate system of the SVG viewport for the SVG document fragment.
1
12
1.5
3
18
1
requiredExtensions

The requiredExtensions read-only property of the SVGGraphicsElement interface reflects the requiredExtensions attribute of the given element.
1
12
12
3
18
1
systemLanguage

The systemLanguage read-only property of the SVGGraphicsElement interface reflects the systemLanguage attribute of the given element.
1
12
12
3
18
1
transform

The transform read-only property of the SVGGraphicsElement interface reflects the computed value of the transform property and its corresponding transform attribute of the given element.
1
12
1.5
3
18
1
SVGImageElement

The SVGImageElement interface corresponds to the image element.
1
12
1.5
3
18
1
crossOrigin

The crossOrigin property of the SVGImageElement interface is a string which specifies the Cross-Origin Resource Sharing (CORS) setting to use when retrieving the image. It reflects the crossorigin content attribute of the given image element.
118
118
114
17.2
118
17.2
decode

The decode() method of the SVGImageElement interface initiates asynchronous decoding of an image, returning a Promise that resolves once the image is decoded and it is safe to append it to the DOM.
64
79
68
18.4
64
18.4
decoding

The decoding property of the SVGImageElement interface provides a hint to the browser as to whether it should perform image decoding synchronously or asynchronously.
65
79
63
65
height

The height read-only property of the SVGImageElement interface returns an SVGAnimatedLength corresponding to the height attribute of the given image element.
1
12
1.5
3
18
1
href

The href read-only property of the SVGImageElement interface reflects the href or xlink:href attribute of the given image element.
1
12
1.5
3
18
1
preserveAspectRatio

The preserveAspectRatio read-only property of the SVGImageElement interface returns an SVGAnimatedPreserveAspectRatio corresponding to the preserveAspectRatio attribute of the given image element.
1
12
1.5
3
18
1
width

The width read-only property of the SVGImageElement interface returns an SVGAnimatedLength corresponding to the width attribute of the given image element.
1
12
1.5
3
18
1
x

The x read-only property of the SVGImageElement interface returns an SVGAnimatedLength corresponding to the x attribute of the given image element.
1
12
1.5
3
18
1
y

The y read-only property of the SVGImageElement interface returns an SVGAnimatedLength corresponding to the y attribute of the given image element.
1
12
1.5
3
18
1
SVGLength

The SVGLength interface correspond to the \ basic data type.
1
12
1.5
3
18
1
convertToSpecifiedUnits

The convertToSpecifiedUnits() method of the SVGLength interface allows you to convert the length's value to the specified unit type.
1
12
1.5
3
18
1
newValueSpecifiedUnits

The newValueSpecifiedUnits() method of the SVGLength interface resets the value as a number with an associated SVGLength.unitType, thereby replacing the values for all of the attributes on the object.
1
12
1.5
3
18
1
unitType

The unitType property of the SVGLength interface that represents type of the value as specified by one of the SVGLENGTHTYPE* constants defined on this interface.
1
12
1.5
3
18
1
value

The value property of the SVGLength interface represents the floating point value of the \ in user units.
1
12
1.5
3
18
1
valueAsString

The valueAsString property of the SVGLength interface represents the \'s value as a string, in the units expressed by SVGLength.unitType.
1
12
1.5
3
18
1
valueInSpecifiedUnits

The valueInSpecifiedUnits property of the SVGLength interface represents floating point value, in the units expressed by SVGLength.unitType.
1
12
1.5
3
18
1
SVGLengthList

The SVGLengthList interface defines a list of objects. It is used for the SVGAnimatedLengthList.baseVal and SVGAnimatedLengthList.animVal properties of SVGAnimatedLengthList.
1
12
1.5
3
18
1
appendItem

The appendItem() method of the SVGLengthList interface inserts a new item at the end of the list. If the given item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
1
12
1.5
3
18
1
clear

The clear() method of the SVGLengthList interface clears all existing items from the list, with the result being an empty list.
1
12
1.5
3
18
1
getItem

The getItem() method of the SVGLengthList interface returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list. The first item is indexed 0.
1
12
1.5
3
18
1
initialize

The initialize() method of the SVGLengthList interface clears all existing items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. The return…
1
12
1.5
3
18
1
insertItemBefore

The insertItemBefore() method of the SVGLengthList interface inserts a new item into the list at the specified position. The first item is indexed 0. The inserted item is the item itself and not a copy.
1
12
1.5
3
18
1
length

The length property of the SVGLengthList interface returns the number of items in the list. It is an alias of SVGLengthList.numberOfItems to make SVG lists more array-like.
35
79
5
13.1
35
13.4
numberOfItems

The numberOfItems property of the SVGLengthList interface returns the number of items in the list. SVGLengthList.length is an alias of it.
1
12
1.5
3
18
1
removeItem

The removeItem() method of the SVGLengthList interface removes an existing item at the given index from the list.
1
12
1.5
3
18
1
replaceItem

The replaceItem() method of the SVGLengthList interface replaces an existing item in the list with a new item. If the new item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is…
1
12
1.5
3
18
1
SVGLinearGradientElement

The SVGLinearGradientElement interface corresponds to the linearGradient element.
1
12
1.5
3
18
1
x1

The x1 read-only property of the SVGLinearGradientElement interface describes the x-axis coordinate of the start point of the gradient as an SVGAnimatedLength. It reflects the computed value of the x1 attribute on the linearGradient element.
1
12
1.5
3
18
1
x2

The x2 read-only property of the SVGLinearGradientElement interface describes the x-axis coordinate of the start point of the gradient as an SVGAnimatedLength. It reflects the computed value of the x2 attribute on the linearGradient element.
1
12
1.5
3
18
1
y1

The y1 read-only property of the SVGLinearGradientElement interface describes the y-axis coordinate of the start point of the gradient as an SVGAnimatedLength. It reflects the computed value of the y1 attribute on the linearGradient element.
1
12
1.5
3
18
1
y2

The y2 read-only property of the SVGLinearGradientElement interface describes the y-axis coordinate of the start point of the gradient as an SVGAnimatedLength. It reflects the computed value of the y2 attribute on the linearGradient element.
1
12
1.5
3
18
1
SVGLineElement

The SVGLineElement interface provides access to the properties of elements, as well as methods to manipulate them.
1
12
1.5
3
18
1
x1

The x1 read-only property of the SVGLineElement interface describes the start of the SVG line along the x-axis as an SVGAnimatedLength. It reflects the line element's x1 geometric attribute.
1
12
1.5
3
18
1
x2

The x2 read-only property of the SVGLineElement interface describes the x-axis coordinate value of the end of a line as an SVGAnimatedLength. It reflects the line element's x2 geometric attribute.
1
12
1.5
3
18
1
y1

The y1 read-only property of the SVGLineElement interface describes the start of the SVG line along the y-axis as an SVGAnimatedLength. It reflects the line element's y1 geometric attribute.
1
12
1.5
3
18
1
y2

The y2 read-only property of the SVGLineElement interface describes the v-axis coordinate value of the end of a line as an SVGAnimatedLength. It reflects the line element's y2 geometric attribute.
1
12
1.5
3
18
1
SVGMarkerElement

The SVGMarkerElement interface provides access to the properties of marker elements, as well as methods to manipulate them. The marker element defines the graphics used for drawing marks on a shape.
1
12
1.5
3
18
1
markerHeight

The markerHeight read-only property of the SVGMarkerElement interface returns an SVGAnimatedLength object containing the height of the marker viewport as defined by the markerHeight attribute.
1
12
1.5
3
18
1
markerUnits

The markerUnits read-only property of the SVGMarkerElement interface returns an SVGAnimatedEnumeration object. This object returns an integer which represents the keyword values that the markerUnits attribute accepts.
1
12
1.5
3
18
1
markerWidth

The markerWidth read-only property of the SVGMarkerElement interface returns an SVGAnimatedLength object containing the width of the marker viewport as defined by the markerWidth attribute.
1
12
1.5
3
18
1
orient

The orient property of the SVGMarkerElement interface defines how the marker is rotated when it is placed at its position on the shape. It reflects the orient attribute value of the corresponding marker element.
13.1
13.4
orientAngle

The orientAngle read-only property of the SVGMarkerElement interface returns an SVGAnimatedAngle object containing the angle of the orient attribute.
1
12
1.5
3
18
1
orientType

The orientType read-only property of the SVGMarkerElement interface returns an SVGAnimatedEnumeration object indicating whether the orient attribute is auto, an angle value, or something else.
1
12
1.5
3
18
1
preserveAspectRatio

The preserveAspectRatio read-only property of the SVGMarkerElement interface returns an SVGAnimatedPreserveAspectRatio object containing the value of the preserveAspectRatio attribute of the marker.
1
12
2
3
18
1
refX

The refX read-only property of the SVGMarkerElement interface returns an SVGAnimatedLength object containing the value of the refX attribute of the marker.
1
12
1.5
3
18
1
refY

The refY read-only property of the SVGMarkerElement interface returns an SVGAnimatedLength object containing the value of the refY attribute of the marker.
1
12
1.5
3
18
1
setOrientToAngle

The setOrientToAngle() method of the SVGMarkerElement interface sets the value of the orient attribute to the value in the SVGAngle passed in.
1
12
1.5
3
18
1
setOrientToAuto

The setOrientToAuto() method of the SVGMarkerElement interface sets the value of the orient attribute to auto.
1
12
1.5
3
18
1
viewBox

The viewBox read-only property of the SVGMarkerElement interface returns an SVGAnimatedRect object which contains the values set by the viewBox attribute on the marker.
1
12
2
3
18
1
SVGMaskElement

The SVGMaskElement interface provides access to the properties of mask elements, as well as methods to manipulate them.
1
12
3
3
18
1
height

The read-only height property of the SVGMaskElement interface returns an SVGAnimatedLength object containing the value of the height attribute of the mask.
1
12
3
3
18
1
maskContentUnits

The read-only maskContentUnits property of the SVGMaskElement interface reflects the maskContentUnits attribute. It indicates which coordinate system to use for the contents of the mask element.
1
12
3
3.1
18
2
maskUnits

The read-only maskUnits property of the SVGMaskElement interface reflects the maskUnits attribute of a mask element which defines the coordinate system to use for the mask of the element.
1
12
3
3.1
18
2
width

The read-only width property of the SVGMaskElement interface returns an SVGAnimatedLength object containing the value of the width attribute of the mask.
1
12
3
3
18
1
x

The read-only x property of the SVGMaskElement interface returns an SVGAnimatedLength object containing the value of the x attribute of the mask. It represents the x-axis coordinate of the top-left corner of the masking area.
1
12
3
3
18
1
y

The read-only y property of the SVGMaskElement interface returns an SVGAnimatedLength object containing the value of the y attribute of the mask. It represents the y-axis coordinate of the top-left corner of the masking area.
1
12
3
3
18
1
SVGMetadataElement

The SVGMetadataElement interface corresponds to the metadata element.
1
12
1.5
3
18
1
SVGMPathElement

The SVGMPathElement interface corresponds to the mpath element.
19
79
4
6
25
6
href

The href read-only property of the SVGMPathElement interface reflects the href or xlink:href attribute of the given mpath element.
19
79
4
6
25
6
SVGNumber

The SVGNumber interface corresponds to the &lt;number&gt; basic data type.
1
12
1.5
3
18
1
value

The value read-only property of the SVGNumber interface represents the number.
1
12
1.5
3
18
1
SVGNumberList

The SVGNumberList interface defines a list of numbers.
6
12
1.5
5
18
4
appendItem

The appendItem() method of the SVGNumberList interface inserts a new item at the end of the list. If the given item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
6
12
3
6
18
6
clear

The clear() method of the SVGNumberList interface clears all existing items from the list, with the result being an empty list.
6
12
3
6
18
6
getItem

The getItem() method of the SVGNumberList interface returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list. The first item is indexed 0.
6
12
3
6
18
6
initialize

The initialize() method of the SVGNumberList interface clears all existing items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. The return…
6
12
3
6
18
6
insertItemBefore

The insertItemBefore() method of the SVGNumberList interface inserts a new item into the list at the specified position. The first item is indexed 0. The inserted item is the item itself and not a copy.
6
12
3
6
18
6
length

The length property of the SVGNumberList interface returns the number of items in the list. It is an alias of SVGNumberList.numberOfItems to make SVG lists more array-like.
35
79
5
13.1
35
13.4
numberOfItems

The numberOfItems property of the SVGNumberList interface returns the number of items in the list. SVGNumberList.length is an alias of it.
6
12
3
6
18
6
removeItem

The removeItem() method of the SVGNumberList interface removes an existing item at the given index from the list.
6
12
3
6
18
6
replaceItem

The replaceItem() method of the SVGNumberList interface replaces an existing item in the list with a new item. If the new item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. If the item is already in this list, note that the index of the item to replace is…
6
12
3
6
18
6
SVGPathElement

The SVGPathElement interface corresponds to the path element.
1
12
1.5
3
18
1
SVGPatternElement

The SVGPatternElement interface corresponds to the pattern element.
1
12
3
3
18
1
height

The height read-only property of the SVGPatternElement interface describes the height of the pattern as an SVGAnimatedLength. It reflects the computed value of the height attribute on the pattern element.
1
12
3
3
18
1
href

The href read-only property of the SVGPatternElement interface reflects the href or xlink:href attribute of the given element.
1
12
3
3
18
1
patternContentUnits

The patternContentUnits read-only property of the SVGPatternElement interface reflects the patternContentUnits attribute of the given pattern element. It specifies the coordinate system for the pattern content and takes one of the constants defined in SVGUnitTypes.
1
12
3
3
18
1
patternTransform

The patternTransform read-only property of the SVGPatternElement interface reflects the patternTransform attribute of the given pattern element. This property holds the transformation applied to the pattern itself, allowing for operations like translate, rotate, scale, and skew.
1
12
3
3
18
1
patternUnits

The patternUnits read-only property of the SVGPatternElement interface reflects the patternUnits attribute of the given pattern element. It specifies the coordinate system for the pattern content and takes one of the constants defined in SVGUnitTypes.
1
12
3
3
18
1
preserveAspectRatio

The preserveAspectRatio read-only property of the SVGPatternElement interface reflects the preserveAspectRatio attribute of the given element. It defines how the pattern's content should be scaled to fit the given space, preserving its aspect ratio.
1
12
3
3
18
1
viewBox

The viewBox read-only property of the SVGPatternElement interface reflects the viewBox attribute of the given element. It represents the x, y, width, and height values defining the area to be used for the pattern's viewBox.
1
12
3
3
18
1
width

The width read-only property of the SVGPatternElement interface describes the width of the pattern as an SVGAnimatedLength. It reflects the computed value of the width attribute on the pattern element.
1
12
3
3
18
1
x

The x read-only property of the SVGPatternElement interface describes the x-axis coordinate of the start point of the pattern as an SVGAnimatedLength. It reflects the computed value of the x attribute on the pattern element.
1
12
3
3
18
1
y

The y read-only property of the SVGPatternElement interface describes the y-axis coordinate of the start point of the pattern as an SVGAnimatedLength. It reflects the computed value of the y attribute on the pattern element.
1
12
3
3
18
1
SVGPointList

The SVGPointList interface represents a list of DOMPoint objects.
1
12
1.5
3
18
1
appendItem

The appendItem() method of the SVGPointList interface adds a DOMPoint to the end of the list.
1
12
1.5
3
18
1
clear

The clear() method of the SVGPointList interface removes all items from the list.
1
12
1.5
3
18
1
getItem

The getItem() method of the SVGPointList interface gets one item from the list at the specified index.
1
12
1.5
3
18
1
initialize

The initialize() method of the SVGPointList interface clears the list then adds a single new DOMPoint object to the list.
1
12
1.5
3
18
1
insertItemBefore

The insertItemBefore() method of the SVGPointList interface inserts a DOMPoint before another item in the list.
1
12
1.5
3
18
1
length

The length read-only property of the SVGPointList interface returns the number of items in the list.
35
79
5
13.1
35
13.4
numberOfItems

The numberOfItems read-only property of the SVGPointList interface returns the number of items in the list.
1
12
1.5
3
18
1
removeItem

The removeItem() method of the SVGPointList interface removes a DOMPoint from the list.
1
12
1.5
3
18
1
replaceItem

The replaceItem() method of the SVGPointList interface replaces a DOMPoint in the list.
1
12
1.5
3
18
1
SVGPolygonElement

The SVGPolygonElement interface provides access to the properties of polygon elements, as well as methods to manipulate them.
1
12
1.5
3
18
1
points

The points read-only property of the SVGPolygonElement interface reflects the base (i.e., static) value of the element's points attribute. Modifications via the SVGPointList object are reflected in the points attribute, and vice versa.
1
12
1.5
3
18
1
SVGPolylineElement

The SVGPolylineElement interface provides access to the properties of polyline elements, as well as methods to manipulate them.
1
12
1.5
3
18
1
points

The points read-only property of the SVGPolylineElement interface reflects the base (i.e., static) value of the element's points attribute. Modifications via the SVGPointList object are reflected in the points attribute, and vice versa.
1
12
1.5
3
18
1
SVGPreserveAspectRatio

The SVGPreserveAspectRatio interface corresponds to the preserveAspectRatio attribute.
1
12
1.5
3
18
1
align

The align read-only property of the SVGPreserveAspectRatio interface reflects the type of the alignment value as specified by one of the SVGPRESERVEASPECTRATIO* constants defined on this interface.
1
12
1.5
3
18
1
meetOrSlice

The meetOrSlice read-only property of the SVGPreserveAspectRatio interface reflects the type of the meet-or-slice value as specified by one of the SVGMEETORSLICE* constants defined on this interface.
1
12
1.5
3
18
1
SVGRadialGradientElement

The SVGRadialGradientElement interface corresponds to the RadialGradient element.
1
12
1.5
3
18
1
cx

The cx read-only property of the SVGRadialGradientElement interface describes the x-axis coordinate of the center of the radial gradient as an SVGAnimatedLength. It reflects the computed value of the cx attribute on the radialGradient element.
1
12
1.5
3
18
1
cy

The cy read-only property of the SVGRadialGradientElement interface describes the y-axis coordinate of the center of the radial gradient as an SVGAnimatedLength. It reflects the computed value of the cy attribute on the radialGradient element.
1
12
1.5
3
18
1
fr

The fr read-only property of the SVGRadialGradientElement interface describes the radius of the focal circle of the radial gradient as an SVGAnimatedLength. It reflects the computed value of the fr attribute on the radialGradient element.
24
79
55
7
25
7
fx

The fx read-only property of the SVGRadialGradientElement interface describes the x-axis coordinate of the focal point of the radial gradient as an SVGAnimatedLength. It reflects the computed value of the fx attribute on the radialGradient element.
1
12
1.5
3
18
1
fy

The fy read-only property of the SVGRadialGradientElement interface describes the y-axis coordinate of the focal point of the radial gradient as an SVGAnimatedLength. It reflects the computed value of the fy attribute on the radialGradient element.
1
12
1.5
3
18
1
r

The r read-only property of the SVGRadialGradientElement interface describes the radius of the radial gradient as an SVGAnimatedLength. It reflects the computed value of the r attribute on the radialGradient element.
1
12
1.5
3
18
1
SVGRect

The SVGRect, an alias for DOMRect, represents a rectangle. Rectangles consist of an x and y coordinate pair identifying a minimum x value, a minimum y value, and a width and height, which are constrained to be non-negative.
1
12
1.5
3
18
1
height

The height property of the SVGRect interface is an alias for the DOMRect.height property. It describes the vertical size of the element. It reflects the SVG element's height attribute and the CSS height property.
1
12
1.5
3
18
1
width

The width property of the SVGRect interface is an alias for the DOMRect.width property. It describes the horizontal size of the element. It reflects the SVG element's width attribute and the CSS width property.
1
12
1.5
3
18
1
x

The x property describes the horizontal coordinate of the position of the element.
1
12
1.5
3
18
1
y

The y property of the SVGRect interface is an alias for the DOMRect.y property. It describes the vertical coordinate of the position of the element. It reflects the SVG element's y attribute and the CSS y property.
1
12
1.5
3
18
1
SVGRectElement

The SVGRectElement interface provides access to the properties of rect elements, as well as methods to manipulate them.
1
12
1.5
3
18
1
height

The height read-only property of the SVGRectElement interface describes the vertical size of an SVG rectangle as a SVGAnimatedLength. The length is in user coordinate system units along the y-axis. Its syntax is the same as that for .
1
12
1.5
3
18
1
rx

The rx read-only property of the SVGRectElement interface describes the horizontal curve of the corners of an SVG rectangle as a SVGAnimatedLength. The length is in user coordinate system units along the x-axis. Its syntax is the same as that for .
1
12
1.5
4
18
3.2
ry

The ry read-only property of the SVGRectElement interface describes the vertical curve of the corners of an SVG rectangle as a SVGAnimatedLength. The length is in user coordinate system units along the y-axis. Its syntax is the same as that for .
1
12
1.5
4
18
3.2
width

The width read-only property of the SVGRectElement interface describes the horizontal size of an SVG rectangle as a SVGAnimatedLength. The length is in user coordinate system units along the x-axis. Its syntax is the same as that for .
1
12
1.5
3
18
1
x

The x read-only property of the SVGRectElement interface describes the horizontal coordinate of the position of an SVG rectangle as a SVGAnimatedLength. The is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. Its syntax is the same as that for .
1
12
1.5
3
18
1
y

The y read-only property of the SVGRectElement interface describes the vertical coordinate of the position of an SVG rectangle as a SVGAnimatedLength. The is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the y-axis. Its syntax is the same as that for .
1
12
1.5
3
18
1
SVGScriptElement

The SVGScriptElement interface corresponds to the SVG script element.
1
12
1.5
3
18
1
async
142
142
117
26.2
142
26.2
crossOrigin
14
defer
Experimental
117
href

The href read-only property of the SVGScriptElement interface reflects the href or xlink:href attribute of the given script element.
1
12
1.5
3
18
1
type

The type read-only property of the SVGScriptElement interface reflects the type attribute of the given script element.
1
12
1.5
3
18
1
SVGSetElement

The SVGSetElement interface corresponds to the set element.
2
79
4
3
18
1
SVGStopElement

The SVGStopElement interface corresponds to the stop element.
1
12
1.5
3
18
1
offset

The offset read-only property of the SVGStopElement interface reflects the offset attribute of the given stop element.
1
12
1.5
3
18
1
SVGStringList

The SVGStringList interface defines a list of strings.
1
12
12
3
18
1
appendItem

The appendItem() method of the SVGStringList interface inserts a new item at the end of the list. If the given item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy.
1
12
12
3
18
1
clear

The clear() method of the SVGStringList interface clears all existing items from the list, with the result being an empty list.
1
12
12
3
18
1
getItem

The getItem() method of the SVGStringList interface returns the specified item from the list. The returned item is the item itself and not a copy. Any changes made to the item are immediately reflected in the list. The first item is indexed 0.
1
12
12
3
18
1
initialize

The initialize() method of the SVGStringList interface clears all existing items from the list and re-initializes the list to hold the single item specified by the parameter. If the inserted item is already in a list, it is removed from its previous list before it is inserted into this list. The inserted item is the item itself and not a copy. The return…
1
12
12
3
18
1
insertItemBefore

The insertItemBefore() method of the SVGStringList interface inserts a new item into the list at the specified position. The first item is indexed 0. The inserted item is the item itself and not a copy.
1
12
12
3
18
1
length

The length property of the SVGStringList interface returns the number of items in the list. It is an alias of SVGStringList.numberOfItems to make SVG lists more array-like.
35
79
12
13.1
35
13.4
numberOfItems

The numberOfItems property of the SVGStringList interface returns the number of items in the list. SVGStringList.length is an alias of it.
1
12
12
3
18
1
removeItem

The removeItem() method of the SVGStringList interface removes an existing item at the given index from the list.
1
12
12
3
18
1
replaceItem

The replaceItem() method of the SVGStringList interface replaces an existing item in the list with a new item. The inserted item is the item itself and not a copy.
1
12
12
3
18
1
SVGStyleElement

The SVGStyleElement interface corresponds to the SVG style element.
1
12
1.5
3
18
1
disabled

The SVGStyleElement.disabled property can be used to get and set whether the stylesheet is disabled (true) or not (false).
45
79
104
6
45
6
media

The SVGStyleElement.media property is a media query string corresponding to the media attribute of the given SVG style element.
1
12
1.5
3
18
1
sheet

The SVGStyleElement.sheet read-only property returns the CSSStyleSheet corresponding to the given SVG style element, or null if there is none.
38
12
1.5
16.4
38
16.4
title

The SVGStyleElement.title property is a string corresponding to the title attribute of the given SVG style element. It may be used to select between alternate style sheets.
1
12
1.5
3
18
1
SVGSVGElement

The SVGSVGElement interface provides access to the properties of svg elements, as well as methods to manipulate them. This interface contains also various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices.
1
12
1.5
3
18
1
checkEnclosure

The checkEnclosure() method of the SVGSVGElement interface checks if the rendered content of the given element is entirely contained within the supplied rectangle.
1
12
1.5
3
18
1
checkIntersection

The checkIntersection() method of the SVGSVGElement interface checks if the rendered content of the given element intersects the supplied rectangle.
1
12
1.5
3
18
1
createSVGAngle

The createSVGAngle() method of the SVGSVGElement interface creates an SVGAngle object outside of any document trees.
1
12
1.5
3
18
1
createSVGLength

The createSVGLength() method of the SVGSVGElement interface creates an SVGLength object outside of any document trees.
1
12
1.5
3
18
1
createSVGMatrix

The createSVGMatrix() method of the SVGSVGElement interface creates a DOMMatrix object outside of any document trees.
1
12
1.5
3
18
1
createSVGNumber

The createSVGNumber() method of the SVGSVGElement interface creates an SVGNumber object outside of any document trees.
1
12
1.5
3
18
1
createSVGPoint

The createSVGPoint() method of the SVGSVGElement interface creates a DOMPoint object outside of any document trees.
1
12
1.5
3
18
1
createSVGRect

The createSVGRect() method of the SVGSVGElement interface creates a DOMRect object outside of any document trees.
1
12
1.5
3
18
1
createSVGTransform

The createSVGTransform() method of the SVGSVGElement interface creates an SVGTransform object outside of any document trees.
1
12
1.5
3
18
1
createSVGTransformFromMatrix

The createSVGTransformFromMatrix() method of the SVGSVGElement interface creates an SVGTransform object outside of any document trees, based on the given DOMMatrix object.
1
12
1.5
3
18
1
currentScale

The currentScale property of the SVGSVGElement interface reflects the current scale factor relative to the initial view to take into account user magnification and panning operations on the outermost svg element.
1
12
1.5
3
18
1
currentTranslate

The currentTranslate read-only property of the SVGSVGElement interface reflects the translation factor that takes into account user "magnification" corresponding to an outermost svg element.
1
12
1.5
3
18
1
deselectAll

The deselectAll() method of the SVGSVGElement interface unselects any selected objects, including any selections of text strings and type-in bars.
1
12
25
3
18
1
getCurrentTime

The getCurrentTime() method of the SVGSVGElement interface returns the current time in seconds relative to the start time for the current SVG document fragment.
1
12
1.5
3
18
1
getElementById

The getElementById() method of the SVGSVGElement interface searches the SVG document fragment (i.e., the search is restricted to a subset of the document tree) for an Element whose id property matches the specified string.
7
12
1.5
5.1
18
5
getEnclosureList
1
12
3
18
1
getIntersectionList
1
12
3
18
1
height

The height read-only property of the SVGSVGElement interface describes the vertical size of element as an SVGAnimatedLength. It reflects the svg element's height attribute, which may not be the SVG's rendered height.
1
12
1.5
3
18
1
preserveAspectRatio

The preserveAspectRatio read-only property of the SVGSVGElement interface reflects the preserveAspectRatio attribute of the given element. It defines how the SVG element's content should be scaled to fit the given space, preserving its aspect ratio.
1
12
1.5
3
18
1
setCurrentTime

The setCurrentTime() method of the SVGSVGElement interface adjusts the clock for this SVG document fragment, establishing a new current time.
1
12
1.5
3
18
1
viewBox

The viewBox read-only property of the SVGSVGElement interface reflects the svg element's viewBox attribute as an SVGAnimatedRect.
1
12
1.5
3
18
1
width

The width read-only property of the SVGSVGElement interface describes the horizontal size of element as an SVGAnimatedLength. It reflects the svg element's width attribute, which may not be the SVG's rendered width.
1
12
1.5
3
18
1
x

The x read-only property of the SVGSVGElement interface describes the horizontal coordinate of the position of that SVG as an SVGAnimatedLength. When an svg is nested within another , the horizontal coordinate is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. Its syntax is…
1
12
1.5
3
18
1
y

The y read-only property of the SVGSVGElement interface describes the vertical coordinate of the position of that SVG as an SVGAnimatedLength. When an svg is nested within another , the vertical coordinate is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the y-axis. Its syntax is the…
1
12
1.5
3
18
1
SVGSwitchElement

The SVGSwitchElement interface corresponds to the switch element.
1
12
3
3
18
1
SVGSymbolElement

The SVGSymbolElement interface corresponds to the symbol element.
1
12
1.5
3
18
1
preserveAspectRatio

The preserveAspectRatio read-only property of the SVGSymbolElement interface reflects the preserveAspectRatio attribute of the given symbol element. It defines how the symbol's content should be scaled to fit the given space, preserving its aspect ratio.
1
12
1.5
3
18
1
viewBox

The viewBox read-only property of the SVGSymbolElement interface reflects the viewBox attribute of the given symbol element.
1
12
1.5
3
18
1
SVGTextContentElement

The SVGTextContentElement interface is implemented by elements that support rendering child text content. It is inherited by various text-related interfaces, such as SVGTextElement, SVGTSpanElement, and SVGTextPathElement.
1
12
1.5
3
18
1
getCharNumAtPosition

The getCharNumAtPosition() method of the SVGTextContentElement interface represents the character which caused a text glyph to be rendered at a given position in the coordinate system. Because the relationship between characters and glyphs is not one-to-one, only the first character of the relevant typographic character is returned.
1
12
1.5
3
18
1
getComputedTextLength

The getComputedTextLength() method of the SVGTextContentElement interface represents the computed length for the text within the element.
1
12
1.5
3
18
1
getEndPositionOfChar

The getEndPositionOfChar() method of the SVGTextContentElement interface returns the trailing position of a typographic character after text layout has been performed.
1
12
1.5
3
18
1
getExtentOfChar

The getExtentOfChar() method of the SVGTextContentElement interface the represents computed tight bounding box of the glyph cell that corresponds to a given typographic character.
1
12
1.5
3
18
1
getNumberOfChars

The getNumberOfChars() method of the SVGTextContentElement interface represents the total number of addressable characters available for rendering within the current element, regardless of whether they will be rendered.
1
12
1.5
3
18
1
getRotationOfChar

The getRotationOfChar() method of the SVGTextContentElement interface the represents the rotation of a typographic character.
1
12
1.5
3
18
1
getStartPositionOfChar

The getStartPositionOfChar() method of the SVGTextContentElement interface returns the position of a typographic character after text layout has been performed.
1
12
1.5
3
18
1
getSubStringLength

The getSubStringLength() method of the SVGTextContentElement interface represents the computed length of the formatted text advance distance for a substring of text within the element.
1
12
1.5
3
18
1
lengthAdjust

The lengthAdjust read-only property of the SVGTextContentElement interface reflects the lengthAdjust attribute of the given element. It takes one of the LENGTHADJUST_* constants defined on this interface.
1
12
1.5
3
18
1
textLength

The textLength read-only property of the SVGTextContentElement interface reflects the textLength attribute of the given element.
1
12
1.5
3
18
1
SVGTextElement

The SVGTextElement interface corresponds to the text elements.
1
12
1.5
3
18
1
SVGTextPathElement

The SVGTextPathElement interface corresponds to the textPath element.
1
12
2
3.1
18
2
href

The href read-only property of the SVGTextPathElement interface reflects the href attribute (or the deprecated xlink:href attribute) of the given textPath element.
1
12
2
3.1
18
2
method

The method read-only property of the SVGTextPathElement interface reflects the method attribute of the given textPath element. It takes one of the TEXTPATHMETHODTYPE* constants defined on this interface.
1
12
20
3.1
18
2
spacing

The spacing read-only property of the SVGTextPathElement interface reflects the spacing attribute of the given textPath element. It takes one of the TEXTPATHSPACINGTYPE* constants defined on this interface.
1
12
20
3.1
18
2
startOffset

The startOffset read-only property of the SVGTextPathElement interface reflects the X component of the startOffset attribute of the given textPath, which defines an offset from the start of the path for the initial current text position along the path after converting the path to the element's coordinate system.
1
12
20
3.1
18
2
SVGTextPositioningElement

The SVGTextPositioningElement interface is implemented by elements that support attributes that position individual text glyphs. It is inherited by SVGTextElement and SVGTSpanElement.
1
12
1.5
3
18
1
dx

The dx read-only property of the SVGTextPositioningElement interface describes the x-axis coordinate of the SVGTextElement or SVGTSpanElement as an SVGAnimatedLengthList. It reflects the dx attribute's horizontal displacement of the individual text glyphs in the user coordinate system.
1
12
1.5
3
18
1
dy

The dy read-only property of the SVGTextPositioningElement interface describes the y-axis coordinate of the SVGTextElement or SVGTSpanElement as an SVGAnimatedLengthList. It reflects the dy attribute's vertical displacement of the individual text glyphs in the user coordinate system.
1
12
1.5
3
18
1
rotate

The rotate read-only property of the SVGTextPositioningElement interface reflects the rotation of individual text glyphs, as specified by the rotate attribute of the given element.
1
12
1.5
3
18
1
x

The x read-only property of the SVGTextPositioningElement interface describes the x-axis coordinate of the SVGTextElement or SVGTSpanElement as an SVGAnimatedLengthList. It reflects the x attribute's horizontal position of the individual text glyphs in the user coordinate system.
1
12
1.5
3
18
1
y

The y read-only property of the SVGTextPositioningElement interface describes the y-axis coordinate of the SVGTextElement or SVGTSpanElement as an SVGAnimatedLengthList. It reflects the y attribute's vertical position of the individual text glyphs in the user coordinate system.
1
12
1.5
3
18
1
SVGTitleElement

The SVGTitleElement interface corresponds to the title element.
1
12
1.5
3
18
1
SVGTransform

The SVGTransform interface reflects one of the component transformations within an ; thus, an SVGTransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a attribute.
1
12
1.5
4
18
3.2
angle

The angle read-only property of the SVGTransform interface represents the angle of the transformation in degrees.
1
12
1.5
4
18
3.2
matrix

The matrix read-only property of the SVGTransform interface represents the transformation matrix that corresponds to the transformation type.
1
12
1.5
4
18
3.2
setMatrix

The setMatrix() method of the SVGTransform interface sets the transform type to SVGTRANSFORMMATRIX, with parameter matrix defining the new transformation.
1
12
1.5
4
18
3.2
setRotate

The setRotate() method of the SVGTransform interface sets the transform type to SVGTRANSFORMROTATE, with parameter angle defining the rotation angle and parameters cx and cy defining the optional center of rotation.
1
12
1.5
4
18
3.2
setScale

The setScale() method of the SVGTransform interface sets the transform type to SVGTRANSFORMSCALE, with parameters sx and sy defining the scale amounts.
1
12
1.5
4
18
3.2
setSkewX

The setSkewX() method of the SVGTransform interface sets the transform type to SVGTRANSFORMSKEWX, with parameter angle defining the amount of skew along the X-axis.
1
12
1.5
4
18
3.2
setSkewY

The setSkewY() method of the SVGTransform interface sets the transform type to SVGTRANSFORMSKEWY, with parameter angle defining the amount of skew along the Y-axis.
1
12
1.5
4
18
3.2
setTranslate

The setTranslate() method of the SVGTransform interface sets the transform type to SVGTRANSFORMTRANSLATE, with parameters tx and ty defining the translation amounts.
1
12
1.5
4
18
3.2
type

The type read-only property of the SVGTransform interface represents the type of transformation applied, specified by one of the SVGTRANSFORM* constants defined on this interface.
1
12
1.5
4
18
3.2
SVGTransformList

The SVGTransformList interface defines a list of objects.
1
12
1.5
3
18
1
appendItem

The appendItem() method of the SVGTransformList interface inserts a new item at the end of the list.
1
12
1.5
3
18
1
clear

The clear() method of the SVGTransformList interface clears all existing current items from the list, with the result being an empty list.
1
12
1.5
3
18
1
consolidate

The consolidate() method of the SVGTransformList interface consolidates the list of separate SVGTransform objects by multiplying the equivalent transformation matrices together to result in a list consisting of a single SVGTransform object of type SVGTRANSFORMMATRIX.
1
12
1.5
3
18
1
createSVGTransformFromMatrix

The createSVGTransformFromMatrix() method of the SVGTransformList interface creates an SVGTransform object which is initialized to a transform of type SVGTRANSFORMMATRIX and whose values are the given matrix.
1
12
1.5
3
18
1
getItem

The getItem() method of the SVGTransformList interface returns the specified item from the list.
1
12
1.5
3
18
1
initialize

The initialize() method of the SVGTransformList interface clears all existing current items from the list and re-initializes the list to hold the single item specified by the parameter.
1
12
1.5
3
18
1
insertItemBefore

The insertItemBefore() method of the SVGTransformList interface inserts a new item into the list at the specified position.
1
12
1.5
3
18
1
length

The length read-only property of the SVGTransformList interface represents the number of items in the list.
35
79
9
13.1
35
13.4
numberOfItems

The numberOfItems read-only property of the SVGTransformList interface represents the number of items in the list.
1
12
1.5
3
18
1
removeItem

The removeItem() method of the SVGTransformList interface removes an existing item from the list.
1
12
1.5
3
18
1
replaceItem

The replaceItem() method of the SVGTransformList interface replaces an existing item in the list with a new item.
1
12
1.5
3
18
1
SVGTSpanElement

The SVGTSpanElement interface represents a tspan element.
1
12
1.5
3
18
1
SVGUnitTypes

The SVGUnitTypes interface defines a commonly used set of constants used for reflecting gradientUnits, patternContentUnits and other similar attributes.
1
12
3
3.1
18
2
SVGUseElement

The SVGUseElement interface corresponds to the use element.
1
12
1.5
3
18
1
height

The height read-only property of the SVGUseElement interface describes the height of the referenced element as an SVGAnimatedLength. It reflects the computed value of the height attribute on the use element.
1
12
1.5
3
18
1
href

The href read-only property of the SVGUseElement interface reflects the href or xlink:href attribute of the given element.
1
12
1.5
3
18
1
width

The width read-only property of the SVGUseElement interface describes the width of the referenced element as an SVGAnimatedLength. It reflects the computed value of the width attribute on the use element.
1
12
1.5
3
18
1
x

The x read-only property of the SVGUseElement interface describes the x-axis coordinate of the start point of the referenced element as an SVGAnimatedLength. It reflects the computed value of the x attribute on the use element.
1
12
1.5
3
18
1
y

The y read-only property of the SVGUseElement interface describes the y-axis coordinate of the start point of the referenced element as an SVGAnimatedLength. It reflects the computed value of the y attribute on the use element.
1
12
1.5
3
18
1
SVGViewElement

The SVGViewElement interface provides access to the properties of view elements, as well as methods to manipulate them.
1
12
15
3
18
1
preserveAspectRatio

The preserveAspectRatio read-only property of the SVGViewElement interface reflects the preserveAspectRatio attribute of the given view element. It defines how the content within the view should be scaled to fit its viewport while preserving its aspect ratio.
1
12
15
3
18
1
viewBox

The viewBox read-only property of the SVGViewElement interface reflects the viewBox attribute of the given view element. It represents the x, y, width, and height values defining the area to be used for the view's viewBox.
1
12
15
3
18
1
CSS at-rule
OpenType SVG

OpenType SVG rendering
31
12.1
12.2
CSS property
svg images

SVG images
8
12
4
5
18
5
SVG image as background

SVG image as background
1
12
4
3.1
18
1
evenodd
≤15
79
3.5
≤5
18
≤4.2
nonzero
≤15
79
3.5
≤5
18
≤4.2
Other
css.properties.color-interpolation

The color-interpolation CSS property is used in SVG to specify which color space to use for linearGradient and radialGradient SVG elements.
1
79
3
4
18
3.2
CSS property
auto

`auto` value
1
79
3
4
18
3.2
linearGradient

`linearGradient` value
123
sRGB

`sRGB` value
1
79
3
4
18
3.2
Other
css.properties.cx

The cx CSS property defines the x-axis center point of an SVG circle or ellipse element. If present, it overrides the element's cx attribute.
43
79
69
9
43
9
css.properties.cy

The cy CSS property defines the y-axis center point of an SVG circle or ellipse elements. If present, it overrides the element's cy attribute.
43
79
69
9
43
9
css.properties.d

The d CSS property defines a path to be drawn by the SVG path element. If present, it overrides the element's d attribute.
52
79
97
52
css.properties.fill

The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. If present, it overrides the element's fill attribute.
1
≤15
3
4
18
3.2
css.properties.fill-rule

The fill-rule CSS property defines the rule used to determine which parts of the SVG shape's canvas are included inside a shape to be filled. If present, it overrides the element's fill-rule attribute.
1
≤15
3
4
18
3.2
CSS property
evenodd
1
≤15
3
4
18
3.2
nonzero
1
≤15
3
4
18
3.2
none
1
≤15
3
4
18
3.2
svg elements

On SVG elements
1
12
72
5.1
18
5
Other
css.properties.marker

The marker CSS property points to a marker that will be drawn on the first, middle, and last vertices of the element's path; that is, at all of its vertices. The marker must have been defined using an SVG marker element, and can only be referenced with a url_value value. The value of the CSS property overrides any values of the marker-start, marker, and…
1
≤15
3
4
18
3.2
css.properties.marker-end

The marker-end CSS property points to a marker that will be drawn on the last vertex of the element's path; that is, at its ending vertex. The marker must have been defined using an SVG marker element, and can only be referenced with a url_value value. The value of the CSS property overrides any values of the marker-end attribute in the SVG.
1
≤15
3
4
18
3.2
CSS property
none
1
≤15
3
4
18
3.2
Other
css.properties.marker-mid

The marker-mid CSS property points to a marker that will be drawn on the middle vertices of the element's path; that is, at each of its vertices between the start and end vertices. The marker must have been defined using an SVG marker element, and can only be referenced with a url_value value. The value of the CSS property overrides any values of the…
1
≤15
3
4
18
3.2
CSS property
none
1
≤15
3
4
18
3.2
Other
css.properties.marker-start

The marker-start CSS property points to a marker that will be drawn on the first vertex of the element's path; that is, at its starting vertex. The marker must have been defined using an SVG marker element, and can only be referenced with a url_value value. The value of the CSS property overrides any values of the marker-start attribute in the SVG.
1
≤15
3
4
18
3.2
CSS property
none
1
≤15
3
4
18
3.2
none
1
≤15
3
4
18
3.2
Other
css.properties.r

The r CSS property defines the radius of a circle. It can only be used with the SVG circle element. If present, it overrides the circle's r attribute.
43
79
69
9
43
9
css.properties.rx

The rx CSS property defines the x-axis, or horizontal, radius of an SVG ellipse and the horizontal curve of the corners of an SVG rect rectangle. If present, it overrides the shape's rx attribute.
43
79
69
17.4
43
17.4
css.properties.ry

The ry CSS property defines the y-axis, or vertical, radius of an SVG ellipse and the vertical curve of the corners of an SVG rect rectangle. If present, it overrides the shape's ry attribute.
43
79
69
17.4
43
17.4
css.properties.shape-rendering

The shape-rendering CSS property provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles. It only has an effect on the circle, ellipse, line, path, polygon, polyline, and rect elements. If explicitly declared, the value of the CSS property overrides the any values of the element's shape-rendering…
1
79
3
4
18
3.2
CSS property
auto
1
79
3
4
18
3.2
Other
css.properties.stop-color

The stop-color CSS property defines the color to use for an SVG stop element within a gradient. If present, it overrides the element's stop-color attribute.
1
≤15
3
4
18
3.2
css.properties.stop-opacity

The stop-opacity CSS property defines the opacity of a given color gradient stop in the SVG stop element within an SVG gradient. If present, it overrides the element's stop-opacity attribute.
1
≤15
3
4
18
3.2
css.properties.stroke

The stroke CSS property defines the color or SVG paint server used to draw an element's stroke. As such, stroke only has an effect on elements that can be given a stroke (for example, rect or ellipse); see the page on the SVG stroke attribute for a complete list. When declared, the CSS value overrides any value of the element's stroke SVG attribute.
1
≤15
1.5
4
18
3.2
css.properties.stroke-color
Experimental
11.1
11.3
css.properties.stroke-dasharray

The stroke-dasharray CSS property defines a pattern of dashes and gaps used in the painting of the SVG shape's stroke. If present, it overrides the element's stroke-dasharray attribute.
1
≤15
1.5
4
18
3.2
CSS property
none
1
≤15
1.5
4
18
3.2
Other
css.properties.stroke-dashoffset

The stroke-dashoffset CSS property defines an offset for the starting point of the rendering of an SVG element's associated dash array. If present, it overrides the element's stroke-dashoffset attribute.
1
≤15
1.5
4
18
3.2
css.properties.stroke-linecap

The stroke-linecap CSS property defines the shape to be used at the end of open subpaths of SVG elements' unclosed strokes. If present, it overrides the element's stroke-linecap attribute.
1
≤15
1.5
4
18
3.2
CSS property
butt
1
≤15
1.5
4
18
3.2
round
1
≤15
1.5
4
18
3.2
square
1
≤15
1.5
4
18
3.2
Other
css.properties.stroke-linejoin

The stroke-linejoin CSS property defines the shape to be used at the corners of an SVG element's stroked paths. If present, it overrides the element's stroke-linejoin attribute.
1
≤15
1.5
4
18
3.2
CSS property
bevel
1
≤15
1.5
4
18
3.2
miter
1
≤15
1.5
4
18
3.2
round
1
≤15
1.5
4
18
3.2
Other
css.properties.stroke-miterlimit

The stroke-miterlimit CSS property defines a limit on the ratio of the miter length to the when the shape to be used at the corners of an SVG element's stroked path is a mitered join. If the limit defined by this property is exceeded, the join is converted from miter to bevel, thus making the corner appear truncated.
1
≤15
1.5
4
18
3.2
css.properties.stroke-width

The stroke-width CSS property defines the width of a stroke applied to the SVG shape. If present, it overrides the element's stroke-width attribute.
1
≤15
1.5
4
18
3.2
CSS property
none
1
≤15
1.5
4
18
3.2
Other
css.properties.text-anchor

The text-anchor CSS property aligns a box containing a string of text where the wrapping area is determined from the inline-size property, and the text is then placed relative to the anchor point of the element, which is defined using the x and y (or dx and dy) attributes. If present, the value of the CSS property overrides any value of the element's…
1
≤14
3
4
18
3.2
CSS property
end
1
≤14
3
4
18
3.2
middle
1
≤14
3
4
18
3.2
start
1
≤14
3
4
18
3.2
Other
css.properties.text-rendering

The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text.
4
79
1
5
18
4.2
CSS property
auto
4
79
1
5
18
4.2
geometricPrecision
13
79
1
6
18
6
svg elements

On SVG elements
19
17
43
6
25
6
Other
css.properties.vector-effect

The vector-effect CSS property suppresses specific transformation effects in SVG, thus permitting effects like a road on a map staying the same width no matter how the map is zoomed, or allowing a diagram key to retain its position and size regardless of other transforms. It can only be used with SVG elements that accept the vector-effect attribute. When…
6
79
15
5.1
18
5
CSS property
svg elements

On SVG elements
1
12
72
5.1
18
5
Other
css.properties.x

The x CSS property defines the x-axis coordinate of the top left corner of the SVG rect shape, image image, foreignObject viewport or nested svg viewport relative to the nearest ancestor's user coordinate system. If present, it overrides the element's x attribute.
42
79
69
9
42
9
css.properties.y

The y CSS property defines the y-axis coordinate of the top left corner of the SVG rect shape, image image, foreignObject viewport and nested svg viewport relative to the nearest ancestor's user coordinate system. If present, it overrides the element's y attribute.
42
79
69
9
42
9
svg.elements.a

The SVG element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML's a element.
1
12
1.5
3.1
18
2
svg.elements.a.href

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
50
12
51
12.1
50
12.2
svg.elements.a.hreflang
≤18
61
svg.elements.a.referrerpolicy
51
79
52
14
51
14
svg.elements.a.referrerpolicy.no-referrer-when-downgrade

no-referrer-when-downgrade
51
79
52
51
svg.elements.a.referrerpolicy.origin-when-cross-origin

origin-when-cross-origin
51
79
52
51
svg.elements.a.referrerpolicy.unsafe-url

unsafe-url
51
79
52
51
svg.elements.a.rel
≤18
61
14
14
svg.elements.a.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3.1
18
2
svg.elements.a.target

The target attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an HTML or XHTML document, or is viewed with a tabbed browser. This attribute specifies the name of the browsing context (e.g., a browser tab or an (X)HTML iframe or object element) into which a document…
1
12
1.5
3.1
18
2
svg.elements.a.type
≤18
61
svg.elements.circle

The SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.
1
12
1.5
3
18
2
svg.elements.circle.cx

The cx attribute defines the x-axis coordinate of a center point.
1
12
1.5
3
18
2
svg.elements.circle.cy

The cy attribute defines the y-axis coordinate of a center point.
1
12
1.5
3
18
2
svg.elements.circle.fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
1
79
1.5
3
18
2
svg.elements.circle.r

The r attribute defines the radius of a circle.
1
12
1.5
3
18
2
svg.elements.circle.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
2
svg.elements.defs

The SVG element is used to store graphical objects that will be used at a later time. Objects created inside a element are not rendered directly. To display them you have to reference them (with a use element for example).
1
12
1.5
3.1
18
2
svg.elements.defs.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3.1
18
2
svg.elements.desc

The SVG element provides an accessible, long-text description of any SVG container element or graphics element.
1
12
1.5
3.1
18
2
svg.elements.ellipse

The SVG element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.
1
12
1.5
3
18
3
svg.elements.ellipse.cx

The cx attribute defines the x-axis coordinate of a center point.
1
12
1.5
3
18
3
svg.elements.ellipse.cy

The cy attribute defines the y-axis coordinate of a center point.
1
12
1.5
3
18
3
svg.elements.ellipse.fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
1
79
1.5
3
18
3
svg.elements.ellipse.rx
1
12
1.5
3
18
3
svg.elements.ellipse.ry
1
12
1.5
3
18
3
svg.elements.ellipse.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
3
svg.elements.foreignObject

The SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.
1
12
2
3
18
3
svg.elements.foreignObject.height
1
12
2
3
18
3
svg.elements.foreignObject.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
3
svg.elements.foreignObject.width
1
12
2
3
18
3
svg.elements.foreignObject.x
1
12
2
3
18
3
svg.elements.foreignObject.y
1
12
2
3
18
3
svg.elements.g

The SVG element is a container used to group other SVG elements.
1
12
1.5
3.1
18
2
svg.elements.g.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3.1
18
2
svg.elements.image

The SVG element includes images inside SVG documents. It can display raster image files or other SVG files.
1
12
1.5
3
18
2
svg.elements.image.crossorigin

The crossorigin attribute, valid on the image, feImage, and script elements, provides support for configuration of Cross-Origin Resource Sharing (CORS) requests for the element's fetched data.
118
118
114
17.2
118
17.2
svg.elements.image.decoding

The decoding attribute, valid on image elements, provides a hint to the browser as to whether it should perform image decoding along with rendering other content in a single presentation step that looks more "correct" (sync), or render and present the other content first and then decode the image and present it later (async). In practice, async means that…
65
79
63
65
svg.elements.image.height
1
79
1.5
3
18
2
svg.elements.image.href

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
50
12
51
12.1
50
12.2
svg.elements.image.preserveAspectRatio
1
79
1.5
3
18
2
svg.elements.image.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
2
svg.elements.image.width
1
79
1.5
3
18
2
svg.elements.image.x
1
79
1.5
3
18
2
svg.elements.image.y
1
79
1.5
3
18
2
svg.elements.line

The SVG element is an SVG basic shape used to create a line connecting two points.
1
12
1.5
3
18
3
svg.elements.line.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
3
svg.elements.line.x1

The x1 attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the x attribute instead.
1
12
1.5
3
18
3
svg.elements.line.x2

The x2 attribute is used to specify the second x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the x attribute instead.
1
12
1.5
3
18
3
svg.elements.line.y1

The y1 attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the y attribute instead.
1
12
1.5
3
18
3
svg.elements.line.y2

The y2 attribute is used to specify the second y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the y attribute instead.
1
12
1.5
3
18
3
svg.elements.linearGradient

The SVG element lets authors define linear gradients to apply to other SVG elements.
1
12
1.5
3
18
2
svg.elements.linearGradient.gradientTransform

The gradientTransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of)…
1
79
1.5
3
18
2
svg.elements.linearGradient.gradientUnits

The gradientUnits attribute defines the coordinate system used for attributes specified on the gradient elements.
1
79
1.5
3
18
2
svg.elements.linearGradient.href

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
50
12
51
12.1
50
12.2
svg.elements.linearGradient.spreadMethod

The spreadMethod attribute determines how a shape is filled beyond the defined edges of a gradient.
1
79
1.5
3
18
2
svg.elements.linearGradient.x1

The x1 attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the x attribute instead.
1
79
1.5
3
18
2
svg.elements.linearGradient.x2

The x2 attribute is used to specify the second x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the x attribute instead.
1
79
1.5
3
18
2
svg.elements.linearGradient.y1

The y1 attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the y attribute instead.
1
79
1.5
3
18
2
svg.elements.linearGradient.y2

The y2 attribute is used to specify the second y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the y attribute instead.
1
79
1.5
3
18
2
svg.elements.marker

The SVG element defines a graphic used for drawing arrowheads or polymarkers on a given path, line, polyline or polygon element.
1
12
1.5
3
18
2
svg.elements.marker.markerHeight

The markerHeight attribute represents the height of the viewport into which the marker is to be fitted when it is rendered according to the viewBox and preserveAspectRatio attributes.
1
12
1.5
3
18
2
svg.elements.marker.markerUnits

The markerUnits attribute defines the coordinate system for the markerWidth and markerHeight attributes and the contents of the marker.
1
12
1.5
3
18
2
svg.elements.marker.markerWidth

The markerWidth attribute represents the width of the viewport into which the marker is to be fitted when it is rendered according to the viewBox and preserveAspectRatio attributes.
1
12
1.5
3
18
2
svg.elements.marker.orient

The orient attribute indicates how a marker is rotated when it is placed at its position on the shape.
1
12
1.5
3
18
2
svg.elements.marker.refX
1
12
1.5
3
18
2
svg.elements.marker.refY
1
12
1.5
3
18
2
svg.elements.marker.viewBox
1
12
1.5
3
18
2
svg.elements.mask

The SVG element defines a mask for compositing the current object into the background. A mask is used/referenced using the mask property and CSS mask-image property.
1
12
3
3
18
2
svg.elements.mask.height
1
12
3
3
18
2
svg.elements.mask.maskContentUnits

The maskContentUnits attribute indicates which coordinate system to use for the contents of the element.
1
79
3
3
18
2
svg.elements.mask.maskUnits

The maskUnits attribute indicates which coordinate system to use for the geometry properties of the element.
1
79
3
3
18
2
svg.elements.mask.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
2
svg.elements.mask.width
1
12
3
3
18
2
svg.elements.mask.x
1
12
3
3
18
2
svg.elements.mask.y
1
12
3
3
18
2
svg.elements.metadata

The SVG element adds metadata to SVG content. Metadata is structured information about data. The contents of should be elements from other XML namespace such as RDF, FOAF>), etc.
1
12
1.5
3
18
3
svg.elements.mpath

The SVG sub-element for the animateMotion element provides the ability to reference an external path element as the definition of a motion path.
19
≤18
4
6
25
6
svg.elements.mpath.href

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
50
12
51
12.1
50
12.2
svg.elements.path

The SVG element is the generic element to define a shape. All the basic shapes can be created with a path element.
1
12
1.5
3
18
3
svg.elements.path.d

The d attribute defines a path to be drawn.
1
12
1.5
3
18
3
svg.elements.path.d.path

The path() CSS function accepts an SVG path string, and is used in the CSS shapes and CSS motion path modules to enable a shape to be drawn. The path() function is a basic-shape data type value. It can be used in the CSS offset-path and clip-path properties and in the SVG d attribute.
52
79
97
52
svg.elements.path.fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
1
79
1.5
3
18
3
svg.elements.path.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
3
svg.elements.pattern

The SVG element defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area.
1
12
3
3
18
3
svg.elements.pattern.height
1
12
3
3
18
3
svg.elements.pattern.href

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
50
79
3
12.1
50
12.2
svg.elements.pattern.patternContentUnits

The patternContentUnits attribute indicates which coordinate system to use for the contents of the element.
1
79
3
3
18
3
svg.elements.pattern.patternTransform

The patternTransform attribute defines a list of transform definitions that are applied to a pattern tile.
1
79
3
3
18
3
svg.elements.pattern.patternUnits

The patternUnits attribute indicates which coordinate system to use for the geometry properties of the element.
1
79
3
3
18
3
svg.elements.pattern.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
3
svg.elements.pattern.width
1
12
3
3
18
3
svg.elements.pattern.x
1
12
3
3
18
3
svg.elements.pattern.y
1
12
3
3
18
3
svg.elements.polygon

The SVG element defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.
1
12
1.5
3
18
3
svg.elements.polygon.fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
1
79
1.5
3
18
3
svg.elements.polygon.points
1
12
1.5
3
18
3
svg.elements.polygon.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
3
svg.elements.polyline

The SVG element is an SVG basic shape that creates straight lines connecting several points. Typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point. For closed shapes see the polygon element.
1
12
1.5
3
18
3
svg.elements.polyline.fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
1
79
1.5
3
18
3
svg.elements.polyline.points
1
12
1.5
3
18
3
svg.elements.polyline.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
3
svg.elements.radialGradient

The SVG element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
1
12
1.5
3
18
2
svg.elements.radialGradient.cx

The cx attribute defines the x-axis coordinate of a center point.
1
79
1.5
3
18
2
svg.elements.radialGradient.cy

The cy attribute defines the y-axis coordinate of a center point.
1
79
1.5
3
18
2
svg.elements.radialGradient.fr

The fr attribute defines the radius of the focal point for the radial gradient.
24
79
55
7
25
7
svg.elements.radialGradient.fx

The fx attribute defines the x-axis coordinate of the focal point for a radial gradient.
1
79
1.5
3
18
2
svg.elements.radialGradient.fy

The fy attribute defines the y-axis coordinate of the focal point for a radial gradient.
1
79
1.5
3
18
2
svg.elements.radialGradient.gradientTransform

The gradientTransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of)…
1
79
1.5
3
18
2
svg.elements.radialGradient.gradientUnits

The gradientUnits attribute defines the coordinate system used for attributes specified on the gradient elements.
1
79
1.5
3
18
2
svg.elements.radialGradient.href

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
50
12
51
12.1
50
12.2
svg.elements.radialGradient.r

The r attribute defines the radius of a circle.
1
79
1.5
3
18
2
svg.elements.radialGradient.spreadMethod

The spreadMethod attribute determines how a shape is filled beyond the defined edges of a gradient.
1
79
1.5
3
18
2
svg.elements.rect

The SVG element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.
1
12
1.5
3.1
18
2
svg.elements.rect.fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
1
79
1.5
3.1
18
2
svg.elements.rect.height
1
12
1.5
3.1
18
2
svg.elements.rect.rx
1
12
1.5
3.1
18
2
svg.elements.rect.ry
1
12
1.5
3.1
18
2
svg.elements.rect.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3.1
18
2
svg.elements.rect.width
1
12
1.5
3.1
18
2
svg.elements.rect.x
1
12
1.5
3.1
18
2
svg.elements.rect.y
1
12
1.5
3.1
18
2
svg.elements.script

The SVG element allows to add scripts to an SVG document.
1
12
1.5
3
18
2
svg.elements.script.async
Experimental
117
svg.elements.script.defer
Experimental
117
svg.elements.script.href

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
50
12
51
12.1
50
12.2
svg.elements.script.type
1
79
1.5
3
18
2
svg.elements.set

The SVG element provides a method of setting the value of an attribute for a specified duration.
2
12
4
3
18
1
svg.elements.set.fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
2
79
4
3
18
2
svg.elements.set.href

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
50
12
51
12.1
50
12.2
svg.elements.set.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
2
79
12
3
18
1
svg.elements.set.to
2
12
4
3
18
1
svg.elements.stop

The SVG element defines a color and its position to use on a gradient. This element is always a child of a linearGradient or radialGradient element.
1
12
1.5
3
18
3
svg.elements.stop.offset
1
12
1.5
3
18
3
svg.elements.style

The SVG element allows style sheets to be embedded directly within SVG content.
1
12
1.5
3
18
2
svg.elements.style.media

The media attribute specifies a media query that must be matched for a style sheet to apply.
1
79
1.5
3
18
2
svg.elements.style.title
1
79
1.5
3
18
2
svg.elements.style.type
1
79
1.5
3
18
2
svg.elements.svg

The SVG element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.
1
12
1.5
3
18
2
svg.elements.svg.height
1
12
1.5
3
18
3
svg.elements.svg.preserveAspectRatio
1
12
1.5
3
18
3
svg.elements.svg.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
2
svg.elements.svg.viewBox
1
12
1.5
3
18
3
svg.elements.svg.width
1
12
1.5
3
18
3
svg.elements.svg.x
1
12
1.5
3
18
3
svg.elements.svg.y
1
12
1.5
3
18
3
svg.elements.switch

The SVG element evaluates any requiredFeatures, requiredExtensions and systemLanguage attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true.
1
12
4
3.1
18
2
svg.elements.switch.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3.1
18
2
svg.elements.symbol

The SVG element is used to define graphical template objects which can be instantiated by a use element.
1
12
1.5
3
18
2
svg.elements.symbol.preserveAspectRatio
1
79
1.5
3
18
2
svg.elements.symbol.viewBox
1
79
1.5
3
18
2
svg.elements.text

The SVG element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to , like any other SVG graphics element.
1
12
1.5
3
18
2
svg.elements.text.dx

The dx attribute indicates a shift along the x-axis on the position of an element or its content.
1
12
1.5
3
18
2
svg.elements.text.dy

The dy attribute indicates a shift along the y-axis on the position of an element or its content.
1
12
1.5
3
18
2
svg.elements.text.fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
1
79
1.5
3
18
2
svg.elements.text.lengthAdjust

The lengthAdjust attribute controls how the text is stretched into the length defined by the textLength attribute.
1
12
1.5
3
18
2
svg.elements.text.rotate

The rotate attribute specifies how the animated element rotates as it travels along a path specified in an animateMotion element.
1
12
1.5
3
18
2
svg.elements.text.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
2
svg.elements.text.textLength

The textLength attribute, available on SVG text and tspan elements, lets you specify the width of the space into which the text will draw. The user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthAdjust attribute. By default, only the spacing between characters is adjusted, but…
1
12
1.5
3
18
2
svg.elements.text.x

The x attribute defines an x-axis coordinate in the user coordinate system.
1
12
1.5
3
18
2
svg.elements.text.y

The y attribute defines a y-axis coordinate in the user coordinate system.
1
12
1.5
3
18
2
svg.elements.textPath

The SVG element is used to render text along the shape of a path element. The text must be enclosed in the element and its href attribute is used to reference the desired .
1
12
2
3.1
18
2
svg.elements.textPath.fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
1
79
2
3.1
18
2
svg.elements.textPath.href

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
50
12
2
12.1
50
12.2
svg.elements.textPath.path
Experimental
61
svg.elements.textPath.side
Experimental

The side attribute determines the side of a path the text is placed on (relative to the path direction).
61
svg.elements.textPath.spacing

The spacing attribute indicates how the user agent should determine the spacing between typographic characters that are to be rendered along a path.
1
79
20
3.1
18
2
svg.elements.textPath.startOffset

The startOffset attribute defines an offset from the start of the path for the initial current text position along the path after converting the path to the textPath element's coordinate system.
1
12
20
3.1
18
2
svg.elements.textPath.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3.1
18
2
svg.elements.textPath.textLength

The textLength attribute, available on SVG text and tspan elements, lets you specify the width of the space into which the text will draw. The user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthAdjust attribute. By default, only the spacing between characters is adjusted, but…
1
12
2
3.1
18
2
svg.elements.title

The SVG element provides an accessible, short-text description of any SVG container element or graphics element.
1
12
1.5
3
18
3
svg.elements.title.tooltip_display

Tooltip display
1
79
4
3
18
3
svg.elements.tspan

The SVG element defines a subtext within a text element or another element. It allows for adjustment of the style and/or position of that subtext as needed.
1
12
1.5
3
18
2
svg.elements.tspan.dx
1
12
1.5
3
18
2
svg.elements.tspan.dy
1
12
1.5
3
18
2
svg.elements.tspan.fill

The fill attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
1
79
1.5
3
18
2
svg.elements.tspan.lengthAdjust

The lengthAdjust attribute controls how the text is stretched into the length defined by the textLength attribute.
1
79
3
18
2
svg.elements.tspan.rotate
1
79
1.5
3
18
2
svg.elements.tspan.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
2
svg.elements.tspan.textLength

The textLength attribute, available on SVG text and tspan elements, lets you specify the width of the space into which the text will draw. The user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthAdjust attribute. By default, only the spacing between characters is adjusted, but…
1
12
3
18
2
svg.elements.tspan.x
1
12
1.5
3
18
2
svg.elements.tspan.y
1
12
1.5
3
18
2
svg.elements.use

The element takes nodes from within an SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, then pasted where the element is, much like cloned template elements.
1
12
1.5
3
18
2
svg.elements.use.data_uri

Load from `data:` URI
22
≤18
4
25
svg.elements.use.external_uri

Load from external URI
22
13
4
7
25
7
svg.elements.use.height
1
12
1.5
3
18
2
svg.elements.use.href

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
50
12
1.5
12.1
50
12.2
svg.elements.use.systemLanguage

The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.
1
12
12
3
18
2
svg.elements.use.width
1
12
1.5
3
18
2
svg.elements.use.x
1
12
1.5
3
18
2
svg.elements.use.y
1
12
1.5
3
18
2
svg.elements.view

The SVG element defines a particular view of an SVG document. A specific view can be displayed by referencing the element's id as the target fragment of a URL.
1
≤18
15
3
18
2
svg.elements.view.preserveAspectRatio
1
79
15
3
18
2
svg.elements.view.viewBox
1
79
15
3
18
2
svg.global_attributes.alignment-baseline

The alignment-baseline attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows /Baseline/Typography in Roman text to stay aligned across font size changes. It defaults to the baseline with the same…
≤80
≤80
≤13.1
≤80
≤13.4
svg.global_attributes.baseline-shift

The baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. The shifted object might be a sub- or superscript.
≤80
≤80
≤13.1
≤80
≤13.4
svg.global_attributes.class

Assigns a class name or set of class names to an element. You may assign the same class name or names to any number of elements, however, multiple class names must be separated by whitespace characters.
1
12
1
1
18
1
svg.global_attributes.clip-rule

The clip-rule attribute only applies to graphics elements that are contained within a element. The clip-rule attribute basically works as the attribute, except that it applies to definitions.
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.color

The color attribute is used to provide a potential indirect value, currentColor, for the fill, stroke, stop-color, flood-color, and lighting-color attributes.
1
12
1
1
18
1
svg.global_attributes.color-interpolation

The color-interpolation attribute specifies the color space for gradient interpolations, color animations, and alpha compositing.
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.color-interpolation-filters

The color-interpolation-filters attribute specifies the color space for imaging operations performed via filter effects.
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.color-interpolation.linearGradient
123
svg.global_attributes.color-interpolation.sRGB
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.data_attributes

`data-*` attributes
55
79
51
10
55
10
svg.global_attributes.direction

The direction attribute specifies the inline-base direction of a text or tspan element. It defines the start and end points of a line of text as used by the text-anchor and inline-size properties. It also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override.
2
12
1
1
18
1
svg.global_attributes.display

The display attribute lets you control the rendering of graphical or container elements.
1
12
1
1
18
1
svg.global_attributes.dominant-baseline

The dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box's text and inline-level contents. It also indicates the default alignment baseline of any boxes participating in baseline alignment in the box's alignment context.
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.fill-rule

The fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape.
≤15
79
18
≤13.1
18
≤13.4
svg.global_attributes.id

The id attribute assigns a unique name to an element.
1
12
1
1
18
1
svg.global_attributes.image-rendering

The image-rendering attribute provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.
13
79
3.6
6
18
6
svg.global_attributes.lang

The lang attribute specifies the primary language used in contents and attributes containing text content of particular elements.
1
12
1
≤4
18
≤3.2
svg.global_attributes.lighting-color

The lighting-color attribute defines the color of the light source for lighting filter primitives.
5
12
3
6
18
6
svg.global_attributes.marker-end

The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape.
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.marker-mid

The marker-mid attribute defines the arrowhead or polymarker that will be drawn at all interior vertices of the given shape.
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.marker-start

The marker-start attribute defines the arrowhead or polymarker that will be drawn at the first vertex of the given shape.
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.mask

The mask attribute is a presentation attribute mainly used to bind a given element with the element the attribute belongs to.
120
120
53
15.4
120
15.4
svg.global_attributes.overflow

The overflow attribute sets what to do when an element's content is too big to fit in its block formatting context. This feature is not widely implemented yet.
1
12
1
1
18
1
svg.global_attributes.pointer-events

The pointer-events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.
1
12
1.5
4
18
3.2
svg.global_attributes.requiredExtensions

The requiredExtensions SVG conditional processing attribute is a list of space-separated URL values each referencing a language extension. Language extensions are extended capabilities that go beyond those defined by standard browser specifications.
81
81
2
8
81
8
svg.global_attributes.requiredExtensions.mathml

Recognizes MathML namespace
109
109
2
8
109
8
svg.global_attributes.shape-rendering

The shape-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles.
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.stop-color

The stop-color attribute indicates what color to use at a gradient stop.
1
12
1.5
3
18
3
svg.global_attributes.stop-opacity

The stop-opacity attribute defines the opacity of a given color gradient stop.
1
12
1.5
3
18
14
svg.global_attributes.stroke

The stroke attribute is a presentation attribute defining the color (or any SVG paint servers like gradients or patterns) used to paint the outline of the shape.
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.stroke-dasharray

The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape.
≤80
≤80
1
≤13.1
≤80
≤13.4
svg.global_attributes.stroke-dashoffset

The stroke-dashoffset attribute is a presentation attribute defining an offset on the rendering of the associated dash array.
≤80
≤80
1
≤13.1
≤80
≤13.4
svg.global_attributes.stroke-linecap

The stroke-linecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
≤80
≤80
1
≤13.1
≤80
≤13.4
svg.global_attributes.stroke-linejoin

The stroke-linejoin attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked.
≤80
≤80
1
≤13.1
≤80
≤13.4
svg.global_attributes.stroke-miterlimit

The stroke-miterlimit attribute is a presentation attribute defining a limit on the ratio of the miter length to the used to draw a miter join. When the limit is exceeded, the join is converted from a miter to a bevel.
≤80
≤80
1
≤13.1
≤80
≤13.4
svg.global_attributes.stroke-width

The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. It applies to any SVG shape or text-content element, but as an inherited property, it may be applied to elements such as g and still have the intended effect on descendant elements' strokes.
≤80
≤80
1
≤13.1
≤80
≤13.4
svg.global_attributes.style

The style attribute allows to style an element using CSS declarations. It functions identically to the style attribute in HTML.
1
12
1
1
18
1
svg.global_attributes.tabindex

The tabindex attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.
1
12
51
≤4
18
≤3.2
svg.global_attributes.text-anchor

The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point.
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.text-decoration

The text-decoration attribute defines whether text is decorated with an underline, overline and/or strike-through. It is a shorthand for the text-decoration-line and text-decoration-style properties.
1
12
1
1
18
1
svg.global_attributes.text-rendering

The text-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering text.
4
79
1
5
18
4.2
svg.global_attributes.transform

The transform attribute defines a list of transform definitions that are applied to an element and the element's children.
36
12
16
9
36
9
svg.global_attributes.transform-origin

The transform-origin SVG attribute sets the origin for an item's transformations.
≤83
≤83
77
≤13.1
≤83
≤13.4
svg.global_attributes.unicode-bidi

The unicode-bidi attribute specifies how the accumulation of the background image is managed.
2
12
1
1.3
18
1
svg.global_attributes.vector-effect

The vector-effect property specifies the vector effect to use when drawing an object. Vector effects are applied before any of the other compositing operations, i.e., filters, masks and clips.
≤80
≤80
≤72
≤13.1
≤80
≤13.4
svg.global_attributes.visibility

The visibility attribute lets you control the visibility of graphical elements. With a value of hidden or collapse the current graphics element is invisible.
1
12
1
1
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • See bug 620002 for implementation status of the standard `load` event.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (56)
Implementation note
  • The `SVGGeometryElement` interface itself is not present, but some of its members are available on the `SVGPathElement` interface.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • The `SVGGeometryElement` interface itself is not present, but some of its members are available on the `SVGPathElement` interface.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (53)
Implementation note
  • The `SVGGeometryElement` interface itself is not present, but some of its members are available on the `SVGPathElement` interface.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (12)
Implementation note
  • The `SVGGeometryElement` interface itself is not present, but some of its members are available on the `SVGPathElement` interface.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (56)
Implementation note
  • The `SVGGeometryElement` interface itself is not present, but some of its members are available on the `SVGPathElement` interface.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (12)
Implementation note
  • The `SVGGeometryElement` interface itself is not present, but some of its members are available on the `SVGPathElement` interface.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (56)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (61)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (12)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (56)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (12)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (56)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (61)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (12)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (56)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (12)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 1 item(s)
Implementation note
  • The element this method is called for must be in the DOM; otherwise, this method will always return `false`.
Notes 1 item(s)
Implementation note
  • The element this method is called for must be in the DOM; otherwise, this method will always return `false`.
Notes 1 item(s)
Implementation note
  • The element this method is called for must be in the DOM; otherwise, this method will always return `false`.
Notes 1 item(s)
Implementation note
  • The element this method is called for must be in the DOM; otherwise, this method will always return `false`.
Notes 1 item(s)
Implementation note
  • The element this method is called for must be in the DOM; otherwise, this method will always return `false`.
Notes 1 item(s)
Implementation note
  • The element this method is called for must be in the DOM; otherwise, this method will always return `false`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (57)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (61)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (12)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (57)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (12)
Implementation note
  • Only supported for `SVGPathElement`, not all `SVGGeometryElement` objects.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (30)
Implementation note
  • The `SVGGraphicsElement` interface itself is not present, but some of its members are available on interfaces that inherit from `SVGGraphicsElement`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (20)
Implementation note
  • The `SVGGraphicsElement` interface itself is not present, but some of its members are available on interfaces that inherit from `SVGGraphicsElement`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (7)
Implementation note
  • The `SVGGraphicsElement` interface itself is not present, but some of its members are available on interfaces that inherit from `SVGGraphicsElement`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (30)
Implementation note
  • The `SVGGraphicsElement` interface itself is not present, but some of its members are available on interfaces that inherit from `SVGGraphicsElement`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (7)
Implementation note
  • The `SVGGraphicsElement` interface itself is not present, but some of its members are available on interfaces that inherit from `SVGGraphicsElement`.
Notes 2 item(s)
Implementation note
  • Before Firefox 128, the `getBBox()` method returned an empty `DOMRect` when there is no fill (bug 1019326).
  • Before Firefox 68, this method didn't work for `<textPath>` and `<tspan>` elements (bug 937268).
Notes 1 item(s)
Implementation note
  • Transforms on the parent are not propagated down to its children; see bug 209220.
Notes 1 item(s)
Implementation note
  • Transforms on the parent are not propagated down to its children; see bug 209220.
Notes 1 item(s)
Implementation note
  • Since version 13, `SVGStringList` is indexable like Array which is a non-standard behavior.
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (21)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (21)
Notes 1 item(s)
Implementation note
  • Support of SVG in CSS background is incomplete.
Notes 1 item(s)
Implementation note
  • Support of SVG in CSS background is incomplete.
Notes 1 item(s)
Implementation note
  • The property parses, but has no effect.
Notes 1 item(s)
Implementation note
  • The property parses, but has no effect.
Notes 1 item(s)
Implementation note
  • Before Safari 17.4, the value was recognized, but had no effect, and was only recognized as an attribute applied to the SVG element. See bug 266090.
Notes 1 item(s)
Implementation note
  • Before Safari on iOS 17.4, the value was recognized, but had no effect, and was only recognized as an attribute applied to the SVG element. See bug 266090.
Notes 1 item(s)
Implementation note
  • Before Safari 17.4, the value was recognized, but had no effect, and was only recognized as an attribute applied to the SVG element. See bug 266090.
Notes 1 item(s)
Implementation note
  • Before Safari on iOS 17.4, the value was recognized, but had no effect, and was only recognized as an attribute applied to the SVG element. See bug 266090.
Notes 2 item(s)
Implementation note
  • This property is only supported on Windows and Linux.
  • Initial versions had bugs on Windows and Linux that broke font substitution, small-caps, letter-spacing or caused text to overlap. See bug 40156511, bug 40430936, bug 40444347, bug 40286561.
Notes 2 item(s)
Implementation note
  • This property is only supported on Windows and Linux.
  • Initial versions had bugs on Windows and Linux that broke font substitution, small-caps, letter-spacing or caused text to overlap. See bug 40156511, bug 40430936, bug 40444347, bug 40286561.
Notes 2 item(s)
Implementation note
  • This property is only supported on Windows and Linux.
  • The `optimizeSpeed` option has no effect on Firefox 4 because the standard code for text rendering is already fast and there is not a faster code path at this time. See bug 595688 for details.
Notes 2 item(s)
Implementation note
  • This property is only supported on Windows and Linux.
  • Initial versions had bugs on Windows and Linux that broke font substitution, small-caps, letter-spacing or caused text to overlap. See bug 40156511, bug 40430936, bug 40444347, bug 40286561.
Notes 1 item(s)
Implementation note
  • Chrome treats `auto` as `optimizeSpeed`.
Notes 1 item(s)
Implementation note
  • Edge treats `auto` as `optimizeSpeed`.
Notes 1 item(s)
Implementation note
  • If the font size is 20 pixels or higher, Firefox treats `auto` as `optimizeLegibility`. For smaller text, Firefox treats `auto` as `optimizeSpeed`. The 20-pixel threshold can be changed with the `browser.display.auto_quality_min_font_size` preference.
Notes 1 item(s)
Implementation note
  • Safari treats `auto` as `optimizeSpeed`. See bug 41363.
Notes 1 item(s)
Implementation note
  • Chrome Android treats `auto` as `optimizeSpeed`.
Notes 1 item(s)
Implementation note
  • Safari on iOS treats `auto` as `optimizeSpeed`. See bug 41363.
Notes 1 item(s)
Implementation note
  • Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.
Notes 1 item(s)
Implementation note
  • Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.
Notes 1 item(s)
Implementation note
  • Firefox treats `geometricPrecision` the same as `optimizeLegibility`.
Notes 1 item(s)
Implementation note
  • Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.
Notes 1 item(s)
Implementation note
  • Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
Notes 1 item(s)
Implementation note
  • Only supported for transformations applied using the CSS `transform` property (e.g. `.className { transform: rotate(45deg); transform-origin: center; }`). It has no effect on transformations applied using the `transform` SVG attribute (e.g. `<rect style="transform-origin: center;" transform="rotate(45)" />`).
Notes 1 item(s)
Implementation note
  • Only supported for transformations applied using the CSS `transform` property (e.g. `.className { transform: rotate(45deg); transform-origin: center; }`). It has no effect on transformations applied using the `transform` SVG attribute (e.g. `<rect style="transform-origin: center;" transform="rotate(45)" />`).
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (92)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (92)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (92)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)
Notes 1 item(s)
Implementation note
  • Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
Notes 1 item(s)
Implementation note
  • Until Safari on iOS 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
Notes 1 item(s)
Implementation note
  • Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Notes 1 item(s)
Implementation note
  • Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Notes 1 item(s)
Implementation note
  • Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Notes 1 item(s)
Implementation note
  • Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Notes 1 item(s)
Implementation note
  • Before version 56, Firefox does not completely follow the `use` cascading rules (see bug 265894). A fix is documented by Amelia Bellamy-Royds on StackOverflow.
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (120)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (122)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (120)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only the default value of `sRGB` is implemented
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only the default value of `sRGB` is implemented
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only the default value of `sRGB` is implemented
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only the default value of `sRGB` is implemented
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only the default value of `sRGB` is implemented
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • While the property is recognized, values applied to it don't have any effect.
Compatibility
  • Available with a vendor prefix: -webkit- (1)
  • The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property.
Notes 6 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
  • This feature was removed in a later browser version (79)
Implementation note
  • While the property is recognized, values applied to it don't have any effect.
Compatibility
  • Available with a vendor prefix: -webkit- (79)
  • The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (53)
Implementation note
  • Only supports `mask: url(file.svg#mask_id)` or `mask: url(#mask_id)`, where the URL is a reference to an SVG `<mask>` element.
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
Implementation note
  • While the property is recognized, values applied to it don't have any effect.
Compatibility
  • Available with a vendor prefix: -webkit- (3.1)
  • The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property.
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • While the property is recognized, values applied to it don't have any effect.
Compatibility
  • Available with a vendor prefix: -webkit- (18)
  • The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property.
Notes 5 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (15.4)
Implementation note
  • While the property is recognized, values applied to it don't have any effect.
Compatibility
  • Available with a vendor prefix: -webkit- (2)
  • The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` property.
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (11)
Notes 2 item(s)
Implementation note
  • This property is only supported on Windows and Linux.
  • Initial versions had bugs on Windows and Linux that broke font substitution, small-caps, letter-spacing or caused text to overlap. See bug 40156511, bug 40430936, bug 40444347, bug 40286561.
Notes 2 item(s)
Implementation note
  • This property is only supported on Windows and Linux.
  • Initial versions had bugs on Windows and Linux that broke font substitution, small-caps, letter-spacing or caused text to overlap. See bug 40156511, bug 40430936, bug 40444347, bug 40286561.
Notes 2 item(s)
Implementation note
  • This property is only supported on Windows and Linux.
  • The `optimizeSpeed` option has no effect on Firefox 4 because the standard code for text rendering is already fast and there is not a faster code path at this time. See bug 595688 for details.
Notes 2 item(s)
Implementation note
  • This property is only supported on Windows and Linux.
  • Initial versions had bugs on Windows and Linux that broke font substitution, small-caps, letter-spacing or caused text to overlap. See bug 40156511, bug 40430936, bug 40444347, bug 40286561.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (≤40)
Removed
  • This feature was removed in a later browser version (preview)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.2)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Does not work with `transform` SVG presentation attribute. Only works with `transform` CSS property. See bug 201854.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Does not work with `transform` SVG presentation attribute. Only works with `transform` CSS property. See bug 201854.

Syntax

HTML 
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40"
    fill="#3498db" stroke="#2c3e50" />
</svg>

Live demo

basicshape

A demo pattern for basic shapes in CSS.

PreviewFullscreen

Path and polygon

A demo pattern for paths and polygons in CSS.

PreviewFullscreen

Text and group

A demo pattern for text and groups in CSS.

PreviewFullscreen

Use cases

  • Using SVG

    The SVG image format, represented by the <svg> element, creates two-dimensional vector graphics with declarative or scripted interaction and animation.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features