Get size of SVG graphics by javascript

Question

To add a svg graphics in html page, it is common to use object tag 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"&gt;http://getfirefox.com&lt;/a&gt; 
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"&gt;
http://www.adobe.com/svg/viewer/install/main.html&lt;/a&gt;

</object>

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

Answer 1

> Is there any way to get svg's size by using JavaScript?

No and yes.

No:

JavaScript won't be able to access the SVG file contents that are sitting in the browser.

So it wouldn't be possible to have a page containing an arbitrary SVG image and then have JavaScript determine anything from the SVG file itself.

The only data JS can access it that contained within the page's DOM: the original markup plus any JS-related modifications to the DOM. You could access the object element's attributes and descendant nodes, but that won't give you visibility of anything more than what you can see if you look at the page markup yourself.

Yes:

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

You could get the SVG file contents by issuing an xmlHttpRequest-style request (i.e. JS performs an HTTP GET on the SVG file's URL). JS would then have the SVG file's full XML string and you can then access anything you like.

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

This would be more feasible by far.

The only JS-based solution would require JS to perform a GET request on the SVG file's URL (as above), which is unlikely to be feasible - each page load might result in double-downloading each SVG file, and the parsing of the SVG's XML into a DOM by JS might be too resource intensive.

Having JS retrieve the SVG's XML content and parse it into a DOM to retrieve only the image dimensions is a bit overkill. It's perfectly possible, but generally not practical.

Querying the SVG's XML content server-side, determining a suitable width and height and then dynamically adding the width and height attributes prior to returning markup to the browser would be your best bet.

Answer 2

Thanks for the information. That answers my question. In most cases, I want to use some svg graphics in my blogger or web page. I can get size information from the svg file easily and modify my Object tag's size attribute to display the original svg graphic in full size.

My next question is that if I can get the root DOM element of the svg xml graphic? For example, in a svg xml graphic, the top or toot node is something like:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0.0000000" y="0.0000000" 
 width="640.00000" height="480.00000" onload="RunScript(evt)" id="svg1306">

Normally, you can get element in JavaScript like this:

top.document.getElementById("svg1306"); // not able to get svg's element

I know that the svg xml file is referenced by data attribute in Object tag in a web page, as the example I posted in my first question. Not sure if there is any easy way to get the root element. If it is possible, not sure if I can get the first g tag element of the svg xml file like this:

var svgDoc = top.document.getElementById("svg1306"); //possible? or any way to get it?
var gElement = svgDoc.getElementById("layer1"); // possible?

I think the second "possible?" should be OK as long as I could get a defined svgDoc since the search is under the svgDoc. However, it is searching for the element in svg xml, still not sure.

The reason I ask these questions is that I am very interested in svg xml graphics and I am trying to use/manipulate them by adding my JavaScript codes in my html or web page without adding scripts in svg xml (in some cases, I don't own a svg xml but I can reference to it).

Answer 3

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

It is possible to get access to the SVG DOM referenced by an HTML:object as long as the SVG file is on the same domain (otherwise this would be a security vulnerability. If your object tag has id="myobj" you would 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 get access to the svg element's width/height by:

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

Note that these attributes may be things like "100px", "300", "200em", "40mm", "100%" so you need to carefully parse it.

Answer 4

Is there any way to get svg's size by using JavaScript?

YES

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

Now a handling 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); 

That should return the filesize of your svg or any other file without a hitch. Server configuration is the only thing that might interfere.