如何减少任意SVG路径的坐标数,而不会损失太多或任何精度?

ecm*_*aut 10 svg simplification

我正在网上搜索工具,程序,实用程序,支持库和代码基元,这些基元最近有助于优化SVG的简洁性,空间和优雅,可以链接到Kilobyte SVG Challenge工具部分,但还没有找到好的基元聚焦关于如何减少路径坐标的数量,而不会损失太多 - 或理想的任何 - 精度.

以这个标记增强版的可口可乐标志为例(约7kb,基本上所有的路径数据) - 非常清楚地显示了减少bèziers数量的许多承诺,给出了一些工具来计算数学来提出一个路径使用较少的节点,同时产生基本相同的曲线.

对于更简单的多边形和折线问题(读作"全线路径"),您可以使用Douglas-Peucker或Visvalingam的算法(参见Mike Bostock对后者的优秀d3实现)来简单地删除最不影响路径形状的坐标直到您对满足您需求的尺寸到精度的配合感到满意.

我正在寻找等效的注意事项,其中较大的曲线(或甚至弧形)段可以替代许多这些冗余的中间曲线坐标停止,而无需大量的手动调整.我认为一些矢量图形包(Adobe Illustrator,甚至可能是Inkscape?)可能会提供这些功能(欢迎使用它们的提示!) - 虽然我很想找到可编写脚本的工具,我们可以推荐并提供如何使用的HOWTO命令行,甚至网络应用程序,为人们挤出多余的路径填充材料.

作为参考,Kilobyte SVG Challenge是我最近设立的一个有趣的SVG教育和宣传噱头.关于它的所有非问题主题讨论最好保存在那里,和/或上面链接的github存储库.保持好状况!:)

cui*_*ing 5

您可以使用Ramer\xe2\x80\x93Douglas\xe2\x80\x93Peucker 算法来简化折线或多边形路径。

\n\n

在此输入图像描述

\n

  • 问题中已经说明了这一点,但感谢您提供的图像示例简洁地演示了其工作原理。使问题变得复杂的是,SVG 路径实际上是原始级别的三次样条而不是折线/多边形,并且结果的简洁近似需要重新创建一些三次样条才能接近它们所具有的表达简洁性能力,尽管不同的控制点。 (3认同)