如何优化SVG路径？

Question

因此，我在Adobe 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的大小直接取决于它是如何由较小的元素（原始元素及其组成）组成的。

重新设计Google徽标是一个很好的案例研究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

Answer 2

SVG之所以如此之大，主要原因是其中包含许多不可见的元素。以下是其中所有path的概述：

https://jsfiddle.net/w08bd4og/