We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 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 A to Z letters.

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

Document Tags and Contributors

Tags: 
Contributors to this page: Tigt, hasalex, Sheppy
Last updated by: Tigt,