SVG 路径编辑器

SVG Path Editor

在绝对和相对命令之间转换路径数据，做平移、缩放、旋转和方向反转，并显示包围盒和实时预览。

读取一个 `d` 属性，给回一个变换过的：绝对或相对、移动、缩放、绕包围盒中心旋转、反向，以及取整到你选择的小数位数。它通过 Path2D 绘制结果，所以浏览器按 SVG 渲染器同样的方式做圆弧数学，并报告包围盒和一个可以粘贴的 viewBox。

🔒 完全在你的浏览器里运行svgpathvectoredit

小数位：3

命令形式

X 方向平移：0Y 方向平移：0缩放：1×旋转：0°

虚线矩形是包围盒，红点是起点。填充用的是 nonzero 规则。

M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2z

<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2z" />

命令

子路径

数字

字节

113 → 97

包围盒

x 2.00 y 2.00 w 20.00 h 20.00

viewBox

2.00 2.00 20.00 20.00

它做什么

· 用的是和 SVG 优化压缩一样的解析器，所以像 1.5.5 这种压掉分隔符的写法、还有弧线的标志位，都能读对。它能在绝对和相对之间互转、按位数取整、平移、缩放、绕包围盒中心旋转、反转方向，并算出包围盒。
· 一旦旋转，H 和 V 就变成 L，弧线的半径、x 轴旋转角和 sweep 标志位会按 SVG 1.1 附录 F.6 的公式重算。包围盒取的是每段曲线真正的极值，不是它的控制点。
· 它不会简化曲线。那会改变形状，容差该定在哪里是人的判断。

要把整个文件缩小，用 SVG 优化压缩；要调曲线的加速方式，用缓动曲线编辑器。

怎么用

粘贴 d 属性
只要值，不带外面的 `<path>`。压缩记法可以——`1.5.5` 作为两个数、没有分隔符的圆弧标志——因为解析器是 SVG 优化器的那一个，处理得了这些情况。
应用你需要的变换
移动、缩放和旋转应用在几何本身上，所以出来的东西不需要 `transform` 属性。旋转绕包围盒中心，这是对图标来说你要的，而不是原始 `rotate()` 做的。
选绝对或相对，以及精度
相对命令通常更短，对内联图标要紧。精度是真正的大小杠杆：三位小数对 24 单位的图标网格绰绰有余，从六位降到两位常常把字符串减半。移动它时看着字节计数器。
填色看着不对就反转方向
红点标记起点，所以反转的效果看得见。方向决定内部子路径在 nonzero 规则下是不是洞，也是描边虚线动画跟随的东西。
取路径，或者 viewBox
输出框有 `d` 值和一个现成的 `<path>` 元素。统计面板有作为 viewBox 字符串的包围盒，这是让图标精确填满画框最快的办法。