Website Logo. Upload to /source/logo.png ; disable in /source/_includes/logo.html

Up and Running with SVG

An SVG primer for everyone. Created by Mijingo.

SVG Browser Support

SVG has broad support now and it will work properly on any modern web browser.

Ah, but what is a modern web browser? Here’s the skinny:

No Support

  • Internet Explorer 8 or earlier.
  • Android 2.3 or earlier browsers.
  • Some early versions of Chrome and Safari.

Partial Support

  • Android 4
  • Android 4.1
  • Android 4.3

Here’s the Can I Use chart I shared in an earlier chapter:

SVG Browser Support from caniuse.com Source: Can I Use

Because of this you’ll want to consider a fallback option.

Using Modernizr and SVG

You can use Modernizer with older browsers so you can fallback to an image file instead of SVG. The easiest way to do this is using the Modernizr library.

Once you have Modernizr installed, do the check in your JavaScript like this:

if(!Modernizr.svg) {

}

Insider of the check (the if statement), you can then swap out the SVG for a fallback image (in this case a PNG).

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

If you’re using SVG as a background image, you can use some handy classes provided by Modernizr that will automatically fallback to a non-SVG asset.

SVGeezy

SVGeezy is another way that you can automatically enable a fallback for SVG if the browser doesn’t support it. This is the JavaScript plug-in that detects SVG images and then looks for the standard image for example a PNG file. SEG then replaces the SVG images with the standard images. The end result is exactly the same as you would have with our JavaScript example where we replaced the extensions. But as CGD doesn’t require modernizer and it doesn’t require any custom JavaScript.

To use SVGeezy on your website is really simple to just initialize the code and set a couple of options. Optionally, you can set a class of no check, which will then tell SVG easy not to check certain images that have the class of no check.

svgeezy.init('nocheck', 'png');

Or you can just set that option to false and SVGs he will then check all the images and then replace them with similarly named images that have the PNG file extension.

svgeezy.init(false, 'png');

For more information about SVGeezy check out their website and the getup repository where you can download the code.

Ready to learn more?

Get the Full Video Course