How to produce same result on different browsers when embedding SVG file in HTML code?

Question

I begin to have a solution for my previous question Overlay SVG diagrams on google map.

But I have another (smaller) problem. I am using Firefox 3.5 and Safari 4 (on Mac

Answer 1

I only get different results in size between Firefox and Safari (on Windows) when a viewbox is defined in the svg.

A solution is to

• set the width and height attribute in the object tag in html to absolute values (pixel)
• set the width and height attribute in the svg file to relative values (e.g. 100%)

Then both FF and Safari show the same behaviour! You should try this, if this is applicable to your situation.

EDIT: Concerning your new questions: - Transparency in Safari seems to be a bug: bugs Webkit - Standard way for embedding: I don't think there is a standard way. you can use object, iframe, img or svg (inline declaration).

If you want it to work in every browser, you probably have to use browser sniffing and use object or img tags depending on the browser. Or you should try iframes. as they are supposed to have transparent backgrounds in safari and firefox. (but don't know about opera)

Like always in webdev browser support is the big problem, as you can see here: svg support (when you click the image, you can check for the svg features in detail)