通过符号或CSS包含内联SVG？

Question

我计划使用内联SVG概念为项目创建SVG精灵图。实际上，有很多方法可以创建SVG精灵表。我偏爱以下两种方法（因为它们的性能）来创建精灵表：

1. 将所有的SVG分组到单个SVG中，并使用唯一ID的symbol标签包装每个SVG的内容，这样我们后来可以在HTML中使用use标签引用它。 2. 生成一个CSS文件，其中所有的SVG都通过CSSbackground-image属性引用。每个SVG都将有一个独特的类名。

现在，我不知道要使用哪种方法。提醒一下，这并不是基于意见的问题，因为我不是在寻找意见，而是考虑性能和最佳解决方案。

PS：我可以使用Gulp任务运行器生成SVG精灵表。

- Mr_Green

---

性能测试是在哪个UA上进行的？在UA的哪个版本和平台上进行的？我们给出的任何答案都可能在下一个版本发布时过时。这并不是一个好问题。 - Robert Longson

@RobertLongson 在网站加载时间方面的性能。我并不是特别关注于UA/版本。 - Mr_Green

相同的条件是，假设数据大小相同。 - Robert Longson

Answer 1

前置信息

浏览器性能是很难测试和衡量的，这仅仅因为有太多变量会导致不同的浏览器、硬件或其他可能影响性能的事物之间存在差异、峰值或者不同。

以下测试是我在一台装备了以下硬件和浏览器的Dell笔记本电脑上运行的：

Intel Core i5-3320M CPU @ 2.60GHz

8GB DDR3 Ram (时序等不确定)

Windows 8.1 Enterprise - 64Bit

Google Chrome v45.0.2454.101 m

由于时间限制，我只进行了三个测试，但以后可能会继续进行测试，并在不同的浏览器和机器上重新运行它们。

我所使用的SVG

我创建了一个SVG元素，其中包含5个图标层叠在一起。

所有这些图标都来自于提供免费使用SVG图标的iconmonstr.com。

• CodePen

---

测试

内联 - <use>

代码

<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#menu-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#user-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#home-4-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#phone-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="#globe-4-icon"></use>
</svg>

• 完整的 Codepen 示例

结果

1 请求 - 221B 转移

• 结果

平均

Finish: 10.3ms - DOMContentLoaded: 22.8ms - Load: 22.3ms

内联 - 单个<svg>

测试

由于文件过大，因此只提供CodePen示例

• 完整的Codepen示例

结果

1个请求 - 221B传输

• 结果

平均值

Finish: 9.7ms - DOMContentLoaded: 20.6ms - Load: 19.9ms

---

外部文件 - <use>

测试

<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#menu-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#user-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#home-4-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#phone-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
  <use xlink:href="svg.svg#globe-4-icon"></use>
</svg>

在页面顶部给出的基本文件中使用此文件

结果

2个请求 - 440B传输

• 结果

平均

Finish: 57.5ms - DOMContentLoaded: 41.3ms - Load: 58.4ms

---

结论

从上述测试和结果可以看出，使用内联SVG并引用它比使用外部文件要快得多；无论是否缓存。

这两种内联SVG方法似乎没有太大的速度差异，但我个人会选择<use>方法，因为它在长期使用中更容易使用，并有助于保持代码的清洁。

现在，正如我所说，这些结果完全取决于无限数量的变量，列举一些：

• 浏览器
• 硬件
• 互联网连接
• SVG文件大小
• 瓶颈软件（反病毒等）

我个人会使用你感觉最舒适的方式。

希望这些结果对您有所帮助，并满足您的需求。

在此查看所有测试和结果！

- Stewartside

Answer 2

我在使用单一的雪碧图文件和独特的id时，取得了SVG方面最大的成功。大部分SVG压缩和合并脚本会简单地以各个文件名命名每个Id，这很容易实现。

然后，为了获得最佳的缩放效果，我通过HTML标签来包含SVG：

<svg viewBox="0 0 50 50"
  class="svgIcon" xmlns="http://www.w3.org/2000/svg"    
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <use xlink:href="#myIconIdHere"></use>
</svg>

如果你很幸运，viewBox的值是一样的，否则你可能需要使用某种视图助手来提供它。在我的过去的工作中，我将单独的viewBox值存储在配置文件中，以便稍后动态生成。当然，你也可以在某个文件中将每个SVG标签生成为字符串。以下是我们在一个项目中使用的示例配置：

config = {
    "arrow": {
        "viewBox" :"0 0 50 49.999360957030746",
    }
    ,
    "close": {
       "viewBox" :"0 100 50 49.999360957030746",
    }
...
}

就性能而言，我只能说一点点。

这个解决方案适用于IE9+、Chrome、Firefox和移动设备。我们在各种分辨率下对这些SVG进行缩放，并在整个页面中使用动画。应用于元素的CSS动画除了在IE9上有少量滞后问题外，没有其他明显的卡顿问题。我查看了this analysis以获得更多帮助。

我很乐意向您展示使用这些SVG的高流量页面，但希望您私信联系我。

- Cameron

---

谢谢。实际上，我是在考虑性能方面的。 （就个人而言，我同意你的选择） - Mr_Green

明白了，我会考虑到这一点并更新我的回答。 - Cameron