Are SVG parameters such as 'xmlns' and 'version' needed?

Question

In about half of the svg examples I see on the internet, the code is wrapped in plain simple <svg></svg> tags.

In the other half, the svg tags have lots of complicated attributes like this:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  version="1.1" 
  xmlns:xlink="http://www.w3.org/1999/xlink"> 

My question is: is it ok to use the simple svg tags? I've tried playing around with the complicated ones, and everything works fine at my end if I don't include them.

Outlying

Answer 1

All user agents (browsers) ignore the version attribute, so you can always drop that.

If you embed your SVG inline in a HTML page and serve that page as text/html then xmlns attributes are not required. Embedding SVG inline in HTML documents is a fairly recent innovation that came along as part of HTML5.

If however you serve your page as image/svg+xml or application/xhtml+xml or any other MIME type that causes the user agent to use an XML parser then the xmlns attributes are required. This was the only way to do things until recently so there is a lot of content served like this.

Treatment

"All UAs ignore the version attribute, so you can always drop that." - but what does spec have to say about the matter? "Browsers will let you get away with it" is (or has at some point been) true of many practices that are (or were) unambiguously incorrect. – Laughter

In IE11, if I put <!DOCTYPE svg xmlns="www.w3.org/2000/svg"> it works, but if I take away the xmlns or change it to <!DOCTYPE svg xmlns="www.example.com"> it doesn't work. Why is that? – Equate

@RobertLongson : When you say "the xmlns attributes," does that include xmlns:xlink? – Tifanytiff

Would the "Embedding SVG inline in HTML documents" part also hold true to css files, when using data-uri's? – Extra

@Extra not if those data-uris are image/svg+xml, which is usually the case, then the final part of the answer holds. – Treatment

@DonaldDuck FYI, if the SVG is inline (ie within the HTML), the doctype doesn't have to be included if you've already defined a doctype at the top of your HTML page. – Depravity

@Tifanytiff Any xmlns: attributes just declares a prefix for a namespace. You don't need any of that if you don't use the prefix. So if your SVG doesn't have xlink: attributes, it's unnecessary. As in every XML document. – Bard

Answer 2

The xmlns="http://www.w3.org/2000/svg" attribute is:

• Required for image/svg+xml files. ¹
• Optional for inlined <svg>. ²

The xmlns:xlink="http://www.w3.org/1999/xlink" attribute is:

• Required for image/svg+xml files with xlink: attributes. ¹
• Optional for inlined <svg> with xlink: attributes. ²

The version="1.1" attribute is:

• Recommended to comply with image/svg+xml files standards. ³
• Apparently ignored by every user agent. ⁴
• Removed in SVG 2. ⁵

¹ Internationalized Resource Identifiers (RFC3987)
² Since HTML5
³ Extensible Markup Language (XML) 1.0
⁴ Probably until the release of further major versions.
⁵ SVG 2, W3C Candidate Recommendation, 07 August 2018

Transitive

Does it need to be http or can it be https as well? – Timer

@Timer both protocols are compatible :D – Transitive

Are you sure about it? This post of Nick Craver implies something else, which is the reason I asked this question in the first place (because it seemed illogical to me). – Timer

@Timer yes here you have an inlined example HTTP HTTPS and image/svg+xml file with inlined svg with xlink attributes example HTTP HTTPS – Transitive

Thanks, guess Nick Craver makes mistakes as well then ;) – Timer

@Timer ooo ... i guess i understood your question now: you can host an inlined SVG or file with http and https protocols. some tests showed me that the xmlns attribute has to be http. it is only a resource identifier string and the browser doesn't include those URLs :D – Transitive

What about when you serve SVGs using a data: URL (either as an attribute value in HTML, or in CSS)? Is the xmlns required then? (Does that count as 'inline'?) – Trigger

Do not mistake the version attribute of the xml declaration (<?xml version...) for the version attribute of the <svg> element. The first one is about the version of the XML markup language, while the latter one specifies the version of SVG. The author of this answer made that mistake by refering to the XML, not the SVG specification in ³. I tried to correct it, but some idiotes rejected the edit. – Resurgent

There is no mention of xmlnsin the reference 2. Could you update the answer? – Threephase

To echo zrajm's question, what about background-image: url('data:image/svg+xml;utf8,<svg... in CSS ? – Phenothiazine

Answer 3

I'd like to add to both answers, but I have no points, I'm adding a new answer. In recent tests on Chrome (Version 63.0.3239.132 (Official Build) (64-bit Windows)), I have found that:

1. For inline SVG that is directly entered into the HTML file, via text editor or javascript and elm.innerHTML, the xmlns attributes are not necessary, as stated in the other two answers.
2. But for inline SVG that is loaded via javascript and AJAX, there are two options:
   • Use xhr.responseText and elm.innerHTML. This does not require the xmlns.
   • Use xhr.responseXML.documentElement and elm.appendChild() or elm.insertBefore(). This method of creating the inline SVG produces half-baked results without the basic SVG namespace being declared, as in xmlns="http://www.w3.org/2000/svg". The <svg> loads into the HTML, but document-level functions, such as getElementById() are not recognized on the <svg> element. I assume that this is because it uses the XMLHttpRequest XML parser outside of the HTML.

Component

Answer 4

About SVG version attribute the MDN WebDoc says

Deprecated since SVG 2
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The version attribute is used to indicate what specification a SVG document conforms to. It is only allowed on the root element. It is purely advisory and has no influence on rendering or processing.

PS: The SVG 2 is far from becoming a standard yet.

Menagerie

Note: the above only applies to the "version" attribute, not "xmlns" xmlns is an XML (not SVG) feature and as such in HTML5 (when not used as XML/XHTML) it is not relevant or needed but in SVG embedded in XML for any reason it would be – Closestool