LOCAL ICON SPRITE BUILDER

SVG Sprite 生成器

批量把独立 SVG 合并为可复用的 <symbol>，自动隔离内部 ID，生成 inline 与外部文件两种 <use> 写法。全程本地处理。

拖入 SVG 图标

最多 80 个，单个最大 2 MB。脚本、外链和事件属性会被移除。

图标0
警告0
Sprite126 B

图标与 Symbol ID

文件名会转成安全 ID；同名图标自动追加编号，内部渐变和 clipPath ID 也会隔离。

还没有图标

选择多个小型 SVG。复杂插画、含脚本或依赖外部图片的文件不适合直接做图标 sprite。

Sprite SVG

添加 SVG 后生成代码。

Inline 使用

添加 SVG 后生成代码。

外部文件使用

添加 SVG 后生成代码。

拖入多个 SVG，或载入示例查看 symbol sprite 结构。

为什么要隔离内部 ID

渐变、遮罩和 clipPath 常使用 id。多个 SVG 合并后若仍叫 gradient0 或 clip0，后面的图标可能引用到前一个定义。工具会按 symbol ID 重写这些引用。

Inline 与外部 Sprite

Inline sprite 可直接继承 CSS 和 currentColor，首屏控制最灵活；外部 sprite 便于缓存，但跨域、旧浏览器和样式继承限制更多，应在目标部署环境验证。

不要丢掉可访问名称

装饰图标可以 aria-hidden；表达按钮含义的独立图标必须由按钮 aria-label、可见文字或 SVG title 提供名称。合并和压缩不能替代可访问性设计。

RELATED TOOLS

接着处理

查看全部工具 →
SVG 压缩 / 优化先清理单个复杂 SVG 的冗余代码。SVG 转图片把图标或 sprite 预览转成 PNG / WebP。Favicon 生成把品牌图标整理成浏览器图标包。HTML 在线预览测试生成的 inline sprite 与 use 代码。

USE & REVIEW

SVG Sprite 生成器常见问题

查看全部工具指南 →

上传的 SVG 会发送到服务器或执行里面的脚本吗？

不会。SVG 文本读取、XML 解析、节点清理、ID 重写、预览和 sprite 生成都在浏览器本地完成。工具会移除 script、foreignObject、事件属性、外部 href 和明显危险 URL；仍应把来源不明的 SVG 当作代码文件审查。

为什么合并 SVG 时必须处理 gradient、clipPath 等内部 ID？

独立文件里都叫 gradient0 或 clip0 没问题，合并到同一个文档后 ID 会进入同一命名空间，后面的图标可能引用到前一个定义。工具按 symbol ID 重写 id、url(#id) 和 #id 引用，避免渐变、遮罩和裁切串到别的图标。

“统一为 currentColor”会怎样改变图标？

它会把直接写死的 fill 和 stroke 颜色改为 currentColor，保留 none 与 url() 渐变引用，使图标可通过外层 CSS color 着色。多色品牌图标、插画和依赖特定描边颜色的素材不应开启，应先在预览中逐个检查。

Inline sprite 和外部 icons.svg 应该怎样选择？

Inline sprite 与页面同文档，样式继承和 currentColor 最直接，适合应用壳与首屏图标；外部 sprite 可以单独缓存，HTML 更短，但跨域、CSP、旧浏览器和样式继承限制更多。必须在实际部署路径测试 href 和缓存。

缺少 viewBox 的 SVG 为什么可能显示比例不对？

viewBox 决定图标内部坐标和缩放。工具会优先使用原 viewBox，缺失时尝试根据数值 width/height 补全，再不行才用 0 0 24 24 并提示警告。此时应回到源文件确认真实画布，而不是只靠默认值上线。

合并后怎样保证图标的可访问性？

纯装饰图标可在外层 svg 使用 aria-hidden=true；独立表达按钮或状态含义的图标，应由可见文字、按钮 aria-label 或合适的 title 提供名称。移除 SVG 内 title/desc 能减少重复，但不会自动替你补齐组件语义。