SVG too small in Internet Explorer

Question

Got this strange problem where IE do not want to obey the viewbox size of an SVG in my HTML.

viewBox="0 0 1000 563"

It works in all other browsers I've tried, but fails on IE on Windows (I run Win 8.1 w/IE 11.0). It seems to work on IE/Edge on Win10 though, even in IE<11 compability mode).

I really don't understand how to fix this problem, but I've read that IE does have problems with viewbox and size. But I can't find a way to fix it.

If anyone have any ideas how I could go about fixing this, then please let me know.

Here are the code in question, and 2 print-screens showing correct (firefox) and incorrect rendering (IE).

Code:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 563">
    <image class="trinn2" width="100%" height="100%" xlink:href="http://dummy.url"></image>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M718,467 L714,414 L656,412 L658,468 Z" id="poly_7557"></path>
    </a>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M588,468 L656,465 L656,411 L585,410 Z" id="poly_7559"></path>
    </a>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M484,410 L484,472 L586,468 L586,410 Z" id="poly_7560"></path></a><path class=" solgt poly  " d="" id="poly_7561"></path>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M846,369 L849,417 L789,416 L769,414 L767,361 Z" id="poly_7562"></path>
    </a>

    ... and so on ...

Screen from Firefox on top, and IE on bottom: (see the smaller SVG on IE. Defaults to 150px height.)

EDIT: PHP code

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 563">
        <image class="trinn2" width="100%" height="100%" xlink:href="<?php echo $left_image_markup; ?>"></image>
        <?php echo $left_facing;?>
         </svg>

Rochette

Add width and height attributes to the svg element. – Vampirism

It should be responsive. Fill height based on width. – Rochette

With a viewBox it will be responsive even if you have height and width. You can make the height and width percentages. – Vampirism

Will give it another try and let you know. Thanks so far :) – Rochette

You might also want to check out css-tricks.com/scale-svg and tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css – Eugenieeugenio

height and width on svg is not working. percentages gives no result, and set values is not responsive in my tests.. Will check out those links CBroe – Rochette

Cant get it to work. I've read those articles before, but I just cant get it to work. Defining a height and with for parent div works, but I need to be able to set width=100%, and height should be whatever it needs to be to fit the svg. Just as firefox or chrome renders them. – Rochette

Setting parent wrapper with padding-bottom only worked after setting the SVG itself as absolut. – Rochette

Answer 1

I used javascript to detect the parent element's width/height and then set the SVG w/h to the same. I added the code to the $(window).resize event so that it dynamically adjusted the SVG when the browser window is resized.

function updateSVG() {
    var svg = $('#mySVG').first();
    if (svg != undefined && svg.length > 0) {
        var vb = svg.attr('viewBox');
        if (typeof (vb) == "string") {
            var c = vb.split(' ');
            if (c.length >= 4) {
                requestAnimationFrame(function () {
                    var w = c[2];
                    var h = c[3];
                    var pw = svg.parent().width();
                    svg.width(pw);
                    svg.height(pw*w/h);
                });
            }
        }
    }
}
$(window).resize(function() {
    updateSVG();
});

Syl

Answer 2

I've tried to solve this using all the tips from the articles posted and others I founc while searching for a solution. Nothing seemed to work for me.

I solved it (probably not the best way) by doing the following:

The parent div was given a padding-bottom with percentage to keep aspect ration, and the svg itself had to be positioned absolutely.

Rochette

Answer 3

Try including your svg as an object and giving it a width of 100% using CSS.

<object  style="width: 100%" type="image/svg+xml" class="full-width"  data="yoursvg.svg">Your browser does not support SVGs</object>   

Marrs