SVG images doesn't appear on ie 11

Question

What i'm trying to do is simple load svg inside img source to later draw it on my canvas. This works fine in all modern browsers and even in ie 9, 10 but not in ie 11. As i look closer it would still call "onload", but loads nothing with zero width and height. Here is very simple example that loads some svg image from wiki and print it's size inside div:

var imgObj = new Image();

imgObj.onload = function(){
    $("#output").html(imgObj.width);
};

imgObj.src = 'https://upload.wikimedia.org/wikipedia/commons/1/15/Svg.svg';

http://jsfiddle.net/zmLtrbr9/

Now if i draw this image on canvas it won't display.

Answer 1

Your problem doesn't seem to be that the image isn't appearing, but that there is no width associated with SVG <img> objects. Now, I am unable to say whether spec-wise that makes any sense or not, however I did find a simple workaround for it, the only (big) disadvantage is that it requires including the <img> in the DOM.

First we create a hidden div:

var hiddenDiv = document.createElement("div");
hiddenDiv.classList.add("hidden"); 

Where .hidden is defined as

.hidden{
    overflow:hidden;
    width:0px;
    height:0px;
}

Next we create the <img> and include it in the DOM

var imgObj = document.createElement('img'); //Note, new Image() is an artifact from
                                            // older times and synonymous for this
hiddenDiv.appendChild(imgObj);
document.body.appendChild(hiddenDiv);

To finally finish off again with your code (without the jQuery as you didn't tag your question as such)

imgObj.onload = function(){
    document.querySelector("#output").textContent = imgObj.width;
};
imgObj.src = 'https://upload.wikimedia.org/wikipedia/commons/1/15/Svg.svg';

var hiddenDiv = document.createElement("div");
hiddenDiv.classList.add("hidden");

var imgObj = document.createElement('img');
hiddenDiv.appendChild(imgObj);
document.body.appendChild(hiddenDiv);

imgObj.onload = function(){
    document.querySelector("#output").textContent = imgObj.width;
};
imgObj.src = 'https://upload.wikimedia.org/wikipedia/commons/1/15/Svg.svg';

.hidden{
    overflow:hidden;
    width:0px;
    height:0px;
}

<div id="output"></div>