无需登录 数据私有 本地保存

SVG 精灵图合并工具 - 多个 SVG 图标合成一张

图标 开发工具 SVG 合并 图标 精灵图
13
0
0
0

SVG 精灵图合并工具

上传多个SVG图标，一键合成SVG Sprite精灵图，支持<use>引用

拖拽SVG文件到此处，或点击选择
支持一次选择多个 .svg 文件
已添加图标 0

还没有添加SVG图标

上传SVG文件或点击"加载示例"开始

常见问题与知识点
什么是SVG精灵图（SVG Sprite）？
SVG精灵图是将多个SVG图标合并到一个SVG文件中的技术。每个图标被封装在<symbol>元素中，通过唯一ID标识。使用时只需通过<use href="#id">即可引用任意图标。相比传统CSS Sprite（位图拼接），SVG Sprite支持无损缩放、独立颜色控制，且不需要计算背景位置。
SVG Sprite 相比图标字体有什么优势？
1. 多色支持：图标字体只能单色，SVG Sprite天然支持多色图标。
2. 渲染清晰：SVG是矢量图形，在任何分辨率下都清晰锐利，不会被浏览器的字体抗锯齿影响。
3. 语义化更好：SVG是图像元素，对屏幕阅读器更友好。
4. 局部引用：可以只引用sprite中的某个图标，无需加载整个字体文件。
5. 样式灵活：支持CSS动画、渐变、滤镜等高级效果。
如何使用生成的精灵图？（外链 vs 内联）
方式一：外链引用（推荐用于生产环境）
<svg><use href="sprite.svg#icon-home"></use></svg>
注意：部分老旧浏览器对外部sprite文件的<use>引用支持有限。建议配合polyfill或使用内联方式。

方式二：内联嵌入（兼容性最佳）
将整个sprite SVG代码直接嵌入HTML的<body>开头（设置为display:none），然后通过<use href="#icon-home">引用。

方式三：JavaScript动态注入
通过AJAX加载sprite文件，使用insertAdjacentHTML注入到页面中，兼顾缓存和兼容性。
如何通过CSS修改SVG精灵图标的颜色？
如果图标使用了currentColor（本工具默认开启此选项），可以通过CSS的color属性控制：
svg { color: #ff0000; } 或 svg:hover { color: #0066ff; }

对于多色图标，如果需要分别控制不同部分的颜色，可以在symbol中使用CSS变量：
fill: var(--icon-color, currentColor);
然后在CSS中设置：svg { --icon-color: #ff6600; }
为什么有时外部sprite.svg引用不显示？
常见原因：
1. 跨域限制：如果sprite文件与页面不在同一域名下，浏览器会阻止引用。解决方案：将sprite放在同域名下，或配置CORS。
2. 文件路径错误：确保href中的路径正确。
3. ID不匹配：确认#后面的ID与sprite中symbol的ID完全一致。
4. 浏览器缓存：更新sprite后清除缓存或添加版本号sprite.svg?v=2。
推荐：生产环境中优先使用内联方式，可避免上述大部分问题。
SVG精灵图对SEO有帮助吗？
是的。使用SVG Sprite可以减少HTTP请求数量（所有图标只需一次请求），提升页面加载速度——这是重要的SEO排名因素。同时，内联的SVG图标可以被搜索引擎索引（如果添加了<title>和<desc>等语义元素），有助于可访问性评分。相比图标字体，SVG在Core Web Vitals（尤其是LCP和CLS）方面表现更好。
能否在生成的精灵图中保留原始颜色？
可以。关闭"转换为currentColor"开关即可保留每个图标的原始填充颜色。这对于多色品牌图标非常有用。但请注意，保留原始颜色意味着无法通过CSS的color属性统一修改颜色。建议：单色UI图标使用currentColor以便主题化；品牌logo等多色图标保留原始颜色。
🔧 相关工具