.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

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.