How to extract svg as file from web page

小开

最佳答案

Unless I am misunderstanding you, this could be as easy as inspecting (F12) the icon on the page to reveal its .svg source file path, going to that path directly (例子), and then viewing the page source code with Control+u. Then just save that code.

要保存代码，请将其粘贴到一个文本编辑器，如谷歌文档。然后将文件保存为。Txt 文件。将该文件名的结尾从。发送到。Svg”，现在您的文件是一个。Svg.此方法不涉及获取任何外部扩展或下载任何程序，其功能相同。

Referencing that Salesforce page specifically, you might want to note that their icons are freely available to download here: https://www.lightningdesignsystem.com/icons/ !

小开

你可以像@mayerdesign 所说的那样，从他们的网站上下载单独的文件，或者你可以点击左边的下载链接，然后下载整个文件包。

全副武装

小开

They are all logged under Elements in google chromes developer tools.

呼叫

<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>

小开

这里有三个步骤:

复制 SVG 代码片段，并将其粘贴到新的 HTML 页面中。
将 HTML 页面保存为(例如)“ logo.HTML”，然后在 Chrome 中打开该 HTML 页面，点击 > 文件 > 打印 > “另存为 pdf”
这个 PDF 现在可以在 Illustrator 中打开-提取矢量元素。

小开

我不知道答案是否正确。好吧。从源文件下载文件不是解决方案。如何抓取 * 。来自 URL 的 svg。

I installed 'svg-grabber' add-on to Google Chrome. That only partially resolve my problem, as Google Chrome does not have the shortcut to 'Back' one page.

我试图从 URL 下载文件，但我不断得到一个错误，这个页面上没有 svg 文件时，我可以看到40个。你可以点击它们，这样它们就会打开，但是你不能保存它们。

WordPress 中的文件夹: .../static/img/icon/

我在 Chrome 中添加了“ Go Back With Backspace”插件，因为我必须单独点击每个文件，就好像它们是白色的图标(我目前正在寻找) ，你不会看到它们。你必须点击文件。然后回来。花的时间太长了。现在就可以。有一个软件下载特定的文件夹，但我不想下载一半的互联网，只是得到了一个白色。

When you click on a white icon, a new tab opens, but it is all white. Then you click on svg-grabber icon in Chrome and it will open it in a new window on a black background with a button download all svg.

小开

对我来说，它非常容易只需安装以下工具在铬服务器:

Svg-grabber

Once you're on a web page, click the extension's icon next to the URL bar and a new tab will open showing you all the SVG files it found on the page. You can copy an SVG file to your clipboard, download only the few you need, or click the 'Download all SVGs' button to add them all to a zipped file and download them.

详细检查给你

希望能有所帮助。

小开

在 chrome 中，当你使用 SVG URL 时，你可以使用 CTRL + S 或 CMD + S，它会自动建议你将页面保存为。SVG 试试看: < a href = “ https://upload.wikimedia.org/wikipedia/commons/9/90/Benjamin _ Franklin-10 _ Dollar _ Bill _ Portrait-vector.svg”rel = “ nofollow noReferrer”> https://upload.wikimedia.org/wikipedia/commons/9/90/benjamin_franklin-10_dollar_bill_portrait-vector.svg

小开

You can copy the HTML svg tag from the website, then paste the code on a new html file and rename the extension to svg. It worked for me. Hope it helps you.

小开

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

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

小开

打开 svg 检查页面。

2. Click on the link that displays the imagine in full resolution.

3. Do CMD/CTRL+S

你完蛋了！

小开

I just tried it on another website, in firefox. After trying to save the webpage, it gave me a save-file-as dropdown menu with an option called webpage, svg only.

小开

当您处于一个不允许您通过 SVG 自己的 URL (例如内联 SVG)访问 SVG 的页面时，可以打印该页面并选择 PDF 作为目标输出。一旦 PDF 文件被保存，你可以在一个支持向量的图片编辑器中打开它(例如 Adobe Illustrator) ，只选择你想要的向量艺术，然后将它剪切并粘贴到图片编辑器中的一个新文件中。

小开

基于网络搜索，我刚刚发现了一个叫做 SVG Export 的 Chrome 插件。

可在 Chrome 网络商店下载: http://Chrome.google.com/webstore/Details/svg-export/naeaaedieihlkmdajjefioajbbdbdjgp rel = “ norefrer”> https://Chrome.google.com/webstore/detail/svg-export/naeaaedieihlkmdajjefioajbbdbdjgp

主页是 < a href = “ https://svgexport.io”rel = “ norefrer”> https://svgexport.io

小开

@ mayersdesign 解决方案是好的，但对我来说它不工作。您只需将 svg 代码保存为 .txt文件并在任何代码编辑器(如 VS Code/Atom)中打开它，就可以将其扩展名重命名为 .svg。尝试在任何浏览器中打开 svg，如果它不工作，那么只需像这样在 svg 开始标记 <svg xmlns="http://www.w3.org/2000/svg" >中添加 xmlns，就可以打开 svg 了。

小开

我必须找到一个超级奇怪的 SvG。到处都找不到源头。所有提示和大多数工具都无法提取图片。最后，我找到了一个工具来完成这项工作: https://github.com/rossmoody/svg-gobbler

有一个 Chrome 和 Firefox 扩展，我用的是 Chrome 扩展。