SVG <object>, <embed> problems with different browsers

[luftikus143]

Hi there,

I am displaying some graphs in SVG. They are created in PHP, and, for Safari no problem, inserted like this:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="1090" height="101.3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

But it seems that other browsers have a problem with it. If I am supposed to use the OBJECT tag, do i need to put the SVG than in a separate file? Or is there a possibility to avoid that?

Thanks for any help!

[drhowarddrfine]

You need to specify the units (px) for the width/height. You are also using an old doctype. It should be: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

SVG does not work in IE at all without a 3rd party javascript library. Modern browsers don't need the object tag the way you're using it here.

[Dormilich]

there are 2 ALA articles about SVG:
Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I
Using SVG For Flexible, Scalable, and Fun Backgrounds, Part II

[luftikus143]

Thanks a lot for the info. I was aware of the articles, and used them partially for guidance.

What I did now was to use the OBJECT tag to include the PHP file which generates and outputs (not in a separate file) the SVG code:

<object type="image/svg+xml" width="1000" height="1000" data="generate_svg.php&some-parameters-here"></object>

The thing is, that now, I have to pre-define the width and height of the object. But I don't know it in advance. It depends on the parameters the user has selected before. Is there anyway to keep those two parameters in the OBJECT tag flexible?

Thanks for your help!

[Dormilich]

Is there anyway to keep those two parameters in the OBJECT tag flexible?

using JavaScript?

[luftikus143]

Hmmm..... But how?

I have my OBJECT

<object name="svg_document"...

and within my SVG

<svg width="1170" height="3176.1"....

So, how could I possibly drill down to these height & width parameters?

It looks as if I could use something like

var svgDoc = document.svg_document.getSVGDocument()

but that doesn't really work...

Thanks for any help!

[Dormilich]

as usual, put an ID to the svg tag and use document.getEle mentById()

[luftikus143]

thanks for that. Fiddeling around and found this [1]

var svgDoc = document.getElementById('svg_document').contentDocument; 
alert(svgDoc.rootElement)

No error. That's already good news. But how to dig deeper and get the width/height of the SVG?

On another site [2] I found this information:

var svg = document.getElementsByTagName('object')[0].contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

But that doesn't work either....

[1] http://groups.google.la/group/comp.l...bde5fddf100683
[2] http://stackoverflow.com/questions/6...the-object-tag

[Dormilich]

But how to dig deeper and get the width/height of the SVG?

Element.getAttr ibute("width") ?

[luftikus143]

wow, thanks a lot!! I was just starting to bypass this by writing the width/height into a file and reading it into the PHP code to then set the OBJECT...

But this one works:

var svg = document.getElementsByTagName('object')[0].contentDocument.getElementsByTagName('svg')[0];
document.getElementsByTagName('object')[0].height=svg.getAttribute('height');
document.getElementsByTagName('object')[0].width=svg.getAttribute('width');

Thanks a lot!!

[Dormilich]

var svg = document.getElementsByTagName('object')[0].contentDocument.getElementsByTagName('svg')[0];
document.getElementsByTagName('object')[0].height=svg.getAttribute('height');
document.getElementsByTagName('object')[0].width=svg.getAttribute('width');

optimizable:

var hoe = document.getElementsByTagName('object')[0];
var svg = hoe.contentDocument.getElementsByTagName('svg')[0];
hoe.height = svg.getAttribute('height');
hoe.width  = svg.getAttribute('width');