Image.onload returns 0 for width/height of SVG image in 1E11

|
| By Webner

Problem: Image.onload returns width/height of SVG images “0” in 1E11:

When you try to get size of svg image file using “image.onload” event, this returns exact file size in all browsers (Firefox, Chrome, Safari) except IE11. It returns 0 for width and 0 for height in IE11.

You can also reproduce this problem by following these steps:

1. Open IE11.
2. Press F12 key to open the developer toolbar windows.
3. Write this script on console :

var image = new Image();
image.onload = function(){
	console.log(“Width: ” + this.width);
console.log(“Height: ” + this.height);
};
image.src='https://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg';

4. Now execute the above script and console will gives output as:
Width: 0
Height: 0

Solution:
You can get the correct size of SVG images by appending that image to DOM.
Call the appendChild() method with dom object.
Now, write the following script on console and execute it:

var image = new Image();
image.onload = function(){
document.body.appendChild(this);
	console.log(“Width: ” + this.width);
console.log(“Height: ” + this.height);
document.body.removeChild(this);
};
image.src='https://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg';

Leave a Reply

Your email address will not be published. Required fields are marked *