how to get the real (unscaled) size of an embedded image in the svg document?!

Question

I have a SVG document with the image entry in it:

<image id="image12975" x="30" y="40" width="30" height="45"
xlink:href="img/Akira1.jpg">    
</image>

I have fetched the SVG Image in Javascript by doing:

var imgE = document.getElementsByTagName('rect');
document.getElementById('test').innerHTML = imgE;

brings me the [object SVGImageElement] in Javascript.

By iterating the object I have a full subset of functions and attributes. height and width of the function "getBBox()" bring me only the attribut values defined as width (30), and height (45).

I am looking for the real parameters, like I would open the picture alone, which are in reality width="300" and height="430" pixels.

for any support I would kindly thank you

Tamer

Answer 1

I figured out how to solve it entirely on the Javascript side level, without doing any XHR calls or whatever!

However, SVG doesn't have any dom functions to figure out the unscaled size of a picture.

Sollution!

Grab the SVGImageElement Object and it's URL from the attribute:

var myPicXE = document.getElementsByTagName('image')[0];
var address = myPicXE.getAttribute('xlink:href');

create an Image Object and assign it's src addres:

var myPicXO = new Image();
myPicXO.src = address;

and ask gently for it's height and width:

myPicXO.width;
myPicXO.height;

should work also work wit base65jpeg inline images ( http://en.wikipedia.org/wiki/Data_URI_scheme )

That's it!