I'm getting defeated by some code and I need some help. I'm aware that you cannot edit external SVG files in JS so the idea here is to convert SVG code and remake it in JavaScript.
I cannot find any references on how to make this conversion, all I can find is SVG to jsx however I'm writing vanilla JavaScript not using React framework.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="482.026" height="172.554" viewBox="0 0 482.026 172.554">
<defs>
<filter id="layerOuter" x="0" y="35.6" width="364.473" height="100.059" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.459"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="layerBase" x="0" y="107.175" width="364.473" height="35.78" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur-2"/>
<feFlood flood-opacity="0.431"/>
<feComposite operator="in" in2="blur-2"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="frmMenu" transform="translate(-1395.974 -860.8)">
<g id="btnGroupLayers" transform="translate(0 -9)">
<g id="LayerBar">
<g transform="matrix(1, 0, 0, 1, 1395.97, 869.8)" filter="url(#layerOuter)">
<path id="layerOuter-2" data-name="layerOuter" d="M730.735,40.209q-.821-5.562-7.2-5.562H398.941q-6.382,0-7.112,5.562l-.182,1.732v60.177q0,7.294,7.294,7.294h324.59q7.294,0,7.294-7.294V41.941l-.091-1.732M388,102.574V41.941Q388,31,398.941,31h324.59q10.941,0,10.941,10.941v60.633q-.273,10.485-10.941,10.485H398.941q-10.668,0-10.941-10.485" transform="translate(-379 10.6)" fill="#9b9dad"/>
</g>
<g transform="matrix(1, 0, 0, 1, 1395.97, 869.8)" filter="url(#layerBase)">
<path id="layerBase-2" data-name="layerBase" d="M734.473,70.25v6.838q0,10.941-10.941,10.941H398.941Q388,88.03,388,77.088V70.25q.274,10.485,10.941,10.485h324.59q10.668,0,10.941-10.485" transform="translate(-379 42.92)" fill="#616374"/>
</g>
<path id="layerMid" d="M729.088,38.562l.091,1.732v60.177q0,7.294-7.294,7.294H397.294q-7.294,0-7.294-7.294V40.294l.182-1.732Q390.912,33,397.294,33h324.59q6.382,0,7.2,5.562m-3.556,1.732-.091-1.276.091.091q-.638-2.462-3.647-2.462H463.853l-5.106,5.106-5.106-5.106h-17.05l-4.1,4.1-4.1-4.1H397.294q-3.009,0-3.465,2.371l-.091.365-.091.912V83.877l5.015,5.015-5.015,5.015v6.565q0,3.647,3.647,3.647H564.878l5.015-5.015,5.015,5.015H652.5l2.827-2.826,2.826,2.826h63.733q3.647,0,3.647-3.647V58.712l-4.377-4.376,4.377-4.377V40.294" transform="translate(1018.621 882.048)" fill="#727685"/>
<path id="layerInner" d="M723.885,38.647v9.665l-4.377,4.377,4.377,4.376V98.824q0,3.647-3.647,3.647H656.5l-2.826-2.826-2.826,2.826H573.26l-5.015-5.015-5.015,5.015H395.647q-3.647,0-3.647-3.647V92.259l5.015-5.015L392,82.23V38.647l.091-.912.091-.365Q392.638,35,395.647,35h31.091l4.1,4.1,4.1-4.1h17.05l5.106,5.106L462.206,35H720.237q3.009,0,3.647,2.462l-.091-.091.091,1.276" transform="translate(1020.268 883.694)" fill="#838796"/>
</g>
<g id="optionLayer04" transform="translate(213)">
<path id="optionInt04" d="M812.1,156.3q.25-1.3,1.9-1.3h33a1.8,1.8,0,0,1,2,1.35l-.05-.05.05.7v5.3l-2.4,2.4,2.4,2.4V190a1.768,1.768,0,0,1-2,2H814a1.768,1.768,0,0,1-2-2v-3.6l2.75-2.75L812,180.9V157l.05-.5.05-.2" transform="translate(622 776)" fill="#d3bf8f"/>
<path id="optionOuter04" d="M808,190.25V157q0-6,6-6h33q6,0,6,6v33.25q-.15,5.75-6,5.75H814q-5.85,0-6-5.75m2.1-34.2-.1.95v33q0,4,4,4h33q4,0,4-4V157l-.05-.95Q850.5,153,847,153H814q-3.5,0-3.9,3.05" transform="translate(622 776)" fill="#d9cdaf"/>
<path id="optionInner04" d="M810.1,156.05q.4-3.05,3.9-3.05h33q3.5,0,3.95,3.05l.05.95v33q0,4-4,4H814q-4,0-4-4V157l.1-.95m2,.25-.05.2-.05.5v23.9l2.75,2.75L812,186.4V190a1.768,1.768,0,0,0,2,2h33a1.768,1.768,0,0,0,2-2V167.1l-2.4-2.4,2.4-2.4V157l-.05-.7.05.05a1.8,1.8,0,0,0-2-1.35H814q-1.65,0-1.9,1.3" transform="translate(622 776)" fill="#b1a077"/>
<path id="optionBase04" d="M853,190.25V194q0,6-6,6H814q-6,0-6-6v-3.75q.15,5.75,6,5.75h33q5.85,0,6-5.75" transform="translate(622 776)" fill="#a3997f"/>
<path id="wind-solid" d="M1.375,8.25h13.75a4.125,4.125,0,0,0,0-8.25H13.75a1.375,1.375,0,0,0,0,2.75h1.375a1.375,1.375,0,0,1,0,2.75H1.375a1.375,1.375,0,0,0,0,2.75Zm5.5,5.5h-5.5a1.375,1.375,0,1,0,0,2.75h5.5a1.375,1.375,0,0,1,0,2.75H5.5A1.375,1.375,0,0,0,5.5,22H6.875a4.125,4.125,0,0,0,0-8.25Zm11-4.125H1.375a1.375,1.375,0,0,0,0,2.75h16.5a1.375,1.375,0,0,1,0,2.75H16.5a1.375,1.375,0,0,0,0,2.75h1.375a4.125,4.125,0,0,0,0-8.25Z" transform="translate(1441.5 938.167)" fill="#97714a"/>
</g>
<g id="optionLayer03" transform="translate(142)">
<path id="optionInt03" d="M812.1,156.3q.25-1.3,1.9-1.3h33a1.8,1.8,0,0,1,2,1.35l-.05-.05.05.7v5.3l-2.4,2.4,2.4,2.4V190a1.768,1.768,0,0,1-2,2H814a1.768,1.768,0,0,1-2-2v-3.6l2.75-2.75L812,180.9V157l.05-.5.05-.2" transform="translate(622 776)" fill="#d3bf8f"/>
<path id="optionOuter03" d="M808,190.25V157q0-6,6-6h33q6,0,6,6v33.25q-.15,5.75-6,5.75H814q-5.85,0-6-5.75m2.1-34.2-.1.95v33q0,4,4,4h33q4,0,4-4V157l-.05-.95Q850.5,153,847,153H814q-3.5,0-3.9,3.05" transform="translate(622 776)" fill="#d9cdaf"/>
<path id="optionInner03" d="M810.1,156.05q.4-3.05,3.9-3.05h33q3.5,0,3.95,3.05l.05.95v33q0,4-4,4H814q-4,0-4-4V157l.1-.95m2,.25-.05.2-.05.5v23.9l2.75,2.75L812,186.4V190a1.768,1.768,0,0,0,2,2h33a1.768,1.768,0,0,0,2-2V167.1l-2.4-2.4,2.4-2.4V157l-.05-.7.05.05a1.8,1.8,0,0,0-2-1.35H814q-1.65,0-1.9,1.3" transform="translate(622 776)" fill="#b1a077"/>
<path id="optionBase03" d="M853,190.25V194q0,6-6,6H814q-6,0-6-6v-3.75q.15,5.75,6,5.75h33q5.85,0,6-5.75" transform="translate(622 776)" fill="#a3997f"/>
<path id="feather-pointed-solid" d="M19.191,10.362l-4.975,2.015h4.046a16.584,16.584,0,0,1-1.11,1.848L11.47,16.5h3.674C12.6,18.768,8.963,19.955,3.8,18.773L.876,21.7a1.028,1.028,0,0,1-1.456,0,1.032,1.032,0,0,1,0-1.458L10.289,9.353a.68.68,0,0,0-1.018-.9L2.04,15.7C.21,2.495,14.894.351,19.7.006a1.323,1.323,0,0,1,1.418,1.42A31.442,31.442,0,0,1,19.191,10.362Z" transform="translate(1442.027 938.165)" fill="#97714a"/>
</g>
<g id="optionLayer02" transform="translate(71)">
<path id="optionInt02" d="M812.1,156.3q.25-1.3,1.9-1.3h33a1.8,1.8,0,0,1,2,1.35l-.05-.05.05.7v5.3l-2.4,2.4,2.4,2.4V190a1.768,1.768,0,0,1-2,2H814a1.768,1.768,0,0,1-2-2v-3.6l2.75-2.75L812,180.9V157l.05-.5.05-.2" transform="translate(622 776)" fill="#d3bf8f"/>
<path id="optionOuter02" d="M808,190.25V157q0-6,6-6h33q6,0,6,6v33.25q-.15,5.75-6,5.75H814q-5.85,0-6-5.75m2.1-34.2-.1.95v33q0,4,4,4h33q4,0,4-4V157l-.05-.95Q850.5,153,847,153H814q-3.5,0-3.9,3.05" transform="translate(622 776)" fill="#d9cdaf"/>
<path id="optionInner02" d="M810.1,156.05q.4-3.05,3.9-3.05h33q3.5,0,3.95,3.05l.05.95v33q0,4-4,4H814q-4,0-4-4V157l.1-.95m2,.25-.05.2-.05.5v23.9l2.75,2.75L812,186.4V190a1.768,1.768,0,0,0,2,2h33a1.768,1.768,0,0,0,2-2V167.1l-2.4-2.4,2.4-2.4V157l-.05-.7.05.05a1.8,1.8,0,0,0-2-1.35H814q-1.65,0-1.9,1.3" transform="translate(622 776)" fill="#b1a077"/>
<path id="optionBase02" d="M853,190.25V194q0,6-6,6H814q-6,0-6-6v-3.75q.15,5.75,6,5.75h33q5.85,0,6-5.75" transform="translate(622 776)" fill="#a3997f"/>
<path id="clock-rotate-left-solid" d="M11,0A11,11,0,1,1,4.714,20.028a1.375,1.375,0,0,1,1.573-2.256A8.25,8.25,0,1,0,11,2.75,8.165,8.165,0,0,0,5.165,5.165L6.488,6.488A1.032,1.032,0,0,1,5.762,8.25H1.031A1.03,1.03,0,0,1,0,7.219V2.49A1.031,1.031,0,0,1,1.76,1.76L3.222,3.222A10.948,10.948,0,0,1,10.961,0Zm0,5.5a1.029,1.029,0,0,1,1.031,1.031v4.043l2.754,2.789a1.006,1.006,0,0,1-1.422,1.422L10.27,11.692a.883.883,0,0,1-.3-.692V6.531A1.029,1.029,0,0,1,11,5.5Z" transform="translate(1441.146 938.167)" fill="#97714a"/>
</g>
<g id="optionLayer01">
<path id="optionInt01" d="M812.1,156.3q.25-1.3,1.9-1.3h33a1.8,1.8,0,0,1,2,1.35l-.05-.05.05.7v5.3l-2.4,2.4,2.4,2.4V190a1.768,1.768,0,0,1-2,2H814a1.768,1.768,0,0,1-2-2v-3.6l2.75-2.75L812,180.9V157l.05-.5.05-.2" transform="translate(622 776)" fill="#d3bf8f"/>
<path id="optionOuter01" d="M808,190.25V157q0-6,6-6h33q6,0,6,6v33.25q-.15,5.75-6,5.75H814q-5.85,0-6-5.75m2.1-34.2-.1.95v33q0,4,4,4h33q4,0,4-4V157l-.05-.95Q850.5,153,847,153H814q-3.5,0-3.9,3.05" transform="translate(622 776)" fill="#d9cdaf"/>
<path id="optionInner01" d="M810.1,156.05q.4-3.05,3.9-3.05h33q3.5,0,3.95,3.05l.05.95v33q0,4-4,4H814q-4,0-4-4V157l.1-.95m2,.25-.05.2-.05.5v23.9l2.75,2.75L812,186.4V190a1.768,1.768,0,0,0,2,2h33a1.768,1.768,0,0,0,2-2V167.1l-2.4-2.4,2.4-2.4V157l-.05-.7.05.05a1.8,1.8,0,0,0-2-1.35H814q-1.65,0-1.9,1.3" transform="translate(622 776)" fill="#b1a077"/>
<path id="optionBase01" d="M853,190.25V194q0,6-6,6H814q-6,0-6-6v-3.75q.15,5.75,6,5.75h33q5.85,0,6-5.75" transform="translate(622 776)" fill="#a3997f"/>
<path id="signs-post-solid" d="M16.175,1.375A1.419,1.419,0,0,1,17.587,0a1.4,1.4,0,0,1,1.451,1.375h6.767a.718.718,0,0,1,.5.2l2.117,2.063a.678.678,0,0,1,0,.972L26.3,6.673a.718.718,0,0,1-.5.2H9.117A1.419,1.419,0,0,1,7.706,5.5V2.75A1.42,1.42,0,0,1,9.117,1.375ZM27.508,13.75A1.392,1.392,0,0,1,26.1,15.125H9.45a.716.716,0,0,1-.5-.2L6.833,12.861a.674.674,0,0,1,0-.971L8.95,9.827a.757.757,0,0,1,.5-.241h6.726V8.211h2.863V9.586H26.1a1.418,1.418,0,0,1,1.412,1.375ZM17.587,22a1.418,1.418,0,0,1-1.412-1.375V16.5h2.863v4.125A1.4,1.4,0,0,1,17.587,22Z" transform="translate(1434.873 938.167)" fill="#97714a"/>
</g>
</g>
<g id="btnProfile" transform="translate(0 -9)">
<g id="Profile">
<path id="profileOuterRing" d="M258,516.742v-2.465q0-35.743,24.9-61.133l.247-.247q25.39-24.9,61.133-24.9t60.887,24.9v.247q25.39,25.39,25.39,61.133v2.465q-.986,34.264-25.39,58.422-25.144,25.39-60.887,25.39t-61.133-25.39H282.9q-23.911-24.157-24.9-58.422m86.277-79.128q-31.553,0-54.231,22.432-22.432,22.679-22.432,54.231,0,31.8,22.432,54.231,22.432,22.186,54.231,22.186,31.553,0,53.985-22.186l.246-.246q22.185-22.432,22.185-53.985,0-31.8-22.185-54.231-22.432-22.432-54.231-22.432" transform="translate(1447.446 441.8)" fill="#727685"/>
<path id="profileInnerRing" d="M336.613,429.95q31.8,0,54.231,22.432,22.185,22.432,22.185,54.231,0,31.553-22.185,53.985l-.246.246q-22.432,22.186-53.985,22.186-31.8,0-54.231-22.186-22.432-22.432-22.432-54.231,0-31.553,22.432-54.231,22.679-22.432,54.231-22.432m0,9.86q-27.855,0-47.576,19.227-19.228,19.72-19.227,47.575,0,27.609,19.227,47.082,19.72,19.72,47.576,19.72,27.609,0,47.082-19.72,19.72-19.474,19.721-47.082,0-27.855-19.721-47.575-19.474-19.227-47.082-19.227" transform="translate(1455.11 449.465)" fill="#9b9dad"/>
<path id="profileIcon" d="M328.753,431.95q27.608,0,47.082,19.227,19.72,19.72,19.72,47.575,0,27.609-19.72,47.082-19.474,19.72-47.082,19.72-27.855,0-47.576-19.72-19.228-19.474-19.227-47.082,0-27.855,19.227-47.575,19.72-19.227,47.576-19.227" transform="translate(1462.969 457.323)" fill="#838796"/>
</g>
<g id="DBConnected" transform="translate(74 62)">
<g id="Group_426" data-name="Group 426" transform="translate(13993 8796)">
<path id="Path_234" data-name="Path 234" d="M386.5,434.5a15.525,15.525,0,1,0-.05,22l.05-.05a15.633,15.633,0,0,0,0-21.95M358,446v-.5a17.072,17.072,0,0,1,5.05-12.4l.05-.05a17.687,17.687,0,0,1,24.75,0v.05A16.9,16.9,0,0,1,393,445.5v.5a17.506,17.506,0,0,1-29.9,11.85h-.05A16.962,16.962,0,0,1,358,446" transform="translate(-12586 -8285)" fill="#d9cdaf"/>
<path id="Path_235" data-name="Path 235" d="M386.5,434.5a15.633,15.633,0,0,1,0,21.95l-.05.05a15.525,15.525,0,1,1,.05-22m-1.45,1.35a13.1,13.1,0,0,0-9.55-3.9,13.322,13.322,0,0,0-13.55,13.55,13.486,13.486,0,0,0,13.55,13.55,13.658,13.658,0,0,0,13.55-13.55,13.151,13.151,0,0,0-4-9.65" transform="translate(-12586 -8285)" fill="#b1a077"/>
<path id="Path_236" data-name="Path 236" d="M385.05,435.85a13.151,13.151,0,0,1,4,9.65,13.658,13.658,0,0,1-13.55,13.55,13.486,13.486,0,0,1-13.55-13.55,13.322,13.322,0,0,1,13.55-13.55,13.1,13.1,0,0,1,9.55,3.9" transform="translate(-12586 -8285)" fill="#d3bf8f"/>
</g>
<path id="plug-circle-check-solid" d="M3.282,0A1.094,1.094,0,0,1,4.376,1.094V4.376H2.188V1.094A1.094,1.094,0,0,1,3.282,0ZM9.846,0A1.094,1.094,0,0,1,10.94,1.094V4.376H8.752V1.094A1.094,1.094,0,0,1,9.846,0Zm2.188,5.47a1.093,1.093,0,0,1,1.094,1.094A1.307,1.307,0,0,1,13.1,6.8a6,6,0,0,0-4.352,5.785,6.24,6.24,0,0,0,.106,1.138,5.425,5.425,0,0,1-1.2.393V17.5H5.47V14.113A5.5,5.5,0,0,1,1.094,8.752V7.658a1.094,1.094,0,0,1,0-2.188Zm7.658,7.111A4.923,4.923,0,1,1,14.77,7.658,4.924,4.924,0,0,1,19.693,12.582ZM16.3,11.1l-2.075,2.075-.981-.981a.546.546,0,0,0-.773.773l1.368,1.368a.543.543,0,0,0,.773,0l2.462-2.462A.546.546,0,0,0,16.3,11.1Z" transform="translate(1772.654 947.747)" fill="#97714a"/>
</g>
</g>
</g>
</svg>I've managed to start by creating the svg object and applying the defs and filters, I'm just having trouble with applying the <g> and <path> tags.
// create a svg element
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 482.026 172.554");
svg.setAttribute("width", "482.026");
svg.setAttribute("height", "172.554");
svg.setAttribute("id", "svg");
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
// create a defs element
const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
// create a filter element
const filterOuter = document.createElementNS(
"http://www.w3.org/2000/svg",
"filter"
);
filterOuter.setAttribute("id", "layerOuter");
filterOuter.setAttribute("x", "0");
filterOuter.setAttribute("y", "35.6");
filterOuter.setAttribute("width", "364.473");
filterOuter.setAttribute("height", "100.059");
filterOuter.setAttribute("filterUnits", "userSpaceOnUse");
// create a feOffset element
const feOffsetOuter = document.createElementNS(
"http://www.w3.org/2000/svg",
"feOffset"
);
feOffsetOuter.setAttribute("dy", "3");
feOffsetOuter.setAttribute("input", "SourceAlpha");
// create a feGaussianBlur element
const feGaussianBlurOuter = document.createElementNS(
"http://www.w3.org/2000/svg",
"feGaussianBlur"
);
feGaussianBlurOuter.setAttribute("stdDeviation", "3");
feGaussianBlurOuter.setAttribute("result", "blur");
// create a feFlood element
const feFloodOuter = document.createElementNS(
"http://www.w3.org/2000/svg",
"feFlood"
);
feFloodOuter.setAttribute("flood-opacity", "0.459");
// create a feComposite element
const feCompositeOuter = document.createElementNS(
"http://www.w3.org/2000/svg",
"feComposite"
);
feCompositeOuter.setAttribute("operator", "in");
feCompositeOuter.setAttribute("in2", "blur");
// create a feComposite element
const feCompositeOuter2 = document.createElementNS(
"http://www.w3.org/2000/svg",
"feComposite"
);
feCompositeOuter2.setAttribute("in", "SourceGraphic");
// create a filter element
const filterBase = document.createElementNS(
"http://www.w3.org/2000/svg",
"filter"
);
filterBase.setAttribute("id", "layerBase");
filterBase.setAttribute("x", "0");
filterBase.setAttribute("y", "107.175");
filterBase.setAttribute("width", "364.473");
filterBase.setAttribute("height", "35.78");
filterBase.setAttribute("filterUnits", "userSpaceOnUse");
// create a feOffset element
const feOffsetBase = document.createElementNS(
"http://www.w3.org/2000/svg",
"feOffset"
);
feOffsetBase.setAttribute("dy", "3");
feOffsetBase.setAttribute("input", "SourceAlpha");
// create a feGaussianBlur element
const feGaussianBlurBase = document.createElementNS(
"http://www.w3.org/2000/svg",
"feGaussianBlur"
);
feGaussianBlurBase.setAttribute("stdDeviation", "3");
feGaussianBlurBase.setAttribute("result", "blur-2");
// create a feFlood element
const feFloodBase = document.createElementNS(
"http://www.w3.org/2000/svg",
"feFlood"
);
feFloodBase.setAttribute("flood-opacity", "0.431");
// create a feComposite element
const feCompositeBase = document.createElementNS(
"http://www.w3.org/2000/svg",
"feComposite"
);
feCompositeBase.setAttribute("operator", "in");
feCompositeBase.setAttribute("in2", "blur-2");
// create a feComposite element
const feCompositeBase2 = document.createElementNS(
"http://www.w3.org/2000/svg",
"feComposite"
);
feCompositeBase2.setAttribute("in", "SourceGraphic");
// append the elements to the defs element
filterOuter.appendChild(feOffsetOuter);
filterOuter.appendChild(feGaussianBlurOuter);
filterOuter.appendChild(feFloodOuter);
filterOuter.appendChild(feCompositeOuter);
filterOuter.appendChild(feCompositeOuter2);
filterBase.appendChild(feOffsetBase);
filterBase.appendChild(feGaussianBlurBase);
filterBase.appendChild(feFloodBase);
filterBase.appendChild(feCompositeBase);
filterBase.appendChild(feCompositeBase2);
defs.appendChild(filterOuter);
defs.appendChild(filterBase);
svg.appendChild(defs);CodePudding user response：
Assuming the SVG is not "cross origin" ... or, if it is, the server allows you to read it (CORS) ... then you can do something like this
const resp = await fetch("./image.svg");
const text = await resp.text();
const dp = new DOMParser();
const svg = dp.parseFromString(text, 'image/svg xml');
const root = svg.documentElement;
// you can manipulate whatever you like here
root.querySelectorAll('[fill="#838796"]').forEach(e => e.setAttribute('fill', 'green'));
// done this way, you can manipulate after adding to the DOM too
document.body.appendChild(root);
root.querySelectorAll('[fill="#b1a077"]').forEach(e => e.setAttribute('fill', 'red'));
CodePudding user response：
I had to set up an example from @Jaromanda X code
var fetched_svg = document.getElementById("source").innerHTML;
const text = fetched_svg;
const dp = new DOMParser();
const svg = dp.parseFromString(text, 'image/svg xml');
const root = svg.documentElement;
// you can manipulate whatever you like here
root.querySelectorAll('[fill="#838796"]').forEach(e => e.setAttribute('fill', 'green'));
// done this way, you can manipulate after adding to the DOM too
document.body.appendChild(root);
root.querySelectorAll('[fill="#b1a077"]').forEach(e => e.setAttribute('fill', 'red'));<div id="source" style="display:none"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="482.026" height="172.554" viewBox="0 0 482.026 172.554"> <defs> <filter id="layerOuter" x="0" y="35.6" width="364.473" height="100.059" filterUnits="userSpaceOnUse"> <feOffset dy="3" input="SourceAlpha"/> <feGaussianBlur stdDeviation="3" result="blur"/> <feFlood flood-opacity="0.459"/> <feComposite operator="in" in2="blur"/> <feComposite in="SourceGraphic"/> </filter> <filter id="layerBase" x="0" y="107.175" width="364.473" height="35.78" filterUnits="userSpaceOnUse"> <feOffset dy="3" input="SourceAlpha"/> <feGaussianBlur stdDeviation="3" result="blur-2"/> <feFlood flood-opacity="0.431"/> <feComposite operator="in" in2="blur-2"/> <feComposite in="SourceGraphic"/> </filter> </defs> <g id="frmMenu" transform="translate(-1395.974 -860.8)"> <g id="btnGroupLayers" transform="translate(0 -9)"> <g id="LayerBar"> <g transform="matrix(1, 0, 0, 1, 1395.97, 869.8)" filter="url(#layerOuter)"> <path id="layerOuter-2" data-name="layerOuter" d="M730.735,40.209q-.821-5.562-7.2-5.562H398.941q-6.382,0-7.112,5.562l-.182,1.732v60.177q0,7.294,7.294,7.294h324.59q7.294,0,7.294-7.294V41.941l-.091-1.732M388,102.574V41.941Q388,31,398.941,31h324.59q10.941,0,10.941,10.941v60.633q-.273,10.485-10.941,10.485H398.941q-10.668,0-10.941-10.485" transform="translate(-379 10.6)" fill="#9b9dad"/> </g> <g transform="matrix(1, 0, 0, 1, 1395.97, 869.8)" filter="url(#layerBase)"> <path id="layerBase-2" data-name="layerBase" d="M734.473,70.25v6.838q0,10.941-10.941,10.941H398.941Q388,88.03,388,77.088V70.25q.274,10.485,10.941,10.485h324.59q10.668,0,10.941-10.485" transform="translate(-379 42.92)" fill="#616374"/> </g> <path id="layerMid" d="M729.088,38.562l.091,1.732v60.177q0,7.294-7.294,7.294H397.294q-7.294,0-7.294-7.294V40.294l.182-1.732Q390.912,33,397.294,33h324.59q6.382,0,7.2,5.562m-3.556,1.732-.091-1.276.091.091q-.638-2.462-3.647-2.462H463.853l-5.106,5.106-5.106-5.106h-17.05l-4.1,4.1-4.1-4.1H397.294q-3.009,0-3.465,2.371l-.091.365-.091.912V83.877l5.015,5.015-5.015,5.015v6.565q0,3.647,3.647,3.647H564.878l5.015-5.015,5.015,5.015H652.5l2.827-2.826,2.826,2.826h63.733q3.647,0,3.647-3.647V58.712l-4.377-4.376,4.377-4.377V40.294" transform="translate(1018.621 882.048)" fill="#727685"/> <path id="layerInner" d="M723.885,38.647v9.665l-4.377,4.377,4.377,4.376V98.824q0,3.647-3.647,3.647H656.5l-2.826-2.826-2.826,2.826H573.26l-5.015-5.015-5.015,5.015H395.647q-3.647,0-3.647-3.647V92.259l5.015-5.015L392,82.23V38.647l.091-.912.091-.365Q392.638,35,395.647,35h31.091l4.1,4.1,4.1-4.1h17.05l5.106,5.106L462.206,35H720.237q3.009,0,3.647,2.462l-.091-.091.091,1.276" transform="translate(1020.268 883.694)" fill="#838796"/> </g> <g id="optionLayer04" transform="translate(213)"> <path id="optionInt04" d="M812.1,156.3q.25-1.3,1.9-1.3h33a1.8,1.8,0,0,1,2,1.35l-.05-.05.05.7v5.3l-2.4,2.4,2.4,2.4V190a1.768,1.768,0,0,1-2,2H814a1.768,1.768,0,0,1-2-2v-3.6l2.75-2.75L812,180.9V157l.05-.5.05-.2" transform="translate(622 776)" fill="#d3bf8f"/> <path id="optionOuter04" d="M808,190.25V157q0-6,6-6h33q6,0,6,6v33.25q-.15,5.75-6,5.75H814q-5.85,0-6-5.75m2.1-34.2-.1.95v33q0,4,4,4h33q4,0,4-4V157l-.05-.95Q850.5,153,847,153H814q-3.5,0-3.9,3.05" transform="translate(622 776)" fill="#d9cdaf"/> <path id="optionInner04" d="M810.1,156.05q.4-3.05,3.9-3.05h33q3.5,0,3.95,3.05l.05.95v33q0,4-4,4H814q-4,0-4-4V157l.1-.95m2,.25-.05.2-.05.5v23.9l2.75,2.75L812,186.4V190a1.768,1.768,0,0,0,2,2h33a1.768,1.768,0,0,0,2-2V167.1l-2.4-2.4,2.4-2.4V157l-.05-.7.05.05a1.8,1.8,0,0,0-2-1.35H814q-1.65,0-1.9,1.3" transform="translate(622 776)" fill="#b1a077"/> <path id="optionBase04" d="M853,190.25V194q0,6-6,6H814q-6,0-6-6v-3.75q.15,5.75,6,5.75h33q5.85,0,6-5.75" transform="translate(622 776)" fill="#a3997f"/> <path id="wind-solid" d="M1.375,8.25h13.75a4.125,4.125,0,0,0,0-8.25H13.75a1.375,1.375,0,0,0,0,2.75h1.375a1.375,1.375,0,0,1,0,2.75H1.375a1.375,1.375,0,0,0,0,2.75Zm5.5,5.5h-5.5a1.375,1.375,0,1,0,0,2.75h5.5a1.375,1.375,0,0,1,0,2.75H5.5A1.375,1.375,0,0,0,5.5,22H6.875a4.125,4.125,0,0,0,0-8.25Zm11-4.125H1.375a1.375,1.375,0,0,0,0,2.75h16.5a1.375,1.375,0,0,1,0,2.75H16.5a1.375,1.375,0,0,0,0,2.75h1.375a4.125,4.125,0,0,0,0-8.25Z" transform="translate(1441.5 938.167)" fill="#97714a"/> </g> <g id="optionLayer03" transform="translate(142)"> <path id="optionInt03" d="M812.1,156.3q.25-1.3,1.9-1.3h33a1.8,1.8,0,0,1,2,1.35l-.05-.05.05.7v5.3l-2.4,2.4,2.4,2.4V190a1.768,1.768,0,0,1-2,2H814a1.768,1.768,0,0,1-2-2v-3.6l2.75-2.75L812,180.9V157l.05-.5.05-.2" transform="translate(622 776)" fill="#d3bf8f"/> <path id="optionOuter03" d="M808,190.25V157q0-6,6-6h33q6,0,6,6v33.25q-.15,5.75-6,5.75H814q-5.85,0-6-5.75m2.1-34.2-.1.95v33q0,4,4,4h33q4,0,4-4V157l-.05-.95Q850.5,153,847,153H814q-3.5,0-3.9,3.05" transform="translate(622 776)" fill="#d9cdaf"/> <path id="optionInner03" d="M810.1,156.05q.4-3.05,3.9-3.05h33q3.5,0,3.95,3.05l.05.95v33q0,4-4,4H814q-4,0-4-4V157l.1-.95m2,.25-.05.2-.05.5v23.9l2.75,2.75L812,186.4V190a1.768,1.768,0,0,0,2,2h33a1.768,1.768,0,0,0,2-2V167.1l-2.4-2.4,2.4-2.4V157l-.05-.7.05.05a1.8,1.8,0,0,0-2-1.35H814q-1.65,0-1.9,1.3" transform="translate(622 776)" fill="#b1a077"/> <path id="optionBase03" d="M853,190.25V194q0,6-6,6H814q-6,0-6-6v-3.75q.15,5.75,6,5.75h33q5.85,0,6-5.75" transform="translate(622 776)" fill="#a3997f"/> <path id="feather-pointed-solid" d="M19.191,10.362l-4.975,2.015h4.046a16.584,16.584,0,0,1-1.11,1.848L11.47,16.5h3.674C12.6,18.768,8.963,19.955,3.8,18.773L.876,21.7a1.028,1.028,0,0,1-1.456,0,1.032,1.032,0,0,1,0-1.458L10.289,9.353a.68.68,0,0,0-1.018-.9L2.04,15.7C.21,2.495,14.894.351,19.7.006a1.323,1.323,0,0,1,1.418,1.42A31.442,31.442,0,0,1,19.191,10.362Z" transform="translate(1442.027 938.165)" fill="#97714a"/> </g> <g id="optionLayer02" transform="translate(71)"> <path id="optionInt02" d="M812.1,156.3q.25-1.3,1.9-1.3h33a1.8,1.8,0,0,1,2,1.35l-.05-.05.05.7v5.3l-2.4,2.4,2.4,2.4V190a1.768,1.768,0,0,1-2,2H814a1.768,1.768,0,0,1-2-2v-3.6l2.75-2.75L812,180.9V157l.05-.5.05-.2" transform="translate(622 776)" fill="#d3bf8f"/> <path id="optionOuter02" d="M808,190.25V157q0-6,6-6h33q6,0,6,6v33.25q-.15,5.75-6,5.75H814q-5.85,0-6-5.75m2.1-34.2-.1.95v33q0,4,4,4h33q4,0,4-4V157l-.05-.95Q850.5,153,847,153H814q-3.5,0-3.9,3.05" transform="translate(622 776)" fill="#d9cdaf"/> <path id="optionInner02" d="M810.1,156.05q.4-3.05,3.9-3.05h33q3.5,0,3.95,3.05l.05.95v33q0,4-4,4H814q-4,0-4-4V157l.1-.95m2,.25-.05.2-.05.5v23.9l2.75,2.75L812,186.4V190a1.768,1.768,0,0,0,2,2h33a1.768,1.768,0,0,0,2-2V167.1l-2.4-2.4,2.4-2.4V157l-.05-.7.05.05a1.8,1.8,0,0,0-2-1.35H814q-1.65,0-1.9,1.3" transform="translate(622 776)" fill="#b1a077"/> <path id="optionBase02" d="M853,190.25V194q0,6-6,6H814q-6,0-6-6v-3.75q.15,5.75,6,5.75h33q5.85,0,6-5.75" transform="translate(622 776)" fill="#a3997f"/> <path id="clock-rotate-left-solid" d="M11,0A11,11,0,1,1,4.714,20.028a1.375,1.375,0,0,1,1.573-2.256A8.25,8.25,0,1,0,11,2.75,8.165,8.165,0,0,0,5.165,5.165L6.488,6.488A1.032,1.032,0,0,1,5.762,8.25H1.031A1.03,1.03,0,0,1,0,7.219V2.49A1.031,1.031,0,0,1,1.76,1.76L3.222,3.222A10.948,10.948,0,0,1,10.961,0Zm0,5.5a1.029,1.029,0,0,1,1.031,1.031v4.043l2.754,2.789a1.006,1.006,0,0,1-1.422,1.422L10.27,11.692a.883.883,0,0,1-.3-.692V6.531A1.029,1.029,0,0,1,11,5.5Z" transform="translate(1441.146 938.167)" fill="#97714a"/> </g> <g id="optionLayer01"> <path id="optionInt01" d="M812.1,156.3q.25-1.3,1.9-1.3h33a1.8,1.8,0,0,1,2,1.35l-.05-.05.05.7v5.3l-2.4,2.4,2.4,2.4V190a1.768,1.768,0,0,1-2,2H814a1.768,1.768,0,0,1-2-2v-3.6l2.75-2.75L812,180.9V157l.05-.5.05-.2" transform="translate(622 776)" fill="#d3bf8f"/> <path id="optionOuter01" d="M808,190.25V157q0-6,6-6h33q6,0,6,6v33.25q-.15,5.75-6,5.75H814q-5.85,0-6-5.75m2.1-34.2-.1.95v33q0,4,4,4h33q4,0,4-4V157l-.05-.95Q850.5,153,847,153H814q-3.5,0-3.9,3.05" transform="translate(622 776)" fill="#d9cdaf"/> <path id="optionInner01" d="M810.1,156.05q.4-3.05,3.9-3.05h33q3.5,0,3.95,3.05l.05.95v33q0,4-4,4H814q-4,0-4-4V157l.1-.95m2,.25-.05.2-.05.5v23.9l2.75,2.75L812,186.4V190a1.768,1.768,0,0,0,2,2h33a1.768,1.768,0,0,0,2-2V167.1l-2.4-2.4,2.4-2.4V157l-.05-.7.05.05a1.8,1.8,0,0,0-2-1.35H814q-1.65,0-1.9,1.3" transform="translate(622 776)" fill="#b1a077"/> <path id="optionBase01" d="M853,190.25V194q0,6-6,6H814q-6,0-6-6v-3.75q.15,5.75,6,5.75h33q5.85,0,6-5.75" transform="translate(622 776)" fill="#a3997f"/> <path id="signs-post-solid" d="M16.175,1.375A1.419,1.419,0,0,1,17.587,0a1.4,1.4,0,0,1,1.451,1.375h6.767a.718.718,0,0,1,.5.2l2.117,2.063a.678.678,0,0,1,0,.972L26.3,6.673a.718.718,0,0,1-.5.2H9.117A1.419,1.419,0,0,1,7.706,5.5V2.75A1.42,1.42,0,0,1,9.117,1.375ZM27.508,13.75A1.392,1.392,0,0,1,26.1,15.125H9.45a.716.716,0,0,1-.5-.2L6.833,12.861a.674.674,0,0,1,0-.971L8.95,9.827a.757.757,0,0,1,.5-.241h6.726V8.211h2.863V9.586H26.1a1.418,1.418,0,0,1,1.412,1.375ZM17.587,22a1.418,1.418,0,0,1-1.412-1.375V16.5h2.863v4.125A1.4,1.4,0,0,1,17.587,22Z" transform="translate(1434.873 938.167)" fill="#97714a"/> </g> </g> <g id="btnProfile" transform="translate(0 -9)"> <g id="Profile"> <path id="profileOuterRing" d="M258,516.742v-2.465q0-35.743,24.9-61.133l.247-.247q25.39-24.9,61.133-24.9t60.887,24.9v.247q25.39,25.39,25.39,61.133v2.465q-.986,34.264-25.39,58.422-25.144,25.39-60.887,25.39t-61.133-25.39H282.9q-23.911-24.157-24.9-58.422m86.277-79.128q-31.553,0-54.231,22.432-22.432,22.679-22.432,54.231,0,31.8,22.432,54.231,22.432,22.186,54.231,22.186,31.553,0,53.985-22.186l.246-.246q22.185-22.432,22.185-53.985,0-31.8-22.185-54.231-22.432-22.432-54.231-22.432" transform="translate(1447.446 441.8)" fill="#727685"/> <path id="profileInnerRing" d="M336.613,429.95q31.8,0,54.231,22.432,22.185,22.432,22.185,54.231,0,31.553-22.185,53.985l-.246.246q-22.432,22.186-53.985,22.186-31.8,0-54.231-22.186-22.432-22.432-22.432-54.231,0-31.553,22.432-54.231,22.679-22.432,54.231-22.432m0,9.86q-27.855,0-47.576,19.227-19.228,19.72-19.227,47.575,0,27.609,19.227,47.082,19.72,19.72,47.576,19.72,27.609,0,47.082-19.72,19.72-19.474,19.721-47.082,0-27.855-19.721-47.575-19.474-19.227-47.082-19.227" transform="translate(1455.11 449.465)" fill="#9b9dad"/> <path id="profileIcon" d="M328.753,431.95q27.608,0,47.082,19.227,19.72,19.72,19.72,47.575,0,27.609-19.72,47.082-19.474,19.72-47.082,19.72-27.855,0-47.576-19.72-19.228-19.474-19.227-47.082,0-27.855,19.227-47.575,19.72-19.227,47.576-19.227" transform="translate(1462.969 457.323)" fill="#838796"/> </g> <g id="DBConnected" transform="translate(74 62)"> <g id="Group_426" data-name="Group 426" transform="translate(13993 8796)"> <path id="Path_234" data-name="Path 234" d="M386.5,434.5a15.525,15.525,0,1,0-.05,22l.05-.05a15.633,15.633,0,0,0,0-21.95M358,446v-.5a17.072,17.072,0,0,1,5.05-12.4l.05-.05a17.687,17.687,0,0,1,24.75,0v.05A16.9,16.9,0,0,1,393,445.5v.5a17.506,17.506,0,0,1-29.9,11.85h-.05A16.962,16.962,0,0,1,358,446" transform="translate(-12586 -8285)" fill="#d9cdaf"/> <path id="Path_235" data-name="Path 235" d="M386.5,434.5a15.633,15.633,0,0,1,0,21.95l-.05.05a15.525,15.525,0,1,1,.05-22m-1.45,1.35a13.1,13.1,0,0,0-9.55-3.9,13.322,13.322,0,0,0-13.55,13.55,13.486,13.486,0,0,0,13.55,13.55,13.658,13.658,0,0,0,13.55-13.55,13.151,13.151,0,0,0-4-9.65" transform="translate(-12586 -8285)" fill="#b1a077"/> <path id="Path_236" data-name="Path 236" d="M385.05,435.85a13.151,13.151,0,0,1,4,9.65,13.658,13.658,0,0,1-13.55,13.55,13.486,13.486,0,0,1-13.55-13.55,13.322,13.322,0,0,1,13.55-13.55,13.1,13.1,0,0,1,9.55,3.9" transform="translate(-12586 -8285)" fill="#d3bf8f"/> </g> <path id="plug-circle-check-solid" d="M3.282,0A1.094,1.094,0,0,1,4.376,1.094V4.376H2.188V1.094A1.094,1.094,0,0,1,3.282,0ZM9.846,0A1.094,1.094,0,0,1,10.94,1.094V4.376H8.752V1.094A1.094,1.094,0,0,1,9.846,0Zm2.188,5.47a1.093,1.093,0,0,1,1.094,1.094A1.307,1.307,0,0,1,13.1,6.8a6,6,0,0,0-4.352,5.785,6.24,6.24,0,0,0,.106,1.138,5.425,5.425,0,0,1-1.2.393V17.5H5.47V14.113A5.5,5.5,0,0,1,1.094,8.752V7.658a1.094,1.094,0,0,1,0-2.188Zm7.658,7.111A4.923,4.923,0,1,1,14.77,7.658,4.924,4.924,0,0,1,19.693,12.582ZM16.3,11.1l-2.075,2.075-.981-.981a.546.546,0,0,0-.773.773l1.368,1.368a.543.543,0,0,0,.773,0l2.462-2.462A.546.546,0,0,0,16.3,11.1Z" transform="translate(1772.654 947.747)" fill="#97714a"/> </g> </g> </g></svg></div>