SVG with PNG fallback

[chrisburton]

Does anyone know how @chriscoyier uses SVG images on his latest article with PNG fallback for older browsers/devices that do not support it?

I would also like to see an article about this or something in the snippet section.

[Chris Coyier]

I just don’t put a fallback in, in that case, just cause the site itself only support IE 9+

But… you could always do like

if (!Modernizr.svg) {
$(“img”).each(function() {
$(this).attr(“src”, $(this).data(“fallback”));
});
}

or something…

[chrisburton]

@chriscoyier I’m also only supporting IE9+. However, you mentioned in one of your articles that some devices (I think it was an android tablet) do not support SVG. Would this work also (I can’t test for Android)?

[pauginer]

I’m recently using the “Invisible Gradient” technique to support SVG with PNG fallback. It is CSS-only, does not require javascript and it works cross-browser.

It defines a background composed of the SVG image and a transparent gradient. The last makes only gradient-capable browsers (which also understand SVG) to process the SVG part.

More details (and code example) at http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique

[karl1146]

Pauginer’s invisible gradient technique seems to work well to me (thanks!), and it’s fairly simple compared with other solutions. I’m still sort almost kinda supporting ie8, so having some fallback seems like a good plan.

With the new higher resolution (2560×1440) monitors, and high resolution mobile devices, transitioning to SVG images seems like a wise course of action for clip art, some icons, etc. There’s an inherent challenge with phones like the Galaxy S IV in delivering content to a 1920px screen that could be on a 3G connection, and SVG seems like a good solution.

[Pablo_D]

You can also use SVGeezy (javascript)

A simple JavaScript plugin which detects SVG images on your website, and automatically “looks” for a standard image fallback for those older, less capable browsers.

http://benhowdle.im/svgeezy/

[chrisburton]

@pauginer Nice! Just out of curiosity, I’ll have to read up on that technique.

@Pablo_D Thanks, I’ve actually seen it. Although, I’ve recently changed plans on my site and won’t be using SVG except for webfonts. Thanks for the tip, though. Much appreciated.

[jeremymansfield]

@pauginer Thanks for the tip on the “Invisible Gradient” technique. I’ve spent way too many hours trying to get other solutions to work ideally and without bloated code, but this was the best trick so far in order to support IE8 and IE7. Thanks!

[Author]

Posts