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

Question

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

Vla*_*v K 11 html svg

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

Answer 1

Em-*_*-AK 123

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

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

就像 @lucidbrot 在另一个答案中评论“重要的是要认识到 xmlns="..." 是必需的，即使它不存在于检查元素页面中” (7认同)
我认为如果 SVG 是由外部 CSS 设计的，那么这不起作用；仅当样式包含在 SVG 元素内时它才有效。 (4认同)
该工具非常棒，但如果您使用 Firefox，检查器中没有“复制元素”选项，您可以在 <SVG> 的父级上使用“复制”>“内部 HTML”，或者只需左键单击 <SVG > 元素并按键盘上的 ctrl + c。这会将整个 <SVG> 复制到剪贴板，并且它可以与 SVGOMG 工具一起使用。 (3认同)
xmnls 部分对我来说也很重要。将其添加到`<svg`之后，例如`<svg xmlns="http://www.w3.org/2000/svg" viewBox=...` (2认同)

Answer 2

小智 16

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

Answer 3

may*_*ign 11

除非我误解你,否则这可能就像检查(F12)页面上的图标以显示其.svg源文件路径,直接转到该路径(示例),然后用Control+ 查看页面源代码一样简单u.然后只保存该代码.

当然......这更容易哈哈，但没有（似乎是！）OP的问题 (3认同)
出于某种原因，它与 png 或 jpeg 图像的工作方式不同。直接进入 svg 时我看到空白屏幕，如果在控制台中出现一些错误。 (2认同)

Answer 4

Dav*_* J. 11

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

可在 Chrome 网上应用店获得：https : //chrome.google.com/webstore/detail/svg-export/naeaaedieihlkmdajjefioajbbdbdjgp
主页是https://svgexport.io

Answer 5

小智 8

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

这是我可以使用的唯一方法。谢谢。您还应该能够按照此处所述使用inkscape：https://en.wikipedia.org/wiki/Wikipedia:Graphics_Lab/Resources/PDF_conversion_to_SVG (2认同)

Answer 6

aks*_*hir 8

@mayersdesign 解决方案很好，但对我来说它不起作用。您只需将 svg 代码保存为.txt文件，然后在任何代码编辑器（如 VS Code/Atom）中打开它，将其扩展名重命名为.svg. 尝试在任何浏览器中打开 svg，如果它不起作用，那么只需在 svg 开始标记中添加 xmlns，<svg xmlns="http://www.w3.org/2000/svg" >如下所示，您的 svg 就准备好了。

Answer 7

小智 5

它们都记录在 google chrome 开发者工具中的 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>

Run Code Online (Sandbox Code Playgroud)

重要的是要认识到“xmlns=”...“”是必需的，即使它不存在于检查元素页面中 (11认同)

归档时间：	8 年，8 月前
查看次数：	43314 次
最近记录：	6 年，1 月前