Turning SVG image into png for unsupported browsers - Fallback - modernizer.js(?) [duplicate]

Question

This question already has answers here:

SVG for images in browsers with PNG fallback (6 answers)

Closed 6 years ago.

I'm looking at turning a few SVG images I have on my site in PNG for browsers that don't support SVG properly. I'm mostly having issues with the text based ones being shown in IE (completely wrong font being displayed), so I thought I'd create a fallback to PNG.

I've tried look for a nice walkthrough for this (I'm a self confessed noob) and I haven't managed to make it all work yet. I believe I want to use modernizer.js to check for compatibility, then serve in incompatible different images(?)

Answer 1

Chris Coyier answers this exact question in the latest Smashing Magazine CSS Q&A.

1. Download a version of Modernizr that is trimmed down to just testing SVG (assuming that’s the only test you need).
2. Run the test. If it passes, put in the SVG. If it fails, put in the bitmap. Essentially:

Example (JS solution):

if (!Modernizr.svg) {
    $("#logo").css("background-image", "url(fallback.png)");
}

Example (CSS solution):

.no-svg #logo { background-image: url(fallback.png); }

This should only be necessary for IE8 and below. Can I use has a full table of browser support.

Thanks Chris!