Rectangle 27 0

xhtml SVG is not rendering in IE 10 with Doctype HTML 4?


<!DOCTYPE html>

@Apparao Why do you need to have an HTML4 DOCTYPE?

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.

No. IE9 only displays SVG in standards mode and you need the html5 doctype to get it in standards mode. I added a link to the answer which is Microsoft's statement on the subject.

You should use that.

thanks for the response. Is there any work-around or solution to make it work with HTML 4 Doctype. I need to have the Doctype as HTML 4 only.

Note
Rectangle 27 0

xhtml SVG is not rendering in IE 10 with Doctype HTML 4?


<!DOCTYPE html>

@Apparao Why do you need to have an HTML4 DOCTYPE?

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.

No. IE9 only displays SVG in standards mode and you need the html5 doctype to get it in standards mode. I added a link to the answer which is Microsoft's statement on the subject.

You should use that.

thanks for the response. Is there any work-around or solution to make it work with HTML 4 Doctype. I need to have the Doctype as HTML 4 only.

Note
Rectangle 27 0

xhtml SVG is not rendering in IE 10 with Doctype HTML 4?


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

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

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.

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

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

The key difference is that

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

causes the browser to be in almost standards mode.

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

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

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.

Note
Rectangle 27 0

xhtml SVG is not rendering in IE 10 with Doctype HTML 4?


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.

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

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

Note
Rectangle 27 0

xhtml SVG is not rendering in IE 10 with Doctype HTML 4?


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

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

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.

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

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

The key difference is that

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

causes the browser to be in almost standards mode.

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

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

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.

Note
Rectangle 27 0

xhtml SVG is not rendering in IE 10 with Doctype HTML 4?


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.

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

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

Note
Rectangle 27 0

xhtml SVG is not rendering in IE 10 with Doctype HTML 4?


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.

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

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

Note