This article is from SVG Namespaces Docs . If you have any questions, please see the original version. The original version is a mix of Chinese and English.
As a dialect of [XML ,] SVG needs to be in a [namespace] (is namespaced). It is important to understand the concept of namespaces and how they are used when you plan to edit SVG content. Versions of the SVG viewer predate the release of Firefox 1.5, with little attention to namespace issues, but they are essential to multi-XML dialect supporting user agents such as Gecko -based browsers which must be very strict. Now, spend a little Time to understand namespaces, which will save you all kinds of trouble later.
The long-term goal of the W3C is to make it possible to mix different types of [XML] base content in the same XML document. For example, SVG and MathML can be incorporated directly into XHTML-based scientific documents. Being able to mix content types like this has many advantages, but also a very real problem to solve.
Contrary to popular belief, the answer to this question is not “it can be known from the DOCTYPE declaration”. DTDs are not designed with mixed content in mind, and past attempts to create mixed content DTDs are now considered failures. XML, and some XML dialects (including SVG), do not require
DOCTYPE declarations, much less SVG 1.2. The fact that DOCTYPE declarations (usually) match what’s in a single content-type file is just coincidence. DTDs are only used for verification, not content identification. User agents that cheat and identify XML content using its DOCTYPE declaration cause harm.
The real answer to the question is that the XML content tells the consumer which dialect tag name belongs to which by giving explicit tags a “namespace declaration”.
3. Declare the namespace
So what do these namespace declarations look like, and where are they used, as shown in the following example:
<svg xmlns="http://www.w3.org/2000/svg"> <!-- more tags here --> </svg>
Note that namespaces are just strings, so those namespaces on SVG that look like URIs don’t matter. Because URIs are widely used because of their uniqueness, they are not intended to “link” to an address. (The fact that URIs are used so frequently is that “namespace URI” is commonly used rather than “namespace name” being used.)
Fourth, redefine the default namespace
If all the children of the root node are also defined as the default namespace, how do you mix in another namespace? Very simple, you just need to redefine the default namespace. Here is a simple example.
< html xmlns = "http://www.w3.org/1999/xhtml" > < body > <!-- put some XHTML tags here--> < svg xmlns = "http://www.w3.org /2000/svg" width = "300px" height = "200px" > <!-- put some SVG tags here --> </ svg > <!-- put some XHTML tags here --> </ body > </ html >
In this example
xmlns attribute of the root node defines XHTML as the default namespace. The result is that it and all its subsection tags, except
<svg> tags, are interpreted by user agents as belonging to the XHTML namespace.
<svg> The tag has it’s own
xmlnsproperties, by redefining the default namespace, telling the user agent
<svg> that the tag and the tags he contains (unless they also redefine the default namespace) belong to SVG.
See, namespaces are actually not that hard to understand.
5. Declare the namespace prefix
XML dialects not only define their own tags, but also their own attributes. By default, attributes have no namespace at all, and are only known to be unique because they appear on elements that themselves have unique names. However, it is sometimes necessary to define attributes so that they can be reused on many different elements and still be considered the same attribute, regardless of the element that uses them.
hrefThe attributes defined by the XLink specification are a good example. This attribute is often used by other XML dialects as a means of linking to external resources. But how to tell the user agent which dialect the attribute belongs to, in this case XLink? Consider the following example.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script xlink:href="cool-script.js" type="text/ecmascript"/> </svg>
This example has rather unusual appearance properties
xmlns:xlink. As you might guess from the first ‘xmlns’ part, this is another namespace declaration. However, instead of setting the default namespace, this namespace declaration sets the namespace for something called a “namespace prefix”. In this case, we choose to use the prefix
xlink(part two) because the prefix will be used to tell the user agent that the attribute belongs to the XLink.
As the name implies, the namespace prefix is used to prefix attribute names and label names. This is done by placing a namespace prefix and a colon before the property name, as shown in the
<script>markup in the example above. This tells the user agent that this particular attribute belongs to the namespace assigned to the namespace prefix (XLink), and is an attribute that can have the same meaning on other tags.
Note that using a prefix that is not yet bound to a namespace name is an XML error. The binding created by the property in the example above is absolutely necessary
xmlns:xlinkif the property does not cause an error.
xlink:hrefThis XLink attribute is also frequently used in SVG
<image>tags, etc., so it’s a good idea to always include an XLink declaration in your document.
By the way, it’s useful to know that namespace prefixes can also be used to tag names. This tells the user agent that this particular tag (but not its subtags this time!) belongs to the namespace assigned to the prefix. Knowing this will save you some confusion if you come across such a markup in the following example:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <body> <h1>SVG embedded inline in XHTML</h1> <svg:svg width="300px" height="200px"> <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/> </svg:svg> </body> </html>
Note that it is not necessary to redeclare the default namespace because the namespace prefix is used for the
<svg:svg>tag and its children .
<svg:circle>In general though it’s better to redeclare the default namespace instead of prefixing a lot of tags this way.
Namespaces affect not only markup, but also scripts. If you’re scripting namespaced XML (such as SVG), read on.
This DOM level 1 recommendation is the original namespace recommendation in XML published; therefore, DOM1 is namespace-agnostic. This causes problems with namespace XML such as SVG. To address these issues, the DOM Level 2 core adds namespace-aware equivalents of all applicable DOM Level 1 methods. When scripting SVG, it is important to use namespace-aware methods . The following table lists the DOM1 methods that should not be used in SVG, and the equivalent DOM2 counterparts that should be used.
The first parameter of all DOM2 namespace-aware methods must be the namespace name (also known as the namespace URI) of the associated element or attribute. For SVG elements, this is ‘http://www.w3.org/2000/svg’. Note, however: [The namespace] of the associated element or attribute. For SVG elements, this is ‘http://www.w3.org/2000/svg’. Note, however: The namespace advice in XML 1.1 states that the namespace name of an attribute without a prefix has no value. In other words, although the attribute belongs to the tag’s namespace, you are not using the tag’s namespace name. Instead, you must use null as the namespace name for an unqualified (unprefixed) attribute . So, to create an SVG
document.createElementNS() with , you have to write:
But to retrieve
x attribute values on SVG elements
rect, you have to write:
Note that this is not the case for attributes with namespace prefixes (attributes that do not belong to the same XML dialect as the tag). Properties such as
xlink:hrefproperties require a namespace name assigned to this prefix (for XLink, http://www.w3.org/1999/xlink).
xlink:hrefSo, to get an attribute value of an element in an SVG ,
<a>you can write:
For setting properties with namespaces, it is recommended (but not required) that you also include their prefix in the second parameter, so that it is easier to convert the DOM back to XML later (for example, if you want to send it back to the server). E.g:
elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');
As a final example, here’s how to
<image>create an element dynamically using a script:
var SVG_NS = 'http://www.w3.org/2000/svg'; var XLink_NS = 'http://www.w3.org/1999/xlink'; var image = document.createElementNS(SVG_NS, 'image'); image.setAttributeNS(null, 'width', '100'); image.setAttributeNS(null, 'height', '100'); image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png');
Make sure to always declare the namespace you use in the XML file. If you don’t do this, user agents like Firefox won’t recognize your content and will just display the XML markup or notify the user that there is an error in the XML. When creating a new SVG file, it’s best to use a template that includes all common namespace declarations. If you haven’t already, start writing this code:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> </svg> or <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg>
Even if you don’t use all of these namespaces in a particular document, it doesn’t hurt to include namespace declarations. It might save you from some annoying bugs if you end up adding something to one of the unused namespaces.
A complete official example SVG: Namespaces Crash Course: Examples