Manipulate SVG with javascript
HTML
<svg id="mySVG" width="10000" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="0"
x2="0"
y1="0"
y2="120"
stroke="red"
stroke-width="1"
></line>
<line x1="120"
x2="120"
y1="0"
y2="120"
stroke="red"
stroke-width="1"
></line>
<line x1="0"
x2="120"
y1="0"
y2="0"
stroke="red"
stroke-width="1"
></line>
<line x1="0"
x2="120"
y1="120"
y2="120"
stroke="red"
stroke-width="1"
></line>
<line x1="0"
x2="120"
y1="60"
y2="60"
stroke="green"
stroke-width="1"
></line>
<line x1="0"
x2="120"
y1="30"
y2="30"
stroke="green"
stroke-width="1"
></line>
<line x1="0"
x2="120"
y1="90"
y2="90"
stroke="green"
stroke-width="1"
></line>
<line x1="30"
x2="30"
y1="0"
y2="120"
stroke="green"
stroke-width="1"
></line>
<line x1="60"
x2="60"
y1="0"
y2="120"
stroke="green"
stroke-width="1"
></line>
<line x1="90"
x2="90"
y1="0"
y2="120"
stroke="green"
stroke-width="1"
></line>
</svg>
JavaScript
function saveSvg(svgEl, name) {
svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
var svgData = svgEl.outerHTML;
var preface = '<?xml version="1.0" standalone="no"?>\r\n';
var svgBlob = new Blob([preface, svgData], {type:"image/svg+xml;charset=utf-8"});
var svgUrl = URL.createObjectURL(svgBlob);
var downloadLink = document.createElement("a");
downloadLink.href = svgUrl;
downloadLink.download = name;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
saveSvg(document.getElementById("mySVG"), 'test.svg')