Is it possible to copy SVG 'objects' from a web page into a drawing program?

I've been using to generate some graphs. That page works by dynamically rendering SVG into the HTML of the same page.

I'd like to be able to copy the SVG images from the page and use them in a tool like Inkscape for further editing. But trying the obvious copy/paste doesn't work (in Chrome). It doesn't seem like the browser recognizes the SVG artwork as graphics in the way it would for a PNG or JPEG.

Ideally what I would like to do is copy/paste the SVG image as simply as you can do for bitmapped images.

Note that on the pages I used above, viewing the source doesn't work either because of the dynamic nature of the page. In the source it just shows:

<div> <!-- Target for dynamic svg generation -->
</div>

But even if it were there, that's really just a workaround. It would be useful to get the SVG text if there was no other approach, but that's not really what I'm looking for.

1 Answer

It should be possible to retrieve the markup for your SVG using the developer console built into most modern browsers.

Chrome & Firefox

After you have generated your SVG, press F12 to launch the developer console. You can also rightclick on the graph and select "Inspect". This will highlight that element in the developer console.

If you navigate up the DOM tree you will find the parent SVG tag. Click on this to select it. Rightclick on the SVG tag and select "Copy" then select "Copy Outer HTML". This will put the entire markup for the SVG into your clipboard, from there you can paste it into your favourite text editor and save it with the SVG file extension.