SVG is not rendering in IE 10 with Doctype HTML 4

Question

<%@ Page Language="C#" .. %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 
 </body>
</html>

/*The above Code is not working. Not getting any output. if replace the second line the Doctype as below, it works.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Can any one help me in understanding whats the Key difference? */

Alohci Alohci · Accepted Answer · 2013-02-08T21:26:20

The key difference is that

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

causes the browser to use quirks mode. IE does not support SVG in quirks mode.

whereas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

causes the browser to be in almost standards mode.

You can turn your doctype into one that will render the SVG in IE9 very easily, just by adding a system identifier, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

I don't know whether this will work IE10, but if IE10 follows the HTML5 doctype parsing rules like it should, even the above doctype will cause quirks mode, and therefore may cause SVG not to render.

HTML 4.0 was replaced as a W3C recommendation by HTML 4.01 over thirteen years ago in 1999 so the absolute minimum doctype you should use is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

which will cause almost standards mode in HTML5 compliant browsers just like the XHTML doctype you mention does. But that was intended for people switching their sites from HTML 3.2.

Much better would be to ensure that your site works in standards mode. You can do that by using an HTML 4.01 strict doctype like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

That's the current W3C recommendation but it's still a bit long to remember. The shortest string that will do the same job of putting browsers into standards mode is

<!DOCTYPE HTML>

which is why it was chosen for use in HTML5 and later documents.

SVG is not rendering in IE 10 with Doctype HTML 4

3 Answers