CODEWITHSUNDEEP
htmlbrowsersvg
BringMeAnother
BringMeAnother

Reputation: 627

Using SVG with PNG fall back in img tags depending on browser without javascript or PHP

I know there are several topics on this subject, but ultimately, all the answers seem to suggest using modernizr or some javascript code. I think the biggest reason to include a png fallback is for IE8 and lower. I was wondering why nobody seems to be using the following code.

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

First question, is this bad? Is the industry standard way to use modernizr and javascript?

Second question, I noticed that the second line seems to be shown for other browsers like Chrome and Firefox beside IE 9 and IE 10. That's exactly the behavior I wanted, but it seems weird. Is it supposed to be like that?

Third question, I've googled and can't seem to find a place where all the comment functions like [if...] are explained. Are there other functions than [if...]? Is there [if...then]?

Upvotes: 4

Views: 2509

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

Have you tried:

<object data="img.svg" width="200px" height="50px" type="image/svg+xml">
   <img src="img.png" width="200" height="50">
</object>

Upvotes: 2

Related Questions