我知道如何在我的网站上加载SVG图标，但我不知道如何满足以下所有约束：
- 能够在CSS中使用SVG图标
- 不闪烁丢失的图标（FOMI）
- 最小初始页面大小
- 缓存SVG
- 使用CDN的能力
- 必须能够使用
fill:currentColor使图标与当前文本颜色匹配，就像图标字体一样 - 好处：像素对齐SVG，使其始终看起来清晰
1、2、3和4可以通过使用外部精灵贴图来满足，如下所示：
<；svg viewBox=“0 100 100”>；
<；使用xmlns:xlink=”http://www.w3.org/1999/xlink"
xlink:href=”https://stackoverflow.com/assets/sprite-4faa5ef477.svg#icon-星号-50af6“></使用>；
</svg>；
但在浏览器解决CORS问题之前，我们不能使用CDN
我们可以修补外部域的支持，但我敢肯定这对CSS不起作用，因为它只监视DOM（对不起，还没有测试），而且它会导致浏览器对无法获取的文件发出一大堆失败的请求（页面上的每个图标对应一个）
如果我们将整个SVG（增加的页面大小，没有缓存）内联，或者使用AJAX（导致FOMI），则可以使用CDN
那么，有没有满足所有57约束的解决方案
基本上，我希望SVG和图标字体一样方便，否则切换就没有意义了。SVG支持多种颜色，而且更容易访问，但我无法让它们看起来一样好，也无法高效加载
我能得到的最接近的方法是在图像元素中加载SVG，然后像使用“老式”图像精灵一样使用它。据我所知，这满足了所有的约束条件。我能想到的唯一缺点是，您无法使用CSS修改SVG的特定部分。但是，这不是您的限制条件之一（如果我错了，请纠正我），并且仍然可以修改所有图标，正如您在我的演示中看到的那样。我创建了一个小提琴，为了完整起见，还包括一个代码片段
为了模拟CDN，我创建了一个SVG文件并将其上传到某个图像托管服务。如果这项服务现在停止，我向未来的读者道歉。SVG文件中的所有图标都相邻（我现在创建了一个黑色的正方形、圆形和三角形）。因此，与SVG精灵贴图的区别在于图标在SVG本身中，而不是在defs中。将多个SVG组合在一个SVG中应该是非常容易的，我没有寻找能够自动化此过程的工具
.icon{
显示：内联块；
垂直对齐：顶部；
宽度：30px；/*可以是任何内容*/
高度：30px；
背景图像：url（'http://imgh.us/icons_36.svg');
边框：1px solid#000；/*以查看图标的位置*/
}
/*尺寸*/
.icon.large{
宽度：50px；
高度：50px；
背景尺寸：150px自动；
}
/*图标*/
.icon.circle{背景位置：-30px 0；}
.icon.large.circle{背景位置：-50px 0；}
.icon.triangle{背景位置：-60px 0；}
.icon.large.triangle{背景位置：-100px 0；}
/*风格*/
.icon.info{
/*基于http://stackoverflow.com/a/25524145/962603,
*当然，您也可以使用SVG过滤器（呵呵）*/
过滤器：反转（100%）深褐色（100%）饱和（50000%）色调旋转（90度）亮度（70%）；
}
.icon.highlight{
/*基于http://stackoverflow.com/a/25524145/962603,
*当然，您也可以使用SVG过滤器（呵呵）*/
过滤器：反转（100%）深褐色（100%）饱和（10000%）色调旋转（30度）亮度（50%）；
}<；span class=“图标方形”></span>；
<；span class=“图标圈”></span>；
<；span class=“图标三角形”></span>；
<；span class=“图标圆突出显示”></span>；
<；span class=“图标三角形大信息”></span>