SVGMagic is a SVG fallback that does it all

SVGMagic is a simple jQuery plugin that searchs for SVG images (including background-images) 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 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 which browser your visitor is using. Is it a browser that doesn't support SVG images, than it starts the magic! 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 send 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

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