How to extract svg as file from web page

Solution 1:

When the SVG is integrated as <svg ...></svg> markup directly into the HTML page.

1. Right click on the SVG to inspect it in developer tools
2. Find the root of the <svg> element and right click to "Copy element"
3. Go to https://jakearchibald.github.io/svgomg/ and "Paste markup"
4. Download your optimized SVG file and enjoy

Solution 2:

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.

To save the code, paste it into a text editor such as google docs. Then save the file as a .txt file. Change the end of that file's name from ".txt" to ".svg", and now you have your file as a .svg. This method does not involve getting any external extensions or downloading any programs, and it functions the same.

Referencing that Salesforce page specifically, you might want to note that their icons are freely available to download here: https://www.lightningdesignsystem.com/icons/ !

Solution 3:

Here's a three step solution:

1. Copy the SVG code snippet, and paste it into a new HTML page.
2. Save the HTML page as (for example) "logo.html", and then open that HTML page in Chrome hitting > File > Print > "Save as pdf"
3. This PDF can now be opened in Illustrator - extracting the vector element.