title: How to make an svg masked image compatible with Internet Explorer
body: <p>Lately i have created an svg masked image that works perfectly in Chrome but done not work in My version of Internet explorer. Here is the End result expected from my svg</p>
  
  <p><a href="https://i.stack.imgur.com/xQpjH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xQpjH.png" alt="End Result Expected"></a></p>
  
  <p>This is my svg code</p>
  
  <pre><code>&lt;svg width="0" height="0" viewBox="0 0 160 160"&gt;
    &lt;defs&gt;
      &lt;clipPath id="shape"&gt;
        &lt;path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" /&gt;
      &lt;/clipPath&gt;
    &lt;/defs&gt;
  &lt;/svg&gt;
  
  &lt;img src='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse' /&gt;
  &lt;img src='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' /&gt;
  </code></pre>
  
  <p>And this is my css</p>
  
  <pre><code>* {
    padding: 0;
    margin: 0;
  }
  .photo_rectangle_inverse {
    height: 160px;
    width: 170px;
    -webkit-clip-path: url(#shape);
    clip-path: url(#shape);
    position: relative;
    -webkit-transform: translateZ(1px)
  }
  </code></pre>
  
  <p>Since the svg was not working in Internet Explorer (IE 11), after reading <a href="http://caniuse.com/#feat=svg" rel="noreferrer">this article</a> that talks about compatibility issue with Browsers, I added </p>
  
  <pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  </code></pre>
  
  <p>To the top of my page because IE Edge based on the article seems to be the most compatible with Svg.</p>
  
  <p>But still the svg shape is not displaying.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/manofgod/omat2km1/" rel="noreferrer">Jsfiddle</a> . Note Jsfiddle does not allow meta tag</p>
  
  <p><strong>How to make an svg masked image compatible with Internet Explorer  ?</strong></p>
  
  <p>Tks</p>