可视化和编辑 SVG 路径的工具（有点像！）

前几天在 SVG 峰会 上有人提出，在使用 SVG 时，如果能够同时以两种方式进行操作，那将会非常棒。

1. 查看和编辑代码，并直观地查看结果
2. 查看和编辑视觉形状，并查看代码更改

可能没有一个完美的终极工具，但肯定有一些想法正在接近目标！

Anthony Dugois 的 SVG 路径构建器

我想在这里嵌入 这个笔，但您确实需要更多空间来使用它。这是一个关于其工作原理的视频

它向您显示了代码输出，但您无法调整代码以在视觉部分中查看更改。它仍然出色地展示了 SVG 路径语法 中可用的不同曲线命令类型。

Yann Armelin 的 SvgPathEditor

我在 2020 年 5 月添加了这个，我认为它是最接近完美的！

在其中复制粘贴一些路径数据，它就可以正常工作。您可以使用视觉区域，拖动点和曲线点，或者编辑路径数据本身，或者将路径数据分解成具有单独控件的表单。

Sten Hougaard 的 SVG 操作路径

Hougaard 先生的笔 有一些预设曲线，您可以拖动并与之交互。

它不仅提供数据，还提供完整的 元素。它也是单向的，无法手动更改代码。

Varun Vachhar 的 XVG

这个 Chrome 扩展程序 不允许您查看 SVG 代码或操作任何内容，但它确实显示了构成 Web 上任何 SVG 的点和曲线控制柄，让您对幕后一窥。

它可以在任何地方调用，这真的很酷。如果它能够发展出交互式操作功能，并显示这些更改的输出，那将非常棒。

Bennett Feely 的 Clippy

Clippy 不是 SVG，它是用于 CSS clip-path，但我认为您会很容易理解这种 UI 对 SVG 操作以及在执行操作时查看代码将是多么酷。

Ana Tudor 的使用 SVG 的三次贝塞尔曲线

这个我可以直接嵌入到这里

无法直接编辑代码，但从交互中可以非常清楚地看出，当您操作 SVG 曲线控制点时，您正在更改代码的哪些部分。

Brent Jackson 的路径

添加 这个！ 我很高兴有人指出它，因为它似乎最接近能够在两侧进行编辑：代码和视觉。

图形软件：仅视觉

请记住，这里的重点是搜索连接视觉编辑和代码编辑概念的 UI。像 Adobe Illustrator 这样的矢量编辑软件仅限于视觉，因为有一些工具可以直观地操纵图形，但您不知道这会如何影响代码。

您可以导出代码并查看它，但这不是我们在这里探索的实时连接。

代码编辑器：仅代码

像 CodePen 这样的代码编辑器有助于将代码和视觉输出结合在一起

但它仍然是单行道。除了查看之外，您无法对视觉方面进行任何操作。

等待完美的工具

有很多选择；没有一个是完美的！到目前为止，我还没有看到任何能够将代码编辑和视觉编辑完美地结合在一起，并将它们视为同等的一流 UI 组件。