Save SVG tag from a HTML page to a SVG image

Question

I have an application by which users can draw things using SVG (d3). I want a functionality that when I click a button or a link, I want to save a SVG tag called "main_svg" that in turn contains all the other SVG elements, to a SVG image in a separate file. I don't want to save the complete page but just the SVG tag with id "main_svg"

How can this be achieved? Are there any plugins that can do this? Any leads would be appreciated.

I tried:

1. Saving the element into a text file and then renaming it to .svg, not very efficient.

2. Canvg - But that coverts to png

Answer 1

If the file is an HTML file, go to the place from where the SVG tag starts that is from to and save only this much portion in a separate file with ".svg" extension after which you will be able to view the file in the browser.

Answer 2

SVG Crowbar https://nytimes.github.io/svg-crowbar/ allows you to download any SVG object from any page with built-in SVG node. Simply drag icon from the page above to your bookmark bar and then, on the desired page, press this bookmark. It allows you to download any SVG object on the page then.