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

Author - Pawandeep Kaur
31.10.2018
|
0 Comments
||

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

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

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