SVG is not rendering in IE 10 with Doctype HTML 4

StackOverflow https://stackoverflow.com/questions/14772026

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? */

Était-ce utile?

La solution

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.

Autres conseils

The standard html 5 doctype is

<!DOCTYPE html>

You should use that.

IE 9/10 will only display SVG for html 5 documents and xhtml documents. Your alternative doctype marks the contents as xhtml so that's why that works.

Two Things:

  1. Make sure that your web server is serving your SVG files with the proper mime-type: "image/svg+xml". I had this issue with an old version of Lighttpd.

  2. You can override IE's rendering mode by adding the X-UA-Compatible Meta tag:

    < meta http-equiv="X-UA-Compatible" content="IE=edge" />

This will force IE into standards mode, while keeping an older doctype. This would NOT be best practice, but seems to work in IE10.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top