如何从网页中提取svg作为文件

Question

我想将此页面中的 SVG 保存为文件 https://www.lightningdesignsystem.com/icons/ 是否有任何 Chrome 扩展程序或其他方法可以做到这一点？

原文由 Vladyslav K 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

除非我误解了你，否则这可以像检查（ F12 ）页面上的图标以显示其 .svg 源文件路径一样简单，直接进入该路径（ 示例），然后使用 Control + u 查看页面源代码.然后只需保存该代码。

要保存代码，请将其粘贴到文本编辑器中，例如 google docs。然后将文件另存为 .txt 文件。将该文件名称的结尾从“.txt”更改为“.svg”，现在您的文件为 .svg。此方法不涉及获取任何外部扩展或下载任何程序，并且功能相同。

具体参考该 Salesforce 页面，您可能需要注意他们的图标可在此处免费下载： https ://www.lightningdesignsystem.com/icons/！

原文由 mayersdesign 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

当 SVG 作为 <svg ...></svg> 标记直接集成到 HTML 页面中时。

1. 右键单击 SVG 以在开发人员工具中检查它
2. 找到 <svg> 元素的根，然后右键单击 “复制元素”
3. 转到 https://jakearchibald.github.io/svgomg/ 和 “粘贴标记”
4. 下载优化的 SVG 文件并享受

原文由 Em-AK 发布，翻译遵循 CC BY-SA 4.0 许可协议