配色
无需注册登录 | 100% 浏览器本地处理
交互式 SVG 矢量编辑器
零延迟的浏览器矢量编辑器：调整颜色、描边宽度、viewBox、变换、留白和背景，并即时导出 SVG/PNG。
100%
添加形状:
Direct canvas editing: select a part, then drag to move. Use the picker’s Replace selected or Add layer modes to build a composite SVG.
尺寸实时预览:
16px
24px
32px
深色界面
svg-editor
多图标雪碧图托盘
固定多个已调整的图标并合成一张符号图。
还没有固定图标。固定图标后即可合成一张图。
AI 提示词与矢量优化
生成 AI 提示词或在画布上优化图标
选择预设，把提示词复制到你的 AI 工具，或在画布上优化图标。
技术文档与工程指南
交互式 SVG 矢量编辑器
零延迟的浏览器矢量编辑器：调整颜色、描边宽度、viewBox、变换、留白和背景，并即时导出 SVG/PNG。
支持的输入来源
上传的 .svg 文件（最大 2 MB）、粘贴的 SVG XML 或内置目录实时搜索
导出与编译目标
安全净化的 SVG 2.0、高清 PNG/WebP、JSX/TSX、Vue、Svelte 与 CSS 遮罩
工程效果与性能
实时无损 DOM 路径编辑，支持 50 步撤销/重做与本地 XSS 安全过滤
如何使用交互式 SVG 矢量编辑器
-
1
粘贴 SVG 代码或上传文件，将其加载到编辑器画布。
-
2
选中任意图层或节点，通过数值输入或拖拽修改填充、描边、圆角和坐标。
-
3
开启网格与对齐吸附，实现像素级精准排版。
-
4
下载编辑后的 SVG 文件或复制净化后的源码。
输入示例
<circle cx="24" cy="24" r="12" fill="#f59e0b"/>
输出示例
<circle cx="24" cy="24" r="16" fill="#f59e0b" stroke="#24324a"/>
限制事项
- 本编辑器不支持编辑沿路径排列的文字（textPath）。
- 单文件上传上限为 2 MiB。
- Figma 导出内容须为 SVG 格式（PDF 导出会在解析阶段被拒绝）。
您在此工作台打开或粘贴的文件都在浏览器内本地处理，不会上传到任何服务器。