SVG 编辑器
在线编辑 SVG：添加矩形、圆、椭圆、直线、多边形、文本与路径，调整位置、尺寸、填充、描边、透明度与圆角，支持层级上下移动、撤销重做，实时预览并导出 SVG 源码。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
添加图形
实时预览已选中: rect-1 · rect (60, 60)
图层（从下往上绘制）
选中图形属性
1
SVG 源码
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"> <rect x="0" y="0" width="400" height="300" fill="#FFFFFF" /> <rect x="60" y="60" width="160" height="100" rx="8" fill="#4D6BFE" stroke="#1F2937" stroke-width="2" /> </svg>
这个工具能做什么
- 临时画一张示意图：拖几个矩形、圆和文字，调整位置颜色后直接导出 SVG，不必打开设计软件。
- 给按钮、图标或占位符拼一个简单的矢量图，导出的 SVG 源码可以直接贴进组件里。
- 改现有图形：调整填充、描边、透明度、圆角，用「上移 / 置顶」处理遮挡关系，每一步都能撤销。
- 把示意图的 SVG 源码复制出来喂给别的工具（例如转 PNG 或做动画），源码里所有属性都是标准 SVG。
示例
输入
画布 400 × 300、背景 #FFFFFF，添加一个默认矩形（x=40, y=40, 120 × 80, 填充 #4D6BFE, 描边 #1F2937 宽 2）
输出
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"> <rect x="0" y="0" width="400" height="300" fill="#FFFFFF" /> <rect x="40" y="40" width="120" height="80" fill="#4D6BFE" stroke="#1F2937" stroke-width="2" /> </svg>
背景色不是 none 时，源码里会先画一个铺满画布的矩形；图形按图层顺序从上往下绘制，后添加的图形压在前面的上面。
常见问题
圆和椭圆为什么用包围盒表示？
为了让「X / Y / 宽 / 高」这一组属性对所有图形通用。导出时圆心取包围盒中心、半径取宽高较小值的一半（椭圆则分别取一半），所以调宽高就是在调大小和位置。
图层顺序是怎么决定的？
列表里靠后的图形画在更上层，所以后添加的会盖住先添加的。用「上移 / 下移」相邻交换，「置顶 / 置底」直接移到最前或最后，撤销历史里每一步都能回退。
圆角为什么会自动变小？
矩形的 rx 会被限制在宽高的一半以内，避免圆角超过尺寸导致形状画不出来。输入 100 的圆角放在 120 × 80 的矩形上，导出时实际是 40。
填充或描边填 none 会怎样？
填 none 时不写 fill 属性，即不填充；描边填 none 或描边宽度为 0 时不写 stroke 和 stroke-width。直线的描边被清空时会回退到默认的 #1F2937、宽度 2，保证线仍然可见。
编辑的内容会保存吗？
不会。图形数据只存在当前页面的内存里，刷新就清空，也不会发给服务器。需要保留就点「下载 SVG」把源码存下来。
关键词：svg 编辑器svg editorsvg 在线编辑画矢量图vector editorsvg 源码图形编辑svg 绘制