从网页导出 SVG 图像答案

【问题标题】：Exporting SVG images from a webpage从网页导出 SVG 图像
【发布时间】：2020-07-08 17:15:25
【问题描述】：

我正在尝试将我们的一位合作伙伴的徽标导出到 SVG 中。他们的网站是here。

标志是这样的元素：

我已经尝试了在 SO 和 Graphic Design SE 上找到的每一个解决方案（安装 Chrome 插件，如 SVG Crowbar，复制和将代码的 HTML 粘贴到文件中……等等），到目前为止没有任何效果。每当我能够将 SVG 的代码粘贴到文件中并将其重命名为“.svg”时，就无法使用 Illustrator 打开该文件。

我还没有找到一种工具来验证/排除 SVG 代码的问题（使用 W3C 验证器验证 HTML 的方式）。

如何从网站的代码中将这个矢量图像提取为矢量图像文件？ -

【问题讨论】：

在浏览器控制台中：console.log(document.querySelector('#icon-logo'));然后需要更改svg的符号。
我不知道该怎么做你的建议。在 Chrome 中，我可以在检查元素后打开一个“控制台”选项卡，但我只能做到这一点。
在 Mac 上是：Command+Option+J。窗口：Control+Shift+J。您的问题的一部分是您需要的元素隐藏在某些东西后面，因此您可以通过控制台获取它。
谢谢，但是我做了CMD+OPT+J之后面板打开了怎么办？
粘贴到console.log(document.querySelector('#icon-logo'));按回车。将粘贴代码复制到编辑器，将符号更改为 svg。另存为 yourfile.svg

标签： image svg resources

【解决方案1】：

右键单击徽标，然后选择“检查”。
浏览器开发工具窗口应打开并突出显示 <svg> 标记。
按 F2。这会在内联标签编辑器中打开该标签。

您会看到 SVG 只是 HTML 中其他地方的 SVG 符号的简单链接

<svg class="svg-icon icon-logo"><use xlink:href="#icon-logo"></use></svg>

您需要找到该符号。如果您进一步查看 HTML，您会看到另一个 <svg> 元素。点击旁边的小箭头。
你会看到一大堆<symbol> 标签。找到id="icon-logo" 的那个。
选择那个并再次按 F2
使用 Ctrl-A（Mac 上为 Cmd-A）选择整个 <symbol>，包括内容
将整个符号复制并粘贴到文本编辑器中
将<symbol更改为<svg，将末尾的</symbol>更改为</svg>
要使其作为独立的 SVG 工作，您还需要添加正确的 xmlns 属性：
```
xmlns="http://www.w3.org/2000/svg"
```
保存文件。例如。作为 logo.svg

文件现在应该看起来像这样（我已经剪掉了一些路径）：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 191 33"><path d="M8.988 16.702a1.65 1.65 0 0 1-1.154-1.975l-1.15-.664..."></path></svg>

【讨论】：