The SVGElement.dataset property allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element. It is a map of DOMStrings representing keys to DOMStrings representing the values for those keys, with one entry for each custom data attribute. Each key corresponds to the name of a custom data attribute; for example, a custom attribute named data-foo is in the map with the key "foo".

The name of a custom data attribute begins with "data-". It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_). Moreover, it should not contain ASCII capital letters (A to Z).

A custom data attribute name is transformed to a key for the DOMStringMap entry with the following rules:

  • the prefix "data-" is removed (including the dash);
  • for any dash (U+002D) followed by an ASCII lowercase letter a to z, the dash is removed and the letter is transformed into its uppercase counterpart;
  • other characters (including other dashes) are left unchanged.

The opposite transformation, that maps a key to an attribute name, uses the following rules:

  • Restriction: A dash must not be immediately followed by an ASCII lowercase letter a to z (before the transformation);
  • a prefix "data-" is added;
  • any ASCII uppercase letter A to Z is transformed into a dash followed by its lowercase counterpart;
  • other characters are left unchanged.

The restrictions established in the rules above ensures that the two transformations are the inverse one of the other.

For example, the attribute named "data-abc-def" corresponds to the key "abcDef".


string = SVGElement.dataset.camelCasedName;

SVGElement.dataset.camelCasedName = string;


The value of dataset is a DOMStringMap object mapping key names to values; both the key names and the values are, themselves, DOMString objects. You can access an individual value by using the syntax SVGElement.dataset.keyName to refer to the key.


<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe

var el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false

el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true


Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'SVGElement.dataset' in that specification.
Candidate Recommendation This attribute was added to the specification in SVG 2.

Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 55 17 51 No 41 10
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 55 55 17 51 41 10 ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.