SVG resizing in IE9

Question

I've got an inline SVG element inside a div, which scales to fit the browser window. When the browser is resized, the SVG image resizes with it, so that all the image is visible, and it keeps the same proportions.

However, in IE9, the image is much smaller, and doesn't resize. Taking off the viewBox scales the image to the full size, which is too big, and it still doesn't resize.

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

This jsfiddle shows the problem in action (i.e. it's fine in Chrome, and not fine in IE9). Resizing the frame borders should make the image resize.

<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>

score 2 · Accepted Answer · answered Aug 07 '12 at 09:17

I haven't tested this in IE yet but if you're looking to use 100% width and height the I assume you either want it to be 'fullscreen' or to fit within 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. With jQuery, for example, you can do the following:

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

This is assuming that you want your #outer container to be the width and height of the window when the window is resized.

Hi @Ahmed I've the same issue but I'd like to avoid JS solutions as much as possible. Have you got a CSS way of doing this? — Raffaele Rossi, Mar 07 '14 at 10:43

score 0 · Answer 2 · answered Aug 07 '12 at 09:17

I know you've said you'd like to avoid setting the width and height, but that's the only way I've managed to get it to work, personally.

Though I did figure out that you only need to set the height, you can leave the width at 100%, so:

        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 I know to be the original width and height of the SVG..

SVG resizing in IE9

2 Answers2

Linked