Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML 5, inline SVG, and namespace awareness for SVG DOM

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

like image 857
Patt Mehta Avatar asked Apr 27 '14 04:04

Patt Mehta


People also ask

What is SVG xmlns http www w3 org 2000 SVG?

SVG namespace. http://www.w3.org/2000/svg is an XML namespace, first defined in the Scalable Vector Graphics (SVG) 1.0 Specification and subsequently added to by SVG 1.1, SVG 1.2 and SVG 2. The SVG namespace is mutable; names may be added over time by the W3C SVG Working Group by publication in W3C Technical Reports.

Is xmlns required for SVG?

Note: The xmlns attribute is only required on the outermost svg element of SVG documents. It is unnecessary for inner svg elements or inside HTML documents.

What is the SVG DOM?

The SVG DOM allows attributes to be accessed even though they haven't been specified explicitly in the document markup. When this happens an appropriate object is created, initialized and returned. This newly constructed object does not affect rendering until it is modified for the first time.

What is HTML namespace?

A Namespace is a set of unique names. Namespace is a mechanisms by which element and attribute name can be assigned to a group. The Namespace is identified by URI(Uniform Resource Identifiers).


1 Answers

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.

like image 145
Alohci Avatar answered Sep 17 '22 04:09

Alohci