是否可以将所有 SVG 图标合并到一个文件中以在 HTML 中获得性能？

Question

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

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

谢谢！

Answer 1

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

这有一个缺点：

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

但有以下两个优点：

• 您无需进行服务器往返来收集 SVG
• 当浏览器缓存您的样式表时，所有内联的数据 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>

而这里的同一个SVG作为数据URI：

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 ...

工作示例：

<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: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