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

xml html svg xml-declaration

17,794

Solution 1

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.]

Solution 2

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.

17,794

Author by

Volker E.

Die meiste Zeit mag ich das Internet. Dazu empfehle ich Mozilla Firefox inkl. Adblock Edge, (Disconnect.me || Ghostery), PureURL && (YesScript || NoScript). Und für SO-Enthusiasten Realtime Desktop Benachrichtigungen. I like the Internet, usually. To ensure longevity of affection I recommend Mozilla Firefox with extensions Adblock Edge, (Disconnect.me || Ghostery), PureURL && (YesScript || NoScript). And for SO enthusiasts real-time desktop notifications. Currently working for Wikimedia Foundation. Find me on Twitter @Volker_E

Updated on June 03, 2022

Comments

Volker E. almost 2 years
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.