title: How to force an image displayed with SVG element to cover the entire width and height
body: <p>I have generated a blurred image using <code>svg</code> element. I want it to cover the entire width and height of the screen.</p>
  
  <p>Now to better understand I am providing two fiddles below and at last what result I am wanting to achieve :</p>
  
  <p><a href="http://jsfiddle.net/q2w52czh/1/" rel="nofollow"><strong>Fiddle 1</strong></a> - <strong>Image is blurred, but it doesn't cover the entire screen</strong></p>
  
  <p><a href="http://jsfiddle.net/fgarsae9/" rel="nofollow"><strong>Fiddle 2</strong></a> - <strong>Image is not blurred, but it covers the entire screen</strong></p>
  
  <blockquote>
    <p><strong>Result I want : Image should be blurred (like <em>Fiddle1</em>) and also it should cover entire screen (like <em>Fiddle2</em>)</strong></p>
  </blockquote>
  
  <p><strong>HTML Code to blur image in the first fiddle :</strong></p>
  
  <pre><code>&lt;svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"&gt;
      &lt;filter id="filter"&gt;
          &lt;feGaussianBlur stdDeviation="5"/&gt;
      &lt;/filter&gt;
      &lt;image xlink:href="https://saudiwoman.files.wordpress.com/2010/02/crowded-restaurant.jpg" filter="url(#filter)"&gt;&lt;/image&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>To be clear again I want image to cover the entire screen like fiddle2 <em>and</em> to be blurred too.</strong></p>