Html 如何从网页中提取 svg 作为文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43804171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to extract svg as file from web page
提问by Vladyslav K
I want to save SVG as file from this page https://www.lightningdesignsystem.com/icons/Is there any Chrome extension or other way to do this?
我想从此页面https://www.lightningdesignsystem.com/icons/将 SVG 保存为文件， 是否有任何 Chrome 扩展程序或其他方法可以做到这一点？
采纳答案by mayersdesign
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 (Example), and then viewing the page source code with Control+u. Then just save that code.
除非我误解了您的意思，否则这可能就像检查 ( F12) 页面上的图标以显示其 .svg 源文件路径一样简单，直接转到该路径（示例），然后使用Control+查看页面源代码u。然后只需保存该代码。
回答by Em-AK
When the SVG is integrated as <svg ...></svg>markup directly into the HTML page.
当 SVG 作为<svg ...></svg>标记直接集成到 HTML 页面时。
- right click on the SVG to inspect it in developper tools
- find the root of the
<svg>element and right click to "Copy element" - go to https://jakearchibald.github.io/svgomg/and "Paste markup"
- download your optimized SVG file and enjoy
- 右键单击 SVG 以在开发人员工具中检查它
- 找到
<svg>元素的根并右键单击“复制元素” - 转到https://jakearchibald.github.io/svgomg/和“粘贴标记”
- 下载优化的 SVG 文件并享受
回答by Pete Mandy
3 stage solution Copy the svg code snippet and paste into a new html page. Save the html page as logo.html and then open that html page in Chrome. File > Print "Save as pdf" that pdf can now be opened in illustrator extracting the vector element.
3 阶段解决方案 复制 svg 代码片段并粘贴到新的 html 页面中。将 html 页面另存为 logo.html，然后在 Chrome 中打开该 html 页面。文件 > 打印“另存为 pdf”该 pdf 现在可以在 illustrator 中打开以提取矢量元素。
回答by Abner Lima
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.
您可以从网站复制 HTML svg 标签，然后将代码粘贴到新的 html 文件中，并将扩展名重命名为 svg。它对我有用。希望对你有帮助。
回答by Chris
They are all logged under Elements in google chromes developer tools.
它们都记录在 google chromes 开发人员工具中的 Elements 下。
<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>回答by Syfer
回答by Luke Lozowski
I don't know if this already been answered correctly or not. Well. Downloading the file from the source is not the resolution. How to grab *.svg from URL.
我不知道这是否已经得到正确回答。好。从源下载文件不是解决方案。如何从 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.
我在 Google Chrome 上安装了“svg-grabber”插件。这只能部分解决我的问题，因为谷歌浏览器没有“返回”一页的快捷方式。
I was trying to download the files from URL, but I kept getting an error, that there are no svg files on this page when I can see 40 of them. You can click on them, so they will open, but you cannot save it.
我试图从 URL 下载文件，但我一直收到一个错误，当我可以看到 40 个文件时，此页面上没有 svg 文件。您可以单击它们，这样它们就会打开，但您无法保存它。
The folder within WordPress: .../static/img/icons/
WordPress 内的文件夹：.../static/img/icons/
I added 'Go Back With Backspace' add-on to Chrome, as I had to click on each file separately, as if they are white icons (that I am currently looking for), you will not see them. You have to click on the file. Then back. It was taking too long. Now is fine. There is a soft to download specific folder, but I do not want to download half of the internet, to just have get a white .
我在 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.
当您单击白色图标时，会打开一个新选项卡，但它全是白色的。然后你点击 Chrome 中的 svg-grabber 图标，它会在一个黑色背景的新窗口中打开它，并有一个按钮下载所有 svg。
回答by Prabhu Nandan Kumar
For me its very easy just install following tool in chrome server :
对我来说，它非常简单，只需在 chrome 服务器中安装以下工具：
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.
进入网页后，单击 URL 栏旁边的扩展程序图标，将打开一个新选项卡，显示它在页面上找到的所有 SVG 文件。您可以将 SVG 文件复制到剪贴板，仅下载您需要的少数文件，或单击“下载所有 SVG”按钮将它们全部添加到压缩文件中并下载。
For detail check here
有关详细信息，请查看此处
Hope it will helpful.
希望它会有所帮助。
回答by stan
On chrome when are in the SVG URL, you can do CTRL+S or CMD+S and it automatically propose you to save the page as an .SVG try it out : https://upload.wikimedia.org/wikipedia/commons/9/90/Benjamin_Franklin-10_Dollar_Bill_Portrait-Vector.svg
在 chrome 上，当位于 SVG URL 中时，您可以执行 CTRL+S 或 CMD+S，它会自动建议您将页面另存为 .SVG 试试看：https: //upload.wikimedia.org/wikipedia/commons/ 9/90/Benjamin_Franklin-10_Dollar_Bill_Portrait-Vector.svg
回答by isXander
1.Inspect the page with the svg on.
1.检查打开 svg 的页面。
2.Click on the link that displays the imagine in full resolution.
2.单击以全分辨率显示图像的链接。
3.Do CMD/CTRL+S
3.执行 CMD/CTRL+S
4.You are done!
4.你完成了！
