一些好用的 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文件，才能看到具体的代码。

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