图标字体与SVG缓存和网络问题

Question

设置

主题包括SVG与图标字体的主题。但即使经过长时间的搜索，我也没有找到有关我的特殊情况的建议。

我有一个由CMS提供的网站。在一个页面上，我有包含几个图标的元素。这些元素在页面上重复出现。因此，每个图标在页面上显示很多次。现在我很难弄清楚如何最好地实现这些图标。

内联SVG

总的来说，我完全看到了使用Inline SVG的好处。它最简单直接，你可以用它做最多的事情。在我的网站上的其他非重复的地方，我已经使用它，我喜欢它。

但是：一遍又一遍地重复完全相同的svg标记似乎不必要地炸毁文档。

参考SVG

我可以通过<img>，<object>或<embed>标记使用SVG。这样做，SVG将被引用，因此只有唯一的数据才能通过网络传输。

但是：除了使用SVG的副CSS之外，我还有几个额外的HTTP请求。

图标字体

我可以使用Icon字体。只引用了一个HTTP请求和内容。

但是：标记错误，文件比SVG大。

SVG Sprites

我可以使用SVG精灵。只有一个HTTP请求和引用。

但是：它很复杂，感觉和使用Icon Font一样糟糕。另外我的印象是背景SVG不是那么容易使用。

Conlusion

为了提出最佳解决方案，我认为以下问题是相关的：

• 与其他解决方案相比，重复SVG标记是否如此糟糕？这就是我对HTML标记的处理方式。 SVG-Icon约为30行/1.6kB代码
• Networkwise：是几个小的HTTP请求（引用的SVG）还是一个大的（大于小的组合，图标字体）请求更快？
• 与使用Icon字体相比，我使用SVG精灵有哪些优势？我猜它至少和Icon字体一样多的CSS-fiddeling。

请注意：我使用AJAX，因此只传输内容。图标字体将加载我的网站的第一个请求（然后被缓存），引用的SVG将在第一次调用此特殊页面时加载，然后被缓存。内联SVG将在此页面的每次调用时传输，因为内容未在浏览器中缓存。

我的感觉是图标字体或内联SVG最好。但我感谢这个主题的每一个贡献和方面。

Answer 1

当您可以使用<use>元素来引用和显示该标记的多个实例时，为什么要重复完全相同的标记？这是a link to an example。

对于<img> <object>等，如果您在http响应中正确设置了Expires和Cache-Control，则浏览器可以缓存这些内容。

使用Icon字体看起来好像是在用不适合您的用例的东西。

根据您的要求，<use>元素似乎最合适。

Answer 2

除了权衡每种情况的利弊之外，对这种情况可能没有最合适的答案。

我个人倾向于采用全内联方法，特别是如果组合文件占用空间小于字体或一个巨大的svg。

如果浏览器可以缓存它们，那么

使用<img>是很好的（特别是如果你有很多重复访问者）......但你最终放弃了样式和交互选项。在不支持svg的情况下，你还需要为一些旧的浏览器添加额外的标记以提供png文件。

如果你有兴趣，这里有一个我用来服务pngs和svg的hack基本上它修复了IE：

<!--[if lte IE 8]><img src="img/youricon.png" /><![endif]-->
<!--[if gt IE 8]><img src="img/youricon.svg" /><![endif]-->
<!--[if !IE]> --><img src="img/youricon.svg" /><!-- <![endif]-->