使用 svg symbol 实现 sprite 图效果

这是我参与更文挑战的第 15 天，活动详情查看： 更文挑战

sprite 图

一种 CSS 图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用 CSS 的 background-position 来显示所需部分。

svg symbol

symbol 元素用来定义一个图形模板对象，它可以用一个 元素实例化。symbol 元素对图形的作用是在同一文档中多次使用，添加结构和语义。结构丰富的文档可以更生动地呈现出来，类似讲演稿或盲文，从而提升了可访问性。注意，一个 symbol 元素本身是不呈现的。只有 symbol 元素的实例（亦即，一个引用了 symbol 的 元素）才能呈现。

为啥要把这两个技术相提并论？

他们有着同样的优点：

• 减少加载网页图片时对服务器的请求次数
• 提高页面的加载速度

使用方法

sprite

icon {
  background: url(path);
  background-position: 0px 0px;
}

复制代码

svg symbol

<svg>
<!-- symbol 不会展示出来 -->
<symbol id="sym01" viewBox="0 0 150 110">
  <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
  <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>

<!-- 只有使用 use 标签才能展示 -->
<use xlink:href="#sym01"
     x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym01"
     x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym01"
     x="0" y="100" width="50" height="25"/>
</svg>
复制代码

优点

• 矢量图，缩放不失真
• 可引用的图片可以不在一个 svg 文件中。网页内引入的 svg 均可以引用到
• 相对 sprite 来说，维护性好。当新增图片时，无需对之前的图片位置做调整

问题

• svg use 引入的图片在 shadow dom 中，无法在外面对单独的某个 path 应用样式。因此如果没有自带颜色的话，只能设置为单色图片

总结

相对传统的 sprite 来说，svg symbol 的可维护性更好，缩放不失真。在 sprite 基础上看，相对来说更优秀。