时间戳

首页 > 解决方案 > 是否可以将所有 SVG 图标合并到一个文件中以实现 HTML 性能？

html - 是否可以将所有 SVG 图标合并到一个文件中以实现 HTML 性能？

问题描述

我的公共文件夹中有一堆不同的 SVG 文件。这些 svg 使用image-mask: url(/icon.svg)属性显示。

如果我只有一个 svg 但我有 20 个不同的图标，这很好。有没有办法将它组合成普通 JPG 图像的精灵之类的东西？

谢谢！

标签： htmlcsssvg

解决方案

您可以查看的一种性能方法是将SVG作为Data URI添加到 CSS 样式表中。

这有一个缺点：

  • 它增加了 CSS 样式表的大小

但有以下两个优点：

  • 您无需进行服务器往返来收集 SVG
  • 当浏览器缓存您的样式表时，所有内联的 Data URI SVG 将与样式表同时被缓存

这几乎肯定会给您带来显着的性能提升。

让我们看看这可能是如何工作的。

这是一个五角星的SVG ：

<svg xmlns="http://www.w3.org/2000/svg" width="260" height="245">
<path transform="scale(0.75)" d="m55, 237 74-228 74, 228L9, 96h240" />
</svg>

这是与Data URI相同的SVG：

data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20width="260"%20height="245"%3E%3Cpath%20transform="scale(0.75)"%20d="m55,237%2074-228%2074,228L9,96h240"%20/%3E%3C/svg%3E

可以看到，在data:image/svg+xml,前缀之后，Data URI SVG几乎一模一样，除了：

  • 尖括号<&>已被替换为%3C&%3E百分比代码

最后，这是在下面的 CSS 中运行的Data URI SVG ...

工作示例：

.image-without-mask,
.image-with-mask {
  float: left;
  width: 200px;
  height: 180px;
  margin-right: 12px;
}


.image-with-mask {

  /* N.B. -webkit- prefix required for Chrome, Edge, Safari and Opera (but not Firefox) */
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20width="260"%20height="245"%3E%3Cpath%20transform="scale(0.75)"%20d="m55,237%2074-228%2074,228L9,96h240"%20/%3E%3C/svg%3E');

  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20width="260"%20height="245"%3E%3Cpath%20transform="scale(0.75)"%20d="m55,237%2074-228%2074,228L9,96h240"%20/%3E%3C/svg%3E');
}
<img class="image-without-mask" src="https://via.placeholder.com/200x180/0000FF/FFFFFF" />

<img class="image-with-mask" src="https://via.placeholder.com/200x180/0000FF/FFFFFF" />

推荐阅读