Softonic

SVG 路径构建器

步 1 / 2

点击空白区域添加点。拖动点可移动。使用按钮删除最后一个点。

下一步

SVG <path> 上的 d 属性实际上是一种小型领域专用语言，M 10 10 L 100 10 C 120 10 120 60 100 60 Z。每个字母代表一个命令（移动、直线、三次贝塞尔曲线、闭合路径），每个数字则表示坐标点或控制点。该构建器支持在画布上点击以放置锚点，并拖动它们来重新塑形，同时实时观察路径的绘制过程。切换平滑选项可将直线段转换为三次贝塞尔曲线，闭合形状后，复制生成的 d 属性或完整的 SVG。

如何创建路径

  1. 1

    点击以添加锚点

    每次点击都会在画布上放置一个锚点；路径会按顺序连接它们，并从 `M`（moveto）开始。

  2. 2

    拖动以重新塑形

    拖动任意锚点即可移动它，用按钮删除最近添加的一个。至少需要两个锚点。

  3. 3

    直线或平滑

    让锚点以直线段 `L` 相连，或切换“平滑”将它们转换为三次贝塞尔曲线 `C`。

  4. 4

    闭合或保持开放

    切换“闭合路径”以添加返回起点的 `Z`，或保持开放以绘制折线/描边。

  5. 5

    复制 d 属性

    生成的 `d` 字符串格式清晰、以空格分隔，可直接粘贴至任意 SVG；你也可以复制或下载完整的 SVG。

SVG path 命令速查表

上方的可视化构建器会生成 M、L、C 和 Z 命令（moveto、直线、三次贝塞尔曲线和闭合路径）。下方其余的命令集供你在阅读和手动编辑粘贴到别处的任意 d 字符串时参考。大写字母使用绝对坐标；小写字母则使用相对于当前笔尖位置的相对偏移量。

命令 名称 语法
M / m Moveto M x y
L / l Lineto L x y
H / h 水平线 H x
V / v 垂直线 V y
C / c 立方贝塞尔曲线 C x1 y1 x2 y2 x y
S / s 平滑三次贝塞尔曲线 S x2 y2 x y
Q / q 二次贝塞尔曲线 Q x1 y1 x y
T / t 平滑二次贝塞尔曲线 T x y
A / a 弧形 A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

一个实际示例：圆角标记

M 4 12 L 10 18 L 20 6

执行以下三个命令：移动至(4,12)；沿直线移动至(10,18)；沿直线移动至(20,6)。将stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"添加到路径中，即可获得清晰的勾选标记符号。

arc命令是最难使用的命令

A rx ry x-axis-rotation large-arc-flag sweep-flag x y需要输入七个数字：

  • rx, ry，椭圆半径
  • x-axis-rotation，椭圆的旋转角度（单位：度）
  • large-arc-flag：短弧对应0，长弧对应1
  • sweep-flag：0表示逆时针方向，1表示顺时针方向
  • x, y，终点

逐一翻转这些标志，观察相同的两个端点如何以四种不同方式相连。

小贴士

  • 保持数值较小且为整数。 将坐标对齐到像素网格或半像素；避免使用 17 位小数。
  • 路径独立时优先使用大写命令。 小写（相对）命令在你之后需要平移路径时更方便。
  • 仅在填充时才闭合。 若路径为纯描边，Z 不会产生视觉变化，还能节省一个字节。
  • 通过 SVGO 运行。 尾随零、重复空格及重复命令都能很好地折叠。

常见问题

d中的坐标单位与视口单位一致。为viewBox="0 0 24 24"设计并放置在viewBox="0 0 100 100"上的路径将显示在左上角区域。可调整坐标比例或改变视口大小。

当您计划转换或重复该路径时，相对命令可确保图形的可移植性，您可在任意位置添加新的M前缀，下游所有元素均会随之自动调整。

是的。<polyline points="0,0 10,10 20,0">将变为<path d="M 0 0 L 10 10 L 20 0" />；多边形则会添加最终编号Z。大多数优化工具都会自动执行此操作，因为路径压缩效果更佳。

要实现吸引效果，请使用CSS代码stroke-dasharray + stroke-dashoffset；若需沿路径移动元素，请使用Smil代码<animateMotion>，并将href指向该路径ID。

不。路径命令在浏览器中计算生成，不会发送至任何地方。

相关工具

材质设计颜色选择器

浏览Material Design色板，单击即可将任意色号（50至A700）以HEX、RGB或 HSL 格式复制。

PNG 转 SVG 矢量化工具

在浏览器中把 PNG 栅格图像转换为 SVG 路径。适合徽标、图标和线稿。可控制阈值、颜色数量和平滑度。

ARW 转 JPG 转换器

将索尼 ARW RAW 照片转换为 JPG。无需打开 Lightroom，即可从相机 RAW 文件得到一张便于分享、通用兼容的 JPEG。

报纸制作工具

使用你自己的标题和文章制作报纸风格的头版，然后复制、下载纯文本，或打开浏览器打印对话框。

半色调生成器

将照片转换为可调节的 AM 式半色调，可选单色、取样色和 CMYK 风格模式，并下载 PNG 或矢量网点 SVG。

在线白板

在浏览器中的私人白板上绘制想法，排列形状、便签和本地图片。支持撤销操作，并导出 PNG、JPEG、SVG 或可编辑的 JSON。

此工具还提供其他语言版本