Jump to content

SVG with PNG fallback


Recommended Posts

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>


<!--[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 by rink.attendant.6
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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. :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...