What is the meaning of svg:svg?
In XHTML code, one can use namespaces to distinguish other XML-based languages included in the webpage. Here, the namespace "svg" is used before the tag "svg".
namespace:tagnameThis can be useful in case two tags (for example, in XHTML and SVG) have the same name and you want to exactly specify which one you refer to. The tags can be specified with the xmlns attribute. As you know, XHTML documents start with
<html xmlns="http://www.w3.org/1999/xhtml">you may specify the prefix as
<html xmlns:prefix="http://www.w3.org/1999/xhtml">and then you'll use
<prefix:head> <prefix:title></prefix:title></prefix:head>Similarily you can use
<svg xmlns="http://www.w3.org/2000/svg">instead of just <svg> when including your svg graphic. Then all svg tags will start with the svgprefix prefix. However if you have child SVG nodes, they will also need this xmlns attribute to be defined. In such a case, defining the prefix will probably be easier.
From the documentation for D3.js's append() method:
The element's tag name may have a namespace prefix, such as "svg:text" to create a "text" element in the SVG namespace. By default, D3 supports svg, xhtml, xlink, xml and xmlns namespaces. Additional namespaces can be registered by adding to
d3.ns.prefix.
Note in particular that the namespace prefixes in D3.js are not based on your document, but a predefined map of common prefixes to the actual namespace URL.
Namespaces are the way an XML document (which includes XHTML but not HTML) can include two attributes or elements with the same name (e.g. "sin" as in mathematical sine calculation vs. "sin" as in moral failing) without conflict. Putting an <svg> element in an XHTML document has no meaning unless that SVG element is in the SVG namespace.
For more information, read Namespaces in XML.