.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

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)

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

Answer 3

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