Hey all.

Making a new website for myself at the moment.

I'm using SVG's and CSS3 animations.

This is all well and good for the latest browsers, webkit especially, but obviously not so smart for those that went before.

I'm not the greatest when it comes to usability / coding standards & what not, so thought I'd see if the Sitepoint crowd could help!

It's not a commercial website, so it's not the end of the world for me if the IE6 crew can't use it, but what I'd like to do is substitute out the SVG's for PNG's where the browsers can't support them.

I have looked at the SVGWeb plugin, but that requires the SVG's to be used as <objects> or directly embedded into the page, which is not preferable, since I'm not sure i could then apply the CSS3 animations to them.

I was thinking of using something like: <!--[if IE]> and creating conditional code, but again, unsure of the best course of action here. On a Mac so no IE6 here to test. Running it through browsershots.org at the moment.

Here's the URL:

Alexander James


What would you do in this situation? How can I best reach a compromise?

Much obliged.

aj