Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG is not rendering in IE 10 with Doctype HTML 4

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

like image 920
Apparao Avatar asked Jan 14 '23 06:01

Apparao


2 Answers

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.

like image 129
Alohci Avatar answered Jan 29 '23 10:01

Alohci


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.

like image 30
Robert Longson Avatar answered Jan 29 '23 09:01

Robert Longson