title: How to make svg image fits to parent container
body: <p>I am using for the first time the svg <code>&lt;image&gt;</code> tag. I use this tag in order to apply a gray filter on the picture (thank you IE).</p>
  
  <p>Here is my HTML :</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="item"&gt;
      &lt;svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"&gt;
          &lt;image  xlink:href="https://dummyimage.com/400x400/000/00ffd5.png" /&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>And the scss :</p>
  
  <pre><code>.item {
    position: relative;
    width: 20%;
    height: 220px;
  
    background-color: blue;
  }
  
  svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
    image {
      width: 100%;
      height: 100%;
    }
  }
  </code></pre>
  
  <p>I want to fit the image to the parent's container. Something like background: cover in css. Does anybody have an idea ?</p>
  
  <p>You can check it out at : <a href="https://codepen.io/seabon/pen/QvBBrd" rel="noreferrer">https://codepen.io/seabon/pen/QvBBrd</a></p>
  
  <p><a href="https://i.stack.imgur.com/vCH43.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vCH43.png" alt="enter image description here"></a></p>
  
  <p>The blue background is for <code>div.item</code> </p>