一些好用的 SVG Path（路径）代码可视化编辑工具 - 前端 - 掘金

在 SVG 开发中，Path（路径）是一个用的非常多的一个属性。这篇文章来介绍一些各具特色的可视化的 Path（路径）编辑工具，可以帮助你在 SVG 开发中，提高你的工作效率。

Anthony Dugois 做的 Path（路径）编辑工具

可以来看下这个视频演示，看看工具具体能做什么：

这个工具主要是用来实时的编辑 Path（路径），并且实时的输出相关的代码，还支持不同的贝塞尔曲线，具体支持的曲线可以去这个地址看看。

工具地址

Sten Hougaard 的 SVG Path（路径）编辑工具

这也是一个 Path（路径），不但输出 data 数据，还直接输出 Path（路径）也还不错。

工具地址

Varun Vachhar 的 XVG

工具地址

这是一个 chrome 插件，可以用来显示网页上 SVG 的控制点，具体可以看下面的演示：

Bennett Feely 的 Clippy

工具地址

Clippy 不是一个 SVG 工具，是用来可视化编辑 CSS 中 clip-path 用的，在编辑的同时，能同步输出对应的 CSS 代码，交互做的非常不错。

Ana Tudor 的一个 SVG Path（路径）贝塞尔曲线工具

工具地址

在这个工具中可以直接拖动对应的控制点，输出对应的 Path（路径）代码，非常的方便。

Brent Jackson 的 Path（路径）工具

工具地址，这个工具也非常强大，可以自定义添加多个控制点，贝塞尔曲线以及各种形状通通不在话下。

Adobe Illustrator

提到 SVG，当然要说 Adobe Illustrator，作为一个专业的矢量设计工具，它提供了非常强大的矢量设计能力，同时也支持导出 SVG 格式。因为是针对设计而生的一个工具，所以它没有代码提示的功能，只能先导出为 SVG 文件，才能看到具体的代码。

工具千千万，没有一个是最完美的，根据当前的需求选择最合适的工具才是正确的选择。

本文主要是从Tools to Visualize and Edit SVG Paths (Kinda!)这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！
https://juejin.im/entry/59b5e629f265da065f047ad6