从网站保存/抓取svg到本地计算机或转换为图像

Question

有没有办法在Chrome中使用js控制台从网页上抓取html svg，例如？ Svg代码用svg标签包装。是否可以将svg保存到本地机器？或将其转换为图像？是否可以将svg数据（例如图表/图表）导入google docs或excel？

Answer 1

您可以访问浏览器提供的完整dom和js对象（例如xpath处理器）以及外部库。

所以你需要的是对所讨论的svg元素的唯一标识。

开始动态导入jquery并选择页面上的所有svg元素。这假设您已加载正在调查的页面并已打开控制台。应在命令提示符下输入以下语句：

var e = document.createElement('script');
e.setAttribute('type','text/javascript'); 
e.setAttribute('src','http://code.jquery.com/jquery-1.10.2.min.js'); 
(document.getElementsByTagName('head'))[0].appendChild(e);

$('svg');

最后一个命令将为您提供包含svg元素的dom片段。

前面的vanilla javascript命令将引用jquery库的脚本元素添加到当前网页。 jquery大大简化了dom处理，但严格来说并不是必须的（参见fr32c的答案）。

如果您已完成，请选择刚刚生成的控制台输出的上下文菜单中的“在元素面板中显示”条目。您将被重定向到页面dom的折叠层次结构表示内的元素。从所选svg元素的上下文菜单中选择'copy as html'。将剪贴板数据保存为svg文件。

注意

在chrome（29）和opera（12）中，jquery被导入控制台，这将元素查询减少到$('svg')（感谢Ir0nm获取此信息）。

Answer 2

回答你的第一部分问题：

如果您尝试通过控制台找到svg标记，则可以使用以下命令： document.getElementsByTagName('svg')[0] 如果您在页面上嵌入了多个svgs，请更改[0]（或删除它）以捕获正确的部分。 从那里，您可以右键单击以在元素面板中查看该svg元素，并从那里复制为xhtml。 （我在这个页面尝试了这一行：http://www.w3schools.com/html/html5_svg.asp）

Answer 3

在webkit浏览器中，您可以右键单击SVG元素并选择“Inspect Element”。这将打开Web Inspector工具。通常从那里你可以右键单击svg节点和“Copy As HTML”，或者从控制台类型$0.outerHTML

然后将SVG粘贴到本地文档中。然后，您可以使用phantomjs对其进行栅格化。

旧版本的Opera（v12及更早版本）具有右键单击SVG图像的独特功能，以及“复制图像”;这会在你的剪贴板上放一个光栅图像 - （我在当天滥用了这个功能。） - 免责声明：我使用的是mac，在windows上可能会有所不同。

Answer 4

刚看过这个并遇到了svg-crowbar - 一个特定于Chrome的书签。您将它放在书签栏上，然后在包含SVG的页面上单击书签。一个框将通过下载按钮悬停在每个SVG上。

下载的SVG还包含相关的样式信息，以防SVG使用CSS设置样式。

Answer 5

适用于我的解决方案（在Mac上）：

1-将徽标拖到桌面（任何浏览器）

在某些情况下，页面的代码使您可以将.SVG文件从网站直接拖到桌面或所选文件夹中。超级容易！

2-打印为PDF（Safari，Firefox）

这需要更多的工作，现在可能总是可以工作。在“打印”对话框上，转到“ PDF”>“另存为PDF”。预览应该允许您查看徽标是否将被导出（有时不起作用）。 导出后，您可以在所选的矢量编辑应用程序中打开文件。

3-从Chrome的检查器中拖放

这可能在绝望的情况下起作用。检查徽标元素，并将鼠标悬停在其名称上。一个带有缩略图的小窗口将出现，其中带有徽标。点击小徽标，将其拖到文件夹中。

可能还有上述其他解决方案（复制代码并以某种方式进行转换-在第三个网站示例中，我展示了此方法无效，因为代码看起来像this或SVG Crowbar有时（有时不起作用-就像下载框重叠时一样）。