SVG with PNG fallback

[rink.attendant.6]

I'm designing a web application for a company and I'm given the opportunity to use nice vector icons. I'm told that most (if not all) of the computers will be upgraded to Windows 7 with Internet Explorer 9 by the end of the summer, however I still need to aim for compatibility with IE 7 and 8. I'm using HTML5 and therefore I should be able to do inline SVG, however obviously this doesn't work in IE 7 or 8 so I'm left with two options:

<object data='example.svg' type='image/svg+xml' width='128' height='128'><img src='example.png' width='128' height='128'></object>

Or

<!--[if lte IE 8]><img src='example.png' width='128' height='128' ><![endif]--><!--[if gt IE 8]><img src='example.svg' width='128' height='128'><![endif]--><!--[if !IE]> --><img src='example.svg' width='128' height='128'><!-- <![endif]-->

I was unable to properly test the first version, as I am using a development (localhost) server on a computer that has IE 9, and there seems to be a bug in the Developer Tools in that SVG images will render even if you set the Browser mode to Internet Explorer 7 or 8. So I'm wondering if the PNG fallback will even appear (I don't have a computer with IE 7 or 8 to test this on at the moment.) Another issue with the first piece of code is that I've heard Firefox and Chrome (and possibly Safari) downloads the alternate image in addition to the SVG: http://stackoverflow...bject-tags?rq=1While this isn't a huge deal considering they are small icons, I'd like to avoid it if possible. Finally, I'd also like to mention that I'd like to stay away from <iframe> and the Raphael.js library if possible. Any idea on how to do this?

Edited July 8, 2012 by rink.attendant.6

[Ingolme]

<iframe> is no longer deprecated in HTML 5. I'd recommend the iframe for SVG content.

[rink.attendant.6]

See I'm reading through the HTML5 spec and it says that <iframe> is for inserting a nested browsing context, and a browsing context is defined to be:

A browsing context is an environment in which Document objects are presented to the user.

However, the <object> element says:

The object element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.

Whereas <embed> is still more appropriate than <iframe>, however it implies that <embed> is for interactive content. Is <iframe> still the best option here?

[Guest So Called]

<iframe> is no longer deprecated in HTML 5. I'd recommend the iframe for SVG content.

So they deprecated the deprecation of the IFRAME tag? That's pretty funny when you think about it.

[rink.attendant.6]

Actually I found out that by using <object> or <iframe>, Firefox does not recognize the block-level link that surrounds it (i.e. the SVG image isn't clickable) so I guess I'm going to stick with the <img> tag with conditional comments.