internet explorer 10 - how to apply grayscale filter?

Question

This CSS code works pretty nice for Internet Explorer until 9.

img.gray {
    filter: url(\"data:image/svg+xml;utf8,

Answer 1

Inline SVG can be used in IE 10 and 11 and Edge 12.

I've created a project called gray which includes a polyfill for these browsers. The polyfill switches out tags with inline SVG: https://github.com/karlhorky/gray

To implement, the short version is to download the jQuery plugin at the GitHub link above and add after jQuery at the end of your body:

Then every image with the class grayscale will appear as gray.

You can see a demo too if you like.