How to get SVG for rendering with transparency in web kit?

Question

I am having trouble embedding SVG on a web page. I found the easiest way to just use the image tag. For instance:

<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 aspect ratio. Very nice!

This does not work in Firefox, although it is not a cross browser. So what about investing as an object?

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

This time I use svgz and the mime and voila type is added! It works in both firefox and webkit. However, in webkit I need to explicitly specify the width or get some nasty scroll-containing elements. But worse, the background is no longer transparent. It is displayed on a white background.

, webkit. . , ?

? . : http://sumocreations.com/demo/svg/new_dttg.html

Answer 1

, , img, SVG. , . , , . , . , . , . 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>

. : http://sumocreations.com/demo/svg/new_dttg.html

Answer 2

, , <object> WebKit. , . .

Answer 3

Place the tag <img>inside your object.

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

Edit:

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