Get svg graphics size using javascript

Question

To add svg graphics to an html page, an object tag is usually used to wrap it like this:

<object id="svgid" data="mysvg.svg" type="image/svg+xml" wmode="transparent" width="100" height="100"> this browser is not able to show SVG: <a linkindex="3" href="http://getfirefox.com">http://getfirefox.com</a> is free and does it! If you use Internet Explorer, you can also get a plugin: <a linkindex="4" href="http://www.adobe.com/svg/viewer/install/main.html"> http://www.adobe.com/svg/viewer/install/main.html</a> </object> 

If you do not use the width and height attributes in the object tag, svg will be displayed in full size. I usually get svg files from the Open Graphics Library for testing. Is there a way to get svg size using javascript? Or maybe I should just look at the svg xml file to find out the size of the top svg tag?

Answer 1

See http://dev.opera.com/articles/view/svg-evolution-not-revolution/?page=2

You can access the SVG DOM referenced by the HTML object: while the SVG file is in the same domain (otherwise it will be a security vulnerability. If your object tag has id = "myobj", you will do:

 var obj = document.getElementById("myobj"); // reference to the object tag var svgdoc = obj.contentDocument; // reference to the SVG document var svgelem = svgdoc.documentElement; // reference to the SVG element 

Then you can access the width / height of the svg element with:

 svgelem.getAttribute("width") svgelem.getAttribute("height") 

Please note that these attributes can be such as “100px”, “300”, “200em”, “40mm”, “100%”, so you need to parse it carefully.

Answer 2

Is there a way to get svg size using javascript?

No and yes.

not

Not:

JavaScript will not be able to access the contents of the SVG file sitting in the browser.

Thus, it would be impossible to have a page containing an arbitrary SVG image, and then JavaScript would determine something from the SVG file itself.

The only JS data that can access it is on the DOM page: the original markup plus any JS related changes to the DOM. You can access the attributes of the object element and descendant nodes, but this will not give you the appearance of anything more than what you can see if you look at the page layout yourself.

Yes:

JS (in modern browsers) can parse any XML string in the DOM, and then access the content using DOM-based methods.

You can get the contents of an SVG file by issuing a request of the type xmlHttpRequest (i.e. JS performs an HTTP GET to the URL of the SVG file). After that, JS will have a full line of SVG XML file, and you can access anything.

Or maybe I should just look at the svg xml file to find out the size of the top svg tag?

That would be more likely.

The only JS-based solution will require JS to execute a GET request on the URL of the SVG file (as indicated above), which is hardly possible - each page load can double load each SVG file, and parsing SVG XML in the DOM by JS can be too resource intensive.

When JS extracts the contents of the SVG XML and parses it in the DOM to get only the image dimensions, this is a bit overkill. This is entirely possible, but generally not practical.

Querying the server side of the SVG XML content, determining the appropriate width and height, and then dynamically adding the width and height attributes before returning the markup to the browser would be the best choice.

Answer 3

Is there any way to get svg size using javascript?

Yes

 var filesize = function(url, requestHandler) { var requestObj = new XMLHttpRequest(); requestObj.open('head', address, true); requestObj.onreadystatechange = callback; requestObj.send(null); }; 

Now the processing function:

 var requestHandler = function(result) { if (this.readyState === 1) { this.abort(); } return this.getResponseHeader("Content-length"); }; var size = fileSize("http://whatever.org/someSVGFile.svg", requestHandler); alert(size); 

This should return the file size of your svg or any other file without a hitch. Server configuration is the only thing that can interfere.