Elysia Tools
导航
Media
上传最多 30 个 SVG 图标，合并为单个 sprite sheet：<symbol> 模式用于页面内联 <use>，<view> 模式用于外部文件片段引用。自动补全 viewBox（由 width/height 推导）、去除重复图标、可选剥离 fill/stroke 以配合 currentColor、始终清理 <script> 与 on* 事件属性，并生成 HTML / React / Vue / CSS 使用代码片段与每个图标的实时预览。
详情
合并规则：<symbol id="…" viewBox="…"> 承载原 <svg> 的内部内容（不含根元素），viewBox 缺失时由 width/height 数值推导为 0 0 W H；<view> 模式额外输出带 id 的 <g> 组以支持外部文件引用（<use href="sprite.svg#id">）。ID 由文件名净化而来（非 [A-Za-z0-9_-] 字符替换为 -，数字开头自动加 i- 前缀，再加用户前缀），冲突时追加 -2。去重以 viewBox + 压缩空白后的内容哈希为键。安全：始终删除 <script> 元素与所有 on* 事件属性。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
上传最多 30 个 SVG 图标，合并为单个 sprite sheet：Symbol 模式适合页面内联 <use>，View 模式适合外部文件片段引用。自动由 width/height 补全 viewBox、按内容去重、可选剥离 fill/stroke 以配合 currentColor，并始终清理 script 与事件属性，同时给出 HTML / React / Vue / CSS 片段与图标预览。
背景
项目里有若干基础形状、描边填充和变换类 SVG，希望合成一份内联 sprite，并拿到可用的引用代码。
问题
文件名以数字开头，需要合法 ID，并同时生成 HTML / React / Vue 片段。
如何使用
上传三个 SVG，Sprite 类型选 Symbol，ID 前缀留空，去重开启，不剥离颜色。
spriteType: symbol
idPrefix: （空）
stripColor: false
dedupe: true结果
得到 symbol 模式 sprite，ID 为 i-01-basic-shapes、i-02-stroke-and-fill、i-03-transforms，并附带源码、预览与使用片段。
背景
需要把图标集做成独立 SVG 文件，给其他页面按片段引用，且 ID 统一带 icon- 前缀。
问题
外部引用需要 <view> 与对应 <g>，同时避免 ID 冲突。
如何使用
上传图标集相关 SVG，Sprite 类型选 View，ID 前缀填 icon-，去重开启。
spriteType: view
idPrefix: icon-
stripColor: false
dedupe: true结果
输出含 <view id viewBox> 与 <g id> 的 sprite，ID 形如 icon-icon-set、icon-i-11-responsive，可按 sprite.svg#id 外部引用。
Symbol 输出 <symbol id viewBox>，适合把 sprite 内联进页面后用 <use href="#id">。View 额外输出带 id 的 <g>，适合保存为独立 SVG 后用 <use href="sprite.svg#id"> 引用。
最多 30 个 SVG 文件，且仅接受 image/svg+xml。
由文件名净化而来：非字母数字、下划线、连字符会替换为 -；若以数字开头则加 i- 前缀，再拼上你填写的 ID 前缀。重复时追加 -2。
勾选后会剥离 fill/stroke，方便在 CSS 里用 currentColor 统一改色。不勾选则保留原稿颜色。
会用 width/height 数值推导为 0 0 W H。工具还会始终移除 <script> 元素和所有 on* 事件属性。