.SVG Browser Support

I'm working on a responsive design and I'm thinking of creating navigation icons as .svg files. What is current browser support like and is there a workaround/plugin for older browser versions?

All major browsers have had support for years except <= IE8. Workaround could be for instance RaphaelJS.

Sources:

• http://caniuse.com/#search=svg
• https://github.com/DmitryBaranovskiy/raphael

The SVG spec is extensive and no browser currently supports the entire spec. That being said all the latest versions of all the major browsers have basic SVG support. Since none of them have complete support you'll need to check individual features in each browser you're targeting. If you're only drawing basic shapes and not using more advanced features (like filters, animation, etc) you likely won't have any problems.

A full browser compatibility matrix can be found here.

The workaround for old versions of IE is to use VML. If supporting IE6 is required and you're drawing with code then Raphael.js will do this compatibility check for you and render using VML or SVG when appropriate. But if you're loading a raw SVG file and using it as an image source that won't work.

Another option for old browsers is to use the canvg JavaScript library. It's a pure JavaScript SVG parser that will render the resulting image to canvas, but this might be overkill.

... or you can let apache server dealing with it:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\.
RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$
RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L]

you only have to create .png versions of every .svg file and it doesn't matter if the file is for css background or for an img tag.

• caniuse.com — SVG

edited: I used to link to a very nice SVG comparison table, but it hasn't been updated since 2011, so it's not relevant any more.

Worth noting, if you do need <=IE8 support, you can implement GoogleChromeFrame easily enough to get the SVG support you're looking for...

Though you might find that each browser has their own little quirks with respect to the features of the spec. I have had issues with dynamically created nodes that use filters and animateMotion has been a bugged in Google Chrome for way too long...(we use FF5+ as our interactive interfaces for this reason, Safari is getting better too)

IMO, unless the whole application is SVG, I would just use PNGs for your icons, unless you want them to scale nicely! :)

...but if you just want to play with SVG, Giv'er! ;)

¡With object element!

<object data="example.svg" type="image/svg+xml">
     <!-- If browser don't soport / don't find SVG  -->
     <img src="example.png" alt="Logotype" />
</object>
			

You could as well use SVGs in general for all images. That way you'd cover all retina stuff on iDevices. Other devices will follow sooner or later.

For browsers that do not support svg, you could give the body a class of 'no-svg'.

In your css just add a '.no-svg .yourimageclass' and place a png instead.(override it)

Boilerplate HTML5 gives you that no-svg class already by default with some javascript magic. (e.g. for IE8)

If I'm working with <img> elements (as opposed to CSS background images), I use a handy workaround, a combination of Modernizr (a JavaScript library that detects the availability of certain features, such as .svg support, on browsers) and a few lines of jQuery:

$(".no-svg img").each(function() {
    var $this = $(this);
    if ($this.attr("src").indexOf(".svg") > -1) {
        var isSvg = $this.attr("src").toString();
        var isPng = isSvg.replace(".svg", ".png");
        $this.attr("src", isPng);
    }
});

1. I create .png versions of every .svg file.
2. Modernizr gives the html element the class of .no-svg if it detects that there's no .svg support.
3. The jQuery swaps the file extensions. .indexOf(".svg") checks if the string ".svg" is contained within the value of src, returning -1 if it doesn't find it and a positive integer if it does. If it finds ".svg", the whole src string is pulled into isSvg, and .replace() swaps .svg for .png and saves the result as isPng, which is then set as the value of src.

You can use caniuse.js script to detect if your browsers supports SVG or not:

caniuse.svg()