13

The following questions are confusing me. I know they are related, but...

  1. Is HTML 5 namespace aware (for including tags of SVG/other XML dialects)?
  2. If it is not, then what about this -

    I have read this old link, but I am totally confused... because Mozilla says "to dynamically modify inline SVG, scripting needs to be done this way" - so finally, how can I dynamically modify inline SVG (if HTML 5 is not namespace aware)?

  3. Or the page needs to be served as (X)HTML 5?

Details - 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello-SVG</title>
</head>
<body>
    <svg width="200" height="200">
        <rect x="0" y="0" width="100" height="100" fill="blue"></rect>
    </svg>
</body>
</html>

The above code is the correct way to render a rect (using SVG) in HTML 5. Now, to modify the SVG using JavaScript, Mozilla recommends using this API. And my question is, what is the point of doing so if HTML 5 is not namespace aware? For such cases do browsers automatically switch to (X)HTML 5?

I read this comment on SO, and I find it closest to the answer I'm looking for -

I guess the HTML 5 SVG situation is basically "SVG without a namespace gets the namespace added during parsing (but after that it's just like (X)HTML before)".

Community
  • 1
  • 1
Patt Mehta
  • 4,110
  • 1
  • 23
  • 47

1 Answers1

31

HTML5 defines HTML, XHTML and the DOM.

The DOM is namespace aware. When you use DOM methods you must take into account which namespace each element is in, but the default is the HTML (http://www.w3.org/1999/xhtml) namespace.

HTML and XHTML are serializations that are converted into DOMs by parsing.

XHTML is namespace aware and XHTML documents apply namespaces according to the rules of XML, so all namespaces must be assigned to each element explicitly. XHTML is converted to a DOM using an XML parser.

HTML is also namespace aware, but namespaces are assigned implicitly. HTML is converted to a DOM using an HTML parser, which knows which elements go in which namespace. That is, it knows that <div> goes in the http://www.w3.org/1999/xhtml namespace and that <svg> goes in the http://www.w3.org/2000/svg namespace. Elements like <script> can go in either the http://www.w3.org/1999/xhtml or the http://www.w3.org/2000/svg namespace depending on the context in which they appear in the HTML code.

The HTML parser knows about HTML elements, SVG elements, and MathML elements and no others. There is no option to use elements from other namespaces, neither implicitly nor explicitly. That is, xmlns attributes have no effect.

Patt Mehta
  • 4,110
  • 1
  • 23
  • 47
Alohci
  • 78,296
  • 16
  • 112
  • 156
  • However, judging by [this experiment](http://jsbin.com/tusaxuc/2/edit?html,js,console) it’s not possible to assign an explicit namespace through HTML5 markup. You can create an element or attribute with an explicit namespace programmatically though. – tomekwi Sep 17 '15 at 21:24
  • 1
    @tomekwi - That's what the answer says - it is not possible in the HTML serialization of HTML5 that you use in your experiment. It is possible using the DOM API, i.e. what you refer to as "programmatically". – Alohci Sep 17 '15 at 21:42
  • @Alohci Sorry – I seem to have skipped over the last two sentences of your answer :) Thanks for clarifying this again! – tomekwi Sep 17 '15 at 22:02
  • 2
    @Alohci What about the SVG xlink namespace http://www.w3.org/1999/xlink ? When I leave out the xmlns:xlink declaration and the xlink prefix on use href attributes Chrome doesn't put href in the http://www.w3.org/1999/xlink namespace and doesn't render the SVG element correctly anymore. Is it a Chrome bug? – hfmanson Oct 18 '15 at 13:31
  • 1
    @hfmanson - You are correct and it's not a bug. *Elements* are limited to the HTML, SVG and MathML namespaces. On SVG and MathML elements, the HTML parser maps a few attributes into the XML, XMLNS and XLINK namespaces if they start with "xml:" "xmlns:" or "xlink:" respectively. Note that these are not like XML prefixes, assignable to an arbitrary namespace, they are just magic attribute names with fixed assignments. Details are at http://www.w3.org/TR/html51/syntax.html#attributes-2:foreign-elements-2 – Alohci Oct 18 '15 at 16:17
  • @Alohci - Indeed, when I leave out the xlink xmlns declaration but not the xlink "prefix" it works... HTML5 is a horrible spec ;), because elements, as you said, are automatically assigned to a namespace and apparently attributes are not – hfmanson Oct 18 '15 at 20:10
  • You say the default namespace is `http://www.w3.org/1999/xhtml`, but HTML5 is not based on XHTML, so how can this be the case? I understand that you say HTML5 encompasses XHTML (for HTML5, I guess), but that wouldn't explain why the document is using an XHTML-specific namespace. – Melab Sep 25 '17 at 17:56
  • 1
    @Melab. It doesn't matter. The namespace name is just a meaningless string of characters, which in this case happens to contain the character sequence "xhtml". – Alohci Sep 25 '17 at 21:08
  • This is great information. I tracked down an official reference: https://www.w3.org/TR/html52/infrastructure.html#xml – Garret Wilson Mar 30 '19 at 14:09