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

Question

我打算使用内联 svg 概念为项目创建 svg spritesheet。

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

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

现在，我在究竟应该使用哪种方法上进退两难。仅供参考，这不是基于意见的问题，因为我不是在寻找意见，而是在考虑性能和最佳解决方案。

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

Answer 1

预告

浏览器中的性能很难测试和衡量，这仅仅是因为变量的数量会导致浏览器、硬件或其他可能阻碍性能的变化、峰值或差异。

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

英特尔酷睿 i5-3320M CPU @ 2.60GHz

8GB DDR3 Ram（不确定时序等）

Windows 8.1 企业版 - 64 位

谷歌浏览器 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 个请求 - 221B 转移

• Results

平均

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

---

内联 - 个人 <svg>'s

测试

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

• Full Codepen Example

结果

1 个请求 - 221B 转移

• 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 个请求 - 440B 传输

• Results

平均

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

---

结论

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

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

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

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

我会亲自使用你觉得最舒服的任何东西。

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

View all the tests and results here!

Answer 2

我在具有唯一 ID 的单个 sprite 文件中使用 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 的高流量页面，但如果您私信我更愿意。