工作台
无需注册登录 | 100% 浏览器本地处理
Vector Studio 与 3D 图标工作区
在浏览器中直接编辑 SVG：支持路径编辑、图层、对齐与多格式导出（PNG、WebP、React/Vue 组件），全部本地处理。
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
深色界面
studio
多图标雪碧图托盘
固定多个已调整的图标并合成一张符号图。
还没有固定图标。固定图标后即可合成一张图。
AI 提示词与矢量优化
生成 AI 提示词或在画布上优化图标
选择预设，把提示词复制到你的 AI 工具，或在画布上优化图标。
技术文档与工程指南
Vector Studio 与 3D 图标工作区
在浏览器中直接编辑 SVG：支持路径编辑、图层、对齐与多格式导出（PNG、WebP、React/Vue 组件），全部本地处理。
支持的输入来源
W3C SVG 1.1/2.0 文件、原始 XML 代码或内置图标库图标
导出与编译目标
优化后的 SVG、PNG（64–2048 px）、WebP、React TSX、Vue 3、Svelte、CSS Data URI、SVG 雪碧图
工程效果与性能
在浏览器内一站式完成矢量节点编辑、3D 光效、体积压缩与多框架组件导出
如何使用Vector Studio 与 3D 图标工作区
-
1
从“工具”菜单打开 Studio 工作区，新建插画或导入现有 SVG 文件。
-
2
在检查器面板中直接调整图层、填充色、渐变色标与描边宽度。
-
3
为图标徽章应用 3D 光照预设或开启动效预设。
-
4
导出精简 SVG、高清 PNG/WebP，或直接复制前端框架组件代码。
输入示例
从本地导入的 shield.svg（单路径图层）
输出示例
调优渐变后的 SVG 以及支持透传 className 的 JSX 组件
限制事项
- 3D 光照预设在单主光源的凸面图形上视觉效果最佳。
- 每次会话的撤销历史最多保留 50 步。
- 单个导入文件大小上限为 2 MiB。
您在此工作台打开或粘贴的文件都在浏览器内本地处理，不会上传到任何服务器。