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

时间：2015-10-15 16:07:24

标签： html css svg sprite-sheet inline-svg

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

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

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

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

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

2 个答案:

答案 0 :(得分：5)

预信息

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

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

  

Intel Core i5-3320M CPU @ 2.60GHz

     

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

     

Windows 8.1 Enterprise - 64位

     

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请求 - 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文件大小
  • 瓶颈软件（防病毒等）

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

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

View all the tests and results here!

答案 1 :(得分：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的动画，并为每个断点缩放它们。除IE9外，应用于元素的CSS动画没有任何重大滞后问题。我确实查看了this analysis以获得更多帮助。

我很乐意向您展示使用这些SVG的高流量页面，但如果您私下给我发消息，我会更喜欢。

相关问题
最新问题