1 reply to this topic

[FirefoxRocks]

I'm designing an application for an organization and the application part is pretty much done, it's just the design part now.

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'>

</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]-->

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?

[Quatrux]

As I remember, I once needed to use SVG and needed to make it cross browser, can't find the source, but the idea was to use both methods to make it work on all browsers.

The idea was to use the IE conditions together with the object, and I've tested how it works.

Something like that:

<!--[if gt IE 5]>
..code..
<![endif]-->
<!--[if IE]> <![if !IE]> <![endif]-->
... not ie code..
<!--[if IE]> <![endif]> <![endif]-->

If it's less than IE9 to show the png image, for others to show it in an object, can't remember, but the idea might work for you to avoid sending png and svg for the same request.

By the way, as I know <!--[if !IE]> --> <!-- <![endif]--> is not valid html comment with the w3c validator and my method as I tried is valid.