title: SVG filter in external file not being applied
body: <p>In a file named <code>gray.svg</code> in my assets directory I have</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"&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;
  </code></pre>
  
  <p>And in my html I have</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"&gt;
      &lt;image filter="url(assets/gray.svg#grayscale)"xlink:href="assets/images/linux.png" x="0" y="0" width="100%" height="100%"&gt;&lt;/image&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I know that <code>assets/gray.svg#grayscale</code> exists because when I go into the inspector and click the link it takes me to an actual page with the svg defined in <code>gray.svg</code>.</p>
  
  <p>Moreover if I don't have an external <code>.svg</code> file, and I just put the filter at the top of my body and change the filter in the svg image to just <code>#grayscale</code> it works.</p>
  
  <p>I have no idea why it's not working. Could somebody help me out?</p>
  
  <p><a href="http://plnkr.co/edit/G1NruqxUdzcBxcCf7In1?p=preview" rel="noreferrer">Plunker</a></p>