SVG 在线编辑器
源码编辑 + 实时预览，支持路径、填充、描边属性调整，所见即所得。
SVG 源码（可编辑）
实时预览
预览尺寸 200×200 · 0.16 KB
SVG 语法速查
<path d="M0,0 L100,100"/>路径：M 移动 L 直线
<rect x="0" y="0" width="50" height="50"/>矩形
<circle cx="50" cy="50" r="40"/>圆形
fill="#6366F1" stroke="#fff"填充与描边
在线 SVG 编辑器
SVG 编辑器提供源码编辑与实时预览双栏布局，左侧修改 XML 代码，右侧即时渲染。适合微调图标颜色、修改路径、调整文字、学习 SVG 语法。所有编辑内容只存在于浏览器内存，不会保存到服务器。
SVG 核心语法速查
- <path d="...">：路径，最强大的图形元素，M=移动 L=直线 C=曲线 Z=闭合。
- <rect> / <circle> / <ellipse> / <line>：基本几何图形。
- fill / stroke：填充色与描边色，支持 hex、rgb、关键字。
- viewBox="x y w h"：定义 SVG 内部坐标系，决定缩放与拉伸行为。
- <g>：分组元素，子元素继承父组属性。
SVG 编辑 常见问答
可以直接修改 SVG 的路径吗？
可以。左侧是源码编辑器，直接修改 XML 代码，右侧实时渲染预览。填写色、描边、圆角等属性都可手动编辑，所见即所得。
支持导入外部 SVG 吗？
支持。点击"导入 SVG"按钮或直接拖拽 SVG 文件到编辑器，源码会自动加载到编辑区，可继续修改。
我的 SVG 会被保存吗？
不会。本工具是纯前端实现，编辑内容只在你的浏览器内存中，不会保存到服务器。刷新页面会清空，请及时导出。
SVG 编辑器适合做什么？
适合：微调图标的颜色和尺寸、修改路径关键点、调整文字内容、查看 SVG 结构、学习 SVG 语法。复杂的图形创作建议用 Figma、Illustrator 等专业工具。