title: SVG blur filter edge artifacts
body: <p>When I apply blur filter to svg image it blurs edges so they become little transparent (see left sample). What I want is to blur it without such artifact (see right sample).
  I solved this by hack: just copying same flipped image and placed them for 4 sides.</p>
  
  <p>Is there any better way?</p>
  
  <p>Note that I can't just make image bigger on 5-10%; size should be the same as original image.</p>
  
  <p>Here is my svg:</p>
  
  <pre><code>...
  &lt;filter id="blur"&gt;
   &lt;feGaussianBlur in="SourceGraphic" stdDeviation="4"&gt;&lt;/feGaussianBlur&gt;
  &lt;/filter&gt;
  ...
  &lt;g filter="url(#blur)"&gt;
    &lt;image xlink:href="cathedral.jpg"&gt;&lt;/image&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Hn0M3.png" alt="enter image description here"></p>