title: How to use SVG filters and <base> tag together
body: <p>Below code works on home page where "page URL" == "base URL"</p>
  
  <p>but fails on any other page</p>
  
  <pre><code>&lt;svg&gt;
    &lt;filter id="blur"&gt;
      &lt;feGaussianBlur stdDeviation="5"&gt;&lt;/feGaussianBlur&gt;
    &lt;/filter&gt;
  
    &lt;image id="svg-image" xmlns:href="http://x.com/image.jpg"       
           filter="url(#blur)"&gt;
    &lt;/image&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Is there a way to reference "only the filter" from an external svg file ?</p>
  
  <p>eg:</p>
  
  <p>1.External file @(<a href="http://localhost/somewhere/external.svg" rel="nofollow">http://localhost/somewhere/external.svg</a>)</p>
  
  <pre><code>&lt;svg&gt;
    &lt;filter id="blur"&gt;
      &lt;feGaussianBlur stdDeviation="5"&gt;&lt;/feGaussianBlur&gt;
    &lt;/filter&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>2.HTML document @(<a href="http://localhost/elsewhere" rel="nofollow">http://localhost/elsewhere</a>)    </p>
  
  <pre><code>&lt;svg&gt;
    &lt;image id="svg-image" xmlns:href="http://x.com/image.jpg"       
           filter="url(/somewhere/external.svg#blur)"&gt;
    &lt;/image&gt;
  &lt;/svg&gt;
  </code></pre>