[SOLVED] Exporting SVG images from a webpage

Exporting SVG images from a webpage

I am trying to export the logo of one of our partners into SVG. Their website is here.

The logo is the element that looks like this:

I have tried every single solution I have found on both SO and Graphic Design SE (installing Chrome plugins like SVG Crowbar, copying and pasting the HTML of the code into a file... etc) and nothing has worked so far. Whenever I've been able to paste the code of the SVG into a file and renamed it ".svg", the file couldn't open with Illustrator.

I have also not found a tool to validate / troubleshoot SVG codes (the way one can validate HTML with the W3C validator).

How can this vector image can be extracted as a vector image file from the website's code? -

Solution

Right click on the logo, and choose "Inspect".
The browser dev tools window should open with the <svg> tag highlighted.
Press F2. This opens that tag in the inline tag editor.
You'll see that the SVG is just a simple link to an SVG symbol elsewhere in the HTML
```
<svg class="svg-icon icon-logo"><use xlink:href="#icon-logo"></use></svg>
```
You need to find that symbol. If you look further up in the HTML, you'll see another <svg> element. Click on the little arrow next to that.
You'll see a whole lot of <symbol> tags. Find the one with id="icon-logo".
Select that one and press F2 again
Select the whole <symbol> including contents by using Ctrl-A (Cmd-A on Mac)
Copy and paste the whole symbol to a text editor
Change the <symbol to <svg, and the </symbol> at the end to </svg>
To make it work as a standalone SVG, you'll also need to add the right xmlns attribute:
```
xmlns="http://www.w3.org/2000/svg"
```
Save the file. Eg. as logo.svg

The file should now look like this (I've trimmed out some of the path):

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