svg - 如何优化 SVG 路径？

Question

所以我在 Adob​​e illustrator 上创建了几个 SVG 并导出了它的路径，但我无法理解为什么我的路径与其他网站相比非常长。因此，如果您在下面进行代码分析。上面的是我的 SVG 路径，下面的是另一个网站的。我们两个的输出图标是一样的

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

JS fiddle :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 的大小直接取决于它如何由较小的元素(基元及其组合)组成。

Google Logo 的重新设计是一个很好的案例研究，说明如何实现它 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 Logo https://twitter.com/kdzwinel/status/1097592890501615616