I just came across a case where I wanted to include a vector graphic (SVG) in a web site. After a little editing in Inkscape I just saved the image and successfully included it in a web site by using
<img src=”logo.svg” width=”300″ alt=”Logo” />
Everything looked nice in Chromium on Ubuntu so I went to bed happily. The next morning I loaded the page in an Internet Explorer 8 at work and gasped. I fixed a couple of W3C validation warnings and at most of the page was now looking as expected. Just that the Internet Explorer refused to display SVG images. After a bit of research I learned that “proper” SVG support was introduced in the later Internet Explorer 9. I desperately wanted to use SVG so I thought it would probably work for most visitors of the site who used a newer version of that so-called “browser”.
So I upgraded to Internet Explorer 10 (on my work laptop of course – I don’t use Windows personally) and loaded the page. So my SVG logo image could now be displayed but apparently it just showed me parts of the image and then clipped the rest. I found the problem explained on ServerFault with a nice example and finally saw the solution in Inkscape’s tips’n’tricks. The image must be saved as optimized SVG from Inkscape:
Then in the next options dialog you have to enable viewboxing:
(The german translation “Vorschau einschalten” was absolutely misleading here. Dear translators: please try to understand the feature before you try to translate it.)
The resulting SVG can then be displayed properly both in internet browsers as well as within the Internet Explorer 10. (Pun intended.)