Is there a possibility to embed SVG-source code and change dynamically the attributes ?
I have made this SVG :
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" xml:space="preserve" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 23000 10000" width="100%" height="100%">
<rect id="svgEditorBackground" x="0" y="0" width="23000" height="10000" style="fill: none; stroke: none;" />
<rect id="Achtergrond" x="61.7" y="28.8" style="fill:#CCCDD2;stroke:#FFFFFF;stroke-miterlimit:10" width="23000" height="10000" />
<g id="groep1">
<metadata id="groep1" />
<rect id="leiding3" style="fill:white; stroke:black; stroke-width:17.64" x="9813" y="6921" width="1040" height="203" />
<rect id="leiding4" style="fill:white; stroke:black; stroke-width:17.64" x="11703" y="6923" width="534" height="203" />
<rect id="leiding5" style="fill:white; stroke:black; stroke-width:17.64" x="13218" y="6953" width="750" height="203" />
<rect id="leiding6" style="fill:white; stroke:black; stroke-width:17.64" x="14741" y="6949" width="790" height="203" />
<rect id="leiding7" style="fill:white; stroke:black; stroke-width:17.64" x="17752" y="6925" width="3679" height="203" />
<rect id="leiding1" style="fill:white; stroke:black; stroke-width:17.64" x="2462" y="5847" width="4154" height="229" />
<path id="leiding0afgekeurdgas" style="fill:white; stroke:black; stroke-width:17.64" stroke-width="17.64" d="M2558 2453c1284,-3 2568,-7 3851,-10 353,2 485,140 488,440l25 2692 182 -2c-5,-889 -11,-1777 -17,-2666 23,-534 -314,-666 -689,-661l-3839 -8 -1 215z" />
<polygon id="pijl_retour" style="fill:white; stroke:black; stroke-width:17.64" points="2556,2475 2556,2207 2338,2206 2338,2063 2068,2338 2320,2624 2322,2474 " />
<polygon id="pijl_gas-in" style="fill:white; stroke:black; stroke-width:17.64" points="2116,5824 2116,6092 2334,6093 2334,6236 2604,5961 2352,5675 2350,5825 " />
<polygon id="pijl_gasnet" style="fill:white; stroke:black; stroke-width:17.64" points="21425,6890 21425,7158 21644,7160 21644,7303 21913,7027 21662,6742 21660,6891 " />
<polygon id="driewegklep_p1" style="fill:white; stroke:black; stroke-width:50" points="7007,5947 6855,5572 7172,5571 " />
<polygon id="driewegklep_p3" style="fill:white; stroke:black; stroke-width:50" points="7009,5961 7161,6336 6844,6337 " />
<polygon id="driewegklep_p2" style="fill:white; stroke:black; stroke-width:50" points="7008,5967 6633,6119 6632,5802 " />
<g id="groep2">
<polygon id="klep1_p1" style="fill:white; stroke:black; stroke-width:50" points="11263,7032 10853,7238 10852,6806 " />
<polygon id="klep1_p2" style="fill:white; stroke:black; stroke-width:50" points="11279,7028 11689,6821 11690,7254 " />
</g>
<g id="groep3">
<polygon id="klep3_p1" style="fill:white; stroke:black; stroke-width:50" points="14310,7056 13899,7263 13898,6830 " />
<polygon id="klep3_p2" style="fill:white; stroke:black; stroke-width:50" points="14325,7052 14736,6846 14736,7278 " />
</g>
<polygon id="klep2_p1" style="fill:white; stroke:black; stroke-width:50" points="12645,7041 12234,7248 12234,6815 " />
<polygon id="klep2_p2" style="fill:white; stroke:black; stroke-width:50" points="12638,7043 13272,6724 13273,7391 " />
<line id="driewegklep_line1" style="fill:white; stroke:black; stroke-width:50" x1="6981" y1="5965" x2="7464" y2="5965" />
<rect id="driewegklep_r3" style="fill:white; stroke:black; stroke-width:50" x="7459" y="5773" width="218" height="388" />
<rect id="driewegklep_r2" style="fill:white; stroke:black; stroke-width:50" x="7230" y="5773" width="218" height="388" />
<line id="vlijn_ingangsdruk" style="stroke:#003399; stroke-width:100" x1="4446" y1="5847" x2="4446" y2="5452" />
<line id="vlijn_gasanalyse" style="stroke:#003399; stroke-width:100" x1="3792" y1="7164" x2="3792" y2="6087" />
<text id="afgekeurd" x="1545" y="1935" style="fill:none; font-size:358.79px; font-family:Arial; font-variant:normal; horiz-adv-x:722; font-style:normal; font-weight:bold">Afgekeurd gas</text>
<text id="retour" x="1659" y="2964" style="fill:blue; font-size:358.79px; font-family:Arial; font-variant:normal; horiz-adv-x:722; font-style:normal; font-weight:bold">Retour</text>
<text id="gas_in" x="1640" y="5501" style="fill:blue; font-size:358.79px; font-family:Arial; font-variant:normal; horiz-adv-x:722; font-style:normal; font-weight:bold">Gas in</text>
<text id="ingangsdruk" x="3627" y="4633" style="fill:blue; font-size:407px; font-family:Arial; font-variant:normal; horiz-adv-x:722; font-style:normal; font-weight:bold">Ingangsdruk</text>
<text id="waarde_P" x="4850" y="5200" style="fill:red; font-size:250px; font-family:Arial; font-variant:normal; horiz-adv-x:722; font-style:normal; font-weight:bold">meetwaarde</text>
<text id="g4text2_gas_naar_gasnet" x="18997" y="6581" style="fill:blue; font-size:407px; font-family:Arial; font-variant:normal; horiz-adv-x:722; font-style:normal; font-weight:bold">Gas naar gasnet</text>
<path id="leiding2" style="fill:white; stroke:black; stroke-width:17.64" d="M8621 6932l0 181c-887,3 -482,1 -1369,5 -216,-1 -319,-162 -320,-391l6 -383 172 -1 -6 383c1,138 30,198 210,205l1307 1z" />
<g id="groep4">
<rect id="box1" style="fill:white; stroke:black; stroke-width:50" x="8623" y="6424" width="1200" height="1200" />
<line id="box1_schuinelijn" style="fill:white; stroke:black; stroke-width:50" x1="8623" y1="6424" x2="9823" y2="7624" />
<polyline id="stippellijn1" style="fill:none;stroke:black;stroke-width:25;stroke-dasharray:50.000000 25.000000" points="8375,6944 8401,5463 10118,5461 10121,6905 " />
</g>
<polyline id="stippellijn2" fill="none" stroke="black" stroke-width="25" stroke-dasharray="50.000000 25.000000" points="11542,6196 11539,5567 15028,5569 15025,6949 " />
<path id="p2_arc" style="fill:white; stroke:black; stroke-width:50" d="M12413 6360c0,-173 137,-312 307,-312 169,0 306,139 306,312" />
<ellipse id="cirkel_ingangsdruk" style="fill:white; stroke:black; stroke-width:50" cx="4456" cy="5144" rx="307" ry="312" />
<ellipse style="fill:white; stroke:black; stroke-width:50" cx="18668" cy="5338" rx="408" ry="373" />
<line id="p2_bottomline" style="fill:white; stroke:black; stroke-width:50" x1="12413" y1="6360" x2="13026" y2="6360" />
<line id="p2_vline" style="fill:white; stroke:black; stroke-width:50" x1="12638" y1="7043" x2="12638" y2="6360" />
<line id="p2_v_stippelijn" stroke="black" stroke-width="25" stroke-dasharray="125.000000 75.000000" x1="12881" y1="6360" x2="12882" y2="6920" />
<polyline id="klep1_lijn1" fill="none" stroke="black" stroke-width="25" points="11279,7028 11284,6244 11538,6244 " />
<ellipse id="klep1_bol" style="fill:black; stroke:black; stroke-width:17.64" cx="11542" cy="6249" rx="68" ry="64" />
<rect id="box-gasmeter" style="fill:white; stroke:#003399; stroke-width:50" x="15517" y="6611" width="2223" height="961" />
<text id="g4text1_GASMETER" x="15721" y="7191" fill="#003399" font-size="335.5px" font-family="Arial" font-variant="normal" horiz-adv-x="722" font-style="normal" font-weight="bold">GASMETER</text>
<g id="groep5">
<rect id="box-EHVI" fill="white" stroke="black" stroke-width="50" x="15875" y="5210" width="1296" height="855" />
<text id="g5text_EVHI" x="16061" y="5791" fill="#003399" font-size="335.5px" font-family="Arial" font-variant="normal" horiz-adv-x="722" font-style="normal" font-weight="bold">EVHI</text>
</g>
<line id="EHVI-vline" stroke="black" stroke-width="50" x1="16510" y1="6064" x2="16510" y2="6584" />
<g>
<path id="pijl-indicator-ingangsdruk" style="fill:#003399; fill-rule:nonzero" d="M4414 5034l291 297 -36 35 -291 -297 36 -35zm-141 -108l352 145 -10 3 -10 4 -9 3 -10 4 -9 4 -8 5 -9 4 -9 5 -8 5 -8 5 -8 6 -7 5 -8 6 -7 6 -7 7 -7 6 -6 7 -7 7 -6 7 -6 7 -6 8 -5 7 -5 8 -6 8 -5 9 -4 8 -5 9 -4 9 -4 9 -4 9 -4 10 -3 10 0 0 -138 -355z" />
</g>
<line id="cirkel_odo_schuinelijnL" style="fill:white; stroke:#003399; stroke-width:50" x1="18649" y1="5707" x2="18278" y2="5246" />
<line id="cirkel_odo_schuinelijnR" style="fill:white; stroke:#003399; stroke-width:50" x1="18660" y1="5710" x2="19064" y2="5231" />
<g>
<path id="vpijl_odo" style="fill:#003399; fill-rule:nonzero" d="M18674 6891l-42 0 -128 -197 42 -27 128 197 -42 0 42 27zm0 0l-21 33 -21 -33 42 0zm107 -210l21 13 -128 197 -42 -27 128 -197 21 14zm-103 -972l0 1130 -50 0 0 -1130 50 0z" />
</g>
<line id="vlijn_odo2" style="stroke:#003399; stroke-width:50" x1="18662" y1="4415" x2="18662" y2="4979" />
<rect id="stippelijnbox-odo" fill="grey" stroke="#006633" stroke-width="25" stroke-dasharray="50.000000 25.000000" x="17248" y="3559" width="3572" height="877" />
<rect id="odo-bar-indicator" x="17248" y="3559" style="fill:mediumspringgreen;stroke:black;stroke-width:1px;" width="3572" height="877" />
<text id="text_odorisatie" x="18070" y="4119" fill="black" font-weight="bold" font-size="357.72px" font-family="Arial">Odorisatie unit</text>
<rect id="stippelijnbox-gasanalyse" fill="grey" stroke="#006633" stroke-width="25" stroke-dasharray="50.000000 25.000000" x="2822" y="7140" width="2855" height="1374" />
<text id="text_off_spec" x="3792" y="8183" style="fill:none; font-size:358.79px; font-family:Arial; font-variant:normal; font-style:normal; font-weight:bold">Off spec !!!</text>
<text id="text_gasanalyse" x="3204" y="7626" fill="#003399" font-weight="bold" font-size="385.24px" font-family="Arial">Gasanalyse</text>
<ellipse id="gasanalyse-indicator" style="fill:none; stroke:#BA0F0F; stroke-width:10" cx="3408" cy="8054" rx="169" ry="172" />
<ellipse id="odo-indicator" style="fill:none; stroke:#BA0F0F; stroke-width:10" cx="17579" cy="3984" rx="169" ry="172" />
</g>
<rect id="bar-indicator" x="3470.9" y="4927.2" style="fill:mediumspringgreen;stroke:black;stroke-width:1px;" width="436.7" height="716.7" />
</svg>
For example an attribute update can be like this
{
"command": "update_style",
"selector": "#leiding7",
"attributeName": "fill",
"attributeValue": "white"
}
Depending on changing input variables the SVG-picture should be dynamically updated.
How is this possible? Is there some example code avaiable?
Loading a static svg image is no problem, but i need a dynamic dashboard…
html.Img(src="data:image/svg;base64,{}".format(encoded_image))
Many Thanks!