SVG Export

在日常的设计和开发工作中，我们经常需要在浏览网页时收集一些优质的矢量图标或插图素材。传统的做法是查看网页源代码、寻找SVG文件链接、或者截图后重新描摹，这些方式都比较耗时费力。SVG Export这款浏览器插件正是为了解决这个痛点而生。

安装SVG Export插件后，用户只需要在浏览网页时点击插件图标，工具就会自动扫描当前页面上所有的SVG图片资源，并以列表形式展示出来。用户可以逐个预览，也可以一键批量选择，直接导出为SVG、PNG或JPEG格式。对于那些需要将矢量图快速转换为位图用于文档或演示的场景来说，这个功能显得特别实用。

除了基础的导出功能之外，SVG Export还内置了一些贴心的小功能。比如在导出前可以自定义图片的宽度和高度，不需要额外打开修图软件就能调整尺寸。还可以直接复制SVG文件的代码内容，方便粘贴到Sketch、Figma、Framer等设计工具中继续编辑。对于需要批量处理多个图标的情况，批量导出功能可以同时处理多个文件，大幅节省操作时间。

对于前端开发者而言，这个工具也能帮上不少忙。有时候从设计稿导出的SVG文件体积较大，包含了大量冗余代码，而网页上的实际应用版本往往是经过优化压缩的。通过SVG Export获取到的SVG文件更加精简干净，更适合直接用于项目开发。

官网入口地址

https://svgexport.io/

下载地址

该工具以浏览器插件形式提供，用户可以在Chrome Web Store、Firefox Add-ons等浏览器扩展商店中搜索“SVG Export”进行安装。同时也提供npm命令行工具版本，可以通过npm install -g svgexport命令进行安装。

功能介绍

网页SVG自动识别：打开任意包含SVG图片的网页，点击插件图标即可自动扫描并列出页面中的所有SVG资源，无需手动查看源代码或使用开发者工具逐个查找。

多格式导出支持：支持将SVG导出为SVG矢量格式、PNG和JPEG位图格式。中PNG格式支持透明背景，适合用于网页设计；JPEG格式适合用于文档或演示材料。

批量导出功能：支持同时选择多个SVG文件进行批量导出，一次性下载所有选中的文件，不用逐个操作，在处理图标库或批量素材时特别实用。

图片尺寸调整：在导出前可以自定义输出图片的宽度和高度，满足不同场景下的尺寸需求。比如将小图标放大用于展示，或者将大图缩小用于网页预览。

文件重命名：支持在导出前对文件进行重命名操作，方便统一命名规范和管理素材。

复制SVG代码：可以直接复制SVG文件的代码内容到剪贴板，粘贴后即可在他设计工具或代码编辑器中使用。

跨平台支持：可以在Windows、macOS、Linux等操作系统上运行，兼容主流浏览器环境。

应用场景

UI设计师收集素材：在设计网站上看到喜欢的图标或插图时，可以使用SVG Export快速保存源文件，导入到Figma或Sketch中继续编辑使用。

前端开发获取资源：开发网页时需要使用某些SVG图标，但又没有源文件的情况下，可以直接从网页上获取已经优化好的版本。

产品经理制作原型：制作产品原型时需要用到一些示意图标，通过SVG Export收集后调整尺寸，快速应用到原型稿中。

内容创作者配图：撰写技术文章或教程时需要配图说明，可以导出高质量的SVG图片用于文档。

定价信息

SVG Export提供免费的基础版本，支持核心的SVG识别和导出功能。高级功能如批量导出、自定义尺寸等需要通过付费解锁。具体价格以官网公布为准。npm命令行版本是开源免费的，适合开发者使用。