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

Question

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

实际上有很多方法可以创建svg spritesheet.我首选两种方法(因为性能)来创建spritesheet.他们如下:

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

现在,我正处于完全使用哪种方法的两难境地.仅供参考,这不是基于意见的问题,因为我不是在寻找意见,而是在考虑性能和最佳解决方案.

PS:我可以使用gulp task runner生成svg精灵表.

Answer 1

前信息

浏览器中的性能是非常难以测试和衡量的,仅仅是因为可能导致浏览器,硬件或其他可能导致性能瓶颈的变化,峰值或差异的变量数量.

我在戴尔笔记本电脑上使用以下硬件和浏览器运行以下测试

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

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

Windows 8.1企业版 - 64位

谷歌浏览器v45.0.2454.101米

由于时间限制,我只运行了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>

• 完整的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文件大小
• 瓶颈软件(防病毒等)

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

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

在这里查看所有测试和结果!