SVG 图形生成器 — 画闭合的贝塞尔图形，输出 SVG
多段贝塞尔围成一个图形，直接输出 SVG。
形状
面积 45%
导入已有路径
选中线段的数学
B(t) = (1−t)³P₀ + 3(1−t)²t·P₁ + 3(1−t)t²·P₂ + t³P₃
- P₀
- (50, 14)
- P₁
- (70, 16)
- P₂
- (94, 54)
- P₃
- (86, 74)
- B(0.50)
- (78.5, 37.25)
- B′(0.50)
- (45, 73.5)
- 弧长
- ≈ 76.66
画出图形
在你的设备上运行 你粘贴的内容由你自己的浏览器处理，不会发送到任何服务器，离开页面后也不会留在任何地方。
一句话答案
由多条三次贝塞尔曲线组成的图形可以在浏览器里免费绘制，用的是钢笔工具那套手势：点击得到一个角点，按住拖动得到一段平滑曲线，点回第一个锚点即闭合成形。每个锚点有两个手柄，在「平滑」状态下保持镜像联动，按住 Alt 拖动则把它们掰开成角点 —— 所以一个图形里可以同时有曲线和硬折角。闭合会用 Z 把末点连回起点，于是这些线段成为一个完整图形。一幅图可以有任意多条路径，每条各有自己的填充色、描边色和线宽；被标记为「挖孔」的路径会用奇偶填充规则从上一条里挖掉 —— 圆环就是这么画出来的。默认输出是一份完整的 <svg> 元素，viewBox 可选 100、200、500 或 1000 单位；也可以只要 <path>、只要 d 属性，或者一条 CSS clip-path。另外还内置了心形、星形、水滴、叶子、云、对话气泡、色块、波浪八个现成形状可直接起步，也可以把已有的 d 属性粘贴进来继续改；线段可选三次、四次或五次；选中线段的全部控制点、B(t)、切线和弧长都会列出来，t 滑块还能在画布上驱动 de Casteljau 构造。
一览
| 支持输入 | 无需粘贴 —— 图形是画出来的 |
|---|---|
| 输出格式 | 完整 <svg>，或 <path>、d 属性、clip-path |
| 处理方式 | 浏览器本地 |
| 价格 | 免费，无次数限制 |
| 账号 | 无需注册 |
手写一条 C 命令是那种没人愿意做第二遍的事。字母本身不难 —— M 移动画笔，C 带两个控制点和一个终点，Z 闭合 —— 难的是那些数字在浏览器画出来之前全是猜的，于是一个形状变成十几轮「改一点、刷新、再改一点」。
所以这里改成画出来，并且默认就是闭合加填充的。因为多段贝塞尔接成一个图形，本来就是这类需求的主体：首屏背景上的那团色块、有机形状的分割线、自定义的 clip-path、一个用一条曲线而不是十二个矩形拼出来的图标。方框里会把填充一起画出来，所以你调的是这个形状本身，而不是它的线框。
两个方向的数据都是对得上的：方框里看到的就是输出里的那条路径，以方框的比例存储，再缩放到你指定的 viewBox 上。选 1000，得到的是同一个形状、多三位分辨率，而不是另一个形状。
手势是刻意照着钢笔工具来的：点击得角点，拖动得曲线，Alt 掰开平滑点，双击线段插入锚点，点回起点闭合。这套手势从 Illustrator 88 到现在没变过 —— 所以值得照抄而不是「改进」：画过矢量的人本来就会，没画过的人在网上随便搜一篇教程讲的都是这一套。
插入锚点用的是 de Casteljau 分割，所以「加一个能抓的地方」这个动作本身不会让曲线移位。这就是「调整形状」和「跟形状打架」的区别。
使用步骤
- 1
点击，或者按住拖动
点一下得到一个角点；按住拖动则得到一个手柄已经拉出来的平滑点。也可以直接选八个现成形状里的一个，或者把已有的 d 属性粘到导入框里接着改。
- 2
造型
拖锚点移动，拖手柄弯曲曲线，按住 Alt 把平滑点掰成角点。双击锚点在角点/平滑点之间切换；双击线段在该处插入一个锚点。方向键微调，Ctrl+Z 撤销。
- 3
闭合并填充
「闭合」会用 Z 把末点连回起点；「填充」决定这个图形是只填充、只描边，还是两者都要。
- 4
复制或下载 SVG
默认输出就是一份完整的 <svg> 元素 —— 直接复制，或者下载成 .svg 文件。
常见问题
输出里的 M、C、Z 是什么意思？
M 把画笔移到起点而不画线。C 画一段三次贝塞尔曲线：两个控制点后面跟一个终点。Z 把路径闭合回 M 落笔的地方 —— 正是这一步让那些线段成为一个图形，而不是一条恰好结束在起点附近的线。本页生成的就只有这三个命令。
一个图形最多能由几条曲线组成？
想放多少锚点就有多少段。第一个点之后的每个锚点都会添加一段 C，闭合时再加一段回到起点 —— 所以四个锚点的闭合图形就是一个 d 属性里的四条贝塞尔曲线，十二个锚点就是十二条。
为什么默认是填充而不是描边？
因为闭合的轮廓本质上是一块区域，而大多数用途要的正是这块区域：背景色块、分割线、图标、clip-path。只描边是为那些真正要「线」本身的场景留的。另外要注意：SVG 对开放路径也会填充，做法是假装它闭合了 —— 那几乎不会是你的本意，所以请明确地闭合它。
角点和平滑点有什么区别？
平滑点的两个手柄保持共线且等长，所以曲线穿过它时不会出现折角。角点的两个手柄各自独立 —— 或者干脆没有手柄，那它两侧的线段就是直线。点击添加角点，拖动添加平滑点，双击在两者之间切换，拖手柄时按住 Alt 则把平滑点掰开。
能从现成的形状开始吗？
能 —— 心形、星形、水滴、叶子、云、对话气泡、色块、波浪，每一个都是真正可编辑的路径，不是一张图片。所有锚点和手柄随后都能拖。每个预设还会带上自己的「闭合」和「填充」设置，因为一条开放的波浪和一个填充的心形不是同一类东西。
手滑了能撤销吗？
能。撤销和重做覆盖每一次编辑 —— 移动锚点、弯曲手柄、插入、删除、套用预设 —— 画布获得焦点时 Ctrl+Z 和 Ctrl+Shift+Z 也可用。Delete 删除当前选中的锚点。
能编辑我已有的 SVG 路径吗？
能。把它 d 属性里的内容粘进导入框即可。整套语法都会被读取 —— M L H V C S Q T A Z，绝对和相对都行，也支持参数隐式重复；二次曲线精确转成三次，两个「平滑简写」会自动取镜像控制点，椭圆弧会被转换成三次曲线。如果路径包含多条子路径，只保留第一条并明确告知，因为本编辑器一次只放一条路径。图形会被缩放到方框里，所以它原来所在的坐标框不会保留 —— 保留的是形状。
「曲线阶数」是干什么的？
n 阶曲线段有 n+1 个控制点，所以阶数越高，单段能弯的幅度越大，而不必再往上加锚点 —— 四次多一个内部控制点，五次多两个，在画布上画成菱形。升阶是精确的：三次曲线同时也是四次曲线，所以形状不会移动，你只是多了一个可拖的控制点。降阶不可能精确，因为大多数四次曲线并不是三次曲线，所以编辑器会告诉你形状偏移了多少。SVG 只有三次曲线，因此高阶线段导出时会被切成若干三次段，切到与真实曲线的偏差小于十分之一个输出单位 —— 比数字打印出来的精度还高。
一幅图能有多个形状，或者带孔吗？
都可以。路径列表里想加多少条就加多少条，每条都有自己的「闭合」、填充色、描边色和描边宽度，导出时各成一个 <path>。把某条路径标记为「挖孔」就能做出圆环：它会作为第二条子路径并入上一条，两者以 fill-rule="evenodd" 填充，于是内圈把填充挖掉，而不是在上面叠一个更小的形状。内置的「带孔圆环」就是两条这样的路径。
那个数学面板显示的是什么？
是从选中锚点出发那一段的全部信息：四个控制点（按输出单位）、它们作为系数的那个多项式 B(t) = (1−t)³P₀ + 3(1−t)²t·P₁ + 3(1−t)t²·P₂ + t³P₃、滑块所在 t 处的点和切线向量，以及弧长。勾选复选框会在画布上画出 de Casteljau 构造：在控制点之间的每条弦上按 t 取点，再在这些点之间的弦上取点，最后一条弦上的点就是 B(t)。插入锚点时用的也是这个构造 —— 这正是插入不会让曲线移位的原因。
改 viewBox 尺寸会改变什么？
只改变数字。图形是以方框的比例存的，所以更大的 viewBox 是同一个形状、更高的精度 —— 图形要放大使用时有用，想让输出里不出现小数时也有用。
能直接当 CSS clip-path 用吗？
可以，这就是其中一种输出形式：clip-path: path('…')，用的是同一个 d 字符串。clip-path 和 offset-path 都按 CSS 像素解释路径数据，而不是按你的 viewBox，所以尺寸要跟被裁剪的元素对上 —— 100 单位的图形裁的是一个 100px 的盒子。
为什么填充和描边都用 currentColor？
这样粘贴进页面的图形会继承周围文字的颜色，而不是带着写死的黑色过去 —— 后者在深色背景上根本看不见。进到你自己的标记里之后，两者想改成什么颜色都可以。