图标字体与SVG缓存和网络关注

Question

设置

SVG与Icon字体的主题在网络中得到了很好的覆盖。但即使经过长时间的搜索，我也没有找到关于我的特殊情况的建议。

我有一个网站服务的CMS。在一个页面上，我有包含几个图标的元素。这些元素在页面上重复。所以每个图标在页面上都会出现很多次。现在，我很难弄清楚如何最好地实现这些图标。

内插SVG

总的来说，我完全看到了使用内联SVG的好处。这是最简单和最直接的，你可以用它做得最多。在我的网站上，我已经使用过它，而且我喜欢它。

但是：一次又一次地重复完全相同的svg标记似乎不必要地破坏了文档。

参考SVG

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

但是：除了不可能为SVG使用侧CSS之外，我还有几个额外的请求。

图标字体

我可以用个图标字体。只引用一个HTTP请求和内容。

但是：不好的标记，比SVGs更大的文件。

SVG雪碧

我需要一个SVG雪碧。只有一个HTTP请求和引用。

但是：，它非常滑稽，感觉就像使用图标字体的黑客一样。此外，我有这样的印象，背景-SVG不太容易使用。

Conlusion

要想找到最好的解决办法，我认为以下问题是相关的：

• 与其他解决方案相比，重复SVG标记是否如此糟糕？无论如何，这就是我对HTML标记所做的。SVG-图标大约是30行/ 1.6kB代码。
• 网络方面:几个小HTTP请求(引用SVG)还是一个大请求(大于小的合并，图标字体)请求速度更快？
• 与使用图标字体相比，我真正使用SVG精灵有哪些优势？我想它至少和图标字体一样多CSS-烦躁。

请注意:我使用AJAX，所以只传输内容。图标字体将加载我的网站的第一个请求(然后被缓存)，引用的SVGs将加载这个特殊页面的第一个调用，然后被缓存。内联SVG将在此页面的每个调用中传输，因为内容不在浏览器中缓存。

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

Answer 1

当您可以使用<use>元素引用和显示该标记的多个实例时，为什么要重复完全相同的标记？这是指向示例的链接。

至于<img>、<object>等浏览器，如果您在http响应中设置了，则可以缓存这些内容。

使用图标字体看起来就像你在为你的用例做一些不合适的事情。

总之，考虑到您的需求，<use>元素似乎是最合适的。

Answer 2

在这种情况下，除了权衡每一种情况的利弊外，可能没有一个最合适的解决办法。

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

如果浏览器可以缓存它们(特别是如果您有大量的重复访问者)，那么使用<img>是很好的，...but最终会放弃样式和交互选项。在不支持svg的情况下，还需要为一些旧浏览器添加一些额外标记，以提供png文件。

如果您感兴趣，下面是我用来为pngs和svg提供服务的一个黑客，它基本上修复了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]-->