html - 通过符号或 css 包含内联 svg？

Question

我计划使用内联 svg 概念为元素创建 svg spritesheet。

实际上有很多方法可以创建 svg spritesheet。我更喜欢两种方法(因为性能)来创建 spritesheet。它们如下:

• 通过使用具有唯一 ID 的 symbol 标签包装每个 svg 的内容，将所有 svg 分组为单个 svg，以便稍后我们可以在 HTML 中使用 use 标签引用它。
• 生成一个包含所有通过 css background-image 属性引用的 svg 的 css 文件。每个 svg 都有一个唯一的类名。

现在，我正在为究竟使用哪种方法而犹豫不决。仅供引用，这不是基于意见的问题，因为我不是在寻找意见，而是在考虑性能和最佳解决方案。

PS:我可以使用 gulp task runner 生成 svg Sprite 表。

Answer 1

前期信息

浏览器内的性能很难测试和衡量，原因很简单，因为变量的数量可能会导致浏览器、硬件或其他可能成为性能瓶颈的变化、峰值或差异。

以下测试是我在具有以下硬件和浏览器的戴尔笔记本电脑上运行的

Intel Core i5-3320M CPU @ 2.60GHz

8GB DDR3 Ram (unsure of timing's etc)

Windows 8.1 Enterprise - 64Bit

Google Chrome v45.0.2454.101 m

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

我使用的 SVG

我创建了一个 SVG 元素，它使用 5 个层叠在一起的图标。

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

• 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>

• Full Codepen Example

结果

1 Request - 221B Transfer

• Results

平均

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

---

内联 - 个人 <svg>的

测试

这个文件太大所以只给出CodePen例子

• Full Codepen Example

结果

1 Request - 221B Transfer

• Results

平均

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 Requests - 440B Transfer

• Results

平均

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

---

结论

从上面的测试和结果我们可以看出，使用内联 SVG 并引用它比使用外部文件要快得多；缓存与否。

这两种内联 SVG 方法似乎都没有那么多速度差异，但我个人会选择 <use>方法，仅仅是因为从长远来看它更容易使用，并且有助于保持您的 body 代码干净。

现在，正如我所说，这些结果完全取决于无限多的变量，仅举几例:

• 浏览器
• 硬件
• 互联网连接
• SVG 文件大小
• 瓶颈软件(防病毒等)

我个人会使用您觉得最舒服的任何东西。

我希望这些结果有点用处或令人满意，并能帮助您满足您的需求。

View all the tests and results here!