svg tag with xmlns is required?

Question

<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">

There is xmlns= http://www.w3.org/2000/svg is this required/nesesery? If yes, why?

Answer 1

SVG is a XML dialect. For a standalone file to be fully compliant, it has to be well-formed and start with

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" ...>

If some part is missing, some program (think of grafic editors, rendering libraries and XML parsers) may not be able to interpret it.

The second line, containing the doctype declaration, is only needed for validating parsers wanting to compare the file content with the structure of the linked DTD. That will mostly be tools that are not used for rendering, but for pure and abstract parsing of XML. I know of no dedicated SVG renderer that would need that line.

Browsers are not fully XML compliant. For a standalone SVG file you can leave off the first line with the XML prolog. In fact, most renderers will still work without it. But if you leave off the namespace attribute, even browsers will not render the file, instead the following message will appear:

This XML file does not appear to have any style information associated with it. The document tree is shown below.

Remember that a data URI is also treated as a standalone file and needs to quote the namespace attribute if its mime type is image/svg+xml.

If you use a <svg> element inside a HTML document, all this does not apply. The <svg> element is defined as a HTML element, and HTML does not demand XML wellformedness. Even without the namespace declaration, browsers will render the SVG content (if they implement SVG at all).

That is not to say they completely ignore the namespace. The HTML5 spec says:

To enable authors to use SVG tools that only accept SVG in its XML form, interactive HTML user agents are encouraged to provide a way to export any SVG fragment as an XML namespace-well-formed XML fragment.

For example this javascript code

var svgRoot = document.querySelector('svg');
var xmlString = new XMLSerializer().serializeToString(svgRoot);

will export a string containing the namespace attribute.

And, even more important, with the following code

var svg = document.createElement('svg');
document.querySelector('body').appendChild(svg);

the SVG content will not be rendered correctly. While the element is appended to the DOM tree, it is not recognized as SVG content, but treated as a custom HTML element. Instead, you need to do this:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
document.querySelector('body').appendChild(svg);

Important Note: The .createElementNS() is needed every time an element from the SVG namespace (<rect>, <g>, <use>, ...) is newly created, not only for the root <svg> element.