The following questions are confusing me. I know they are related, but...
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)?
<!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)".
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.
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.
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.
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).
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With