生成的 SVG 体积变大
PNG、JPG、WebP 会以内嵌 Data URL 写入 SVG，文本体积通常比原文件更大。
只对小图标和 UI 小素材使用；大图先压缩，或保留为独立资源。
SVG 精灵图生成器
把多个图标或小图片合成一个 SVG spritesheet，并自动生成可复制的 CSS background-position 代码和 JSON manifest；支持 SVG、PNG、JPG、WebP、GIF，本地处理不上传。
SVG 精灵图生成器工具介绍
SVG 精灵图生成器可将多个图标或小图片合成一张 SVG spritesheet，并自动生成 CSS background-position 与 JSON manifest。适合前端图标集合、旧项目 CSS sprite 维护和小游戏 UI 素材整理，素材只在浏览器本地读取。
如何使用SVG 精灵图生成器
- 1拖入或选择 SVG、PNG、JPG、WebP、GIF 图标文件，页面会读取文件尺寸并加入 Sprite 列表。
- 2选择网格、横向或纵向布局；网格模式下可设置列数，所有布局都可调整 padding。
- 3按项目命名规范修改 sprite ID 和 CSS class 前缀，必要时上移、下移或删除单个素材。
- 4在右侧预览生成的 spritesheet，确认图片位置、透明背景和画布尺寸。
常见异常与处理
CSS 引不到图标
生成的 CSS 默认引用 kitverse-spritesheet.svg，如果文件名或路径不同会失效。
把 SVG 放在 CSS 同目录，或修改 background-image 的路径。
图标位置不符合预期
不同尺寸图标在网格模式下会居中排版，坐标会受 padding 和列数影响。
调整布局模式或 padding，并以预览和 JSON manifest 为准。
Spritesheet 输出格式对比
同一批素材会生成三种输出。通常 SVG 用作资源文件，CSS 用于页面引用，JSON 用于构建流程或自定义渲染。
| 输出 | 用途 | 优势 | 注意事项 |
|---|---|---|---|
| SVG spritesheet | 统一保存所有小图标 | 可直接下载和缓存，支持透明背景 | 位图会以内嵌 Data URL 形式写入 |
| CSS | 在网页中通过 class 引用图标 | 自动生成 width、height 和 background-position | 默认引用 kitverse-spritesheet.svg 文件名 |
| JSON manifest | 构建脚本、游戏 UI 或自定义组件读取坐标 | 包含 x/y/width/height 和 className | 需要开发者按自己的渲染方式接入 |
| SVG symbol sprite | 只适合纯 SVG 图标的 use 引用 | 语义更接近图标系统 | 第一版先输出 image spritesheet，后续可增强 |
SVG 精灵图生成器示例
CSS sprite 图标示例
输入文件
search.svg, bolt.svg, check.png
CSS 输出
.sprite-search { width: 48px; height: 48px; background-position: -6px -6px; }下载 SVG 后与 CSS 放在同一目录，页面即可通过 class 引用单个图标。
JSON manifest 坐标示例
Sprite ID
check
Manifest
{ "check": { "x": 114, "y": 6, "width": 48, "height": 48 } }适合在构建脚本、Canvas 或自定义 UI 渲染中读取坐标。
适用场景
前端图标管理
把一组小图标合并成单个 SVG 文件，并通过 CSS class 引用。
旧项目 CSS sprite 维护
为仍使用 background-position 的页面快速生成新的坐标表。
游戏或 UI 小素材整理
把按钮、徽章、状态图标整理成 manifest，方便自定义渲染。
常见问题
SVG spritesheet 会上传图片吗？›
不会。图片读取、排版、预览和下载都在浏览器本地完成，KitVerse 不接收你的文件。
这个工具支持哪些图片格式？›
支持浏览器可读取的常见图片格式，包括 SVG、PNG、JPG、JPEG、WebP 和 GIF。
SVG symbol sprite 和这个工具有什么区别？›
symbol sprite 主要用于纯 SVG 图标的 use 引用；当前工具生成的是 image spritesheet，可混合 SVG 和位图，并输出 CSS 坐标。
为什么位图嵌入 SVG 后变大？›
位图会以 Data URL 文本形式嵌入，通常比原始二进制文件更长。它适合小图标，不适合大照片。
可以导出 PNG spritesheet 吗？›
第一版先导出 SVG、CSS 和 JSON。PNG spritesheet、透明裁剪和 2x 支持可以作为后续增强。
支持 PNG、JPG 和 WebP 吗？›
支持。位图会以 Data URL 方式嵌入 SVG spritesheet，适合小图标和 UI 小素材。
CSS 怎么使用生成的 spritesheet？›
下载 SVG 后与 CSS 放在同一目录，使用生成的 class 即可引用对应 background-position。
SVG 精灵图生成器免费吗？›
免费使用，当前核心功能不需要登录。