SVG 精灵图生成器
把图标集整合为单一精灵图，提升加载与复用效率。适合设计系统。在线打开 SVG 文件后即可开始处理。
拖放 SVG 文件
或点击选择，或粘贴 SVG 代码
仅支持 .svg 文件
使用 Ctrl+V / Cmd+V 粘贴
拖放多个 SVG 文件
或点击选择多个文件
支持多个 .svg 文件
为什么使用我们的 SVG 精灵图生成器？
合并图标
将多文件合并为一个 sprite。
自动 ID 命名
基于文件名生成并避免重复。
<symbol> 输出
可直接配合 <use> 使用。
保留 viewBox
缩放准确，不易裁切。
减少请求
一个 sprite 替代多个文件。
本地处理
无需上传，隐私安全。
如何创建 SVG 精灵图
1
上传 SVG
拖拽图标或粘贴代码。在线打开 SVG 文件后即可开始处理。
2
检查 ID
确认自动命名的 symbol ID。
3
复制精灵图
导出 sprite 并在项目中复用。
SVG 精灵图生成器常见问题
在线什么是 SVG 精灵图（sprite）？
一个包含多个 <symbol> 的 SVG 文件。
SVG 精灵图的 ID 如何生成？
基于文件名规范化生成。
精灵图会保留 viewBox 吗？
会，确保缩放正确。
能在 React 或 Vue 中用吗？
可以，配合 <use> 引用即可。
会上传文件吗？
不会，全部本地生成。
需要先优化吗？
建议先优化以减小体积。
后续如何更新？
用新图标重新生成并替换。
SVG 精灵图生成器 是否免费且无需下载？
是的。SVG 精灵图生成器 在浏览器中免费使用，无需下载或安装。
使用 SVG 精灵图生成器 需要注册账号吗？
不需要。SVG 精灵图生成器 打开即用，无需注册，文件本地处理。
相关 SVG 工具
可配合以下工具进行清理与主题化。