Agent Skills
返回列表
🎨

SVGO SVG优化工具

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3c6cb52e/svgo-svg-optimization-tool。

技能介绍

这个技能解决什么问题

手写或从设计软件导出的 SVG 往往带着一堆对渲染毫无贡献的内容：编辑器写入的 metadata、从未引用的 defs、可以合并的嵌套 <g> 与 <path>，以及精度过高的坐标数据。这些东西会让首屏加载变慢，也会让仓库里的静态资源体积无意义地膨胀。

它是怎么工作的

这个技能把 SVGO（SVG Optimizer）的插件化转换能力暴露给 Agent。核心流程是：

  • 输入：用户提供一个 SVG 文件或一段 SVG 代码
  • 执行：按 SVGO 的可配置插件集做转换，包括移除元数据、简化路径、折叠分组
  • 输出：体积更小、结构更紧凑的 SVG，可直接用于 Web 渲染

关键能力：

  • 移除编辑器残留的 metadata 与注释
  • 简化路径数据，降低坐标精度冗余
  • 合并多余的分组与样式定义
  • 产出适配浏览器渲染的精简 SVG

适用边界与注意点

  • 优化以视觉等效为前提，不会改变图形外观
  • 不同 SVGO 版本的插件默认配置不同，转换结果可能存在差异
  • 依赖精确坐标精度或包含复杂滤镜的场景需要谨慎处理
  • 使用前需确认环境中已具备 Node.js 与 SVGO 运行条件

使用场景

  • 前端工程师在优化网页首屏时，需要移除SVG中的编辑器元数据以减少加载体积
  • 设计师清理设计软件导出的SVG文件，简化路径数据保持视觉不变
  • 开源项目维护者需要折叠SVG中的冗余分组，减小仓库中静态资源的体积
  • 团队在部署静态站点前，需要批量转换SVG文件适配浏览器快速渲染

适合人员

  • 前端工程师，需要优化网页中的SVG资源以提升页面加载速度
  • 设计师，需要清理设计软件导出的SVG文件保持结构精简
  • 开源项目维护者，需要减小仓库中SVG静态资源的存储体积
  • 静态站点开发者，需要批量转换SVG文件适配浏览器渲染