Utilizing SVG Sprites to incorporate svg icons on my webpage has worked smoothly in Chrome and Firefox, but I am encountering an issue where none of the svg icons are displaying in IE and Safari.
<div class="toggle-icons">
<span class="toggle-rows active">
<svg class="icon" >
<use xmlns:xlink="http://www.w3.org/1999/xlink" link:href="icons.svg#icon-photo-row"></use>
</svg>
<input type="radio" name="toggle" value="row">
</span>
<span class="toggle-grid">
<svg class="icon" >
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons.svg#icon-photo-grid"></use>
</svg>
<input type="radio" name="toggle" value="grid">
</span>
</div>
The structure of icons.svg is as follows:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<symbol id="icon-photo-row" viewBox="0 0 19.983 11.084">
<line fill="none" stroke-width="0.75" stroke-miterlimit="10" x1="0" y1="0.375" x2="3.75" y2="0.375"/>
...
<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;
}
If anyone could shed light on why there's a rendering issue with SVGs on IE and Safari, along with a potential solution, it would be greatly appreciated.
Thank you in advance