So what do these namespace declarations look like, and where do they go? Here is a short example.
<svg xmlns="http://www.w3.org/2000/svg">
</svg>
The namespace declaration is provided by the xmlns
parameter. This parameter says that the <svg>
element and its child elements belong to whichever XML dialect has the namespace name http://www.w3.org/2000/svg
which is, of course, SVG. Note that the namespace declaration only needs to be provided once on a root element. The declaration defines the default namespace, so the user agent knows that all the <svg>
element's descendants also belong to the same namespace. User agents check to see if they recognize the namespace name to determine if they know how to handle the markup.
Note that namespace names are just strings, so the fact that the SVG namespace name also looks like a URI isn't important. URIs are commonly used because they are unique, the intention is not to "link" somewhere. (In fact URIs are used so frequently that the term "namespace URI" is commonly used instead of "namespace name".)
Redeclaring the default namespace
So if all the descendants of the root element are also defined to be in the default namespace, how do you mix in content from another namespace? Easy. You just redefine the default namespace. Here's a short example.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
</svg>
</body>
</html>
In this example the xmlns
parameter on the root <html>
element declares the default namespace to be XHTML. As a result, it and all its child elements are interpreted by the user agent as belonging to XHTML, except for the <svg>
element. The <svg>
element has its own xmlns
parameter, and by redeclaring the default namespace, this tells the user agent that the <svg>
element and its descendants (unless they also redeclare the default namespace) belong to SVG.
See, namespaces really aren't that hard.
Declaring namespace prefixes
XML dialects not only define their own elements, but also their own parameters. By default, parameters don't have a namespace at all, and are only known to be unique because they appear on an element that itself has a unique name. However, sometimes it is necessary to define parameters so that they can be reused on many different elements and still be considered to be the same parameter, independently of the element with which they are used. A very good example of this is the href
parameter defined by the XLink specification. This parameter is commonly used by other XML dialects as a means to link to external resources. But how do you tell the user agent which dialect the parameter 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 the rather unusual looking parameter xmlns:xlink
. As you may 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 have chosen to use the prefix xlink
(the second part) since the prefix will be used to tell the user agent about attributes that belong to XLink.
As their name suggests, namespace prefixes are used to prefix parameter and element names. This is done by putting the namespace prefix and a colon before the parameter name as shown on the <script>
element in the example above. This tells the user agent that the particular parameter belongs to the namespace assigned to the namespace prefix (XLink), and is a parameter that can be used with the same meaning on other elements.
Note that it is an XML error to use a prefix that hasn't been bound to a namespace name. The binding created by the xmlns:xlink
parameter in the example above is absolutely essential for the xlink:href
parameter to not cause an error. This XLink parameter is also frequently used in SVG on the <a>
, <use>
and <image>
elements among others, so it's a good idea to always include the XLink declaration in your documents.
As an aside, it's useful to know that namespace prefixes can also be used for element names. This tells the user agent that the particular element (but not its children this time!) belongs to the namespace assigned to the prefix. Knowing this will save you some confusion if you come across markup like in the following example:
<html
lang="en"
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 because a namespace prefix is used for the <svg:svg>
element and its child <svg:circle>
, it wasn't necessary to redeclare the default namespace. In general though it is better to redeclare the default namespace rather than prefix lots of elements in this way.