How do I get SVG to render with transparency in web-kit?

Question

I am having issues embedding SVG into a webpage. I have found the simplest method to just use an image tag. For example:

<img src="my_graphic.svg" height="100"/>

Works in web-kit. I do not need to explicitly set the width and the browser will maintain the aspect ratio. Very nice!

This doesn't work in Firefox though - it's not cross browser. So how about embedding as an object?

<object type="image/svg+xml" 
        height="100"
        width="554"
        data="my_graphic.svgz">
        <span/></object>

This time I'm using svgz and the mime type has been added and voila! It works in both firefox and webkit. However, in webkit I need to explicitly state the width or we get some nasty containing element scrollbars. But what's worse is the background is no longer transparent. It's rendered with a white background.

So one method works perfectly in webkit. The other works perfectly in mozilla. What can I do to get it working reliably in both?

Interested in a demonstration of this? See my link for reference: http://sumocreations.com/demo/svg/new_dttg.html

Answer 1

Place an <img> tag inside your object.

The object will render in firefox, and webkit should show the <img> tag.

Edit:

Also, what's up with the self closed span tag? <span> does not support self closing.

Answer 2

I don't believe it's currently possible for the <object> to have a transparent background in WebKit. There's a bug filed for this problem. I don't know of a workaround.

Answer 3

The only work around I found was by detecting whether an img utilizing an SVG source is rendered properly. I do this by only specifying one dimension. Either the height or the width but not both. I can then test if the alternate dimension is greater than zero. If it is I hide the the object. If not I hide the image. Here is how to do it with jQuery:

<script type="text/javascript">
    $(document).ready( function() { 
        if($('img.logo').width() < 1) {
        $('img.logo').hide(); $('object.logo').show();
    } else {
         $('img.logo').show(); $('object.logo').hide();
        }
     });
</script>

See the demonstration: http://sumocreations.com/demo/svg/new_dttg.html