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

【问题标题】：Icon Font vs. SVG caching and network concern图标字体与 SVG 缓存和网络问题
【发布时间】：2014-07-20 02:37:11
【问题描述】：

设置

关于 SVG 与图标字体的话题在网络上有很好的报道。但即使经过长时间的搜索，我也没有找到关于我的特殊情况的建议。

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

内嵌 SVG

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

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

引用的 SVG

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

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

图标字体

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

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

SVG 精灵

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

但是：这很复杂，感觉就像使用图标字体一样。另外，我的印象是 background-SVG 不是那么容易使用。

结论

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

与其他解决方案相比，重复 SVG 标记有那么糟糕吗？无论如何，这就是我对 HTML 标记所做的事情。一个 SVG-Icon 大约 30 行 / 1.6kB 的代码
Networkwise：是几个小的 HTTP 请求（引用 SVG）还是一个大的（比小的组合更大，图标字体）请求更快？
与使用图标字体相比，使用 SVG 精灵有哪些真正的优势？我想它至少和图标字体一样多的 CSS 摆弄。

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

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

【问题讨论】：

标签： html performance svg

【解决方案1】：

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

至于<img><object>等浏览器可以缓存这些，如果你在你的http响应中适当地设置Expires和Cache-Control。

使用 Icon 字体似乎是在硬塞进一些不适合您的用例的东西。

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

【讨论】：

您能否提供一个链接以引用<use> 元素？我在网上找不到它（“使用”对于任何搜索来说都是一个可怕的关键字）并且从未听说过它。我听说有计划可以在 html 标记中定义自定义元素，但我不知道这是否得到广泛支持。
Here 是一个。很高兴知道，虽然它说 <use> element can reuse an SVG shape from elsewhere in the SVG document 所以恐怕你只能在一个大的 svg 文档中重复使用它，而不能在另一个 SVG 文档中复制它？
现在我明白了！您在谈论 SVG 元素！ @RobertLongson：有没有办法在同一个文档中同时使用 svg 和 html ？拥有一个 HTML+SVG 文档而不是包含大量嵌入 SVG 文档的 HTML 文档？因为否则我现在不会在这种情况下如何正确使用<use>。
use 标签只能引用同一 svg 中的元素。您似乎无法通过引用单独的部分来在不同的部分中创建新的 svg。
这不是真的@GraphicO。 <use> 可以引用其他 SVG 文档中的元素，但某些 UA 可能无法实现，但 Firefox 确实实现了外部 <use> 引用。

【解决方案2】：

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

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

如果浏览器可以缓存<img> 会很棒（尤其是如果您有很多重复访问者）...但您最终会放弃样式和交互选项。在不支持 svg 的情况下，您还需要为一些较旧的浏览器添加一些额外的标记以提供 png 文件。

如果你有兴趣，这里有一个我用来服务 png 和 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]-->

【讨论】：