添加内联 SVG 最有效的方法是什么？

Question

我有一个包含大量 SVG 图标的网页，这些图标将位于 HTML 中。我不会将它们作为 IMG 标签包含在内，并且可能会因为这些 HTTP 请求而减慢页面速度，而是将 SVG 代码放置为如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#C5C2BD" fill-rule="nonzero" d="M4.5 3.435L1.286.22A...LOTS OF CODE HERE..."/></svg>

注意：当它说“这里有很多代码”时，有一大串数字/字母组成了这个 SVG 的路径。

这产生的问题是，当在 HTML 中不容易维护时，它非常难看（以至于我的编辑器陷入困境，因为这些 SVG 字符串太长了）。

是否有一种更干净、更简单的方法可以将这些 SVG 图标包含在我的 HTML 中，同时仍然消除额外的 HTTP 请求？

谢谢你的时间。

Answer 1

您应该将所有 .svg 文件转换为一种字体文件，具体方法如下：

如何将 .svg 文件转换为字体？