正确的方法来加载svg数据并在页面中注入以进一步<use> </use>

Question

我想使用语法在我的应用程序HTML代码中使用SVG对象：

<svg viewBox="0 0 100 100" class="icon shape-cart" style="width: 100px;height: 100px;">
    <use xlink:href="#shape-cart"></use>
</svg>

根据这篇文章 http://css-tricks.com/svg-sprites-use-better-icon-fonts/

以这种方式使用svg需要将SVG数据注入HTML主体。

所以我的问题是在运行时执行此类注入的最佳方法是什么？ （不在服务器上注入HTML）

将svg嵌入到单独的文档中，因此您无法访问它并使用

我目前的解决方案是使用jquery：

$.ajax('/assets/icons.svg.txt').then(function(svgData){
    $(function(){
        $('body').prepend($(svgData).css('display', 'none'))
    })    
})

它使用svg文件的文本版本（只是对svg文件添加.txt扩展名），因为否则* .svg将由juery加载并转换为HTML文档元素。 Css display none设置为使元素不与DOM混乱。

也许有更多标准方法可以完成这项任务？