一些好用的 SVG Path(路径)代码可视化编辑工具

29,663 阅读2分钟
原文链接: svgtrick.com

在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!)这篇文章整理而来,有删减,有疏漏或者理解不到位的地方,还请多多指教!