Search code examples
htmlsvg

How to extract svg as file from web page

enter image description here

enter image description here

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?

Solution

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