SVG Sprite
SVG 精灵图生成器。
把多个 SVG 图标合并成一个 symbol 精灵图，一次加载，全站复用。
纯浏览器处理 · 文件不上传
拖入、粘贴或选择多个 SVG 文件
全部在你的浏览器里合并，不上传服务器。
三步合并 SVG 精灵图
拖进来就合并，不用注册。
1
拖入多个 SVG
一次拖入或粘贴多枚 SVG 文件，浏览器里逐个解析成 symbol，全程不上传。
2
预览与命名
每枚图标按文件名自动生成 id，重名自动加序号，缩略图一眼确认。
3
下载或复制
下载 sprite.svg 放进项目，或者复制 <use> 片段，直接在页面里引用。
为什么用 SVG Sprite
一次请求，全站图标，缓存友好。
一次加载全部
几十枚图标合成一个文件，浏览器只发一次请求，二次访问走缓存。
<use> 直接引用
页面里写一行 <use href="#图标名">，改颜色用 CSS fill，不用重复贴代码。
不上传，更安心
解析、合并、下载全部在你的浏览器里完成，服务器不经手任何文件。
重名自动处理
两枚同名的图标会自动加序号，不会互相覆盖，拼完即用。
常见问题
关于 SVG Sprite 的一切。
什么是 SVG Sprite？▾
把多个 SVG 图标各自包成 <symbol>，合并到一个 SVG 文件里。页面用 <use href="#图标名"> 引用，浏览器只加载这一个文件。
我的 SVG 会被上传吗？▾
不会。解析、合并、下载全部在你的浏览器里完成，这个工具没有上传环节。
图标 id 是怎么定的？▾
取文件名（去掉 .svg、转小写连字符），同名自动加 -2、-3 序号。合并前可以在列表里看到每个 id。
sprite 里能用 CSS 改颜色吗？▾
可以。前提是原 SVG 用 fill="currentColor" 而不是写死的色值，引用处用 CSS 的 color 控制。
最多能合并多少枚？▾
单次最多 40 枚。数量大建议按业务拆成多个 sprite，避免单文件过大。