Learning jQuery

SVG or Scalable Vector Graphics image format has suddenly become popular for showing images on your website and its future graphic format. But not all browsers supports SVG format and that's why SVG format was not so popular though it exists from 1999. So in this post, we will find how to fallback to PNG format if SVG is not supported by browser.

Why use SVG

SVG images are vector based! Meaning that they will be as sharp as hell no matter how big they are. SVG files are smaller and easier to compress than other formats. Graphics with SVG will print in a higher resolution. Editing of SVG can be done with even Notepad. SVG images are zoomable and scalable. Like other graphics, SVG works as a static or animated image. SVGs use XML to define paths and shapes, to create our graphic. Recommended reading "Why Use SVG - What are the Advantages".

You may also like:

• jQuery code to handle broken (not found) images in webpage
• Split an image into strips using jQuery
• jQuery code to get absolute Image Path

SVG Fallback

There are couple of solution for SVG fallback.

1. Using jQuery and Modernizr

First, we need to detect if SVG is supported or not by browser. And for that we can use Modernizr. It is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.

if (Modernizr.svg) {
    // Supports SVG
} else {
    // Doesn't support SVG (Fallback)
}

So, once it is detected then you can fallback to PNG using a simple jQuery script.

if (!Modernizr.svg) {
   $('img[src*="svg"]').attr('src', function() {
      return $(this).attr('src').replace('.svg', '.png');
   });
}

The above script will find all the image with src "svg" and then replace the extension with PNG.

2. Using Pure JavaScript (No jQuery)

Following JavaScript code block can also be used for SVG Fallback.

if (!Modernizr.svg) {
    var imgs = document.getElementsByTagName('img');
    var endsWithDotSvg = /.*.svg$/
    var i = 0;
    var l = imgs.length;
    for(; i != l; ++i) {
        if(imgs[i].src.match(endsWithDotSvg)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

3. Using jQuery plugins

There are couple of jQuery/JavaScript plugin which can be used for SVG Fallback.

SVGMagic

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.

Just download the SVGMagic.js script include it and initialize it.

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

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.

SVGeezy

SVGeezy is in essence, a fallback plugin. It allows you to use SVGs for all your assets, giving you complete resolution independence. It checks if the browser supports SVGs, if not, changes the src of the image to a .png instead (or whatever you pass in).

Just download the svgeezy.js script include it and initialize it.

svgeezy.init(false, 'png'); // this will let the plugin check all images

The first parameter is a class to tell the code not to check. Feel free to pass in false if you want SVGeezy to check all images. This may be because you have no fallbacks for certain SVGs.

The second is a filetype, this can be anything you want, just make sure the file path resolves to an image. ie. '/images/logo.svg', will be replaced with '/images/logo.png'.

Summary

If you are still not using SVG, then start using. SVGs are resolution independent, meaning responsive design. SVG images can also be created directly in your HTML document, without even having to save the file itself.

Feel free to contact me for any help related to jQuery, I will gladly help you.