首页SVG路径编辑器

SVG路径编辑器

在线SVG路径编辑器,支持Path命令可视化编辑、形状模板套用、样式调节与代码导出下载。

路径编辑器

快捷工具

形状工具

路径参数

预览

缩放: 100%

生成的代码

<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M 50 50 L 150 50 L 200 150 L 100 200 L 50 150 Z"
    fill="#f59e0b"
    stroke="#b45309"
    stroke-width="2"
    stroke-linecap="round"
    opacity="1"
  />
</svg>


说明文档

关于 SVG Path 编辑器

该工具用于编辑与可视化 SVG path 路径数据。你可以输入 d 属性,实时预览路径形状,调整描边/填充样式,并导出完整 SVG 代码。

核心功能

  • 路径数据编辑:支持直接修改 Path 字符串并实时校验有效性。
  • 预设与形状模板:内置圆形、星形、矩形、箭头等快速模板。
  • 样式控制:支持填充色、描边色、描边宽度、透明度和端点样式。
  • 缩放预览:可放大、缩小、重置视图,便于检查细节。
  • 代码生成:自动生成完整 SVG 代码,支持复制与下载。

使用说明

  1. 输入或粘贴 Path 数据,确认校验状态为可用。
  2. 使用快捷预设或形状模板快速替换路径。
  3. 调整样式参数,观察预览区变化。
  4. 复制生成代码或下载 SVG 文件。

适用场景

  • 图标路径微调与清洗。
  • 设计稿导出的 Path 二次编辑。
  • 前端项目中单路径动画前的结构准备。

常见问题

路径被判定为无效怎么办?

请检查命令字母、坐标数量和空格分隔是否完整。常见问题是命令参数缺失或逗号格式不规范。

为什么预览图形位置不在中心?

路径坐标本身决定位置。可在原始路径中平移坐标,或在后续 SVG 中通过 transform 调整。