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.


<!DOCTYPE html>
<title>Data attributes</title>
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
const user = document.querySelector('#user');

console.log( === 'user');
console.log( === '1234567890');
console.log(user.dataset.user === 'johndoe');
console.log(user.dataset.dateOfBirth === '');

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

console.log('someDataAttr' in user.dataset === false);
user.dataset.someDataAttr = 'mydata';
console.log('someDataAttr' in user.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 compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
datasetChrome Full support 55Edge Full support 17Firefox Full support 51IE No support NoOpera Full support 41Safari Full support 10WebView Android Full support 55Chrome Android Full support 55Firefox Android Full support 51Opera Android Full support 41Safari iOS Full support 10Samsung Internet Android Full support 6.0


Full support  
Full support
No support  
No support

See also