Tips on SVG replace using Modernizr?

[Andy Howells]

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?

[chrisburton]

@andy_unleash

https://css-tricks.com/forums/discussion/19965/svg-with-png-fallback

http://stackoverflow.com/questions/12846852/svg-png-extension-switch

[chrisburton]

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

[chrisburton]

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

[Author]

Posts