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

Question

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

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

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

现在，我正在纠结到底该用哪种方法。仅供参考，这不是基于意见的问题，因为我不是在寻找意见，而是在考虑性能和最佳解决方案。

PS：我可以使用 gulp task runner 生成 svg 精灵表。

Answer 1

我在具有唯一 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 的高流量页面，但如果您私信给我我会更好。

Answer 2

Pre-Information

浏览器中的性能很难测试和衡量，仅仅是因为可能导致浏览器、硬件或其他因素之间的变化、尖峰或差异的变量数量 bottle-necking性能。

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

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 文件大小
Bottle-neck 软件（Anti-virus 等）

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

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

View all the tests and results here!

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

Include inline svg through symbol or css?

html

css

svg

sprite-sheet

inline-svg

Pre-Information

我使用的 SVG

测试

内联 - `<use>`

内联 - 个人 `<svg>` 的

结论

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

Include inline svg through symbol or css?

html

css

svg

sprite-sheet

inline-svg

Pre-Information

我使用的 SVG

测试

内联 - <use>

内联 - 个人 <svg> 的

结论

内联 - `<use>`

内联 - 个人 `<svg>` 的