5

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

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

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

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

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

4

2 回答 2

7

预告

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

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

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

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

Windows 8.1 企业版 - 64 位

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

平均

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

内联 - 个人<svg>的

考试

这个文件太大所以只给出 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 文件大小
  • 瓶颈软件（杀毒等）

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

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

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

于 2015-10-16T09:59:55.483 回答
1

我在具有唯一 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 之外没有任何大的滞后问题。我确实查看了此分析以获取更多帮助。

我很乐意向您展示使用这些 SVG 的高流量页面，但如果您私信我，我更愿意。

于 2015-10-15T16:24:34.753 回答