Update: I've extended my blog post into a full GitHub project, with JavaScript polyfill that switches out <img> tags with the SVG goodness that IE 10 and 11 need: https://github.com/kununu-labs/gray
To apply a grayscale effect (color desaturation) to images across Firefox 10+, Firefox on Android, Internet Explorer 6 - 9, Chrome 19+ and Safari 6+ on desktop and iOS, use the following snippet below.
To disable the effect again, apply:
Check out a demo, which includes fading back to color on hover, Internet Explorer 10 support with inline SVG, and partial grayscale.
Note: If you're experiencing issues with blurry images in Firefox, you can try playing with the filterRes attribute, but this will tie your image resolution to the svg code.
