如何优化 SVG 路径？

Question

因此，我在 Adob​​e illustrator 上创建了一些 SVG 并导出其路径，但我无法理解为什么我的路径与其他网站相比非常非常长。那么如果你做下面的代码分析。上面的一个是我的 SVG 路径，下面的一个来自另一个网站。我们俩的输出图标是相同的

我如何优化我的路径，走它也可以像其他人一样小。我注意到我的所有路径代码都是几百行前的。

JS 小提琴：https://jsfiddle.net/bf51j9yr/

别人的SVG：

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m10 20h9.006c1.65 0 2.994-1.347 2.994-3.009v-9.982c0-1.673- 
1.341-3.009-2.994-3.009h-14.012c-1.65 0-2.994 1.347-2.994 3.009v9.982c0 
1.673 1.341 3.009 2.994 3.009h2.006v-9c0-.552.447-1 1-1h6v-3.5l5.5 5- 
5.5 5v-3.5h-4z"></path>
</svg>

问候，比尔

Answer 1

Jake Archibald 的 SVGOMG 可在https://jakearchibald.github.io/svgomg/下找到，是一个很棒的开源工具。它允许轻松修剪 SVG 标记大小（也具有不同的精度）。

它成功地将示例 SVG 修剪了约 50%，并且没有视觉精度损失。

如果您想实现更多目标，您可能需要重组您的 SVG。SVG 的大小直接取决于它如何由较小的元素（基元及其组合）组成。

谷歌徽标的重新设计是一个很好的案例研究，说明如何实现它https://www.quora.com/How-could-Googles-new-logo-be-only-305-bytes-while-its-old-logo -is-14-000-bytes/answer/Ilya-Yakubovich?srid=3a0v另外，Konrad Dzwinel 最近制作了一个简短的教程，说明他如何微调 DuckDuckGo 徽标https://twitter.com/kdzwinel/status/1097592890501615616