I am struggling to combine all my SVG icons into one sprite and then call it from CSS as a background-image, similar to how we do with other images. However, the icons are not showing up on the page. When I open the SVG image in my browser, I encounter this error: http://gyazo.com/814ab252f2c104caf10fcef2d2f1d057
Here is the HTML code:
<div class="col-md-12 col-xs-12 input-group">
<span class="input-group-addon login-icon icon-banner">
<i class="icons icon-username"></i>
</span>
</div>
This is the relevant CSS:
.icons{
height: 20px;
width: 20px;
display: inline-block;
background:url('../images/icons/icons.svg') no-repeat;
}
And here is the SVG image causing the issue http://gyazo.com/25f8140160e3cb27b850a9b2916492f3
The SVG markup looks like this:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
... (SVG markup details)
</svg>
If anyone has experience with this issue and can offer some help or guidance, it would be greatly appreciated.