97

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?

Improve this question

4 Answers 4

Reset to default
134

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.

EDIT 2: As @Martin pointed out in the comment, this feature is now officially part of SVG2 (thank you!).

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Third part of the equation: el.getAttribute('mydata:id') to get the data you attached to the SVG element. (Note: if you're using d3, the namespace will be stripped by default and you'll just el.getAttribute('id').)
This should be the accepted answer. SVG is an extension of XML which allows you to use tags from different namespaces.
Why does the namespace have to be custom? Why wouldn't declaring an HTML5 namespace in the document be enough to use data-* in SVG?
FYI, whether using a private namespace (e.g.: <svg xmlns="http://www.w3.org/2000/svg" xmlns:mydata="http://www.myexample.com/whatever"><text x="10" y="20" mydata:id="something">SVG</text></svg>) or the xhtml namespace, neither will validate on validator.w3.org/check (using SVG 1.1), but both do work in the browser. It's then possible to use either getAttribute or getAttributeNS to fetch the data.
@johndodo You might want to add a link to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/data-* as the documentation now officially lists it as a supported standard feature.
|
30

The data-* attribute is part of HTML5. It’s not a generic XML attribute.

The current SVG W3C Recommendation is SVG 1.1 (from 2011-08). It doesn’t allow this attribute, as you can check in the attributes list.

The same is the case for the SVG 2 Working Draft (from 2012-08). Update (2015): It seems that it’s intended to support data-* attributes in SVG 2 (currently still a Working Draft).

Improve this answer

Comments

18

data-* attributes on SVG elements are officially supported in the current draft of SVG2. See:

Improve this answer

Comments

10

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).

Improve this answer

6 Comments

Thanks for the pointer. Should I infer SVG doesn't officially support data- attributes?
Isn't desc meant for accessibility sakes?
@matt I don't think so, at least based On the stabndard.
@matt Not necessarily. Afaik the standard would only mention the purpose of annotation independent of any rendering. This doesn't contradict the element's suitability for the purpose. Specifically, there is a blog post discussing the use of aria-labelledby attributes and desc elements as accessible labels. MDN recommends a similar use. given the plethora of google results, best practices for accessible svg might be worth a question of its own,
@RockyRoad: not really - SVG specification explicitly allows such attributes (as opposed to for instance HTML/XHTML which doesn't). Also note that while you can (mis)use description elements for arbitrary data it is (IMHO) quite obvious from the link that this was not the intended purpose of the desc element. Not saying you shouldn't do it, just that there is a better way.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.