There is SAP (AngularJS and Angular Route) with icon-based navigation made by svg-sprite. So, I hava inline code like this:
<div style="height: 0; width: 0; position: absolute; visibility: hidden">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-grid-32" viewBox="0 0 32 32">
<g stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round">
<path d="M2 2h11v11H2zM19 2h11v11H19zM2 19h11v11H2zM19 19h11v11H19z"/>
</g>
</symbol>
</svg>
</div>
And the icons in navigation like this:
<a href=""><svg class="icon icon-32 outline black"><use xlink:href="#icon-grid-32"></use></svg></a>
All that I can see in this navigation is nothing, <use> has size 0 × 0 pixels. I know about Firefox bug with xml:base, but adding xml:base didn't help me. You can try this example: http://css.yoksel.ru/assets/demo/svg-in-firefox/svg-has-base.html
It works in Firefox, Safari and other browsers but not in Chrome 49+ (48 version doesn't have this problem).