Develop Reference

Simplify SVG (Vector Graphics) Path

Input is below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600">
<g enable-background="new">
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 " transform="matrix(1,0,0,-1,0,600)"/>
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 111.050781 268.679688 L 111.050781 265.421875 " transform="matrix(1,0,0,-1,0,600)"/>
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 268.679688 L 110.949219 265.421875 " transform="matrix(1,0,0,-1,0,600)"/>
</g>
</svg>
Expected Output is below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600">
<g enable-background="new">
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 265.42 L 109.73 265.69 L 108.7 266.41 L 108.01 267.46 L 107.78 268.68 "/>
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 111.05 268.68 L 111.05 265.42 "/>
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 268.68 L 110.95 265.42 "/>
</g>
</svg>
This is about simplifying and beautifying SVG path. I would like the expected output to have the elements of path transform, stroke-width, stroke-linecap, stroke-linejoin, fill stroke and d (rounded to 2 decimals for simplicity).
I have tried let svg_object_alt=document.querySelector('svg').outerHTML;, to convert svg as a string to be read and I am not sure how to extract all the information from it, to be formatted to the expected output? I would really appreciate any help I can obtain :)
I think that the stroke-colour can just hardcode the code number (#929292) into it instead of using the rgb colour :)

you can use that...
const mySvg_Paths = document.querySelectorAll('#my-svg > g > path');
for ( let attr of mySvg_Paths[2].attributes )
{
console.log(attr.name,'-->\n', attr.value);
}
// or
// console.log( 'outerHTML -->\n', mySvg_Paths[2].outerHTML );
// console.log( 'path.d -->\n', mySvg_Paths[2].getAttribute('d'));
#my-svg {
width : 800pt;
height : 600pt;
background : lightgreen;
}
#my-svg path {
fill : none;
stroke-width : 0.074;
stroke-linecap : round;
stroke-linejoin : round;
stroke : rgb(50.19989%, 50.19989%, 50.19989%);
stroke-opacity : 1;
stroke-miterlimit : 10;
}
<svg id="my-svg" viewBox="0 0 800 600">
<g enable-background="new">
<path
d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 "
transform="matrix(1,0,0,-1,0,600)"/>
<path
d="M 111.050781 268.679688 L 111.050781 265.421875 "
transform="matrix(1,0,0,-1,0,600)" />
<path
style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;"
d="M 110.949219 268.679688 L 110.949219 265.421875 "
transform="matrix(1,0,0,-1,0,600)"/>
</g>
</svg>
then, you can have a look to -> Use RegEx to parse a string with complicated delimiting
specialy this function:
function parseData(pathData)
{
var pieces = pathData.match(/([a-z]+[-.,\d ]*)/gi), i;
/* now parse each piece into its own array */
for (i=0; i<pieces.length; i++)
pieces[i] = pieces[i].match(/([a-z]+|-?[.\d]*\d)/gi);
return pieces;
}

All elements children as select options

fiddle: https://jsfiddle.net/7qr0pLxj/
How can I show all of an element's children as select options? (select options goal is to select a single object but also an array without any duplicates)
Here's an example, the list should show something like this.....
svg > defs
svg > g
svg > g > rect
svg > g > g
svg > g > g:nth-child(0)
svg > g > g:nth-child(1)
svg > g > g:nth-child(2)
svg > g > g:nth-child(0) > ellipse
svg > g > g > g
svg > g > g > g:nth-child(2)
svg > g > g:nth-child(0) > g
svg > g > g:nth-child(0) > g > circle
svg > g > g:nth-child(0) > g > circle > path:nth-child(0)
svg > g > g:nth-child(0) > path
$(".vector svg").each(function() {
$.each(this.children, function(i) {
$("#getItems").append("<option>svg > "+ this.tagName +"</option>");
$("#getItems").append("<option>svg > "+ this.tagName + ":nth-child("+ i +")" +"</option>");
var str = this.tagName;
$("#getItems").append("<option>svg > "+ str +" > "+ this.tagName +"</option>");
// has children
if (this.children) {
$.each(this.children, function(i) {
$("#getItems").append("<option>svg > "+ str +" > "+ this.tagName + ":nth-child("+ i +")" +"</option>");
});
var str = this.tagName;
$("#getItems").append("<option>svg > "+ str +" > "+ this.tagName +"</option>");
// are there more children?
if (this.children) {
$.each(this.children, function(i) {
$("#getItems").append("<option>svg > "+ str +" > "+ this.tagName + ":nth-child("+ i +")" +"</option>");
});
}
}
});
});
<select id="getItems"></select>
<div class="vector">
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<!-- Generator: Gravit.io -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 1080 1080">
<defs>
<clipPath id="_clipPath_MxF8Dkiwk1DE61ESpuAKmuW45DuiKU6M">
<rect width="1080" height="1080"></rect>
</clipPath>
</defs>
<g clip-path="url(#_clipPath_MxF8Dkiwk1DE61ESpuAKmuW45DuiKU6M)">
<rect x="0" y="0" width="1080" height="1080" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,233,75)"></rect>
<g>
<ellipse cx="-230.50000000000034" cy="759.5" rx="340.49999999999966" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse>
<g>
<circle cx="-230.5000000000004" cy="772.0000000000001" r="257.99999999999994" fill="rgb(51,48,94)"></circle>
<path d="M -361.2 470.15 L -101.8 470.15 C -91.424 470.15 -83 478.574 -83 488.95 L -83 488.95 C -83 499.326 -91.424 507.75 -101.8 507.75 L -361.2 507.75 C -371.576 507.75 -380 499.326 -380 488.95 L -380 488.95 C -380 478.574 -371.576 470.15 -361.2 470.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path>
<path d="M -231.5 312 L -231.5 312 C -162.787 312 -107 367.787 -107 436.5 L -107 570.5 C -107 639.213 -162.787 695 -231.5 695 L -231.5 695 C -300.213 695 -356 639.213 -356 570.5 L -356 436.5 C -356 367.787 -300.213 312 -231.5 312 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path>
<path d=" M -233.068 335 L -229.932 335 C -170.049 335 -121.432 383.617 -121.432 443.5 L -121.432 522 C -192.811 575.333 -266.179 575.343 -341.568 522 L -341.568 443.5 C -341.568 383.617 -292.951 335 -233.068 335 Z " fill="rgb(246,168,117)"></path>
<ellipse cx="-229.49999999999994" cy="556.9999999999999" rx="55.50000000000006" ry="33" fill="rgb(94,67,60)"></ellipse>
<circle cx="-270" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle>
<circle cx="-189" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle>
<path d="M -229 475 L -229 475 C -218.514 475 -210 483.514 -210 494 L -210 521.5 C -210 531.986 -218.514 540.5 -229 540.5 L -229 540.5 C -239.486 540.5 -248 531.986 -248 521.5 L -248 494 C -248 483.514 -239.486 475 -229 475 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path>
<path d=" M -108.403 417.94 C -117.354 358.012 -169.096 312 -231.5 312 L -231.5 312 C -293.904 312 -345.646 358.012 -354.597 417.94 C -318.826 429.713 -276.644 436.5 -231.5 436.5 C -186.356 436.5 -144.174 429.713 -108.403 417.94 Z " fill="rgb(94,67,60)"></path>
<path d=" M -258 557 L -201 557 L -201 568.5 C -201 580.366 -210.634 590 -222.5 590 L -236.5 590 C -248.366 590 -258 580.366 -258 568.5 L -258 557 Z " fill="rgb(255,254,255)"></path>
</g>
<path d=" M -571 759.5 L -571 1080 L 110 1080 L 110 759.5 L 110 759.5 C 110 803.377 -42.573 839 -230.5 839 C -418.427 839 -571 803.377 -571 759.5 L -571 759.5 Z " fill="rgb(255,233,75)"></path>
</g>
<g>
<ellipse cx="539.9999999999998" cy="759.5" rx="340.4999999999998" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse>
<g>
<circle cx="539.9999999999998" cy="772" r="258" fill="rgb(51,48,94)"></circle>
<path d="M 409.3 470.15 L 668.7 470.15 C 679.076 470.15 687.5 478.574 687.5 488.95 L 687.5 488.95 C 687.5 499.326 679.076 507.75 668.7 507.75 L 409.3 507.75 C 398.924 507.75 390.5 499.326 390.5 488.95 L 390.5 488.95 C 390.5 478.574 398.924 470.15 409.3 470.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path>
<path d="M 539 312 L 539 312 C 607.713 312 663.5 367.787 663.5 436.5 L 663.5 570.5 C 663.5 639.213 607.713 695 539 695 L 539 695 C 470.287 695 414.5 639.213 414.5 570.5 L 414.5 436.5 C 414.5 367.787 470.287 312 539 312 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path>
<path d=" M 537.432 335 L 540.568 335 C 600.451 335 649.068 383.617 649.068 443.5 L 649.068 522 C 577.689 575.333 504.321 575.343 428.932 522 L 428.932 443.5 C 428.932 383.617 477.549 335 537.432 335 Z " fill="rgb(246,168,117)"></path>
<ellipse cx="541.0000000000002" cy="557" rx="55.50000000000003" ry="33" fill="rgb(94,67,60)"></ellipse>
<circle cx="500.5" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle>
<circle cx="581.5" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle>
<path d="M 541.5 475 L 541.5 475 C 551.986 475 560.5 483.514 560.5 494 L 560.5 521.5 C 560.5 531.986 551.986 540.5 541.5 540.5 L 541.5 540.5 C 531.014 540.5 522.5 531.986 522.5 521.5 L 522.5 494 C 522.5 483.514 531.014 475 541.5 475 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path>
<path d=" M 662.097 417.94 C 653.146 358.012 601.404 312 539 312 L 539 312 C 476.596 312 424.854 358.012 415.903 417.94 C 451.674 429.713 493.856 436.5 539 436.5 C 584.144 436.5 626.326 429.713 662.097 417.94 Z " fill="rgb(94,67,60)"></path>
<path d=" M 512.5 557 L 569.5 557 L 569.5 568.5 C 569.5 580.366 559.866 590 548 590 L 534 590 C 522.134 590 512.5 580.366 512.5 568.5 L 512.5 557 Z " fill="rgb(255,254,255)"></path>
</g>
<path d=" M 199.5 759.5 L 199.5 1080 L 880.5 1080 L 880.5 759.5 L 880.5 759.5 C 880.5 803.377 727.927 839 540 839 C 352.073 839 199.5 803.377 199.5 759.5 L 199.5 759.5 Z " fill="rgb(255,233,75)"></path>
</g>
<g>
<ellipse cx="1310.4999999999993" cy="759.5" rx="340.4999999999998" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse>
<g>
<circle cx="1310.4999999999995" cy="1299" r="258" fill="rgb(51,48,94)"></circle>
<path d="M 1179.8 997.15 L 1439.2 997.15 C 1449.576 997.15 1458 1005.574 1458 1015.95 L 1458 1015.95 C 1458 1026.326 1449.576 1034.75 1439.2 1034.75 L 1179.8 1034.75 C 1169.424 1034.75 1161 1026.326 1161 1015.95 L 1161 1015.95 C 1161 1005.574 1169.424 997.15 1179.8 997.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path>
<path d="M 1309.5 839 L 1309.5 839 C 1378.213 839 1434 894.787 1434 963.5 L 1434 1097.5 C 1434 1166.213 1378.213 1222 1309.5 1222 L 1309.5 1222 C 1240.787 1222 1185 1166.213 1185 1097.5 L 1185 963.5 C 1185 894.787 1240.787 839 1309.5 839 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path>
<path d=" M 1307.932 862 L 1311.068 862 C 1370.951 862 1419.568 910.617 1419.568 970.5 L 1419.568 1049 C 1348.189 1102.333 1274.821 1102.343 1199.432 1049 L 1199.432 970.5 C 1199.432 910.617 1248.049 862 1307.932 862 Z " fill="rgb(246,168,117)"></path>
<ellipse cx="1311.5" cy="1084" rx="55.5" ry="33" fill="rgb(94,67,60)"></ellipse>
<circle cx="1271" cy="1021" r="15" fill="rgb(47,52,59)"></circle>
<circle cx="1352.0000000000005" cy="1021" r="15" fill="rgb(47,52,59)"></circle>
<path d="M 1312 1002 L 1312 1002 C 1322.486 1002 1331 1010.514 1331 1021 L 1331 1048.5 C 1331 1058.986 1322.486 1067.5 1312 1067.5 L 1312 1067.5 C 1301.514 1067.5 1293 1058.986 1293 1048.5 L 1293 1021 C 1293 1010.514 1301.514 1002 1312 1002 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path>
<path d=" M 1432.597 944.94 C 1423.646 885.012 1371.904 839 1309.5 839 L 1309.5 839 C 1247.096 839 1195.354 885.012 1186.403 944.94 C 1222.174 956.713 1264.356 963.5 1309.5 963.5 C 1354.644 963.5 1396.826 956.713 1432.597 944.94 Z " fill="rgb(94,67,60)"></path>
<path d=" M 1283 1084 L 1340 1084 L 1340 1095.5 C 1340 1107.366 1330.366 1117 1318.5 1117 L 1304.5 1117 C 1292.634 1117 1283 1107.366 1283 1095.5 L 1283 1084 Z " fill="rgb(255,254,255)"></path>
</g>
<path d=" M 970 759.5 L 970 1080 L 1651 1080 L 1651 759.5 L 1651 759.5 C 1651 803.377 1498.427 839 1310.5 839 C 1122.573 839 970 803.377 970 759.5 L 970 759.5 Z " fill="rgb(255,233,75)"></path>
</g>
<g>
<ellipse cx="2080.999999999999" cy="759.5" rx="340.49999999999966" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse>
<g>
<circle cx="2080.999999999999" cy="1299" r="258" fill="rgb(51,48,94)"></circle>
<path d="M 1950.3 997.15 L 2209.7 997.15 C 2220.076 997.15 2228.5 1005.574 2228.5 1015.95 L 2228.5 1015.95 C 2228.5 1026.326 2220.076 1034.75 2209.7 1034.75 L 1950.3 1034.75 C 1939.924 1034.75 1931.5 1026.326 1931.5 1015.95 L 1931.5 1015.95 C 1931.5 1005.574 1939.924 997.15 1950.3 997.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path>
<path d="M 2080 839 L 2080 839 C 2148.713 839 2204.5 894.787 2204.5 963.5 L 2204.5 1097.5 C 2204.5 1166.213 2148.713 1222 2080 1222 L 2080 1222 C 2011.287 1222 1955.5 1166.213 1955.5 1097.5 L 1955.5 963.5 C 1955.5 894.787 2011.287 839 2080 839 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path>
<path d=" M 2078.432 862 L 2081.568 862 C 2141.451 862 2190.068 910.617 2190.068 970.5 L 2190.068 1049 C 2118.689 1102.333 2045.321 1102.343 1969.932 1049 L 1969.932 970.5 C 1969.932 910.617 2018.549 862 2078.432 862 Z " fill="rgb(246,168,117)"></path>
<ellipse cx="2082" cy="1084" rx="55.5" ry="33" fill="rgb(94,67,60)"></ellipse>
<circle cx="2041.5" cy="1021" r="15.000000000000114" fill="rgb(47,52,59)"></circle>
<circle cx="2122.5" cy="1021" r="15" fill="rgb(47,52,59)"></circle>
<path d="M 2082.5 1002 L 2082.5 1002 C 2092.986 1002 2101.5 1010.514 2101.5 1021 L 2101.5 1048.5 C 2101.5 1058.986 2092.986 1067.5 2082.5 1067.5 L 2082.5 1067.5 C 2072.014 1067.5 2063.5 1058.986 2063.5 1048.5 L 2063.5 1021 C 2063.5 1010.514 2072.014 1002 2082.5 1002 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path>
<path d=" M 2203.097 944.94 C 2194.146 885.012 2142.404 839 2080 839 L 2080 839 C 2017.596 839 1965.854 885.012 1956.903 944.94 C 1992.674 956.713 2034.856 963.5 2080 963.5 C 2125.144 963.5 2167.326 956.713 2203.097 944.94 Z " fill="rgb(94,67,60)"></path>
<path d=" M 2053.5 1084 L 2110.5 1084 L 2110.5 1095.5 C 2110.5 1107.366 2100.866 1117 2089 1117 L 2075 1117 C 2063.134 1117 2053.5 1107.366 2053.5 1095.5 L 2053.5 1084 Z " fill="rgb(255,254,255)"></path>
</g>
<path d=" M 1740.5 759.5 L 1740.5 1080 L 2421.5 1080 L 2421.5 759.5 L 2421.5 759.5 C 2421.5 803.377 2268.927 839 2081 839 C 1893.073 839 1740.5 803.377 1740.5 759.5 L 1740.5 759.5 Z " fill="rgb(255,233,75)"></path>
</g>
</g>
</svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

One way you achieve this is by:
Finding all elements using *
Get parents elements using .parentsUntil()
Check each parent to see if there are siblings.
If there are siblings add :nth-child() to tag
Otherwise just add tag
See this example:
jQuery("svg").find("*").each(function() {
let item = [];
_this = jQuery(this);
_this.parentsUntil('.vector').addBack().each(function(i, e) {
const el = jQuery(e);
const propName = el.prop("tagName");
const siblings = el.siblings(propName);
if (siblings.length > 0) {
const index = el.index();
item.push(propName + `:nth-child(${index})`);
} else {
item.push(propName);
}
});
let selector = item.join(" > ");
$("#getItems").append("<option>" + selector + "</option>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="getItems"></select>
<div class="vector">
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<!-- Generator: Gravit.io -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 1080 1080">
<defs>
<clipPath id="_clipPath_MxF8Dkiwk1DE61ESpuAKmuW45DuiKU6M">
<rect width="1080" height="1080"></rect>
</clipPath>
</defs>
<g clip-path="url(#_clipPath_MxF8Dkiwk1DE61ESpuAKmuW45DuiKU6M)">
<rect x="0" y="0" width="1080" height="1080" transform="matrix(1,0,0,1,0,0)" fill="rgb(255,233,75)"></rect>
<g>
<ellipse cx="-230.50000000000034" cy="759.5" rx="340.49999999999966" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse>
<g>
<circle cx="-230.5000000000004" cy="772.0000000000001" r="257.99999999999994" fill="rgb(51,48,94)"></circle>
<path d="M -361.2 470.15 L -101.8 470.15 C -91.424 470.15 -83 478.574 -83 488.95 L -83 488.95 C -83 499.326 -91.424 507.75 -101.8 507.75 L -361.2 507.75 C -371.576 507.75 -380 499.326 -380 488.95 L -380 488.95 C -380 478.574 -371.576 470.15 -361.2 470.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path>
<path d="M -231.5 312 L -231.5 312 C -162.787 312 -107 367.787 -107 436.5 L -107 570.5 C -107 639.213 -162.787 695 -231.5 695 L -231.5 695 C -300.213 695 -356 639.213 -356 570.5 L -356 436.5 C -356 367.787 -300.213 312 -231.5 312 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path>
<path d=" M -233.068 335 L -229.932 335 C -170.049 335 -121.432 383.617 -121.432 443.5 L -121.432 522 C -192.811 575.333 -266.179 575.343 -341.568 522 L -341.568 443.5 C -341.568 383.617 -292.951 335 -233.068 335 Z " fill="rgb(246,168,117)"></path>
<ellipse cx="-229.49999999999994" cy="556.9999999999999" rx="55.50000000000006" ry="33" fill="rgb(94,67,60)"></ellipse>
<circle cx="-270" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle>
<circle cx="-189" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle>
<path d="M -229 475 L -229 475 C -218.514 475 -210 483.514 -210 494 L -210 521.5 C -210 531.986 -218.514 540.5 -229 540.5 L -229 540.5 C -239.486 540.5 -248 531.986 -248 521.5 L -248 494 C -248 483.514 -239.486 475 -229 475 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path>
<path d=" M -108.403 417.94 C -117.354 358.012 -169.096 312 -231.5 312 L -231.5 312 C -293.904 312 -345.646 358.012 -354.597 417.94 C -318.826 429.713 -276.644 436.5 -231.5 436.5 C -186.356 436.5 -144.174 429.713 -108.403 417.94 Z " fill="rgb(94,67,60)"></path>
<path d=" M -258 557 L -201 557 L -201 568.5 C -201 580.366 -210.634 590 -222.5 590 L -236.5 590 C -248.366 590 -258 580.366 -258 568.5 L -258 557 Z " fill="rgb(255,254,255)"></path>
</g>
<path d=" M -571 759.5 L -571 1080 L 110 1080 L 110 759.5 L 110 759.5 C 110 803.377 -42.573 839 -230.5 839 C -418.427 839 -571 803.377 -571 759.5 L -571 759.5 Z " fill="rgb(255,233,75)"></path>
</g>
<g>
<ellipse cx="539.9999999999998" cy="759.5" rx="340.4999999999998" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse>
<g>
<circle cx="539.9999999999998" cy="772" r="258" fill="rgb(51,48,94)"></circle>
<path d="M 409.3 470.15 L 668.7 470.15 C 679.076 470.15 687.5 478.574 687.5 488.95 L 687.5 488.95 C 687.5 499.326 679.076 507.75 668.7 507.75 L 409.3 507.75 C 398.924 507.75 390.5 499.326 390.5 488.95 L 390.5 488.95 C 390.5 478.574 398.924 470.15 409.3 470.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path>
<path d="M 539 312 L 539 312 C 607.713 312 663.5 367.787 663.5 436.5 L 663.5 570.5 C 663.5 639.213 607.713 695 539 695 L 539 695 C 470.287 695 414.5 639.213 414.5 570.5 L 414.5 436.5 C 414.5 367.787 470.287 312 539 312 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path>
<path d=" M 537.432 335 L 540.568 335 C 600.451 335 649.068 383.617 649.068 443.5 L 649.068 522 C 577.689 575.333 504.321 575.343 428.932 522 L 428.932 443.5 C 428.932 383.617 477.549 335 537.432 335 Z " fill="rgb(246,168,117)"></path>
<ellipse cx="541.0000000000002" cy="557" rx="55.50000000000003" ry="33" fill="rgb(94,67,60)"></ellipse>
<circle cx="500.5" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle>
<circle cx="581.5" cy="494.00000000000006" r="15" fill="rgb(47,52,59)"></circle>
<path d="M 541.5 475 L 541.5 475 C 551.986 475 560.5 483.514 560.5 494 L 560.5 521.5 C 560.5 531.986 551.986 540.5 541.5 540.5 L 541.5 540.5 C 531.014 540.5 522.5 531.986 522.5 521.5 L 522.5 494 C 522.5 483.514 531.014 475 541.5 475 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path>
<path d=" M 662.097 417.94 C 653.146 358.012 601.404 312 539 312 L 539 312 C 476.596 312 424.854 358.012 415.903 417.94 C 451.674 429.713 493.856 436.5 539 436.5 C 584.144 436.5 626.326 429.713 662.097 417.94 Z " fill="rgb(94,67,60)"></path>
<path d=" M 512.5 557 L 569.5 557 L 569.5 568.5 C 569.5 580.366 559.866 590 548 590 L 534 590 C 522.134 590 512.5 580.366 512.5 568.5 L 512.5 557 Z " fill="rgb(255,254,255)"></path>
</g>
<path d=" M 199.5 759.5 L 199.5 1080 L 880.5 1080 L 880.5 759.5 L 880.5 759.5 C 880.5 803.377 727.927 839 540 839 C 352.073 839 199.5 803.377 199.5 759.5 L 199.5 759.5 Z " fill="rgb(255,233,75)"></path>
</g>
<g>
<ellipse cx="1310.4999999999993" cy="759.5" rx="340.4999999999998" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse>
<g>
<circle cx="1310.4999999999995" cy="1299" r="258" fill="rgb(51,48,94)"></circle>
<path d="M 1179.8 997.15 L 1439.2 997.15 C 1449.576 997.15 1458 1005.574 1458 1015.95 L 1458 1015.95 C 1458 1026.326 1449.576 1034.75 1439.2 1034.75 L 1179.8 1034.75 C 1169.424 1034.75 1161 1026.326 1161 1015.95 L 1161 1015.95 C 1161 1005.574 1169.424 997.15 1179.8 997.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path>
<path d="M 1309.5 839 L 1309.5 839 C 1378.213 839 1434 894.787 1434 963.5 L 1434 1097.5 C 1434 1166.213 1378.213 1222 1309.5 1222 L 1309.5 1222 C 1240.787 1222 1185 1166.213 1185 1097.5 L 1185 963.5 C 1185 894.787 1240.787 839 1309.5 839 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path>
<path d=" M 1307.932 862 L 1311.068 862 C 1370.951 862 1419.568 910.617 1419.568 970.5 L 1419.568 1049 C 1348.189 1102.333 1274.821 1102.343 1199.432 1049 L 1199.432 970.5 C 1199.432 910.617 1248.049 862 1307.932 862 Z " fill="rgb(246,168,117)"></path>
<ellipse cx="1311.5" cy="1084" rx="55.5" ry="33" fill="rgb(94,67,60)"></ellipse>
<circle cx="1271" cy="1021" r="15" fill="rgb(47,52,59)"></circle>
<circle cx="1352.0000000000005" cy="1021" r="15" fill="rgb(47,52,59)"></circle>
<path d="M 1312 1002 L 1312 1002 C 1322.486 1002 1331 1010.514 1331 1021 L 1331 1048.5 C 1331 1058.986 1322.486 1067.5 1312 1067.5 L 1312 1067.5 C 1301.514 1067.5 1293 1058.986 1293 1048.5 L 1293 1021 C 1293 1010.514 1301.514 1002 1312 1002 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path>
<path d=" M 1432.597 944.94 C 1423.646 885.012 1371.904 839 1309.5 839 L 1309.5 839 C 1247.096 839 1195.354 885.012 1186.403 944.94 C 1222.174 956.713 1264.356 963.5 1309.5 963.5 C 1354.644 963.5 1396.826 956.713 1432.597 944.94 Z " fill="rgb(94,67,60)"></path>
<path d=" M 1283 1084 L 1340 1084 L 1340 1095.5 C 1340 1107.366 1330.366 1117 1318.5 1117 L 1304.5 1117 C 1292.634 1117 1283 1107.366 1283 1095.5 L 1283 1084 Z " fill="rgb(255,254,255)"></path>
</g>
<path d=" M 970 759.5 L 970 1080 L 1651 1080 L 1651 759.5 L 1651 759.5 C 1651 803.377 1498.427 839 1310.5 839 C 1122.573 839 970 803.377 970 759.5 L 970 759.5 Z " fill="rgb(255,233,75)"></path>
</g>
<g>
<ellipse cx="2080.999999999999" cy="759.5" rx="340.49999999999966" ry="79.50000000000011" fill="rgb(251,201,57)"></ellipse>
<g>
<circle cx="2080.999999999999" cy="1299" r="258" fill="rgb(51,48,94)"></circle>
<path d="M 1950.3 997.15 L 2209.7 997.15 C 2220.076 997.15 2228.5 1005.574 2228.5 1015.95 L 2228.5 1015.95 C 2228.5 1026.326 2220.076 1034.75 2209.7 1034.75 L 1950.3 1034.75 C 1939.924 1034.75 1931.5 1026.326 1931.5 1015.95 L 1931.5 1015.95 C 1931.5 1005.574 1939.924 997.15 1950.3 997.15 Z" style="stroke:none;fill:#F38D63;stroke-miterlimit:10;"></path>
<path d="M 2080 839 L 2080 839 C 2148.713 839 2204.5 894.787 2204.5 963.5 L 2204.5 1097.5 C 2204.5 1166.213 2148.713 1222 2080 1222 L 2080 1222 C 2011.287 1222 1955.5 1166.213 1955.5 1097.5 L 1955.5 963.5 C 1955.5 894.787 2011.287 839 2080 839 Z" style="stroke:none;fill:#5E433C;stroke-miterlimit:10;"></path>
<path d=" M 2078.432 862 L 2081.568 862 C 2141.451 862 2190.068 910.617 2190.068 970.5 L 2190.068 1049 C 2118.689 1102.333 2045.321 1102.343 1969.932 1049 L 1969.932 970.5 C 1969.932 910.617 2018.549 862 2078.432 862 Z " fill="rgb(246,168,117)"></path>
<ellipse cx="2082" cy="1084" rx="55.5" ry="33" fill="rgb(94,67,60)"></ellipse>
<circle cx="2041.5" cy="1021" r="15.000000000000114" fill="rgb(47,52,59)"></circle>
<circle cx="2122.5" cy="1021" r="15" fill="rgb(47,52,59)"></circle>
<path d="M 2082.5 1002 L 2082.5 1002 C 2092.986 1002 2101.5 1010.514 2101.5 1021 L 2101.5 1048.5 C 2101.5 1058.986 2092.986 1067.5 2082.5 1067.5 L 2082.5 1067.5 C 2072.014 1067.5 2063.5 1058.986 2063.5 1048.5 L 2063.5 1021 C 2063.5 1010.514 2072.014 1002 2082.5 1002 Z" style="stroke:none;fill:#F38E65;stroke-miterlimit:10;"></path>
<path d=" M 2203.097 944.94 C 2194.146 885.012 2142.404 839 2080 839 L 2080 839 C 2017.596 839 1965.854 885.012 1956.903 944.94 C 1992.674 956.713 2034.856 963.5 2080 963.5 C 2125.144 963.5 2167.326 956.713 2203.097 944.94 Z " fill="rgb(94,67,60)"></path>
<path d=" M 2053.5 1084 L 2110.5 1084 L 2110.5 1095.5 C 2110.5 1107.366 2100.866 1117 2089 1117 L 2075 1117 C 2063.134 1117 2053.5 1107.366 2053.5 1095.5 L 2053.5 1084 Z " fill="rgb(255,254,255)"></path>
</g>
<path d=" M 1740.5 759.5 L 1740.5 1080 L 2421.5 1080 L 2421.5 759.5 L 2421.5 759.5 C 2421.5 803.377 2268.927 839 2081 839 C 1893.073 839 1740.5 803.377 1740.5 759.5 L 1740.5 759.5 Z " fill="rgb(255,233,75)"></path>
</g>
</g>
</svg>
</div>

I solved your problem with recursive function and I'm sharing it on fiddle and here too.
(console.log(myMap); is for testing)
Here is fiddle link (I changed just javascript side)
var generateChildrenMap=function(element){
var childrenNames=Array();
takeChildren(childrenNames,element,element.prop('tagName'));
return childrenNames;
};
var takeChildren=function(childrenNames,element,path){
var children=element.children();
var tempPath;
for(var i=0;i<children.length;i++){
var child=children[i];
tempPath=path+'>'+child.tagName;
childrenNames.push(tempPath);
if($(child).children().length>0){
takeChildren(childrenNames,$(child),tempPath);
}
}
}
var generateSelectWithMap=function(element,map){
element.html('');
for(var i=0;i<map.length;i++){
var option=$('<option>',{
'text':map[i],
'data-id':i
});
element.append(option);
}
}
var myMap=generateChildrenMap($(".vector svg"));
generateSelectWithMap($("#getItems"),myMap);
console.log(myMap);

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 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