从网站下载 SVG 的最简单方法

通常情况下，在网站中添加图标时，我会使用React-icons。但有时我更倾向于直接从网站复制 SVG 文件。下载 SVG 文件不像下载网站图片那么简单。幸运的是，SVG Export 工具帮我轻松搞定了。

问题

你是否曾经使用“检查元素”功能下载过无法右键点击保存或打开的图片？你可能已经注意到，从网站上下载 SVG 图片并不容易——至少在我尝试为最新项目“克隆”网页时，我遇到了这个问题。

以 Dev.to 网站上每个页面上都可见的 Dev.to 徽标为例。右键单击该徽标并不会提供在新标签页中打开或保存的选项。此外，使用“检查元素”功能只会显示可能非常大的 SVG 标签，您需要自行确定 SVG 在页面 HTML 代码中的起始和结束位置。

解决方案

由Stephen Delaney开发的Enter SVG Export是一款适用于 Google Chrome和Mozilla Firefox 的浏览器扩展程序。

安装扩展程序后，点击扩展程序图标即可启动 SVG Export，提取当前网页上所有可用的 SVG 文件，并确保保留其内联样式。此时会打开一个新标签页，显示所有 SVG 文件。找到您需要的 SVG 文件后，您可以选择将其下载为文件、复制为代码，或将其粘贴到您常用的设计工具（例如 Sketch、Figma 或 Framer）中。

要下载上面提到的 Dev.to 图标，我只需打开Dev.to上的任何页面，点击 SVG 导出图标开始提取，最后在新打开的标签页中找到它。

围捕

在这篇文章中，我演示了如何使用SVG Export轻松地从网页中提取 SVG 。

您还有其他更好的从网站下载 SVG 文件的方法吗？如果有，请在评论区告诉我👇

如果这篇文章对您有帮助，请点个赞！

感谢阅读！