Grow your CSS skills. Land your dream job.

Tips on SVG replace using Modernizr?

  • # October 14, 2012 at 12:15 pm

    Hi all,

    I’m currently delving into the wild west of SVG images within my HTML and CSS.

    I have PNG fallbacks for each, but what I want to see is if I can use modernizr to find and replace .svg with .png

    So for example, do;


    $(document).ready(function() {
    $(function()
    {
    if (!Modernizr.svg) {
    //something here //
    }
    });
    });

    What I would like is to simply grab the .svg ending and switch it out for .png if SVG isn’t supported, but I’m useless at JS.

    The images themselves are inside simple img tags.

    Re: the CSS swap, I’m probs going to make an IE style sheet with all the PNG’s instead, but are there any shortcut methods you guys use for this?

    # October 15, 2012 at 8:55 am

    Yeah I found those when googling yesterday but neither is too practical.

    I need to load the PNG’s by default and only load the SVG if it’s supported, rather than the other way round.

    Re: Chris’ script, as I said I’m not so hot on JS so not sure how to use it.

    # October 15, 2012 at 9:39 am

    @andy_unleash Right. I don’t see why you would want to go that route. IE9+ supports SVG with `` tag. When it comes to those who don’t support it, you can change out the extension to png. Doing it your way, I assume, would cause more http requests to grab those SVG images.

    # October 15, 2012 at 10:11 am

    The reason I want to go PNG first is purely from a noscript perspective.

    If Javascript is disabled on the user’s machine and they’re on an old IE8 or below then they’ll have no main images, no logo, slides etc. Because our target is medium sized businesses it’s likely that they’ll have IE8 predominantly as well as potentially having JS disabled, so I need to flip the solution round to replace with SVG if available.

    You’re right about HTTP requests and additional loading which is a concern of mine too. I just can’t see an alternative option.

    # October 15, 2012 at 10:31 am

    @andy_unleash Take a look at this http://code.google.com/p/svgweb/

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".