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

时间：2017-05-05 11:47:32

标签： html svg

enter image description here

enter image description here

我想将SVG保存为此页面中的文件https://www.lightningdesignsystem.com/icons/  是否有Chrome扩展或其他方式来执行此操作？

12 个答案:

答案 0 :(得分：11)

基于网络搜索，我刚刚找到了一个名为 SVG Export 的 Chrome 插件。

答案 1 :(得分：6)

除非我误解你，否则这可能就像检查（ F12 ）页面上的图标一样容易，以显示其.svg源文件路径，直接转到该路径（{{3} }），然后使用 Control + u 查看页面源代码。然后保存该代码。

答案 2 :(得分：5)

三阶段解决方案 复制svg代码段，然后粘贴到新的html页面中。 将html页面另存为logo.html，然后在Chrome中打开该html页面。 文件>打印“另存为pdf”，现在可以在Illustrator中提取矢量元素来打开pdf。

答案 3 :(得分：3)

它们都记录在google chromes开发人员工具中的Elements下。

page 

<svg><path xmlns="http://www.w3.org/2000/svg" d="M18.6 6.8l-4.3-2.2a.8.8 0 0 0-.6 0l-4 2-4.1-2a.7.7 0 0 0-.7.1.7.7 0 0 0-.3.6v10.8a.7.7 0 0 0 .4.6l4.3 2.1a.8.8 0 0 0 .6 0l4-2 4 2a.6.6 0 0 0 .3.1.7.7 0 0 0 .4-.1.7.7 0 0 0 .4-.6V7.4a.7.7 0 0 0-.4-.6zm-1.1 1.4v5.7a.4.4 0 0 1-.6.4c-1.2-.4-.3-2.3-1.1-3.3-.7-.9-1.7 0-2.6-1.4-.9-1.4.3-2.5 1.4-3a.5.5 0 0 1 .4 0l2.2 1.1a.5.5 0 0 1 .3.5zm-6.1 8.3a.5.5 0 0 1-.5-.1 1.6 1.6 0 0 1-.6-1.1c0-.7-1.2-.4-1.2-1.9 0-1.2-1.3-1.5-2.5-1.3a.5.5 0 0 1-.5-.5V7.2a.4.4 0 0 1 .6-.4l2.6 1.3a.1.1 0 0 1 .1 0l.1.1c1.1.6.8 1.1.4 1.9-.5.9-.7 0-1.4-.3s-1.5.3-1.2.8.9 0 1.4.4.5 1.2 1.9.8 1.7-.3 2.2.2a1.5 1.5 0 0 1 0 2.2c-.4.4-.6 1.3-.8 1.9a.5.5 0 0 1-.2.3z"/></svg>

答案 4 :(得分：3)

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

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

答案 5 :(得分：2)

您可以从网站复制HTML svg标记，然后将代码粘贴到新的html文件中，并将扩展名重命名为svg。它为我工作。希望对您有帮助。

答案 6 :(得分：1)

当您所在的页面不允许您通过其自己的 URL 访问 SVG（例如内联 SVG）时，您可以打印该页面并选择 PDF 作为目标输出。保存 PDF 后，您可以在支持矢量的图像编辑器（例如 Adob​​e Illustrator）中打开它，仅选择您想要的矢量图，然后在图像编辑器中将其剪切并粘贴到新文件中。

答案 7 :(得分：0)

我不知道这是否已经正确或不回答。好。从源下载文件不是解决方法。如何从URL抓取* .svg。

我安装“SVG-抓取”附加到谷歌浏览器。这只能部分解决我的问题，因为Google Chrome浏览器没有指向“返回”一页的快捷方式。

我试图从URL下载文件，但一直出现错误，当我看到40个文件时，此页面上没有svg文件。您可以单击它们，以便它们打开，但您无法保存。

WordPress中的文件夹：... / static / img / icons /

我说“回去陪退格”附加到Chrome浏览器，因为我必须单独点击每一个文件，就好像它们是白色的图标（即我目前正在寻找），你不会看到他们。您必须单击文件。然后回来。花了太长时间。现在很好。有一个软下载特定文件夹，但我不希望互联网下载的一半，只是有得到一个白色的。

单击白色图标时，将打开一个新选项卡，但全都是白色。然后点击Chrome中的svg-grabber图标，它将在黑色背景上的新窗口中打开它，并带有一个按钮，用于下载所有svg。

答案 8 :(得分：0)

对我来说，非常简单，只需在chrome服务器中安装以下工具即可：

svg-grabber

进入网页后，请点击网址栏旁边的扩展程序图标，然后会打开一个新标签，向您显示该网页上找到的所有SVG文件。您可以将SVG文件复制到剪贴板，仅下载所需的文件，或单击“下载所有SVG”按钮将其全部添加到压缩文件中并下载。

有关详细信息，请检查here

希望这会有所帮助。

答案 9 :(得分：0)

在chrome上，当在SVG URL中时，您可以执行CTRL + S或CMD + S，它会自动建议您将页面另存为.SVG 试用：https://upload.wikimedia.org/wikipedia/commons/9/90/Benjamin_Franklin-10_Dollar_Bill_Portrait-Vector.svg

答案 10 :(得分：0)

1。。检查打开了svg的页面。

2。。单击以完整分辨率显示图像的链接。

3。。执行CMD / CTRL + S

4。。您完成了！

答案 11 :(得分：0)

我刚刚在另一个网站的Firefox中尝试过。尝试保存网页后，它为我提供了一个“另存为”下拉菜单，其中包含一个名为webpage的选项，仅svg。

相关问题
最新问题