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 SVGElement.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
AtoZletters.
The SVGElement.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 camelCase format.
Specifications
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 The definition of 'data-*' in that specification. |
Candidate Recommendation | Custom data attributes are new in SVG 2. |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Microsoft Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 55 | 51 (51) | ? | ? | 41 | 10 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|
| Basic support | No support | 51.0 (51) | No support | 41 | 10 | 54 |
See also
SVGElement- The
SVGElement.datasetproperty used to access these attributes from scripts. - Using data attributes