# SVG Sprite Sheet 生成器

上传最多 30 个 SVG 图标，合并为单个 sprite sheet： 模式用于页面内联 ， 模式用于外部文件片段引用。自动补全 viewBox（由 width/height 推导）、去除重复图标、可选剥离 fill/stroke 以配合 currentColor、始终清理 与 on\* 事件属性，并生成 HTML / React / Vue / CSS 使用代码片段与每个图标的实时预览。</x-turndown>

> 标准页面: https://elysiatools.com/zh/tools/svg-sprite-generator

- **分类:** Media

- **关键词:** svg 雪碧图, sprite, svg symbol, 图标集, use 元素

## 概述

合并规则：\`\` 承载原 \`\` 的内部内容（不含根元素），viewBox 缺失时由 width/height 数值推导为 0 0 W H；\`\` 模式额外输出带 id 的 \`\` 组以支持外部文件引用（\`\`）。ID 由文件名净化而来（非 \[A-Za-z0-9\_-\] 字符替换为 -，数字开头自动加 i- 前缀，再加用户前缀），冲突时追加 -2。去重以 viewBox + 压缩空白后的内容哈希为键。安全：始终删除 \`\` 元素与所有 on\* 事件属性。

## 输入项

- **SVG 文件（最多 30 个）** (file): Select up to 30 .svg icon files
- **Sprite 类型** (select)
- **ID 前缀** (text): e.g. icon-
- **去除 fill/stroke（用于 currentColor）** (checkbox)
- **去重相同图标** (checkbox)

## 适用场景

- 需要把多个独立 SVG 图标收成一份 sprite，用 内联引用时。
- 要把 sprite 作为独立文件，用 引用外部片段时。
- 希望统一图标 ID、去掉重复图形，或让图标跟随 currentColor 着色时。

## 工作原理

- 选择最多 30 个 SVG 文件，并指定 Sprite 类型：Symbol（内联 ）或 View（外部文件片段）。
- 可选填写 ID 前缀；文件名会净化为合法 ID（非法字符变 -，数字开头加 i-），冲突时追加 -2。
- 可开启去重（以 viewBox 与压缩后的内容哈希判定）以及去除 fill/stroke，便于用 currentColor 着色。
- 生成含 或 + 的 sprite 源码、各图标预览，以及 HTML / React / Vue / CSS 使用片段；始终删除 与 on\* 属性。</x-turndown>

## 使用案例

- 把一套 UI 图标合并成内联 sprite，在 HTML、React 或 Vue 中用 引用。
- 生成带自定义前缀的外部 sprite 文件，供多页面通过 sprite.svg#id 引用。
- 去重并规范化 viewBox 后，输出可跟随文字颜色着色的图标集。

## 常见问题

### Symbol 和 View 有什么区别？

Symbol 输出 ，适合把 sprite 内联进页面后用 。View 额外输出带 id 的 ，适合保存为独立 SVG 后用 引用。

### 一次最多能上传几个文件？

最多 30 个 SVG 文件，且仅接受 image/svg+xml。

### 图标 ID 是怎么生成的？

由文件名净化而来：非字母数字、下划线、连字符会替换为 -；若以数字开头则加 i- 前缀，再拼上你填写的 ID 前缀。重复时追加 -2。

### “去除 fill/stroke” 适合什么场景？

勾选后会剥离 fill/stroke，方便在 CSS 里用 currentColor 统一改色。不勾选则保留原稿颜色。

### 缺少 viewBox 的 SVG 怎么处理？

会用 width/height 数值推导为 0 0 W H。工具还会始终移除 元素和所有 on\* 事件属性。</x-turndown>

## 相关工具

- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [PDF页眉页脚片段](https://elysiatools.com/zh/tools/pdf-header-footer-snippets): 将HTML转换为PDF，并插入Logo/标题/日期等页眉页脚片段
- [SVG Favicon 生成器](https://elysiatools.com/zh/tools/svg-favicon-generator): 将 SVG 或位图 Logo 生成完整的 favicon 套件，包括 ICO、多个 PNG 尺寸、Apple Touch Icon 和 site.webmanifest
- [SVG转JPG转换器](https://elysiatools.com/zh/tools/svg-to-jpg): 将SVG矢量图形转换为JPG光栅格式，支持自定义分辨率、质量和背景选项
- [SVG转PDF](https://elysiatools.com/zh/tools/svg-to-pdf): 将 SVG 矢量图形转换为 PDF 文档，用于打印和共享
- [SVG转PNG转换器](https://elysiatools.com/zh/tools/svg-to-png): 将SVG矢量图形转换为PNG光栅格式，支持自定义分辨率、质量和透明度选项
- [SVG转WebP转换器](https://elysiatools.com/zh/tools/svg-to-webp): 将SVG矢量图形转换为WebP光栅格式，支持现代压缩和透明度
- [无障碍合规检测器](https://elysiatools.com/zh/tools/accessibility-checker): 检测 HTML、网页或设计稿图片中的常见 WCAG 2.1 问题，并给出可直接修复的建议

## 示例

- [XML 查看器样本](https://elysiatools.com/zh/samples/xml-viewer-samples): 用于浏览器内 XML 查看器的样本文件
- [XML 示例](https://elysiatools.com/zh/samples/xml-samples): XML（可扩展标记语言）格式示例，从简单到复杂结构
- [SVG示例](https://elysiatools.com/zh/samples/svg-samples): 可缩放矢量图形（SVG）示例，展示各种SVG功能和技术
- [SVG 查看器样本](https://elysiatools.com/zh/samples/svg-viewer-samples): 用于浏览器内 SVG 查看器的样本矢量图

## 相关内容

- [图片格式转换与动画导出工具](https://elysiatools.com/zh/hubs/image-convert): 在一个专题里比较 JPG、PNG、GIF、AVIF、WebP、TIFF、ICO、base64 以及动画导出相关的图片格式转换工具。
- [XML 转换、映射与 XPath 工具](https://elysiatools.com/zh/hubs/xml-convert): 围绕XML 转换、映射、合并与 XPath 提取整理的一组工具。
- [HTML 提取、清洗与 Markdown/PDF 导出工具](https://elysiatools.com/zh/hubs/html-convert): 在一个专题里比较 HTML 清洗、属性提取、图片地址提取、HTML 转 Markdown 和 HTML 转 PDF 工具，适合网页内容转换流程。
- [图片整理、修饰与批处理准备工具](https://elysiatools.com/zh/hubs/image-utility): 把图片清理、裁边、补边、加框、批量缩放压缩、水印和视觉修饰工具集中到一个专题中，适合素材整理流程。