SVG Gobbler

SVG Gobbler是什么？

SVG Gobbler是一款免费开源的浏览器扩展，可由设计师和前端开发人员一键从任何网站中查找、优化、组织、编辑和导出SVG图形。它支持批量抓取、SVGO压缩、批量输出SVG文件、PNG文件、WEBP文件、JPEG 文件、React 组件生成、Data URI，使得SVG更易于管理和更快开发、交付页面设计。

核心功能

• 查找：从任意网站自动识别并提取页面上的 SVG 文件。
• 整理：将抓取到的 SVG 按集合分类，方便管理。
• 优化：内置的SVGO引擎可以压缩文件、删除多余的值、注释和元信息，从而减少体积并改善加载性能。
• 编辑：在扩展内直接查看和修改 SVG 代码。
• 导出：可导出为 SVG、PNG、WEBP、JPEG 等格式，转换成 React 组件或者 Data URI。
• 跨平台浏览器支持：当前只有 Chrome，Firefox 有冻结版本，正在开发新的用于支持其他浏览器。

适用人群

• UI/UX 设计师：快速获取网页上的品牌 Logo、图标素材。
• 前端开发者：提取并优化 SVG 以提升网站性能。
• 平面设计师：收集高质量矢量素材用于设计项目。
• 图标库维护者：批量抓取并整理 SVG 图标资源。
• 学习者：分析优秀网站的 SVG 设计与代码结构。

SVG Gobbler官网及使用教程

官网网址：https://www.svggobbler.com

1. 安装扩展

• 官网下载：打开 SVG Gobbler 官网，点击 “Get Extension / 获取扩展” 按钮会直接跳转到对应浏览器的安装页面。
• Chrome 用户：在 Chrome 网上应用店 搜索 SVG Gobbler 后安装。
• Firefox用户：安装官方提供的冻结版（功能稳定，但暂不更新）

安装好以后，在你的浏览器工具条中有 SVG Gobbler 的图标。

2. 打开目标网页

输入你想要提取的 SVG 所在网站页面（例如品牌官网、图标库、设计案例页），确保页面上的 SVG 已经加载完成（包括滚动加载的SVG）。

3. 启动 SVG Gobbler

点击浏览器工具栏上的 SVG Gobbler 图标 ， 扩展会开始扫描当前页面， 列出所有的 SVG 图形 ， 你会看到一个 网格视图， 每个格子代表一个 SVG 资源。

4. 预览与管理

点击任意 SVG 可查看大图预览，可将 SVG 添加到 集合（Collection） 中，方便批量管理，支持搜索、筛选，快速定位需要的图标。

5. 优化 SVG

选中SVG后，点击Optimize按钮，内置SVGO引擎会自动压缩文件、删除冗余数据、注释和元信息，你也可以手动编辑 SVG 代码，进一步精简。

6. 导出 SVG

支持多种导出方式：SVG 原文件、优化后的 SVG、PNG / WEBP / JPEG 图片格式、React 组件（通过 SVGR 转换）、Data URI（方便直接嵌入 HTML/CSS），可单个导出，也可以批量打包成 ZIP 下载。