svg编辑器_在线svg编辑器_svg代码在线生成图形_svg生成器网页版入口

SVG 路径编辑器 / 贝塞尔曲线可视化生成器

纯前端本地实时运算 · 零服务器依赖

专业级 SVG 矢量图形可视化创作工作台：实时双向解析渲染 Path 路径指令（M, L, C, S, Q, T, A, Z），支持画布锚点与贝塞尔手柄自由拖动，提供智能网格吸附、几何矩阵变换及一键导出纯净 SVG 代码。

预设精美几何图案:

viewBox="0 0 500 500"

显示网格网格吸附 (20px)

蓝点: 端点锚点黄点: 贝塞尔控制手柄

可直接在画布上拖拽点位

Path 代码 (d 属性)0 个指令

描边颜色

#2563eb

填充颜色

#dbeafe

线条粗细3px

填充不透明度50%

SVG（可缩放矢量图形）是 W3C 推荐的基于 XML 的开放标准。与依赖固定像素阵列的位图（PNG、JPG）不同，SVG 图形由精确的数学几何方程式定义，在任何分辨率与视网膜高分屏下均保持 100% 丝滑无损。而在所有 SVG 标签中，<path> 元素是功能最强大、自由度最高的核心载体。

传统专业设计软件（如 Illustrator、CorelDraw）操作门槛高且导出的代码往往包含大量冗余标签。本工具作为纯前端、零服务器依赖的在线 SVG 生成器与路径可视化工作台，让您直接在画布上自由拖动锚点与贝塞尔手柄，实时生成标准、纯净的 d 属性代码，一键嵌入前端项目。

SVG Path 通过单一字母指令控制画笔轨迹。大写字母表示绝对坐标（相对于画布原点 0,0），小写字母表示相对坐标（相对于前一命令终点的偏移增量）：

命令字符	英文定义	参数格式	几何功能作用说明
M / m	Move To	x y	移动画笔到起始位置。绝对坐标/相对偏移，不画线。
L / l	Line To	x y	从当前画笔位置，绘制一条直线到指定的终点坐标。
H / h	Horizontal Line	x	绘制水平直线到指定 x 坐标，保持当前 y 坐标不变。
V / v	Vertical Line	y	绘制垂直直线到指定 y 坐标，保持当前 x 坐标不变。
C / c	Cubic Bezier	x1 y1 x2 y2 x y	三次贝塞尔曲线。包含两个控制手柄点 (x1,y1)、(x2,y2) 与终点 (x,y)。
S / s	Smooth Cubic	x2 y2 x y	平滑三次贝塞尔。第一控制点自动镜像上一个 C/S 的第二控制点。
Q / q	Quadratic Bezier	x1 y1 x y	二次贝塞尔曲线。仅需一个控制手柄点 (x1,y1) 与终点 (x,y)。
T / t	Smooth Quadratic	x y	平滑二次贝塞尔。控制点自动镜像对称反射上一个 Q/T 的控制点。
A / a	Elliptical Arc	rx ry rot large sweep x y	绘制椭圆弧线。包含双向半径、旋转角、大弧标志、顺逆标志及终点。
Z / z	Close Path	无参数	闭合路径。从当前位置拉出直线连接回最初的 M/m 起始锚点。