title: SVG doesn't work in IE and safari when used with SVG Sprites.
body: <p>I am using SVG Sprites to add svg icons on my page. There is no issue in Chrome and Firefox but i am not able to see any of the svg icons in IE and Safari. </p>
  
  <pre><code>&lt;div class="toggle-icons"&gt;
  &lt;span class="toggle-rows active"&gt;
  &lt;svg class="icon"  &gt;
  &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" link:href="icons.svg#icon-photo-row"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  &lt;input type="radio" name="toggle" value="row"&gt; 
  &lt;/span&gt;
  &lt;span class="toggle-grid"&gt;
  &lt;svg class="icon"  &gt;
  &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons.svg#icon-photo-grid"&gt;&lt;/use&gt;
  &lt;/svg&gt;        
  &lt;input type="radio" name="toggle" value="grid"&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>icons.svg looks something like this</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;symbol id="icon-photo-row" viewBox="0 0 19.983 11.084"&gt;
  &lt;line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="0" y1="0.375" x2="3.75" y2="0.375"/&gt;
  &lt;line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="7.292" y1="0.375" x2="19.983" y2="0.375"/&gt;
  &lt;line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="0" y1="5.542" x2="3.75" y2="5.542"/&gt;
  &lt;line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="7.292" y1="5.542" x2="19.983" y2="5.542"/&gt;
  &lt;line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="0" y1="10.709" x2="3.75" y2="10.709"/&gt;
  &lt;line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="7.292" y1="10.709" x2="19.983" y2="10.709"/&gt;
  &lt;/symbol&gt;
  
  &lt;symbol id="icon-photo-grid" viewBox="0 0 18.28 18.271"&gt;
  &lt;rect x="0.375" y="0.375" fill="none" stroke-width="0.75" stroke-miterlimit="10" width="7.409" height="7.411"/&gt;
  &lt;rect x="10.493" y="0.375" fill="none" stroke-width="0.75" stroke-miterlimit="10" width="7.412" height="7.411"/&gt;
  &lt;rect x="0.375" y="10.488" fill="none" stroke-width="0.75" stroke-miterlimit="10" width="7.409" height="7.408"/&gt;
  &lt;rect x="10.493" y="10.488" fill="none" stroke-width="0.75" stroke-miterlimit="10" width="7.412" height="7.408"/&gt;
  &lt;/symbol&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.toggle-icons svg.icon {
    width: 3rem;
    height: 3rem;
    fill: #bfbfbf;
    stroke: #4D5E68;
    vertical-align: middle;
  }
  
  .toggle-icons span.active svg.icon {
    fill: #95a1aa;
  }
  </code></pre>
  
  <p>Can anyone explain why is there a problem in rendering the SVG's on IE and Safari and what might be the fix? </p>
  
  <p>Thanks in advance</p>