如何优化 SVG 路径？答案

【问题标题】：How do I optimize SVG paths?如何优化 SVG 路径？
【发布时间】：2019-03-18 15:36:08
【问题描述】：

所以我在 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>

问候，比尔

【问题讨论】：

这是因为您使用的是 Adobe illustrator。创建像这样的简单几何路径的最佳方法是从可以手动绘制的折线开始。你可以先在方格纸上画出来。接下来使用一些数学（我使用 javascript）你可能会绕过角落。
那么你的意思是下面的代码不是在 Illustrator 中制作的吗？
可能是——谁知道呢。为了对我来说达到完美的形状，唯一的方法就是数学。

标签： svg

【解决方案1】：

你的 SVG 这么大的主要原因是其中有很多不可见的元素。以下是其中所有paths 的概要：

https://jsfiddle.net/w08bd4og/

【讨论】：

我自己不使用 Illustrator，但是您尝试过“显示全部”命令吗？ forums.adobe.com/thread/1032284

【解决方案2】：

https://jakearchibald.github.io/svgomg/ 下 Jake Archibald 的 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

【讨论】：