Fixing an SVG gotcha
So there you are thinking I just need to put this graphic in to my web page and everyone will be happy. But your graphic just happens to be an SVG. Great, you think, that will look ace at all the sizes I need to show it. This is mostly true, but there are a few catches that will require you to do a little extra work. Firstly IE8 and older just won’t so you will need to provide an alternative for these browsers such as:
<!--[if lt IE 9]>
<h1><img class="logo" src="images/logo.png" /><span>Login</span></h1>
<!<![endif]-->
<!--[if gt IE 8]>
<h1><img class="logo" src="images/logo.svg" alt="" /><span>Login</span></h1>
<!<![endif]-->
<!--[if !IE]><!-->
<h1><img class="logo" src="images/logo.svg" alt="" /><span>Login</span></h1>
<!--<![endif]-->
The gotcha
This is good, we have an SVG where we can and a PNG where we just can’t. Now comes the gotcha: IE looks for a viewBox
attribute on an svg in order to correctly scale it. Only some SVG creation and editing programs include this attribute; note that Inkscape does not by default. So, we must ensure that this attribute is present. SVG images are just markup so we can open them in our favorite text editors. We now need to add the viewBox attribute like this (see the last line):
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="541.02563"
height="281.4584"
viewBox="0 0 541.02563 281.4584"
We add the viewBox=
line with the value 0 0 [width] [height]
. When we use this fixed SVG, IE will scale it as we would hope. Otherwise, if the viewBox
line is not in your SVG, IE will clip your SVG at the size your were expecting to scale too.