JSFiddle - React, Tailwind, and code Playground
HTML
<button id="btn">
open in a new window
</button>
<svg viewBox="0 0 20 20">
<rect fill="green" width="20" height="20"/>
</svg>
JavaScript
// we need to handle a user gesture to use 'open'
document.getElementById("btn").onclick = (evt) => {
// grab your svg element
const svg = document.querySelector("svg");
// convert to a valid XML source
const as_text = new XMLSerializer().serializeToString(svg);
// store in a Blob
const blob = new Blob([as_text], { type: "image/svg+xml" });
// create an URI pointing to that blob
const url = URL.createObjectURL(blob);
const win = open(url);
// so the Garbage Collector can collect the blob
win.onload = (evt) => URL.revokeObjectURL(url);
};