title: How to make grayscale SVG filter work on IE10-11
body: <p>I'm trying to make a div with background-image grayscale, using method described here: <a href="https://stackoverflow.com/questions/16340159/greyscale-background-css-images">Greyscale Background Css Images</a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="entry box post" style="background-image: url(../img/some-image.jpg);"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My SCSS:</p>
  
  <pre><code> .box {
  
      width: 100%;
      position: relative;
      border-left: solid 1px rgba(255, 255, 255, 0);
      border-right: solid 1px rgba(255, 255, 255, 0);
    }
  
  .entry.box.post {
  
      background: url(../img/blog_example.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 105%;
      -moz-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");
      -o-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");
      -webkit-filter: grayscale(100%);
      filter: gray;
      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");
  }
  </code></pre>
  
  <p>The divs are having inline style set by php.</p>
  
  <p>On Mac Firefox and Chrome this is ok, but on IE 10-11 (VirtualBox), the method is not working. I've also tried couple of libraries, and nothing seems to make those boxes black and white.</p>
  
  <p>Does anybody have idea, what I might be missing here?</p>