Copy SVG Images from Browser to Clipboard

Instead of displaying the svg as an svg element display it with the img tag. This has some limitations (you can't display custom fonts or embed scripts, but it seems this is not your use case). The upside is that is behaves exactly as you would expect from an image (you can drag and drop, right click and copy, etc).

To do this you need to encode it with base64. You can do it server side or client side with js. Your image tag ends up looking something like...

<img src="data:image/svg;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolf" width="..." height="..." alt="diagram" />

Where R0lGODlhEAAQAMQ... is your base64 encoded svg.

Javascript and the Clipboard is a pain in the a**.

There is one workaround for your situation that I know of:

If it is a true SVG file, in Chrome, right click on the image, and select "Inspect Element".The browser console will open, and should open to an SVG element that you can select in the inspector.Right click the svg tag in the inspector, and select 'Copy' or 'Copy as HTML' (I can't recall the choices exactly)

Paste that text into a text file and then save the file with an SVG extension. It can then be opened in any browser or SVG editing program. Inkscape is a good choice for editing and debugging, as you can view and edit the entire SVG file in an XML style editor.

**Sorry - I missed the first part of your request. That will be tricky. I'm afraid I can't help with that part. Copy and paste probably isn't your best option though. There are PHP classes to both manipulate SVG and Excel files, and that will likely be the way to go.

I managed to copy SVG content to clipboard as plain XML text, but it appeared useless for me, because Inkscape (which I use to work with SVG), doesn't recognize the text in clipboard as SVG. It appears that copying text of SVG is not enough and the browser should also set the mime-type to image/svg+xml.

I tried several tricks with HTML5 Clipboard API, but ended with the problem that Chrome is unable to export the mime-type into system clipboard. The relevant bug report and jsfiddle link for it is here https://code.google.com/p/chromium/issues/detail?id=504700