title: CSS filter grayscale image for IE 10
body: <p>Is there a way to make grayscale image filter work on IE 10 without JavaScript or SVG?</p>
  
  <p>I've been using the following code successfully in all browsers except IE 10. </p>
  
  <pre><code>img{
  filter:url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter     id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /*     Firefox 10+, Firefox on Android */
  filter:gray; /* IE6-9 */
  -webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);}
  </code></pre>