SVGMagic: the fully automated SVG fallback

SVGMagic is a simple jQuery plugin that searches for SVG images (including background- and inline dataimages) on your website and creates PNG versions if the browser doesn't support SVG.

Wondering why you should use SVG images? SVG images are vector based! Meaning that they will be as sharp as hell no matter how big they are. In other words: one file for every size. See it yourself: (assuming you are now using a browser that understands SVG images)

50% 100% 250%

Cool, but what do I do?

That's where the fine part comes in: almost nothing! Just download the jquery.svgmagic.js script include it and initialize it.

$(document).ready(function(){
   $('img').svgmagic();
});

SVGMagic will now check every image on your page and changes it to a PNG version if the browser doesn't support SVG.

More information about SVGMagic? Check the Github page or scroll down.

Where the magic happens...

SVGmagic checks if your visitor's browser understands SVG images. If it doesn't it will start replacing and converting all SVG images to PNG versions! First of all the script will check which images on your website are SVG and collects their URLs. These URLs are then send to our server which will temporarily download, convert and save them. When that's done the server sends back a package with new URLs. The SVG images on your website than get replaced by the new PNG images and your old-school visitor can see the 'SVG' images.

Security

Of course we have thought about security. So (if enabled) all the PNG images are linked to our server with https://.

Site to server to site, how about performance?

The server is fast. Assuming that the images you are using aren't big the user will barely know what's happening. We have added a demo with duration logger on the demo page.

Check it yourself

You can find a demo (including the code) on this page. Normally the script only runs in browsers that don't support SVG images, but in the demo it will run on every browser.

Problems, or just a question?

Having a question or is SVGMagic not functioning as you expected? Use the issues page at Github.