SVG issues in ie11

Question

I have a div that has it's height set to 320 pixels, then it's child is set to 100% width of that. The child of that is a SVG file which I set the width to 200% of the container. In chrome and firefox that works fine, I get a nice image like this:

The HTML looks like this:

<div class="kit-template ng-isolate-scope front">
    <div class="svg-document ng-scope">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.5 131.4" enable-background="new 0 0 259.5 131.4" xml:space="preserve" class="ng-scope">
            <!-- Removed for brevity -->
        </svg>
    </div>
</div>

and the CSS/SASS looks like this:

.kit-template {
    overflow: hidden;
    position: relative;   
    height: 320px;

    .svg-document {  
        width: 100%;   
        overflow: hidden;
        margin: 0 auto;
        /*position: absolute;
        bottom: 0;*/

        svg {
            width: 200%;

            path, polyline, polygon, rect {
                cursor: pointer;
            }
        }
    }
}

Like I said, this works fine in both Chrome, Firefox and IE Edge. But in IE11 I get this:

And if I inspect the element, I can see that the SVG looks like it has padding left and right on it, but I can assure you it doesn't.

Does anyone know why this is happening and how I can fix it?

Update 1

I have created a very simple version on codepen so you can see the issue. Here it is:

http://codepen.io/r3plica/pen/Kdypwe

View that in chrome, firefox, Edge and then IE11. You will see that only IE11 has the issue.

Answer 1

What you can do is add the height="320" attribute to your SVG tag. So IE can render correctly. I believe IE11 is thrown off by using width 200% in your CSS. But since xml:space="preserve" is the default, setting only the height will keep the proportions of your SVG jacket.

Test codepen example in IE11:

http://codepen.io/jonathan/pen/MarvEm

<svg height="320" viewBox="0 0 248.2 142.8" enable-background="new 0 0 248.2 142.8" xml:space="preserve">

Also remove the XML namespace tag since it is not needed inside an HTML page. And you can also remove some of the SVG attributes like version , xmlns , xmlns:xlink , x , and y , since those are not needed as well.

Answer 2

I was having SVG image display issue in IE11. The issue was inner svg image was having width and height mentioned. Due to this it was failing to scale properly on IE11 and it was working fine on IE edge, chrome, firefox very fine.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">

To fix the issue I removed width="120" height="120" and its working fine. When I observed svg image was having width="120" height="120" viewBox="0 0 120 120" but in IE11 it was only showing width="120" height="120" .

output was:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">