.SVG Browser Support

Question

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 o

Answer 1

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

Answer 2

¡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>

Answer 3

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.

Answer 4

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

Answer 5

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

caniuse.svg()

Answer 6

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