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

StackOverflow https://stackoverflow.com/questions/1071328

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), and when I am embedding SVG in a XHTML, I do not have at all the same result.

I can use the <object> or the <embedded> elements (but I think the last one is deprecated). I use them like that:

<div id="map_canvas" style="width: 900px; height: 900px">
  <object data="test.svg" width="100%" height="100%" type="image/svg+xml"/>
</div>

And the size and the scale of the SVG is not the same with Firefox and Safari. In my SVG, the width, height and viewBox are defined.

Is there a way to have the same result with all the browsers (I don't care about IE that doesn't support SVG..., so "all the browsers" means at least the latest versions of Firefox, Opera and Safari) ?? Maybe something I forgot to define ?

EDIT: I also noticed that with <object>, the SVG is transparent with FF, but not transparent with Safari... :( Is there a "standard" way to include a SVG ??

Thank you for your help

Was it helpful?

Solution

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)

OTHER TIPS

If you are using svgweb for IE rendering of SVG you can achieve the same behaviour for most browsers. This assumes your SVG is not interactive (contains javascript), oterwise it needs to be embedded for any browser.

<html>
  <head>
    <!--[if IE]>--><script type="text/javascript" src="javascripts/svg/svg.js"></script><!--<![endif]-->
  </head>
  <body>
    <div id="map_canvas" style="width: 900px; height: 900px">
      <!--[if !IE]>--><img src="test.svg" width="900" height="900" /><!--<![endif]-->
      <!--[if lt IE 9]><object src="test.svg" classid="image/svg+xml" width="900" height="900"></object><![endif]-->
      <!--[if gte IE 9]><object data="test.svg" type="image/svg+xml" width="900" height="900"></object><![endif]-->
    </div>
  </body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top