svg inline in HTML5 and svg custom attribute

Question

<!DOCTYPE html>
<html>
...
<body>
<svg version="1.1" id="svg1" data-kind="myvalue"></svg>
</body>
</html>

When I tried to validate the code above on w3 site, I recieved the error below.

Error: Attribute data-kind not allowed on element svg at this point. ...svg version="1.1" id="svg1" data-kind="button">

How can I write a custom attribute in html5 for inline SVG and how can I create a custom namespace or dtd. I will be approciated if you can show and example or tutorial. I will be waiting for your help about how to solve this problem.

That are at least three questions in one which is much too broad. What is the main problem? — feeela, Jul 31 '14 at 10:51
There is no problem at runtime. however, I would like to code in web standards. and the w3c validator warns me about it. — KaanA, Jul 31 '14 at 13:14
That's because it's not a known attribute. There's not much you can do about it though. You can't create custom namespaces in html, only in xml or xhtml. — Robert Longson, Jul 31 '14 at 13:20
Thank you for reply. so how do I do it with xhtml. Could you give an example? — KaanA, Jul 31 '14 at 13:51
use xmlns to define the namespace and then your-namespace:attribute to use it. — Robert Longson, Jul 31 '14 at 21:27

score 4 · Answer 1 · edited May 23 '17 at 10:30

4

In HTML5, svg is an element from the SVG namespace.

So it is not an HTML element.

Thus you can’t use attributes that are defined for HTML elements only, among them the custom data-* attributes or Microdata attributes etc.

It’s also not possible to use data-* attributes inside of SVG documents.

edited May 23 '17 at 10:30

Community

1
1

answered Jul 31 '14 at 15:54

unor

92,415
26
211
360

svg inline in HTML5 and svg custom attribute

1 Answers1