Develop Reference

How to do morphing in SVG

I am working with svg animation right now. I want to setup morph animation on this svg. For example the vibe icon will be morph with Wibe on hover of the image. I try few examples from the stackoverflow. But that is not working. Right now the current animation on this image is rotating E of wibe and floating vibe icon.
Please help me regarding this issue. How can I use morph animation in this.
Thanks
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1491.3333 803.33069"
height="500"
width="700"
xml:space="preserve"
id="svg2"
version="1.1" style="
background-color: #000;
"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
id="clipPath18"
clipPathUnits="userSpaceOnUse"><path
id="path16"
d="M 0,602.498 H 1118.496 V 0 H 0 Z" /></clipPath></defs><g
transform="matrix(1.3333333,0,0,-1.3333333,0,803.33067)"
id="g10"><g
id="g12"><g
clip-path="url(#clipPath18)"
id="g14"><g
transform="translate(665.3598,379.7295)"
id="g20"><path
id="path22"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m 0,0 h 26.962 c 13.938,0 23.293,3.023 28.064,9.077 4.763,6.046 7.149,12.378 7.149,18.979 0,6.235 -2.475,12.003 -7.427,17.33 C 49.789,50.705 40.72,53.36 27.517,53.36 23.481,53.36 18.8,53.262 13.481,53.083 8.17,52.902 3.676,52.625 0,52.265 Z m 0,-57.764 v -56.668 c 1.111,0 4.044,-0.18 8.807,-0.548 4.772,-0.367 11.193,-0.547 19.257,-0.547 15.409,0 26.407,2.566 33.001,7.696 6.609,5.139 9.91,12.296 9.91,21.456 0,3.675 -0.638,7.246 -1.921,10.727 -1.29,3.481 -3.578,6.512 -6.879,9.085 -3.301,2.565 -7.891,4.673 -13.758,6.316 -5.859,1.658 -13.563,2.483 -23.098,2.483 z m -91.859,165.587 c 7.337,1.095 15.769,2.108 25.303,3.023 9.535,0.923 19.25,1.74 29.152,2.483 9.911,0.728 19.535,1.276 28.882,1.643 9.355,0.368 17.509,0.548 24.486,0.548 45.843,0 80.134,-6.504 102.872,-19.527 22.738,-13.016 34.103,-33.278 34.103,-60.787 0,-13.931 -3.203,-25.761 -9.625,-35.483 -6.414,-9.715 -15.131,-18.057 -26.129,-25.034 15.402,-5.506 28.057,-13.383 37.959,-23.645 9.91,-10.278 14.854,-24.756 14.854,-43.473 0,-33.728 -12.468,-57.104 -37.411,-70.134 -24.937,-13.016 -61.793,-19.528 -110.569,-19.528 -12.836,0 -29.617,0.458 -50.337,1.373 -20.727,0.923 -41.898,2.851 -63.54,5.784 z m -25.049,-282.757 c -9.535,-1.47 -18.154,-2.573 -25.859,-3.3 -7.697,-0.743 -14.666,-1.111 -20.9,-1.111 -6.233,0 -13.21,0.368 -20.907,1.111 -7.704,0.727 -16.129,1.83 -25.296,3.3 v 283.852 c 8.057,1.838 16.031,3.121 23.923,3.848 7.892,0.743 15.491,1.111 22.828,1.111 6.969,0 14.494,-0.368 22.55,-1.111 8.072,-0.727 15.957,-2.01 23.661,-3.848 z m -237.89,119.924 34.102,163.928 c 2.941,0.735 8.62,1.463 17.06,2.206 8.439,0.727 17.426,1.095 26.961,1.095 12.1,0 22.828,-0.368 32.182,-1.095 9.348,-0.743 16.039,-1.471 20.076,-2.206 l -89.129,-283.304 c -6.234,-1.838 -13.016,-3.031 -20.345,-3.578 -7.344,-0.548 -14.674,-0.818 -22.003,-0.818 -7.344,0 -14.771,0.27 -22.287,0.818 -7.51,0.547 -15.304,1.74 -23.376,3.578 l -40.157,154.034 c -6.969,-24.576 -14.028,-50.427 -21.184,-77.569 -7.15,-27.141 -14.029,-52.625 -20.631,-76.465 -7.697,-1.838 -15.311,-3.031 -22.827,-3.578 -7.518,-0.548 -14.944,-0.818 -22.273,-0.818 -7.344,0 -14.674,0.27 -22.011,0.818 -7.336,0.547 -14.118,1.74 -20.352,3.578 l -86.368,283.304 c 4.029,0.735 11.095,1.463 21.178,2.206 10.083,0.727 21.177,1.095 33.278,1.095 9.535,0 18.799,-0.368 27.786,-1.095 8.987,-0.743 14.936,-1.471 17.877,-2.206 l 35.761,-168.332 39.609,168.332 c 6.234,1.838 13.113,3.031 20.63,3.586 7.509,0.54 14.936,0.825 22.273,0.825 7.336,0 14.763,-0.285 22.287,-0.825 7.517,-0.555 15.124,-1.748 22.821,-3.586 z" /></g><g
transform="translate(220.8446,208.5321)"
id="g24"><path
id="path26"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C 62.399,-4.247 111.294,-96.425 205.706,-86.576 172.84,-130.659 92.497,-208.532 24.911,-208.532 -117.925,-208.532 -130.651,8.887 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(580.4182,121.9514)"
id="g28"><path
id="path30"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C -85.441,36.938 -117.17,22.297 -153.931,0 -105.978,83.683 -54.72,98.899 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(653.5858,147.7134)"
id="g32"><path
id="path34"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C -13.413,-15.054 -31.372,-29.682 -73.072,-25.757 -16.196,-124.558 53.294,-118.125 91.542,-83.726 164.849,-17.787 68.09,76.417 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(925.3088,392.7031)"
id="g36"><path
id="path38"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m 0,0 c 0,0 0,41.564 40.817,43.368 40.271,1.78 44.37,-43.33 44.37,-43.33 z M 81.95,103.607 C -68.673,133.163 -111.656,-7.91 -72.935,-117.879 c 0,0 48.014,-94.48 168.825,-63.503 l -1.549,75.894 c 0,0 -80.541,-21.684 -86.736,37.172 l 159.346,2.403 c 0,0 34.441,146.082 -85.001,169.52" /><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" begin="g10.mouseover" repeatCount="1" end="g10.mouseout" /></g></g></g></g>
</svg>

SVG: Select by class, html with javascript jQuery

Years back, Dan Miller had the same problem, as I have now, as they wanted a function (JavaScript) to get SVG elements by class. Dan proposed a function, but users were unable to run it:
function getSvgElemByClass(svgRoot,classSearchStr) {
// modification of Dustin Diaz's find by class script - http://www.dustindiaz.com/getelementsbyclass/
return(
function getSvgElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
// SVG = XML, so we need the XML method:
// using 'magic' namespace variable provided by websvg (svgns)
var els = node.getElementsByTagNameNS(svgns,tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
for (i = 0, j = 0; i < elsLen; i++) {
// SVG specific helper
if(els[i].hasAttribute('class') &&
pattern.test(els[i].getAttribute('class')) ) {
classElements[j] = els[i];
j++;
} else if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
)(classSearchStr,svgRoot)
}
An .svg file could look like this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg1024" viewBox="0 0 20 20" width="20" height="20">
<style id="style_css_sheet" type="text/css">
.land
{
fill: #00ff00;
stroke-width: 0.2;
stroke: #e0e0e0;
}
.aa, .ab
{
fill: #ff0000;
}
</style>
<g class="land bg"
id="A">
<path d="M 0,5 H 5 V 0 H 0 Z"
id="aa" class="land er bg"/>
<path d="m 10,5 h 5 V 0 h -5 z"
id="ab" class="land er bg"/>
<path d="m 5,5 h 5 V 0 H 5 Z"
id="ac" class="land tt bg"/>
</g>
<path d="M 0,10 H 5 v -5 H 0 Z"
id="ba" class="land er au"/>
<path d="m 10,10 h 5 v -5 h -5 z"
id="bb" class="land tt au"/>
<path d="m 5,10 h 5 v -5 H 5 Z"
id="bc" class="land er au"/>
<path d="M 0,15 H 5 V 10 H 0 Z"
id="ca" class="land tt bg"/>
<path d="m 10,15 h 5 V 10 h -5 z"
id="cb" class="land tt au"/>
<path d="m 5,15 h 5 V 10 H 5 Z"
id="cc" class="land er bg"/>
</svg>
From html I would like to select by class, like select all class "tt", or select all class "au". Tried with the script of Dan Miller, tried to fix it, but could not do it.
I would like to override the values set in the svg. (change .land {fill: #00ff00;})
I use this script
https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js
So that I can draw by id. That works, if I remove the .land{...}:
var element = SVG.get('fi');
element.fill('#f06')
How could I select by class? What to do, so that I can leave default colouring (.land{...})?

Simply use jQuery to change the fill by class:
$('.land').css('fill', '#0000ff')
Working Codepen.

You mention jQuery in your title, but later just Javascript.
jQuery is not required. Modern browsers have the document.getElementsByClassName() method.
var tt = document.getElementsByClassName("tt");
Array.from(tt).forEach(function(item) {
item.style.fill = "#0000ff";
});
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg1024" viewBox="0 0 20 20" width="20" height="20">
<style id="style_css_sheet" type="text/css">
.land
{
fill: #00ff00;
stroke-width: 0.2;
stroke: #e0e0e0;
}
.aa, .ab
{
fill: #ff0000;
}
</style>
<g class="land bg"
id="A">
<path d="M 0,5 H 5 V 0 H 0 Z"
id="aa" class="land er bg"/>
<path d="m 10,5 h 5 V 0 h -5 z"
id="ab" class="land er bg"/>
<path d="m 5,5 h 5 V 0 H 5 Z"
id="ac" class="land tt bg"/>
</g>
<path d="M 0,10 H 5 v -5 H 0 Z"
id="ba" class="land er au"/>
<path d="m 10,10 h 5 v -5 h -5 z"
id="bb" class="land tt au"/>
<path d="m 5,10 h 5 v -5 H 5 Z"
id="bc" class="land er au"/>
<path d="M 0,15 H 5 V 10 H 0 Z"
id="ca" class="land tt bg"/>
<path d="m 10,15 h 5 V 10 h -5 z"
id="cb" class="land tt au"/>
<path d="m 5,15 h 5 V 10 H 5 Z"
id="cc" class="land er bg"/>
</svg>

SVG to PNG is not working properly

Below is my code. have an inline SVG in my html, and I need to be able to save this as either a JPEG, PNG or SVG.
I have tried a few different methods with converting the SVG to canvas and then converting to JPEG/PDF,The Image will be cropped and it's not as same as SVG I see.
Pls let me know what I'm missing. Thanks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="400"></canvas>
<div id="png-container"></div>
<script>
var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');
function triggerDownload (imgURI) {
var evt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
var a = document.createElement('a');
a.setAttribute('download', 'MY_COOL_IMAGE.png');
a.setAttribute('href', imgURI);
a.setAttribute('target', '_blank');
a.dispatchEvent(evt);
}
function download(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = new XMLSerializer().serializeToString(document.querySelector('svg'));
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI);
};
img.src = url;
}
</script>
<button onclick="download()">svg to png</button>
<svg width="1109px" height="1082px" vM="0 0 1109 1082" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border: 1px solid black;"><g transform="matrix(1, 0, 0, 1, 0, 0)" clip-path="url(#mainClip13475)"><g transform="matrix(1, 0, 0, 1, 278.828125, 158.5)"><g transform="matrix(1, 0, 0, 1, -113.828125, -157.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#008bff" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path></g><text x="14" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">Start</text></g><g transform="matrix(1, 0, 0, 1, -45.828125, 861.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#ed0000" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#ed0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path></g><text x="11.5" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">End</text></g><g transform="matrix(1, 0, 0, 1, 701.171875, 169.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#008bff" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 22.5,0 L 2.5,0 C 1.125,0 0.012499999999999734,1.1250000000000004 0.012499999999999734,2.5 L 0,17.5 C 0,18.875 1.125,20 2.5,20 L 22.5,20 C 23.875,20 25,18.875 25,17.5 L 25,2.5 C 25,1.1250000000000004 23.875,0 22.5,0 z M 22.5,5 L 12.5,11.25 L 2.5,5 L 2.5,2.5 L 12.5,8.75 L 22.5,2.5 L 22.5,5 z" fill="white" stroke="none" transform="matrix(1, 0, 0, 1, 17.999999999999996, 20.499999999999996)"></path><path d="M 22.5,0 L 2.5,0 C 1.125,0 0.012499999999999734,1.1250000000000004 0.012499999999999734,2.5 L 0,17.5 C 0,18.875 1.125,20 2.5,20 L 22.5,20 C 23.875,20 25,18.875 25,17.5 L 25,2.5 C 25,1.1250000000000004 23.875,0 22.5,0 z M 22.5,5 L 12.5,11.25 L 2.5,5 L 2.5,2.5 L 12.5,8.75 L 22.5,2.5 L 22.5,5 z" fill="none" stroke="white" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 17.999999999999996, 20.499999999999996)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path></g><text x="33.5" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">Read Email</text></g><g transform="matrix(1, 0, 0, 1, -127.828125, -15)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, 601.171875, -72)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, -277.828125, 71)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, -104.22772471350943, -100.5)"><path d="M 13.5,0 L 13.5,35.75 Q 13.5,40.75 8.5,40.75 L 4.25,40.75 Q 0,40.75 0,45 L 0,77.5" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 7.399599713509437, 4)"></path><path d="M 13.5,0 L 13.5,35.75 Q 13.5,40.75 8.5,40.75 L 4.25,40.75 Q 0,40.75 0,45 L 0,77.5" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 7.399599713509437, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 11.399599713509437, 77)"></path></g><g transform="matrix(1, 0, 0, 1, -19.828125, 226.5)"><path d="M 747,0 L 747,310.5 Q 747,315.5 742,315.5 L 5,315.5 Q 0,315.5 0,320.5 L 0,627" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4.5, 4)"></path><path d="M 747,0 L 747,310.5 Q 747,315.5 742,315.5 L 5,315.5 Q 0,315.5 0,320.5 L 0,627" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4.5, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 8.5, 626.5)"></path></g><g transform="matrix(1, 0, 0, 1, -69.828125, -45.5)"><path d="M 0,57 L 64.828125,57 Q 69.828125,57 69.828125,52 L 69.828125,5 Q 69.828125,0 74.828125,0 L 663,0" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4.5)"></path><path d="M 0,57 L 64.828125,57 Q 69.828125,57 69.828125,52 L 69.828125,5 Q 69.828125,0 74.828125,0 L 663,0" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4.5)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 662.5, 0.5)"></path><g transform="matrix(1, 0, 0, 1, 11.678525286490563, 51.08857625084603)"><path d="M 5,0 L 22.299199427018873,0 C 24.537775677864907,0 27.299199427018873,2.761423749153968 27.299199427018873,5 L 27.299199427018873,14.822847498307937 C 27.299199427018873,17.061423749153967 24.537775677864907,19.822847498307937 22.299199427018873,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.888175964355469" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">Yes</text></g></g><g transform="matrix(1, 0, 0, 1, -258.08954874915395, 12)"><path d="M 119,0 L 5,0 Q 0,0 0,5 L 0,51" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 11.261423749153968, 4)"></path><path d="M 119,0 L 5,0 Q 0,0 0,5 L 0,51" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 11.261423749153968, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 15.261423749153968, 50.5)"></path><g transform="matrix(1, 0, 0, 1, 0, 4.838576250846032)"><path d="M 5,0 L 16.522847498307936,0 C 18.76142374915397,0 21.522847498307936,2.761423749153968 21.522847498307936,5 L 21.522847498307936,14.822847498307937 C 21.522847498307936,17.061423749153967 18.76142374915397,19.822847498307937 16.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="8" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">No</text></g></g><g transform="matrix(1, 0, 0, 1, 628.171875, -14)"><path d="M 0,0 L 0,84.75 Q 0,89.75 5,89.75 L 94.5,89.75 Q 99.5,89.75 99.5,94.75 L 99.5,175.5" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 0,84.75 Q 0,89.75 5,89.75 L 94.5,89.75 Q 99.5,89.75 99.5,94.75 L 99.5,175.5" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 107.5, 175)"></path><g transform="matrix(1, 0, 0, 1, 39.98857625084603, 83.33857625084603)"><path d="M 5,0 L 21.522847498307936,0 C 23.76142374915397,0 26.522847498307936,2.761423749153968 26.522847498307936,5 L 26.522847498307936,14.822847498307937 C 26.522847498307936,17.061423749153967 23.76142374915397,19.822847498307937 21.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.5" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">yes</text></g></g><g transform="matrix(1, 0, 0, 1, 11.171875, -51.41142374915397)"><path d="M 648,0 L 711.828125,0 Q 716.828125,0 716.828125,5 L 716.828125,40 Q 716.828125,45 711.828125,45 L 681.828125,45 Q 676.828125,45 676.828125,50 L 676.828125,928 Q 676.828125,933 671.828125,933 L 4,933" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 10.411423749153968)"></path><path d="M 648,0 L 711.828125,0 Q 716.828125,0 716.828125,5 L 716.828125,40 Q 716.828125,45 711.828125,45 L 681.828125,45 Q 676.828125,45 676.828125,50 L 676.828125,928 Q 676.828125,933 671.828125,933 L 4,933" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 10.411423749153968)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(-1, 0, 0, -1, 12.5, 947.411423749154)"></path><g transform="matrix(1, 0, 0, 1, 661.566701250846, 0)"><path d="M 5,0 L 16.522847498307936,0 C 18.76142374915397,0 21.522847498307936,2.761423749153968 21.522847498307936,5 L 21.522847498307936,14.822847498307937 C 21.522847498307936,17.061423749153967 18.76142374915397,19.822847498307937 16.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="8" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">No</text></g></g><g transform="matrix(1, 0, 0, 1, -250.828125, 129)"><path d="M 0,0 L 0,754 Q 0,759 5,759 L 197,759" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 0,754 Q 0,759 5,759 L 197,759" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 196.5, 759)"></path><g transform="matrix(1, 0, 0, 1, 13.48857625084603, 752.588576250846)"><path d="M 5,0 L 70.52284749830794,0 C 72.76142374915398,0 75.52284749830794,2.761423749153968 75.52284749830794,5 L 75.52284749830794,14.822847498307937 C 75.52284749830794,17.061423749153967 72.76142374915398,19.822847498307937 70.52284749830794,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="35" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153975, 3.261423749153967)">Not is spam</text></g></g><g transform="matrix(1, 0, 0, 1, -219.828125, -49.5)"><path d="M 0,143 L 62.828125,143 Q 67.828125,143 67.828125,138 L 67.828125,5 Q 67.828125,0 72.828125,0 L 813,0" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 8.5)"></path><path d="M 0,143 L 62.828125,143 Q 67.828125,143 67.828125,138 L 67.828125,5 Q 67.828125,0 72.828125,0 L 813,0" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 8.5)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 812.5, 4.5)"></path><g transform="matrix(1, 0, 0, 1, 9.678525286490563, 141.08857625084602)"><path d="M 5,0 L 22.299199427018873,0 C 24.537775677864907,0 27.299199427018873,2.761423749153968 27.299199427018873,5 L 27.299199427018873,14.822847498307937 C 27.299199427018873,17.061423749153967 24.537775677864907,19.822847498307937 22.299199427018873,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.888175964355469" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">Yes</text></g></g></g></g><clipPath id="mainClip13475"><rect x="0" y="0" width="1109" height="1082"></rect></clipPath></svg>
<canvas id="canvas"></canvas>
</body>
</html>

I figured out the issue which was causing cropped image.
The issue was Canvas height and width were declared fixed.
Now I'm dynamically specifying the height and width.
by getting the value from SVG and adding 300 [Not required]
***canvas.width = document.querySelector('svg').width.baseVal.value + 300; canvas.height = document.querySelector('svg').height.baseVal.value + 300;***
--------Updated code---------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas" style="display:none;" ></canvas>
<div id="png-container" style="display:none;"></div>
<script>
var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');
function triggerDownload (imgURI) {
var evt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
var a = document.createElement('a');
a.setAttribute('download', 'MY_COOL_IMAGE.png');
a.setAttribute('href', imgURI);
a.setAttribute('target', '_blank');
a.dispatchEvent(evt);
}
function download(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = new XMLSerializer().serializeToString(document.querySelector('svg'));
var DOMURL = window.URL || window.webkitURL || window
canvas.width = document.querySelector('svg').width.baseVal.value + 300; //document.width is obsolete
canvas.height = document.querySelector('svg').height.baseVal.value + 300; //document.height is obsolete
canvasW = canvas.width;
canvasH = canvas.height;
svg.style.border = "0px solid black";
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI);
};
img.src = url;
}
</script>
<button onclick="download()">svg to png</button>
<svg width="1109px" height="1082px" vM="0 0 1109 1082" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="border: 1px solid black;"><g transform="matrix(1, 0, 0, 1, 0, 0)" clip-path="url(#mainClip13475)"><g transform="matrix(1, 0, 0, 1, 278.828125, 158.5)"><g transform="matrix(1, 0, 0, 1, -113.828125, -157.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#008bff" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path></g><text x="14" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">Start</text></g><g transform="matrix(1, 0, 0, 1, -45.828125, 861.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#ed0000" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#ed0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path></g><text x="11.5" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">End</text></g><g transform="matrix(1, 0, 0, 1, 701.171875, 169.5)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 25,0 C 38.80711874576984,0 50,11.19288125423016 50,25 C 50,38.80711874576984 38.80711874576984,50 25,50 C 11.19288125423016,50 0,38.80711874576984 0,25 C 0,11.19288125423016 11.19288125423016,0 25,0 z" fill="none" stroke="#008bff" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 5.5, 5.5)"></path><path d="M 22.5,0 L 2.5,0 C 1.125,0 0.012499999999999734,1.1250000000000004 0.012499999999999734,2.5 L 0,17.5 C 0,18.875 1.125,20 2.5,20 L 22.5,20 C 23.875,20 25,18.875 25,17.5 L 25,2.5 C 25,1.1250000000000004 23.875,0 22.5,0 z M 22.5,5 L 12.5,11.25 L 2.5,5 L 2.5,2.5 L 12.5,8.75 L 22.5,2.5 L 22.5,5 z" fill="white" stroke="none" transform="matrix(1, 0, 0, 1, 17.999999999999996, 20.499999999999996)"></path><path d="M 22.5,0 L 2.5,0 C 1.125,0 0.012499999999999734,1.1250000000000004 0.012499999999999734,2.5 L 0,17.5 C 0,18.875 1.125,20 2.5,20 L 22.5,20 C 23.875,20 25,18.875 25,17.5 L 25,2.5 C 25,1.1250000000000004 23.875,0 22.5,0 z M 22.5,5 L 12.5,11.25 L 2.5,5 L 2.5,2.5 L 12.5,8.75 L 22.5,2.5 L 22.5,5 z" fill="none" stroke="white" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 17.999999999999996, 20.499999999999996)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 26.5, 52.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 26.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 52.5, 26.5)"></path></g><text x="33.5" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 61, 0)">Read Email</text></g><g transform="matrix(1, 0, 0, 1, -127.828125, -15)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, 601.171875, -72)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, -277.828125, 71)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><g transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="#008bff" stroke="none" transform="matrix(1, 0, 0, 1, 6, 6)"></path><path d="M 12.481343283582088,37.653419053185274 C 5.597014925373134,30.844535359438925 0,25.175336060783167 0,25.0146113383986 C 0,24.810052600818235 21.62313432835821,3.1706604324956165 24.626865671641788,0.3506721215663355 L 25.018656716417908,0 L 37.5,12.361192285213326 C 44.384328358208954,19.170075978959673 49.99999999999999,24.853886616014027 49.99999999999999,25.0146113383986 C 49.99999999999999,25.233781414377557 25.205223880597014,50 24.999999999999996,50 C 24.962686567164177,50 19.328358208955223,44.44769140853302 12.481343283582088,37.653419053185274 z" fill="none" stroke="#008bff" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 6, 6)"></path></g><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 0.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 27, 53.5)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 27)"></path><path d="M 4,0 C 6.209138999323175,0 8,1.7908610006768257 8,4 C 8,6.209138999323175 6.209138999323175,8 4,8 C 1.7908610006768257,8 0,6.209138999323175 0,4 C 0,1.7908610006768257 1.7908610006768257,0 4,0 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 53.5, 27)"></path></g><text x="25" y="10.725000000000001" style="font: 13px sans-serif" text-anchor="middle" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 62, 0)">Decision</text></g><g transform="matrix(1, 0, 0, 1, -104.22772471350943, -100.5)"><path d="M 13.5,0 L 13.5,35.75 Q 13.5,40.75 8.5,40.75 L 4.25,40.75 Q 0,40.75 0,45 L 0,77.5" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 7.399599713509437, 4)"></path><path d="M 13.5,0 L 13.5,35.75 Q 13.5,40.75 8.5,40.75 L 4.25,40.75 Q 0,40.75 0,45 L 0,77.5" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 7.399599713509437, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 11.399599713509437, 77)"></path></g><g transform="matrix(1, 0, 0, 1, -19.828125, 226.5)"><path d="M 747,0 L 747,310.5 Q 747,315.5 742,315.5 L 5,315.5 Q 0,315.5 0,320.5 L 0,627" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4.5, 4)"></path><path d="M 747,0 L 747,310.5 Q 747,315.5 742,315.5 L 5,315.5 Q 0,315.5 0,320.5 L 0,627" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4.5, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 8.5, 626.5)"></path></g><g transform="matrix(1, 0, 0, 1, -69.828125, -45.5)"><path d="M 0,57 L 64.828125,57 Q 69.828125,57 69.828125,52 L 69.828125,5 Q 69.828125,0 74.828125,0 L 663,0" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4.5)"></path><path d="M 0,57 L 64.828125,57 Q 69.828125,57 69.828125,52 L 69.828125,5 Q 69.828125,0 74.828125,0 L 663,0" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4.5)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 662.5, 0.5)"></path><g transform="matrix(1, 0, 0, 1, 11.678525286490563, 51.08857625084603)"><path d="M 5,0 L 22.299199427018873,0 C 24.537775677864907,0 27.299199427018873,2.761423749153968 27.299199427018873,5 L 27.299199427018873,14.822847498307937 C 27.299199427018873,17.061423749153967 24.537775677864907,19.822847498307937 22.299199427018873,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.888175964355469" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">Yes</text></g></g><g transform="matrix(1, 0, 0, 1, -258.08954874915395, 12)"><path d="M 119,0 L 5,0 Q 0,0 0,5 L 0,51" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 11.261423749153968, 4)"></path><path d="M 119,0 L 5,0 Q 0,0 0,5 L 0,51" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 11.261423749153968, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 15.261423749153968, 50.5)"></path><g transform="matrix(1, 0, 0, 1, 0, 4.838576250846032)"><path d="M 5,0 L 16.522847498307936,0 C 18.76142374915397,0 21.522847498307936,2.761423749153968 21.522847498307936,5 L 21.522847498307936,14.822847498307937 C 21.522847498307936,17.061423749153967 18.76142374915397,19.822847498307937 16.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="8" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">No</text></g></g><g transform="matrix(1, 0, 0, 1, 628.171875, -14)"><path d="M 0,0 L 0,84.75 Q 0,89.75 5,89.75 L 94.5,89.75 Q 99.5,89.75 99.5,94.75 L 99.5,175.5" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 0,84.75 Q 0,89.75 5,89.75 L 94.5,89.75 Q 99.5,89.75 99.5,94.75 L 99.5,175.5" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(0, 1, -1, 0, 107.5, 175)"></path><g transform="matrix(1, 0, 0, 1, 39.98857625084603, 83.33857625084603)"><path d="M 5,0 L 21.522847498307936,0 C 23.76142374915397,0 26.522847498307936,2.761423749153968 26.522847498307936,5 L 26.522847498307936,14.822847498307937 C 26.522847498307936,17.061423749153967 23.76142374915397,19.822847498307937 21.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.5" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">yes</text></g></g><g transform="matrix(1, 0, 0, 1, 11.171875, -51.41142374915397)"><path d="M 648,0 L 711.828125,0 Q 716.828125,0 716.828125,5 L 716.828125,40 Q 716.828125,45 711.828125,45 L 681.828125,45 Q 676.828125,45 676.828125,50 L 676.828125,928 Q 676.828125,933 671.828125,933 L 4,933" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 10.411423749153968)"></path><path d="M 648,0 L 711.828125,0 Q 716.828125,0 716.828125,5 L 716.828125,40 Q 716.828125,45 711.828125,45 L 681.828125,45 Q 676.828125,45 676.828125,50 L 676.828125,928 Q 676.828125,933 671.828125,933 L 4,933" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 10.411423749153968)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(-1, 0, 0, -1, 12.5, 947.411423749154)"></path><g transform="matrix(1, 0, 0, 1, 661.566701250846, 0)"><path d="M 5,0 L 16.522847498307936,0 C 18.76142374915397,0 21.522847498307936,2.761423749153968 21.522847498307936,5 L 21.522847498307936,14.822847498307937 C 21.522847498307936,17.061423749153967 18.76142374915397,19.822847498307937 16.522847498307936,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="8" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">No</text></g></g><g transform="matrix(1, 0, 0, 1, -250.828125, 129)"><path d="M 0,0 L 0,754 Q 0,759 5,759 L 197,759" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 0,754 Q 0,759 5,759 L 197,759" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 4)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 196.5, 759)"></path><g transform="matrix(1, 0, 0, 1, 13.48857625084603, 752.588576250846)"><path d="M 5,0 L 70.52284749830794,0 C 72.76142374915398,0 75.52284749830794,2.761423749153968 75.52284749830794,5 L 75.52284749830794,14.822847498307937 C 75.52284749830794,17.061423749153967 72.76142374915398,19.822847498307937 70.52284749830794,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="35" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153975, 3.261423749153967)">Not is spam</text></g></g><g transform="matrix(1, 0, 0, 1, -219.828125, -49.5)"><path d="M 0,143 L 62.828125,143 Q 67.828125,143 67.828125,138 L 67.828125,5 Q 67.828125,0 72.828125,0 L 813,0" fill="none" stroke="transparent" stroke-width="8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 8.5)"></path><path d="M 0,143 L 62.828125,143 Q 67.828125,143 67.828125,138 L 67.828125,5 Q 67.828125,0 72.828125,0 L 813,0" fill="none" stroke="gray" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 4, 8.5)"></path><path d="M 0,0 L 8,4 L 0,8 L 2,4 z" fill="gray" stroke="none" transform="matrix(1, 0, 0, 1, 812.5, 4.5)"></path><g transform="matrix(1, 0, 0, 1, 9.678525286490563, 141.08857625084602)"><path d="M 5,0 L 22.299199427018873,0 C 24.537775677864907,0 27.299199427018873,2.761423749153968 27.299199427018873,5 L 27.299199427018873,14.822847498307937 C 27.299199427018873,17.061423749153967 24.537775677864907,19.822847498307937 22.299199427018873,19.822847498307937 L 5,19.822847498307937 C 2.761423749153968,19.822847498307937 0,17.061423749153967 0,14.822847498307937 L 0,5 C 0,2.761423749153968 2.761423749153968,0 5,0 z" fill="#F8F8F8" stroke="none" transform="matrix(1, 0, 0, 1, 0.5, 0.5)"></path><text x="10.888175964355469" y="10.725000000000001" style="font: 10pt helvetica, arial, sans-serif" text-anchor="middle" fill="#333333" stroke="none" transform="matrix(1, 0, 0, 1, 3.261423749153968, 3.261423749153967)">Yes</text></g></g></g></g><clipPath id="mainClip13475"><rect x="0" y="0" width="1109" height="1082"></rect></clipPath></svg>
</body>
</html>

Parse SVG and add it to a svg element

I have a service where I want to dynamically add SVG parts to a g element. This is what the service returns:
<g xmlns="http://www.w3.org/2000/svg" style="pointer-events: all;" opacity="1">
<title style="pointer-events: inherit;">Layer 1</title>
<path id="svg_1" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 231.5 122.5 C 230.5 122.5 221.666 124.214 214.5 125.5 C 201.667 127.803 184.514 129.581 173.5 131.5 C 167.508 132.544 164.077 131.928 158.5 136.5 C 155.219 139.19 152 144.469 151.5 156.5 C 151.375 159.497 150.696 163.582 151.5 167.5 C 153.031 174.96 161.804 180.205 170.5 189.5 C 177.762 197.263 185.013 204.954 192.5 212.5 C 200.981 221.048 208.5 226.5 214.5 232.5 C 219.5 237.5 224.834 240.27 227.5 244.5 C 230.219 248.814 230.986 251.324 231.5 253.5 C 231.96 255.447 231.5 258.5 231.5 260.5 C 231.5 262.5 228.786 265.712 226.5 268.5 C 224.707 270.687 221.213 274.151 217.5 277.5 C 213.17 281.405 207.5 283.5 203.5 285.5 C 199.5 287.5 195.676 289.986 193.5 290.5 C 190.58 291.189 188.5 292.5 187.5 292.5 L 186.5 292.5 L 186.5 293.5" />
<path id="svg_2" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 39.5 35.5 C 40.5 35.5 42.5 35.5 45.5 35.5 C 47.5 35.5 50.5 35.5 52.5 35.5 C 54.5 35.5 56.5 35.5 57.5 35.5 L 58.5 35.5 L 59.5 35.5" />
<path id="svg_3" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 40.5 95.5 C 40.5 97.5 39.8088 103.572 38.5 108.5 C 36.8767 114.613 35.5 117.5 35.5 119.5 C 35.5 121.5 34.5 122.5 34.5 123.5 L 33.5 123.5 L 33.5 124.5 L 33.5 125.5" />
<path id="svg_6" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 81.5 176.5" /><path id="svg_7" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 79.5 167.5 C 79.5 170.5 80.1835 178.521 79.5 189.5 C 78.999 197.547 76.9069 204.357 75.5 211.5 C 73.75 220.385 72.663 227.522 71.5 235.5 C 70.6226 241.519 70.5 245.5 70.5 247.5 C 70.5 249.5 70.5 250.5 69.5 250.5 L 69.5 251.5 L 69.5 252.5" />
</g>
The code I'm trying to use which has been modified many times is something to the affect of this:
function parseSVG(s, layer) {
var div= $(s);
for(var i = 0; i < div.children.length; i++) {
layer.append(div.children[i]);
}
}
layer is the g element s is the svg from above. The closest I can get is adding title then all the path elements at once inside of svg_1.

You can use DOMParser to parse an XML string.
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
The <g> in your example will be doc.documentElement

In addition to Robert's answer, you can convert the HTMLCollection to SVGElement in this way :
const yourSvgElement = doc.getElementsByTagNameNS("http://www.w3.org/2000/svg", "svg").item(0);
// yourSvgElement is now a SVGElement type
Please note that the converted element is the first in the collection.
See : HTMLCollection.item

Drawing img containing SVG source with canvas to get Data URL

I ultimately want to get a data URI of an SVG graphic, and I am trying to do this by adding the SVG source to an image element, drawing the image with canvas, and then
In this sample jsFiddle, it fails when trying to draw the canvas, what am I missing?
I believe this should work in Firefox, and not Chrome, due to a security restriction.
var image = new Image();
var xml = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill-rule="evenodd" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" overflow="hidden" preserveAspectRatio="none" width="1291px" height="1006px" viewBox="0 0 491871 383286"><rect fill="#ffffff" fill-opacity="0" width="100%" height="100%"></rect><g transform="translate(6858 12192) scale(1.309375)"><g id="editor-ged1ef149_00"><g></g><g id="editor-ged1ef149_00-bg"><g></g><path fill="#FFFFFF" fill-opacity="1" d="M 0 0 L 365760 0 365760 274320 0 274320 Z"></path></g><g id="editor-ged1ef149_01"><g></g><path d="M 18288 10985.51953125 L 347472.0076446533 10985.51953125 347472.0076446533 56705.520990371704 18288 56705.520990371704 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 18288 10985.51953125 L 347472.0076446533 10985.51953125 347472.0076446533 56705.520990371704 18288 56705.520990371704 Z"></path><g direction="ltr" style="opacity: 0.8;"><g pointer-events="none" transform="matrix(381,0,0,380.99999999999994,21945,31712.5209903717)"><g><g id="editor-ged1ef149_01-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"><g class="sketchy-text-content-text" transform="translate(0 43.34375)"><text x="0px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">Click</text><text x="128.34375px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">to</text><text x="186.6875px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">add</text><text x="285.03125px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">title</text></g></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 18186.157517899763 10911.694510739857 L 347573.84248210024 10911.694510739857 347573.84248210024 56595.32219570406 18186.157517899763 56595.32219570406 Z" pointer-events="none" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-opacity="0.3" stroke-width="290.9785202863962" stroke="#000000"></path><path d="M 21336 14033.51953125 L 344424.0076446533 14033.51953125 344424.0076446533 53657.5209903717 21336 53657.5209903717 Z" pointer-events="all"></path><path d="M 21945 31712.5209903717 L 162926.90625 31712.5209903717 162926.90625 53048.5209903717 21945 53048.5209903717 Z" pointer-events="all"></path></g></g><g id="editor-ged1ef149_02"><g></g><path d="M 18288 64008 L 347472.0076446533 64008 347472.0076446533 262716.00018310547 18288 262716.00018310547 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 18288 64008 L 347472.0076446533 64008 347472.0076446533 262716.00018310547 18288 262716.00018310547 Z"></path><g direction="ltr" style="opacity: 0.8;"><g pointer-events="none" transform="matrix(381,0,0,381,21945,67665)"><g><g id="editor-ged1ef149_02-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"><g class="sketchy-text-content-text" transform="translate(0 44.671875)"><text x="0px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">Click</text><text x="98.125px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">to</text><text x="142.25px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">add</text><text x="220.375px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">text</text></g></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 18186.157517899763 63869.78520286396 L 347573.84248210024 63869.78520286396 347573.84248210024 262608.1145584726 18186.157517899763 262608.1145584726 Z" pointer-events="none" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-opacity="0.3" stroke-width="290.9785202863962" stroke="#000000"></path><path d="M 21336 67056 L 344424.0076446533 67056 344424.0076446533 259668.00018310547 21336 259668.00018310547 Z" pointer-events="all"></path><path d="M 21945 70713 L 130291.875 70713 130291.875 91287 21945 91287 Z" pointer-events="all"></path></g></g><g id="editor-ged1ef149_05"><g><path stroke="#5da2ff" stroke-opacity="0.6" stroke-width="1925.9140811455848" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path></g><path fill="#3D85C6" fill-opacity="1" stroke="#666666" stroke-opacity="1" stroke-width="762" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="8" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path></g><g id="editor-ged1ef149_06"><g></g><path fill="#FF0000" fill-opacity="1" d="M 36727.9988 250551.9999 C 46095.4988 239712.24990000002 55462.9988 232937.40615 64830.4988 230227.46865 L 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 C 92932.9988 232937.40615 102300.4988 239712.24990000002 111667.9988 250551.9999 L 102300.4988 176028.71865 111667.9988 120474.9999 C 105422.9988 113248.4999 99177.9988 107828.6249 92932.9988 104215.3749 L 92932.9988 82535.87489999998 C 80442.9988 75309.37489999998 67952.9988 75309.37489999998 55462.9988 82535.87489999998 L 55462.9988 104215.3749 C 49217.9988 107828.62489999998 42972.9988 113248.4999 36727.9988 120474.9999 L 46095.4988 176028.71865 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 36727.9988 250551.9999 C 46095.4988 239712.24990000002 55462.9988 232937.40615 64830.4988 230227.46865 L 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 C 92932.9988 232937.40615 102300.4988 239712.24990000002 111667.9988 250551.9999 L 102300.4988 176028.71865 111667.9988 120474.9999 C 105422.9988 113248.4999 99177.9988 107828.6249 92932.9988 104215.3749 L 92932.9988 82535.87489999998 C 80442.9988 75309.37489999998 67952.9988 75309.37489999998 55462.9988 82535.87489999998 L 55462.9988 104215.3749 C 49217.9988 107828.62489999998 42972.9988 113248.4999 36727.9988 120474.9999 L 46095.4988 176028.71865 Z"></path><path fill="#cc0000" fill-opacity="1" d="M 64830.4988 208547.96865 L 64830.4988 230227.46865 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 83565.4988 208547.96865 C 77320.4988 206741.34365 71075.4988 206741.34365 64830.4988 208547.96865 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 64830.4988 208547.96865 L 64830.4988 230227.46865 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 83565.4988 208547.96865 C 77320.4988 206741.34365 71075.4988 206741.34365 64830.4988 208547.96865 Z"></path><path stroke="#666666" stroke-opacity="1" stroke-width="762" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="8" d="M 36727.9988 250551.9999 L 46095.4988 176028.71865 36727.9988 120474.9999 C 42972.9988 113248.4999 49217.9988 107828.6249 55462.9988 104215.3749 L 55462.9988 82535.87489999998 C 67952.9988 75309.37489999998 80442.9988 75309.37489999998 92932.9988 82535.87489999998 L 92932.9988 104215.3749 C 99177.9988 107828.62489999998 105422.9988 113248.4999 111667.9988 120474.9999 L 102300.4988 176028.71865 111667.9988 250551.9999 C 102300.4988 239712.24990000002 92932.9988 232937.40615 83565.4988 230227.46865 L 92932.9988 212612.8749 C 80442.9988 205386.3749 67952.9988 205386.3749 55462.9988 212612.8749 L 64830.4988 230227.46865 C 55462.9988 232937.40615 46095.4988 239712.24990000002 36727.9988 250551.9999 Z M 55462.9988 212612.8749 L 55462.9988 104215.3749 M 92932.9988 104215.3749 L 92932.9988 212612.8749 M 64830.4988 208547.96865 L 64830.4988 230227.46865 M 83565.4988 230227.46865 L 83565.4988 208547.96865"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 36727.9988 250551.9999 L 46095.4988 176028.71865 36727.9988 120474.9999 C 42972.9988 113248.4999 49217.9988 107828.6249 55462.9988 104215.3749 L 55462.9988 82535.87489999998 C 67952.9988 75309.37489999998 80442.9988 75309.37489999998 92932.9988 82535.87489999998 L 92932.9988 104215.3749 C 99177.9988 107828.62489999998 105422.9988 113248.4999 111667.9988 120474.9999 L 102300.4988 176028.71865 111667.9988 250551.9999 C 102300.4988 239712.24990000002 92932.9988 232937.40615 83565.4988 230227.46865 L 92932.9988 212612.8749 C 80442.9988 205386.3749 67952.9988 205386.3749 55462.9988 212612.8749 L 64830.4988 230227.46865 C 55462.9988 232937.40615 46095.4988 239712.24990000002 36727.9988 250551.9999 Z M 55462.9988 212612.8749 L 55462.9988 104215.3749 M 92932.9988 104215.3749 L 92932.9988 212612.8749 M 64830.4988 208547.96865 L 64830.4988 230227.46865 M 83565.4988 230227.46865 L 83565.4988 208547.96865"></path><g direction="ltr"><g pointer-events="none" transform="matrix(381,0,0,380.99999999999994,59119.9988,140863.9374)"><g><g id="editor-ged1ef149_06-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 59119.9988 140863.9374 L 59119.9988 140863.9374 59119.9988 148864.9374 59119.9988 148864.9374 Z" pointer-events="all"></path></g></g></g><path stroke="#0096fd" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" pointer-events="none" d="M 238747.87589498807 125848.21002386636 L 238747.87589498807 192773.26968973747 127303.10262529833 192773.26968973747 127303.10262529833 125848.21002386636 Z"></path><path stroke="#0096fd" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 182880 125848 L 182880 120029"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 1163.9140811455848 0 C 1163.9140811455848 642.811997130027 642.8119971300271 1163.9140811455848 7.126682895371086e-14 1163.9140811455848 -642.8119971300268 1163.9140811455848 -1163.9140811455845 642.8119971300271 -1163.9140811455848 1.4253365790742172e-13 -1163.9140811455848 -642.8119971300268 -642.8119971300273 -1163.9140811455845 -2.1380048686113256e-13 -1163.9140811455848 642.8119971300267 -1163.9140811455848 1163.9140811455845 -642.8119971300273 1163.9140811455848 -2.8506731581484343e-13" transform="translate(182880,120028.63961813843)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(182880,125848.21002386636)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,125848.21002386636)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,159310.73985680193)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(182880,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,159310.73985680193)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,125848.21002386636)"></path></g><defs><filter id="myblur" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" stdDeviation="1524"></feGaussianBlur></filter></defs></svg>';
image.src = 'data:image/svg+xml,' + xml;
document.querySelector('#container').appendChild(image);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
image.src = canvas.toDataURL();

You need to set the dimension of the canvas to the dimensions of the image. Here's an update to your fiddle.
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
image.src = canvas.toDataURL();
}
Adding image.onload makes this work in Firefox.