Resize SVG in IE9

Question

I have an inline SVG element inside a div that scales to fit the browser window. When the browser size changes, the SVG image changes with it so that the entire image is visible and it maintains the same proportions.

However, in IE9, the image is much smaller and does not resize. Removing the viewBox scales the image to full size, which is too large, and it still does not resize.

I found that by setting the width and height of the containing div, the image will be larger, but only with fixed pixels, and not 100%, which is what I need.

This jsfiddle shows the problem in action (i.e., this is good in Chrome, not in IE9). Resizing the borders of the frame should resize the image.

<div id="outer"> <svg viewBox="0 0 700 1000" xmlns=http://www.w3.org/2000/svg> <g transform="rotate(90, 350, 350)" id="pitch-rotated"> <title>Pitch</title> <path d="m0,0l1000,0l0,700l-1000,0l0,-700z" stroke-width="5" stroke="#fff" fill="#008800" id="perimiter"/> <line id="centre-line" y2="700" x2="500" y1="0" x1="500" stroke-width="5" stroke="#ffffff" fill="none"/> <path id="penalty-box-home" fill="none" stroke="#fff" stroke-width="5" d="m0,148.5l165,0l0,403l-165,0l0,-403z"/> <path id="six-yard-box-home" fill="none" stroke="#fff" stroke-width="5" d="m0,258.5l55,0l0,183l-55,0l0,-183z"/> <path d="m1000,148.5l-165,0l0,403l165,0l0,-403z" stroke-width="5" stroke="#fff" fill="none" id="penalty-box-away"/> <path d="m1000,258.5l-55,0l0,183l55,0l0,-183z" stroke-width="5" stroke="#fff" fill="none" id="six-yard-box-away"/> <circle fill="none" stroke="#ffffff" stroke-width="5" cx="500" cy="350" r="95" id="centre-circle"/> <circle fill="none" stroke="#ffffff" stroke-width="10" cx="500" cy="350" r="1" id="centre-spot"/> <circle fill="none" stroke="#ffffff" stroke-width="7" cx="110" cy="350" r="1" id="penalty-spot-home"/> <circle fill="none" stroke="#ffffff" stroke-width="7" cx="890" cy="350" r="1" id="penalty-spot-away"/> <path d="m165,277.5a91,91 1 0 10,145" stroke="#ffffff" stroke-width="5" fill="none" id="penalty-curve-home"/> <path d="m835,277.5a91,91 0 0 00,145" stroke="#ffffff" stroke-width="5" fill="none" id="penalty-curve-away"/> <path d="m0,10a7.5,7.5 0 0 010,-10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-home-left"/> <path d="m0,690a7.5,7.5 0 0 110,10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-home-right"/> <path d="m1000,10a7.5,7.5 0 0 1-10,-10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-away-left"/> <path d="m1000,690a7.5,7.5 0 0 0-10,10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-away-right"/> </g> </svg> </div> 

Answer 1

I have not tested this in IE yet, but if you want to use 100% width and height, I assume that you either want it to be “full screen” or fit in a container. Since you also mentioned that it scales correctly when ...

setting the width and height of the containing div will make the image larger, but only with fixed pixels

... then you can use JS for this. For example, in jQuery you can do the following:

 $(window).resize(function() { $('#outer').css({ width: $(window).width() + 'px', height: $(window).height() + 'px' }) }); 

It is assumed that you want your #outer container to be the width and height of the window when resizing the window.

Answer 2

I know that you said you want to avoid setting the width and height, but this is the only way I managed to get it to work personally.

Although I found out that you only need to set the height, you can leave the width equal to 100%, therefore:

  var container = this.$('.container'), width = container.width(), scale = svg.width / width; container.height(parseInt(svg.height / scale, 10)); 

Where svg.width and svg.height are the values ​​that I know as the original width and height of the SVG.