data-*

The data-* SVG attributes are called custom data attributes. They let SVG markup and its resulting DOM share information that standard attributes can't, usually for scripting purposes. Their custom data are available via the SVGElement interface of the element the attributes belong to, with the HTMLElement.dataset property.

The * can be replaced by any characters allowed in XML's rules for names, with the following restrictions:

  • Can't start with xml.
  • No semicolons (;, U+003A).
  • No capital A to Z letters.

Note: The HTMLElement.dataset property is a DOMStringMap that provides the attribute data-test-value via SVGElement.dataset.testValue. Hyphen characters (-, U+002D) are removed and the next letter is capitalized, resulting in the camel case format.

You can use this attribute with any SVG element.

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# DataAttributes

Browser compatibility

desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
data

See also