从网页中导出SVG图片

Question

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

徽标是看起来像这样的元素：

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

我还没有找到一种工具来验证SVG代码/对SVG代码进行故障排除（一种可以使用W3C验证器验证HTML的方式）。

如何从网站代码中提取此矢量图像作为矢量图像文件？-

Answer 1

右键单击徽标，然后选择“检查”。
1. 浏览器开发工具窗口应打开，突出显示<svg>标签。
2. 按F2。这将在嵌入式标签编辑器中打开该标签。
4. 您会看到SVG只是指向HTML中其他地方的SVG符号的简单链接

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

5. 您需要找到该符号。如果您在HTML中向上看，将会看到另一个<svg>元素。单击旁边的小箭头。

您会看到很多<symbol>标签。用id="icon-logo"查找一个。

6. 选择那个并再次按F2
7. 通过使用Ctrl-A（在Mac上为Cmd-A）选择包括内容在内的整个<symbol>
8. 将整个符号复制并粘贴到文本编辑器中
9. 将<symbol更改为<svg，将</symbol>的末尾更改为</svg>
11. 要使其成为独立的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>