How to extract svg as file from web page

Procedure for Optimal SVG Extraction

Start by copying the SVG as explained above. Next, head to SVGOMG at https://jakearchibald.github.io/svgomg/, where you can paste your SVG code and download the optimized version. This ensures your SVG is as light and efficient as possible.

Relying on the Power of Browser Tools and Extensions

While the developer tools built into your browser can definitely do the job, you can also look to extensions for extra help. SVG Export extension, for example, available for Google Chrome, can simplify the task significantly.

Direct SVG Download Using Directories

Some SVG files can be downloaded directly via their file paths on the webpage. In the src attribute of the SVG element, you will find the file's URL. Simply navigate to this URL and save the file. This ensures maximum quality SVG extraction.

Steering Clear of Quality Loss

Keep in mind that using screenshots for SVG extraction results in lower quality and loss of scalability. For the sake of quality, ensure to download the SVG directly.

Accessing SVGs for Personal Usage

If you need to download SVGs from pages like the Salesforce icons page, you can use their demo link as a practical example to understand the process of efficient SVG downloading for personal use.

Export SVG as PDF when Needed

Chrome users can save SVG files as PDF and extract the vector elements using Adobe Illustrator. This method is particularly useful when dealing with complex graphics that require more than a simple SVG extraction.

Diving Deeper: Advanced SVG Extraction Techniques

Serialization with XMLSerializer

The XMLSerializer interface helps convert SVG elements to a string. This comes in handy when manipulating or saving SVGs under more complex contexts:

var serializer = new XMLSerializer();
var svgElement = document.getElementById('theSVG'); // Gotcha!
var svgString = serializer.serializeToString(svgElement); // Magic stringifying spell!


Then save svgString as a file with an .svg extension.

Libraries for Client-Side Saving

JavaScript libraries, such as FileSaver.js, provide mechanisms for client-side file saving. If your application needs to save SVGs on the fly, such a library could be your best bet.

Cross-Browser Compatibility

It's essential to check the compatibility of your SVGs across different browsers. Since different browsers interpret SVGs differently, it's essential that your SVGs retain their integrity across all platforms.