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

Asked 1/7, 2009 at 20:50 Answered 23/9, 2011 at 9:18

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

Estelleesten answered 1/7, 2009 at 20:50 Comment(2)

Thanks for the question. This helped me loads to sort out my cross browser support for svg files. Shame support is not more consistent. – Vinna 18/8, 2010 at 21:3

In passing, another factor that may explain differences in browser rendering of SVG files is the letter-spacing attribute. It is currently not supported in Firefox, see developer.mozilla.org/en-US/docs/Web/SVG/Attribute/… – Unfold 3/12, 2016 at 6:12

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)

Furthermore answered 2/7, 2009 at 5:55 Comment(4)

Thanks It works. But about the transparency? If you put something below the SVG, there is a white background with Safari, but not with FF. And if I use the <img> element to embed my SVG, it works (without background) with Safari, but not with FF (that's the reason why the GGroundOverlay doesn't work with FF, it uses a <IMG> to embed the SVG - see my first question on Overlay SVG with google map) – Estelleesten 2/7, 2009 at 8:7

gave you some hints about the transparency issue. tell me if you can solve this prob.. – Wedded 2/7, 2009 at 8:57

Ok Thank you for all these answers. I will probably choose the tag depending on the browser. Thanks for pointing the links (and the webkit bug) ! – Estelleesten 2/7, 2009 at 10:29

OMG set the with and height attribute in the svg file to relative values (e.g. 100%). I've been searching for hours.... Thank you!!! – Dominus 21/9, 2012 at 19:8

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>

Crider answered 23/9, 2011 at 9:18 Comment(0)

Recommended topics

Hot tags