Do SVG docs support custom data- attributes?

SvgWeb Standards

Svg Problem Overview


In HTML5, elements can have arbitrary metadata stored in XML attributes whose names start with data- such as <p data-myid="123456">. Is this part of the SVG spec too?

In practice this technique works fine for SVG docs in many places. But I'd like to know if it's part of the official SVG spec or not, because the format is young enough that there's still a lot of incompatibility between browsers, especially in mobile. So before committing to code I'd like know if I can expect future browsers to converge on supporting this.

I found this message from the working group mailing list saying they "expect [they] will" support it. Did this become official?

Svg Solutions


Solution 1 - Svg

While other answers are technically correct, they omit the fact that SVG provides an alternative mechanism for data-*. SVG allows any attribute and tag to be included, as long as it doesn't conflict with existing ones (in other words: you should use namespaces).

To use this (equivalent) mechanism:

  • use mydata:id instead of data-myid, like this: <p mydata:id="123456">
  • make sure you define the namespace in SVG opening tag, like this: <svg xmlns:mydata="http://www.myexample.com/whatever">

EDIT: SVG2, currently W3C Candidate Recommendation (04 October 2018), will support data- directly (without namespaces, the same as HTML). It will take some time before the support is widespread though. Thanks @cvrebert for pointing this out.

Solution 2 - Svg

The [data-* attribute](http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes "HTML5: Embedding custom non-visible data with the data-* attributes") is part of HTML5. It’s not a generic XML attribute.

The current SVG W3C Recommendation is [SVG 1.1](http://www.w3.org/TR/2011/REC-SVG11-20110816/ "Scalable Vector Graphics (SVG) 1.1 (Second Edition)") (from 2011-08). It doesn’t allow this attribute, as you can check in the [attributes list](http://www.w3.org/TR/2011/REC-SVG11-20110816/attindex.html "SVG 1.1: Appendix M: Attribute Index").

The [same](http://www.w3.org/TR/2012/WD-SVG2-20120828/attindex.html "SVG 2: Appendix J: Attribute Index") is the case for the [SVG 2 Working Draft](http://www.w3.org/TR/2012/WD-SVG2-20120828/ "Scalable Vector Graphics (SVG) 2") (from 2012-08). Update (2015): It seems that [it’s intended](https://www.w3.org/Graphics/SVG/WG/track/actions/3694 "SVG Working Group Tracker: ACTION-3694: Add 'data-*' attributes notes to spec.") to support data-* attributes in [SVG 2](http://www.w3.org/TR/SVG2/ "Scalable Vector Graphics (SVG) 2") (currently still a Working Draft).

Solution 3 - Svg

Solution 4 - Svg

there is a more general mechanism.

svg supports desc elements which may contain arbitrary xml from other namespaces. link instances of this elements or child nodes from you own namespace by dependent ids or refid attributes.

this is the relevant part of the spec (5.4).

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLeopdView Question on Stackoverflow
Solution 1 - SvgjohndodoView Answer on Stackoverflow
Solution 2 - SvgunorView Answer on Stackoverflow
Solution 3 - SvgcvrebertView Answer on Stackoverflow
Solution 4 - SvgcollapsarView Answer on Stackoverflow