Anyways, I'm given the opportunity to use nice vector icons on the user interface of the program (that along with the default icons in jQuery UI). Now I'm told that by the end of the summer, most (if not all) computers in the organization will be upgraded to Windows 7, which means that people will be accessing the application using Internet Explorer 9 (phew... at least I don't have to make it backwards compatible with IE 6).
As far as I know, Internet Explorer 9 supports SVG, however I would like to design it so that there is a fallback for PNG icons, in case someone is accessing the application from home or a computer that is still running Windows XP (the application itself isn't entirely internal, it's Internet accessible).
What is the proper way of coding this? I have seen two generally accepted solutions:
<object data='example.svg' type='image/svg+xml' width='128' height='128'>
<img src='example.png' width='128' height='128'>
<!--[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]-->
Microsoft and many others seems to recommend the first option, however I have checked in Firebug and Chrome Developer that the (non-IE) browsers download both images (PNG and SVG), which isn't a huge deal considering they're just small icons, but I would like to avoid it if possible.
I am also unsure whether either solution work with IE 7 actually, since I'm running on a development server and have no computers available to test it. There seems to be a bug in the IE Developer Tools in that even if you select IE8 or IE7, the SVG image is displayed no matter what (even without a fallback!)
Oh and I'd like to stay away from iframe and the well-known Raphael.js library, if possible.
Anyone have any input on this?