SVG in HTML5 – when is XML declaration `<?xml version="1.0" encoding="UTF-8"?>` needed?

Asked 3/7, 2016 at 11:26 Answered 7/2, 2020 at 16:15

When using SVG within HTML5: Is the XML declaration <?xml version="1.0" encoding="UTF-8"?> needed with SVG

as images via <img> or
as CSS background-images?

This is slightly related to “Are SVG parameters such as 'xmlns' and 'version' needed”. The namespaces issues are clarified as necessary by the two answers and the MDN Namespace crash course.

But SVG 1.1 doesn't include statement on necessity of XML declaration or when it could be left out?

Example without declaration:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <circle id="circle--red" cx="30" cy="30" r="30" fill="#f00"/>
</svg>

Update 2016-07-04: Clarified that question is about XML declaration. Thanks @Martin Honnen! Update 2017-10-24: Changed to “UTF-8“ uppercase and SVGO optimized attribute order.

Hominoid answered 3/7, 2016 at 11:26 Comment(2)

<?xml version="1.0" encoding="utf-8"?> is the XML declaration, it is not a doctype. – Yakut 3/7, 2016 at 14:3

An in-depth answer on general XML file necessity of the XML declaration is provided at https://mcmap.net/q/166580/-does-a-valid-xml-file-require-an-xml-declaration In short, in XML version 1.0 the declaration is optional, but you might run into issues with encoding or certain (text) editors. – Hominoid 14/11, 2017 at 2:23

For HTML5, the correct DOCTYPE declaration is

<!DOCTYPE html>

It is needed to specify full standards mode to the browser.

What you've shown,

<?xml version="1.0" encoding="utf-8"?>

is an XML declaration. It is optional for XML 1.0 and required for XML 1.1, but

XML 1.1 isn't in widespread use.
version="1.0" and encoding="utf-8" are the defaults anyway.

Use an XML declaration in HTML5 when you wish to specify a different encoding, especially when the file might be consumed not just by browsers but also by XML processors.

For more information see HTML5: A vocabulary and associated APIs for HTML and XHTML.

Note regarding internal SVG (thanks, @Quentin): SVG embedded within an HTML5 document should not have an independent XML declaration. Only one XML declaration is allowed in well-formed XML, and it must be at the top, if anywhere. See this answer for further details regarding XML declaration placement requirements.

Note regarding external SVG (thanks, @Kaiido): SVG referenced via HTML5 img or CSS background-images must have its own XML declaration and should use the following DOCTYPE declaration:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Note regarding external SVG (update) (thanks, @user314159):

Per 1.3. SVG namespace and DTD of the Scalable Vector Graphics (SVG) 2 W3C Working Draft 09 July 2015:

A DTD is not provided in this specification, as the use of DTDs for validating documents is known to be problematic. In particular, DTDs do not handle namespaces gracefully and the range of constraints they can express is limited. It is recommended that authors do not include a DOCTYPE declaration in SVG documents.

[Emphasis added.]

Update (per SVG 2 W3C Editor’s Draft 08 March 2023, thanks @mhansen): The recommendation that authors do not include a DOCTYPE declaration in SVG documents has been removed.

Postconsonantal answered 3/7, 2016 at 16:50 Comment(7)

Just for clarity, it is probably worth mentioning that the XML declaration should be at the top of the document and that inline SVG in HTML 5 is part of the HTML 5 document, not independent and should not have its own XML declaration. – Cautionary 3/7, 2016 at 16:54

And not a single word about external svg? That's the point of the question... "as inline images via <img> as CSS background-images". In these cases, you should keep both xml declarations and doctype which should be <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> btw. – Reclaim 4/7, 2016 at 10:5

Answer updated to reflect helpful suggestions by Quentin and Kaiido. Thanks! – Postconsonantal 27/7, 2016 at 16:32

FYI: SVG2 Working Draft / Proposed Recommendation, recommends NO DOCTYPE at all for SVG documents. However, using SVG in XML does require an xmlns whereas in HTML it does not. "A DTD is not provided in this specification, as the use of DTDs for validating documents is known to be problematic. In particular, DTDs do not handle namespaces gracefully and the range of constraints they can express is limited. It is recommended that authors do not include a DOCTYPE declaration in SVG documents." -- w3.org/TR/2015/WD-SVG2-20150709/intro.html#Namespace – Atthia 26/10, 2017 at 9:52

Answer update to reflect helpful suggestion by @user314159. Thanks! – Postconsonantal 26/10, 2017 at 12:13

The latest version of the SVG 2 spec has removed the bit recommending not to include a doctype: svgwg.org/svg2-draft/single-page.html – Micronucleus 10/5, 2023 at 1:23

Answer updated to reflect helpful note by @Micronucleus regarding SVG 2 spec no longer explicitly recommending against including a DOCTYPE declaration. – Postconsonantal 10/5, 2023 at 12:23

I have found info here https://oreillymedia.github.io/Using_SVG/extras/ch01-XML.html that XML and DOCTYPE declaration is not needed...

The XML declaration is only required if you are using a non-Unicode character encoding (technically, anything other than UTF-8 or UTF-16).

You may also include an SGML DOCTYPE declaration, but it is no longer recommended for SVG.

Picturize answered 7/2, 2020 at 16:15 Comment(0)

Recommended topics

Hot tags