.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 older browser versions?

Solution 1

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

Solution 2

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.

Solution 3

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

Solution 4

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

Solution 5

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! ;)

View more solutions

Comments

[sym3tri]

PS, you might want to look into icon-fonts too (css-tricks.com/examples/IconFont)

[iconoclast]

Nice, but is there a reason it doesn't only look for '.svg' at the end of the src URI?

[landed]

doesn't only : your baking my noodle with those 2 words right there !

[Simon East]

No longer true @bashaus. This table is regularly updated.