How to extract svg as file from web page

Question

I want to save SVG as file from this page https://www.lightningdesignsystem.com/icons/ Is there any Chrome extension or other way to do this?

Answer 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

Answer 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/ !