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雪碧图拆分工具怎么用

  1. 上传已有的 SVG Sprite 文件,或将 SVG 雪碧图拖入页面任意位置。
  2. 如果您已经拿到源码,也可以直接将 sprite 代码粘贴到输入区域。
  3. 根据需要设置是否使用 symbol id 作为拆分后的文件名。
  4. 点击拆分 Sprite,工具会自动解析全部 symbol 节点并生成独立 SVG。
  5. 查看左侧拆分结果列表,选择任意一个 SVG 进行预览和源码复制。
  6. 可以下载当前 SVG,也可以一键批量打包 ZIP 下载全部结果。

适用场景

  • 将历史项目中的 SVG Sprite 重新拆分成独立图标文件。
  • 从第三方 symbol 图标库中提取指定图标进行二次修改。
  • 把组件库或管理后台中的雪碧图重新整理为独立 SVG 资源。
  • 配合 SVG 图标精灵生成工具,实现图标资源的来回整理与重组。
  • 为前端开发、设计交付和图标资产管理提供更细粒度的操作能力。

工具优势

  • 纯前端在线拆分,无需本地脚本或构建工具。
  • 支持源码粘贴、上传和拖拽三种输入方式,使用更灵活。
  • 支持单个下载和批量 ZIP 下载,适合批量图标整理工作。
  • 可以快速提取旧项目中的 symbol 图标,节省手工拆分时间。
  • 适合前端开发者、设计开发协作团队和图标库维护人员长期使用。

常见问题

这个工具能拆分什么格式的 SVG 雪碧图?

当前工具优先支持包含 `symbol` 节点的 SVG Sprite,也就是前端项目中常见的 symbol 精灵图结构。

拆分后的 SVG 可以直接单独使用吗?

可以。工具会为每个 symbol 重新包裹成完整的 SVG 标签,方便单独预览、下载和继续编辑。

为什么要批量打包 ZIP 下载?

当一个 sprite 中包含几十个甚至上百个图标时,ZIP 下载可以显著减少重复操作,适合高频资源整理。

拆分后还能重新合并吗?

可以,您可以再配合本站的 SVG 图标精灵生成工具,将拆分后的独立 SVG 重新合并为新的 SVG Sprite 文件。