SVG 雪碧图拆分
将 SVG sprite 或 symbol 精灵图拆分为独立的 SVG 图标文件或代码块。
工具资源加载中...
SVG雪碧图拆分工具介绍
SVG雪碧图拆分工具用于将已有的 SVG Sprite、symbol 精灵图或雪碧图快速拆分成多个独立的 SVG 文件。这个工具适合旧项目图标整理、第三方图标库资源拆解、组件库图标回收和前端图标资源二次管理等使用场景。
您可以上传已有的 SVG Sprite 文件,也可以直接粘贴 sprite 源码,工具会自动解析其中的 symbol 节点,并为每个 symbol 输出完整 SVG 代码、预览结果和下载文件,方便继续编辑或重新整理。
SVG雪碧图拆分工具功能特点
- 支持上传 SVG Sprite 文件和整页拖拽上传。
- 支持直接粘贴 sprite 代码,自动识别 symbol 节点。
- 支持将每个 symbol 拆分为完整 SVG 文件代码。
- 支持使用 symbol id 作为拆分后的文件名。
- 支持下载当前 SVG 文件,也支持批量打包 ZIP 下载。
- 支持预览拆分结果和生成对应的 use 引用代码。
SVG雪碧图拆分工具怎么用
- 上传已有的 SVG Sprite 文件,或将 SVG 雪碧图拖入页面任意位置。
- 如果您已经拿到源码,也可以直接将 sprite 代码粘贴到输入区域。
- 根据需要设置是否使用 symbol id 作为拆分后的文件名。
- 点击拆分 Sprite,工具会自动解析全部 symbol 节点并生成独立 SVG。
- 查看左侧拆分结果列表,选择任意一个 SVG 进行预览和源码复制。
- 可以下载当前 SVG,也可以一键批量打包 ZIP 下载全部结果。
适用场景
- 将历史项目中的 SVG Sprite 重新拆分成独立图标文件。
- 从第三方 symbol 图标库中提取指定图标进行二次修改。
- 把组件库或管理后台中的雪碧图重新整理为独立 SVG 资源。
- 配合 SVG 图标精灵生成工具,实现图标资源的来回整理与重组。
- 为前端开发、设计交付和图标资产管理提供更细粒度的操作能力。
工具优势
- 纯前端在线拆分,无需本地脚本或构建工具。
- 支持源码粘贴、上传和拖拽三种输入方式,使用更灵活。
- 支持单个下载和批量 ZIP 下载,适合批量图标整理工作。
- 可以快速提取旧项目中的 symbol 图标,节省手工拆分时间。
- 适合前端开发者、设计开发协作团队和图标库维护人员长期使用。
常见问题
这个工具能拆分什么格式的 SVG 雪碧图?
当前工具优先支持包含 `symbol` 节点的 SVG Sprite,也就是前端项目中常见的 symbol 精灵图结构。
拆分后的 SVG 可以直接单独使用吗?
可以。工具会为每个 symbol 重新包裹成完整的 SVG 标签,方便单独预览、下载和继续编辑。
为什么要批量打包 ZIP 下载?
当一个 sprite 中包含几十个甚至上百个图标时,ZIP 下载可以显著减少重复操作,适合高频资源整理。
拆分后还能重新合并吗?
可以,您可以再配合本站的 SVG 图标精灵生成工具,将拆分后的独立 SVG 重新合并为新的 SVG Sprite 文件。