Volker E. Volker E. - 1 year ago 80
HTML Question

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

Several questions already take on clarifying SVG namespace usage here.
When is the XML declaration

<?xml version="1.0" encoding="utf-8"?>
needed in using SVG within HTML5:

  • as inline images via

  • as CSS

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 I haven't found an explicit statement on when the XML doctype is necessary or when it could be left out?


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

Update 2016-07-04: Clarified that question is about XML declaration and not falsely assumed doctype. Thanks @Martin Honnen!

Answer Source

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"