我计划使用内联 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 表。
最佳答案
前期信息
浏览器内的性能很难测试和衡量,原因很简单,因为变量的数量可能会导致浏览器、硬件或其他可能成为性能瓶颈的变化、峰值或差异。
以下测试是我在具有以下硬件和浏览器的戴尔笔记本电脑上运行的
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 图标。
测试
内联 - <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>
结果
1 Request - 221B Transfer
平均
Finish: 10.3ms - DOMContentLoaded: 22.8ms - Load: 22.3ms
内联 - 个人 <svg>
的
测试
这个文件太大所以只给出CodePen例子
结果
1 Request - 221B Transfer
平均
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
平均
Finish: 57.5ms - DOMContentLoaded: 41.3ms - Load: 58.4ms
结论
从上面的测试和结果我们可以看出,使用内联 SVG 并引用它比使用外部文件要快得多;缓存与否。
这两种内联 SVG 方法似乎都没有那么多速度差异,但我个人会选择 <use>
方法,仅仅是因为从长远来看它更容易使用,并且有助于保持您的 body 代码干净。
现在,正如我所说,这些结果完全取决于无限多的变量,仅举几例:
- 浏览器
- 硬件
- 互联网连接
- SVG 文件大小
- 瓶颈软件(防病毒等)
我个人会使用您觉得最舒服的任何东西。
我希望这些结果有点用处或令人满意,并能帮助您满足您的需求。
关于html - 通过符号或 css 包含内联 svg?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33153411/