Conditional code for displaying PNG in place of SVG for older browsers?

Question

I'm looking for a way to have older browsers display a PNG image in place of an SVG as a fallback when detected. The logo for my site is currently in SVG but older browsers, specifically IE 8 and below won't render it. I already have the logo in PNG. What's the best way to execute this?

Thanks

Answer 1

Use HTML conditional comments.

<!--[if lte IE 8]><img src="logo.png" /><![endif]-->
<!--[if gt IE 8]><img src="logo.svg" /><![endif]-->
<!--[if !IE]> --><img src="logo.svg" /><!-- <![endif]-->

http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx

If you're also looking for a way to handle this for browsers other than IE, you should check the user agent with javascript or php.

Answer 2

<object type="image/svg+xml" data="image.svg">
    <img src="image.png" alt="image"/>
</object>