是否可以将所有 SVG 图标合并到一个文件中以提高 HTML 性能?

Question

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

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

谢谢！

Answer 1

您可以考虑的一种性能方法是将SVG作为数据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>

下面是与数据 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,前缀之后，数据 URI SVG几乎完全相同，除了：

• 尖括号<和>已替换为%3C%和%3E%代码

---

最后，这是下面的 CSS 中运行的数据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" />

Answer 2

是的。您可以使用工具通过标签将多个 SVG 文件合并到单个精灵表中。所有现代浏览器都支持此功能。

您可以使用 svgstore 从 Node.js 脚本执行此操作： https://github.com/svgstore/svgstore

还有一个 cli 变体，您可以从 npm (package.json( 脚本或命令行使用： https://github.com/svgstore/svgstore-cli

Answer 3

看看 https://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons/#:~:text=How%20To%20Build%20Your%20SVG%20Icon%20System%3F

简而言之：

1. 使用 https://onlinefontconverter.com/等工具将图标字体转换为 SVG
2. 通过使用以下工具仅选择所需的符号来编辑 SVG
   • https://icomoon.io/app/
   • http://fontastic.me/
   • http://fontello.com/
   • https://www.npmjs.com/package/font-blast
3. 使用语法(如<svg class="icon-twitter"><use xlink:href="#icon-twitter"></use></svg>(来处理本地包含的 SVG 的某些部分。