Question: I have a form section where a user can enter in data and then a chart is created based off of the data. I want the user to be able to copy the SVG of the chart to the clipboard so that they can then paste the chart in another field on the form, but I'm unsure of how to retrieve what I need as the SVG is dynamically created. Below is the button that, when clicked, is intended to copy the SVG to the clipboard.

```
<div style="float: right;" class="printnoshow">
    <input type="button" class="formbutton" value="Copy" onclick="copyImg(); $('.formsmodalmask').hide(); $('.pmonitormodal').hide(); $('.pmonitordescriptiondiv').css('page-break-after', 'auto');" />
</div>

```

When clicked the JavaScript function copyImg() is intended to retrieve the SVG. I have an outline below, but am unsure of where to go with this. 

```
function copyImg() {
    var svg = document.getElementById('svg');
    console.log(svg);

    var range = document.createRange();
    range.selectNodeContents(svg);

    window.getSelection().addRange(range);

    var success = document.execCommand('copy');
    if (success)
        console.log('Successfully copied to clipboard');
    else
        console.log('Unable to copy to clipboard');

    window.getSelection().removeRange(range);
}

```

So the SVG is the chart below and you can see the Copy button on the form as well. Any help here would be appreciated. Thanks![![enter image description here](https://i.stack.imgur.com/WJPFZ.png)][1](https://i.stack.imgur.com/WJPFZ.png)

Answer: 
The first answer 100% correct but it will copy the svg as raw text to the clipboard.
If you search for a solution where you really save the svg as an Image.
You need to use html2canvas.min.js as an extrenal src.
Like this:

```
<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.3/html2canvas.min.js"></script>

```

And and the script:

```
svg = document.querySelector('svg');
svg.onclick = () => {
html2canvas(svg).then(function(canvas) {
                canvas.toBlob(function(blob) {
                        navigator.clipboard
                                .write([
                                new ClipboardItem(
                                        Object.defineProperty({}, blob.type, {
                                                value: blob,
                                                enumerable: true
                                        })
                                )
                        ])
                });
        });
}

```

This will copy the svg as an image so you can paste it everywhere. So after that you are able to paste it into MS Word etc.
And of course you can wrapt it into a function to use the code if you have some async stuff (after creating the svg). PS: Maybe you need to edit the css selector
[![enter image description here](https://i.stack.imgur.com/TCjVG.png)](https://i.stack.imgur.com/TCjVG.png)

The first line shows console.log(svg) and the rest is console.dir(svg), which shows all of the properties shown plus many more below those.
[![enter image description here](https://i.stack.imgur.com/keoib.png)](https://i.stack.imgur.com/keoib.png)