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

SVG 合并拼接工具 - 多图标合成为一张雪碧图

SVG 工具 SVG 合并 图标 雪碧图
45
0
0
0
拖拽 SVG 文件到此处，或点击上传
支持同时上传多个 .svg 文件
图标列表 0 个
尚未添加图标，请上传 SVG 文件
排列设置
实时预览 --
请上传 SVG 图标以预览雪碧图
常见问题与知识点

SVG 雪碧图是将多个独立的 SVG 图标排列组合在一张大图中的技术。类似于 CSS Sprite，但输出的是矢量格式。所有图标按照设定的排列方式（网格、水平或垂直）拼接成单个 SVG 文件，方便统一管理、预览和分发图标集。每个图标保留其矢量特性，可无损缩放。

统一管理：将零散的图标整合到一个文件中，便于版本控制和团队协作。
便于预览：一张图即可浏览整个图标库，方便设计师和开发者沟通。
兼容性好：可作为降级方案，将矢量图标集导出为 PNG 用于不支持 SVG 的场景。
减少请求：在某些场景下，可配合 CSS 定位使用单个 SVG 文件替代多个图标请求。
文档生成：快速生成图标库的展示文档。

网格排列：适合图标数量较多时，按指定的列数自动换行，生成紧凑的矩形画布。推荐用于图标库展示和文档。
水平排列：所有图标排成一行，适合图标数量较少（5个以内）且需要横向展示的场景，如底部导航栏图标预览。
垂直排列：所有图标排成一列，适合需要纵向对比图标的场景，或用于侧边栏图标展示。选择哪种排列取决于最终用途和图标数量。

图标尺寸（单元格大小）决定了每个图标在雪碧图中的占用空间。建议设置为图标设计稿的基准尺寸（如 24px、32px、48px）。图标会在单元格内保持原始宽高比并居中显示。
间距用于在图标之间添加空白区域，使雪碧图更清晰易读。通常设置 4-16px 的间距较为合适。如果后续需要从雪碧图中切割单个图标，足够的间距可以避免边缘重叠。

支持标准 .svg 文件。对于包含复杂定义（如渐变、滤镜、遮罩等使用 ID 引用的元素）的 SVG，如果多个图标中存在相同 ID，合并后可能出现渲染冲突。建议上传前确保图标是经过优化简化的（如从 Figma、Sketch 导出的扁平化图标）。工具会自动解析 viewBox 并适配图标到单元格中。

生成的雪碧图是一个完整的 SVG 文件，可以直接用 <img src="sprite.svg"> 标签引用展示整张图。如果需要单独使用其中的某个图标，可以在图形编辑软件中裁剪，或者使用 SVG 的 <view> 元素和片段标识符来定位。也可以将雪碧图导入设计工具（如 Figma、Illustrator）进行后续编辑。

CSS Sprite：使用位图格式（PNG/JPG），通过 background-position 定位显示不同图标，放大后会模糊，需要为不同分辨率准备多个版本。
SVG 雪碧图：使用矢量格式，任意缩放不失真，文件体积通常更小。不过 CSS 定位 SVG 雪碧图的方式与位图略有不同，需要使用 SVG 的 viewBox 或 CSS 的 mask/clip-path 等技术。两种技术可以互补使用。
🔧 相关工具