The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

SVG with PNG fallback

  • # October 11, 2012 at 2:40 pm

    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.

    # October 11, 2012 at 3:41 pm

    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…

    # October 11, 2012 at 3:45 pm

    @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)?

    # November 28, 2012 at 3:38 am

    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

    # March 20, 2013 at 4:07 pm

    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.

    # April 9, 2013 at 12:24 pm

    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.

    # April 10, 2013 at 12:58 am

    @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.

    # May 24, 2013 at 2:04 pm

    @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!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed