SVGs in custom widgets, how to implement them

I’m trying to create a custom widget using an SVG to draw some parts of the widget. I’ve created some “SVG parts” in Inkscape that I’m now trying to “move” to my custom widget attempt. But, the process I’ve found is extremely painful and isn’t really viable (I’m lucky to finish this year using this method).

I’m currently trying to “move” an opacity mask that looks like this:

		<mask maskUnits="userSpaceOnUse" x="129.52002" y="45.66992" width="18.86475" height="353.66211" id="glass-mask">
			<g id="glass-mask-group" filter="url(#opacity-mask-filter)">
				<g id="g242" style="display:inline" transform="matrix(0.27388508,0,0,0.27388508,55.001267,279.70357)" inkscape:label="bulb mask">
					<path style="clip-rule:evenodd;fill:#4e575a;fill-rule:evenodd" d="m 315.01074,351 c 1,0 2.00098,0 3.00098,0 2.19434,2.72266 1.16406,5.94971 1.37305,8.97314 0.21289,3.08154 -0.32031,6.2002 0.4502,9.25391 0.25098,0.81738 0.37598,1.65869 0.43262,2.50732 0.16992,2.42822 -0.1875,4.90723 0.69141,7.27686 0.16211,0.54443 0.26074,1.09717 0.3252,1.66064 0.73047,6.76904 3.06152,13.17383 4.48438,19.7832 0.56641,2.63086 0.8291,5.25098 0.31152,7.86426 -0.56836,2.87109 -2.32324,5.01367 -5.36523,4.88965 -3.08789,-0.12695 -3.79297,-2.71777 -4.00781,-5.35547 -0.375,-4.59766 0.55762,-9.26172 -0.70898,-13.81836 -0.1582,-0.58789 -0.24902,-1.18359 -0.2959,-1.78955 -0.9707,-11.68994 -2.55566,-23.34082 -2.08887,-35.11328 0.0849,-2.1333 -0.2305,-4.35253 1.39743,-6.13232 z" id="path155"/>
					<path style="clip-rule:evenodd;fill:#82888e;fill-rule:evenodd" d="m 312.00977,351 c 0.33398,0 0.66699,0 1.00098,0 1.19043,1.40283 0.9873,3.1084 0.98438,4.74854 -0.0147,8.11475 -0.0352,16.22998 0.42676,24.33154 -0.083,5.48633 -0.0957,10.97998 -0.0332,16.47266 0.0322,2.86816 -0.41406,5.64258 -1.23926,8.35352 -1.3291,4.36328 -3.99219,7.01465 -8.83594,7.5293 -6.95068,0.7373 -13.8833,1.60938 -20.71973,-0.44434 -7.37354,-2.21387 -9.70703,-6.625 -7.93555,-14.05176 1.09375,-4.58301 3.35547,-9.11914 0.73047,-13.97656 -0.52148,-0.96533 0.19727,-2.27344 0.396,-3.41406 0.40674,-1.30127 1.07617,-2.37744 2.4751,-2.79932 1.80176,0.53223 1.97412,3.62549 4.58105,2.92529 0.4209,0.27832 0.73145,0.6416 0.93311,1.10449 0.30029,4.90381 -3.53516,9.0542 -2.53564,14.07861 -2.45264,11.93701 -2.45264,11.93701 10.08252,11.8501 0.98682,-0.007 1.97412,-0.0391 2.96289,-0.042 2.99902,-0.01 5.99756,-0.0654 8.99072,-0.002 2.27637,0.0479 3.33301,-1.08789 3.83691,-3.08203 2.75195,-4.87109 2.74121,-10.17969 2.49023,-15.5332 0.003,-10.47217 -0.0273,-20.9375 0.0137,-31.40137 0.01,-2.29395 -0.35059,-4.70167 1.39453,-6.64747 z" id="path156"/>
					<path style="clip-rule:evenodd;fill:#91979c;fill-rule:evenodd" d="m 292.00586,351 c 1.66699,0 3.33398,0 5.00098,0 2.66309,5.49756 1.26025,11.24219 0.89941,16.89063 -0.10352,1.60498 -0.4624,3.23633 -0.58447,4.86426 -0.0356,0.5542 -0.1416,1.10303 -0.29346,1.63721 -1.00635,2.12939 -1.50586,4.49121 -2.83447,6.48682 -0.4541,0.3457 -0.93164,0.375 -1.42773,0.0918 -0.70215,-0.79297 -0.90039,-1.76709 -0.98389,-2.77783 -0.15527,-2.1167 0.25244,-4.1875 0.68555,-6.76904 -2.52393,1.53711 -4.75928,3.86816 -7.65381,1.56641 -0.13721,-0.90723 0.28369,-1.59668 0.88623,-2.18848 4.17139,-4.09375 5.86377,-8.97314 4.84766,-14.78662 -0.32325,-1.84914 0.041,-3.61428 1.458,-5.01516 z" id="path157"/>
					<path style="clip-rule:evenodd;fill:#a7adb3;fill-rule:evenodd" d="m 295.99951,375.00635 c 0.009,-0.3291 0.0147,-0.6582 0.0161,-0.9873 2.00293,-5.46826 1.46973,-11.23584 1.99365,-16.87891 0.19189,-2.06982 -0.521,-4.28613 0.99805,-6.14014 0.3335,0 0.6665,0 1.00049,0 2.50928,5.24268 1.29297,10.69775 0.83936,16.08203 -0.55518,6.59814 -1.88916,13.13574 -1.44727,19.80518 0.1084,1.63721 -0.0386,3.30615 1.12842,4.73926 1.86523,2.29053 3.73291,4.00781 6.47949,1.13525 0.57813,-0.604 1.2627,-1.08154 2.19629,-0.79443 1.2168,1.54834 1.12305,3.22754 0.52148,4.96338 -1.70703,2.78906 -4.13379,4.67285 -7.42676,3.6377 -3.81836,-1.20117 -6.66113,-3.78613 -7.38623,-8.0083 -0.48047,-2.79639 -0.20459,-5.6416 -0.27246,-8.46436 -0.0371,-1.97998 0.45801,-3.9209 0.44678,-5.90088 0.30225,-1.06299 0.26075,-2.2251 0.9126,-3.18848 z" id="path158"/>
					<path style="clip-rule:evenodd;fill:#b2b8bd;fill-rule:evenodd" d="m 309.00293,392.00439 c -1.47363,2.00928 -2.36719,5.77588 -5.51855,4.36475 -2.79834,-1.25439 -5.37354,-3.61719 -5.55957,-7.62305 -0.31055,-6.68799 0.37158,-13.33105 1.32324,-19.84521 0.87891,-6.01025 0.44727,-11.94238 0.75977,-17.90088 0.3335,0 0.6665,0 1,0 2.64746,4.25684 0.88232,8.96338 1.37793,13.43799 -0.0244,1.17383 -0.0771,2.34717 -0.33398,3.49658 -1.27441,5.92139 -0.61133,11.89551 -0.43506,17.84668 1.75977,5.09619 1.83545,5.11279 5.51221,1.12549 0.66211,-0.71729 1.26172,-1.62451 2.36621,-0.60156 0.82422,1.41992 0.81738,2.91455 0.4209,4.4502 -0.18068,0.50683 -0.48732,0.92187 -0.9131,1.24901 z" id="path159"/>
					<path style="clip-rule:evenodd;fill:#6f6f73;fill-opacity:1;fill-rule:evenodd" d="m 324.24386,359.07286 c 0,0 0.5326,-0.36716 0.475,2.79202 -0.0879,4.875 2.27531,6.88366 6.26652,9.8695 6.47266,4.84082 12.4873,10.33057 12.96875,19.34131 -2.27637,0.12012 -2.39844,-2.3208 -3.83496,-3.2041 -1.94043,-1.65381 -2.86816,-3.97119 -4.04395,-6.13037 -0.56934,-1.01172 -1.28711,-1.92676 -1.9043,-2.91455 -0.27051,-0.42285 -0.49414,-0.8623 -0.70215,-1.31445 -1.1084,-1.54541 -2.86426,-2.2251 -4.34082,-3.2666 -7.55176,-5.32129 -8.03734,-22.70742 -8.03734,-22.70742 z" id="path160" sodipodi:nodetypes="ccccccccccc"/>
					<path style="clip-rule:evenodd;fill:#cbcdd0;fill-opacity:1;fill-rule:evenodd" d="m 307.00879,351 h 1.00098 c 1.62598,1.78271 1.4248,4.00586 1.37793,6.13916 -0.12793,5.79541 0.45215,11.60645 -0.37891,17.38965 -0.41895,1.28857 -1.07813,2.39014 -2.34961,3.0127 -2.64014,0.61719 -4.63135,-0.68506 -4.63184,-3.07031 -10e-4,-7.82667 -0.96875,-15.7212 0.98096,-23.4712 h 1 c 2.49365,3.78223 1.29004,2.91782 1.26514,6.95102 -0.0132,2.11963 -0.51172,9.30679 -0.19141,10.47574 0.97461,-5.1709 -0.84814,-11.50147 1.92676,-17.42676 z" id="path161" sodipodi:nodetypes="ccccccccscc"/>
					<path style="clip-rule:evenodd;fill:#bdc2c7;fill-rule:evenodd" d="m 308.00879,375.00537 c 0,-8.00146 0,-16.00342 9.8e-4,-24.00537 0.33301,0 0.66602,0 1,0 1.2168,1.31787 1.37695,2.95605 1.38574,4.63135 0.0469,8.59229 0.0557,17.18604 -0.009,25.77881 -0.0117,1.64502 0.005,3.3418 -1.38184,4.59375 -0.4375,0.8335 -0.78125,1.73486 -1.33398,2.48438 -1.03223,1.39941 -1.99951,3.46045 -3.9541,3.0835 -2.12744,-0.41016 -2.875,-2.39307 -2.71045,-4.56055 -0.54053,-0.5625 -0.49951,-1.22119 -0.31299,-1.90088 1.69922,-1.09082 4.67285,2.52686 5.56055,-1.52002 0.59668,-2.86573 0.43945,-5.87794 1.75488,-8.58497 z" id="path162"/>
					<path style="clip-rule:evenodd;fill:#aeafb1;fill-rule:evenodd" d="m 267,411.01367 c 0,-5.33398 0,-10.66992 0,-16.00342 1.2041,-1.45557 1.13184,-3.99219 3.66748,-4.32227 0.50781,0.19727 0.87354,0.54395 1.10498,1.03613 0.34912,6.01123 -1.06543,11.99951 -0.21338,18.01611 0.18652,0.49414 0.31201,1.00195 0.40234,1.52051 0.21924,1.58203 0.35742,3.15918 -0.56787,4.59961 -0.41699,0.44336 -0.87549,0.48828 -1.37402,0.1377 l -0.002,0.004 c -0.68701,-1.85547 -1.46143,-3.6582 -3.01709,-4.98828 z" id="path163"/>
					<path style="clip-rule:evenodd;fill:#969da3;fill-rule:evenodd" d="m 309.00293,392.00439 c 0.008,-0.32813 0.0137,-0.65625 0.0186,-0.98438 0.72656,-0.99463 0.61035,-2.22314 0.92676,-3.33594 0.15039,-10.31104 -1.30177,-23.88057 -1.22177,-34.1877 -0.3115,-2.17205 4.56705,-3.26526 5.98014,-4.99719 l -2.58811,4.78416 -0.10874,36.72544 c -1.6084,3.5332 1.08301,8.03516 -2.50977,11.12109 -0.8623,-0.32422 -1.18359,-1.02148 -1.29004,-1.86816 0.043,-0.8291 0.30371,-1.58203 0.7998,-2.25098 -0.003,-1.66844 -0.005,-3.3369 -0.007,-5.00634 z" id="path164" sodipodi:nodetypes="scccccccccss"/>
					<path style="clip-rule:evenodd;fill:#76797f;fill-opacity:1;fill-rule:evenodd" d="m 283.02002,373.01563 c 7.12451,-5.94434 5.62656,-9.7252 6.21551,-14.01966 L 292.00586,351 c 0.0273,1.93994 -0.46826,3.8125 -0.0967,5.82861 1.26367,6.85205 -1.68945,12.03027 -6.95703,16.14111 -0.24268,0.31104 -0.56396,0.48486 -0.95117,0.54053 -0.39063,-0.0391 -0.71729,-0.2041 -0.98096,-0.49462 z" id="path165" sodipodi:nodetypes="scccccss"/>
					<path style="clip-rule:evenodd;fill:#d9dadb;fill-rule:evenodd" d="m 305.51514,372.3418 c -0.50244,0.004 -1.00439,0.007 -1.50684,0.0107 l 0.46131,-11.51134 1.07838,-7.30401 c 0,0 -0.24618,11.88469 -0.0329,18.80465 z" id="path166" sodipodi:nodetypes="cccccc"/>
					<path style="clip-rule:evenodd;fill:#656462;fill-opacity:1;fill-rule:evenodd" d="m 323.0127,351 c 0,1.82666 0.20996,3.68262 -0.0352,5.47607 -1.1709,8.58301 1.69824,14.92822 9.87402,18.48926 1.30957,0.5708 2.16504,1.51904 2.15039,3.05176 -0.95996,0.83887 -1.89844,0.42285 -2.8418,-0.0352 -5.41309,-1.63428 -10.41992,-3.70898 -11.13965,-10.38721 -0.28027,-1.10547 -0.34473,-2.23193 -0.37793,-3.36621 0.48633,-4.4082 -1.26953,-9.04785 1.37012,-13.22852 0.33301,10e-6 0.66602,10e-6 1.00001,10e-6 z" id="path167" sodipodi:nodetypes="scccccccss"/>
					<path style="clip-rule:evenodd;fill:#61696a;fill-rule:evenodd" d="m 319.01563,372.00195 c -9.8e-4,-0.66602 -0.003,-1.33154 -0.004,-1.99756 -0.80176,-6.33447 -5.56956,-15.59152 -4.76683,-21.92599 L 320.01163,351 c 1.3125,1.53564 0.96387,3.40137 0.98438,5.17139 0.0596,5.37988 -0.30371,10.7876 1.16797,16.06006 -0.24512,6.56787 3.20215,12.33887 4.06836,18.67236 0.0742,1.4209 0.0391,2.81885 -0.91602,4.00244 -1.92285,0.76123 -1.65332,-0.89746 -1.94336,-1.82617 -1.34473,-4.2998 -2.38867,-8.67871 -3.35742,-13.07617 -9.8e-4,-0.33203 -0.003,-0.66455 -0.006,-0.99658 -1.29493,-2.19874 0.35058,-4.81446 -0.99414,-7.00538 z" id="path168" sodipodi:nodetypes="scccccccccccs"/>
					<path style="clip-rule:evenodd;fill:#555e61;fill-rule:evenodd" d="m 315.01074,351 c -0.60547,14.06396 0.95996,28.02393 2.00195,42.00977 -0.47949,0.34766 -0.92969,0.31348 -1.35254,-0.10059 -1.21582,-1.77783 -0.74609,-3.97656 -1.47168,-5.88135 -0.34668,-2.07275 0.10059,-4.21387 -0.56348,-6.26709 -0.0869,-0.56836 -0.11914,-1.13184 -0.0996,-1.70557 0.30078,-9.35449 -0.60645,-18.72168 0.48535,-28.05518 0.334,10e-6 0.667,10e-6 1.00001,10e-6 z" id="path169"/>
					<path style="clip-rule:evenodd;fill:#bcc0c5;fill-opacity:1;fill-rule:evenodd" d="m 303.0083,351 c 4.9e-4,7.09668 0.0596,14.19385 -0.0273,21.28906 -0.0352,2.87988 0.54688,4.96289 4.0249,4.71484 0.99805,2.34131 0.44043,4.43555 -1.99854,4.99268 -2.57959,0.58887 -2.90771,-1.90674 -3.48486,-3.72559 -0.1958,-0.61621 -0.36084,-1.24072 -0.43066,-1.88818 -0.42969,-3.89258 0.33984,-7.74023 0.43164,-11.61475 0.271,-4.58691 -0.5752,-9.21094 0.48438,-13.76807 C 302.3418,351 302.6748,351 303.0083,351 Z" id="path170"/>
					<path style="clip-rule:evenodd;fill:#a7adb3;fill-rule:evenodd" d="m 310.01563,389.0166 c -0.0186,0.82227 -0.19531,1.56738 -0.99414,2.00342 -0.006,-1.67236 -0.0107,-3.34375 -0.0166,-5.01611 0.002,-11.66748 0.003,-23.33594 0.005,-35.00391 0.33301,0 0.66602,0 1,0 0.80273,12.67188 0.78613,25.34375 0.006,38.0166 z" id="path171"/>
					<path style="clip-rule:evenodd;fill:#959ba1;fill-rule:evenodd" d="m 299.00732,351 c 0.66211,6.49658 -1.34912,12.85254 -1.01172,19.33154 0.0845,1.62646 -0.41211,2.94629 -1.97998,3.6875 1.15137,-7.63721 1.03809,-15.32959 0.99121,-23.01904 0.66651,0 1.33399,0 2.00049,0 z" id="path172"/>
					<path style="clip-rule:evenodd;fill:#a5aaac;fill-rule:evenodd" d="m 310.01563,389.0166 -1.4195,-44.10553 h 1 c -0.002,10.94873 1.4379,27.98639 1.3783,38.93512 -0.01,1.74658 0.65039,3.69141 -0.95898,5.17041 z" id="path177" sodipodi:nodetypes="ccccsc"/>
					<path style="clip-rule:evenodd;fill:#697175;fill-rule:evenodd" d="m 314.01074,351 c 0.002,10.00049 0.004,20.00098 0.006,30.00098 -0.33301,0.35938 -0.66309,0.33984 -0.99121,-0.007 -0.005,-9.99805 -0.01,-19.99561 -0.0147,-29.99414 0.33301,0 0.66602,0 1,0 z" id="path178"/>
					<path style="clip-rule:evenodd;fill:#818485;fill-rule:evenodd" d="m 321.01758,373 c -1.25,-7.2915 -3.88281,-14.03434 -3.85058,-21.38493 L 321.0127,351 c 1.35254,4.62061 -0.375,9.45068 0.95801,14.07275 0.0166,0.97559 0.0332,1.95166 0.0498,2.92725 0.84473,1.45947 0.45898,3.0127 0.3457,4.54492 -0.34082,0.47363 -0.79004,0.62549 -1.34863,0.45508 z" id="path179" sodipodi:nodetypes="ccccccc"/>
					<path style="clip-rule:evenodd;fill:#bdc1c5;fill-rule:evenodd" d="m 302.00781,351 c -0.002,4.6665 -0.003,9.3335 -0.005,13.99951 -0.32813,0.44531 -0.6582,0.4707 -0.9917,0.006 -9.8e-4,-4.66797 -0.002,-9.33691 -0.003,-14.00537 0.3335,0 0.66651,0 1,0 z" id="path180"/>
					<path style="clip-rule:evenodd;fill:#898b8d;fill-rule:evenodd" d="m 341.00488,387.04639 c 0.9834,1.34326 1.9668,2.68604 2.94922,4.0293 0.041,0.62793 0.0811,1.25488 0.12207,1.8833 0.72559,0.94141 1.21191,1.97656 1.25781,3.18555 0.80078,7.13281 -0.52344,14.03125 -2.34863,20.85938 -0.0205,0.50195 -0.12891,0.99609 -0.31543,1.46191 -0.38672,0.5127 -0.8877,1.0498 -1.51074,0.48145 -1.02734,-0.93848 -2.37207,-1.45508 -3.1582,-1.01953 -1.25684,-1.35254 -0.58887,-2.79004 -0.20703,-4.22559 0.21094,-0.79102 0.52051,-1.67773 -0.58105,-2.06934 -0.81836,-0.29102 -1.78223,-0.28027 -2.34961,0.35742 -2.23047,2.50586 -4.2168,5.18945 -4.46289,8.70898 -0.29395,4.19922 3.65723,0.52539 4.61621,2.45313 0.23926,2.64844 -1.61523,3.71582 -3.55273,4.73047 -5.88184,0.49219 -7.87207,-1.78223 -6.31738,-7.36133 0.74902,-2.69238 2.3623,-5.00195 3.65527,-7.44141 0.9668,-1.31543 2.21289,-2.49316 2.76563,-4.05469 1.26074,-3.56152 3.23535,-5.15332 7.0127,-3.16504 2.01074,1.05762 2.69336,-0.37891 2.89648,-2.00098 0.3916,-3.1084 0.60645,-6.23242 -0.55469,-9.2666 -0.6172,-2.5249 -1.99513,-5.05859 0.083,-7.54638 z" id="path181"/>
					<path style="clip-rule:evenodd;fill:#b5b6b7;fill-rule:evenodd" d="m 310.97559,442.90234 c -3.31055,9.8e-4 -6.62109,0.002 -9.93164,0.003 -0.96826,-1.0498 -2.37061,-0.78223 -3.56201,-1.16406 -1.01123,-0.90039 -2.32471,-1.16406 -3.52051,-1.67383 -0.31641,-0.0107 -0.63135,-0.04 -0.94482,-0.0869 -2.30029,-0.38965 -4.25,-1.51367 -6.07471,-2.89844 -4.63818,-1.05078 -7.20215,-4.66602 -9.95508,-8.04785 -0.53418,-0.58789 -0.6123,-1.23633 -0.2583,-1.94238 2.34277,-0.99512 3.22021,1.1543 4.6377,2.14844 1.47314,1.5332 2.88135,3.14746 4.84375,4.1084 1.2832,0.75098 2.65039,1.30957 4.05713,1.78711 0.83643,0.32129 1.60498,0.76953 2.37549,1.2168 0.8291,0.45215 1.71094,0.77148 2.59863,1.08789 5.09863,0.96387 10.22754,1.46777 15.41602,1.25977 1.05859,0.0391 2.08594,0.20605 3.00195,0.78613 1.29394,2.85253 -1.917,2.17577 -2.6836,3.416 z" id="path182"/>
					<path style="clip-rule:evenodd;fill:#adaeb0;fill-rule:evenodd" d="m 342.11035,418.125 c 0.47266,-7.38867 2.89355,-14.6084 1.92578,-22.12305 1.34277,-0.70654 2.08203,0.20996 2.84668,1.05762 -9.8e-4,3.96387 -9.8e-4,7.92871 -0.002,11.89258 -1.73633,2.75684 -3.35156,5.56152 -3.54102,8.93262 -0.35254,0.3789 -0.76269,0.458 -1.22949,0.24023 z" id="path183"/>
					<path style="clip-rule:evenodd;fill:#a7abac;fill-rule:evenodd" d="m 314.04004,440.06836 c -1.01758,-0.0205 -2.03418,-0.041 -3.05273,-0.0615 1.56445,-3.88184 5.33887,-1.41016 7.79004,-2.72754 2.10059,-0.8291 4.26172,-1.55469 5.80664,-3.35352 0.3457,-0.28906 0.72363,-0.53125 1.11816,-0.74414 2.79004,-1.03809 4.29492,-3.83594 6.93359,-5.08887 0.88379,-0.34375 1.77051,-0.7002 2.6543,-0.005 0.70605,2.17578 -0.97168,2.92578 -2.31836,3.87305 l -0.003,0.002 c -2.16016,1.90723 -4.42383,3.6709 -6.97559,5.03418 -2.07324,1.55664 -4.13184,3.14746 -6.92773,3.07227 -1.6748,0.88379 -3.35059,1.56836 -5.02539,-9.8e-4 z" id="path184"/>
					<path style="clip-rule:evenodd;fill:#d1d1d1;fill-rule:evenodd" d="m 277.0791,426.88574 c -0.0303,0.71582 -0.061,1.43164 -0.0918,2.14844 -3.37402,-3.7832 -7.56885,-7.12793 -6.96777,-13.03516 0.34326,-0.008 0.68652,-0.0137 1.03027,-0.0205 2.12793,0.83203 2.16748,3.30859 3.66797,4.6377 1.13282,1.95899 2.91455,3.67676 2.36133,6.26953 z" id="path185"/>
					<path style="clip-rule:evenodd;fill:#898b8d;fill-rule:evenodd" d="m 338.89258,424.00391 c 0.083,0.34473 0.16602,0.68945 0.24902,1.03418 -0.15723,0.22949 -0.25684,0.48145 -0.29883,0.75586 -0.96973,1.23145 -1.91797,2.49512 -3.76367,2.27734 -0.69629,0.29785 -1.39355,0.59668 -2.08984,0.89551 -0.60352,-0.61719 -0.58301,-1.30664 -0.23242,-2.0332 1.91601,-1.24708 2.98535,-4.26661 6.13574,-2.92969 z" id="path186"/>
					<path style="clip-rule:evenodd;fill:#c3c4c5;fill-rule:evenodd" d="m 346.88281,397.05957 c -0.94922,-0.35254 -1.89746,-0.7041 -2.84668,-1.05762 0.0127,-1.01367 0.0264,-2.02832 0.0391,-3.04297 2.45704,0.3252 3.13868,1.86622 2.80762,4.10059 z" id="path187"/>
					<path style="clip-rule:evenodd;fill:#bfc0c1;fill-rule:evenodd" d="m 270.05225,388.03564 c 1.35986,-1.64258 1.5166,-4.23633 3.96582,-5.01855 0.50391,0.46191 0.62256,1.04834 0.54834,1.6958 -0.0996,0.40137 -0.2583,0.78027 -0.45996,1.13965 -0.67529,1.01611 -1.07617,2.16162 -1.52246,3.28906 -0.3623,0.75391 -0.78125,1.46191 -1.54883,1.88232 -0.32227,-0.006 -0.64453,0.002 -0.96582,0.0234 -0.0327,-0.68896 -0.0659,-1.37842 -0.1001,-2.06787 0.0303,-0.31445 0.0576,-0.6289 0.083,-0.94385 z" id="path188"/>
					<path style="clip-rule:evenodd;fill:#555e61;fill-rule:evenodd" d="m 320.01563,380.00391 c 1.66504,5.00293 3.33105,10.00488 4.99609,15.0083 4.44531,6.84229 4.31836,13.17139 -0.35938,18.51514 -3.4834,1.94238 -7.35742,3.51367 -6.72363,8.74414 0.11621,0.9541 -0.57422,2.30664 -2.21875,1.68945 -1.21582,-3.69629 -3.75293,-4.85254 -7.58398,-4.67383 -4.73535,0.2207 -4.74756,-0.0459 -5.87988,-2.66699 2.10156,-1.43164 4.49805,-0.89941 6.78711,-0.98438 5.20117,-0.19238 6.33594,-1.24512 6.54883,-6.54395 0.13379,-3.32227 -0.007,-6.65039 0.0654,-9.97461 0.0391,-1.80176 -0.19336,-3.70752 1.36914,-5.11426 2.11719,4.08008 0.56348,8.44824 0.96191,12.66504 0.21582,2.28223 -0.34277,5.5 2.64648,5.56055 3.25977,0.0664 4.5,-2.67676 4.42773,-6.00293 -0.15332,-7.06738 -3.00586,-13.53516 -4.31445,-20.34375 -0.3789,-1.96874 -0.7539,-3.88232 -0.72265,-5.87792 z" id="path189"/>
					<path style="clip-rule:evenodd;fill:#5d6164;fill-rule:evenodd" d="m 317.0166,394.00293 c -0.002,5.11426 0.0654,10.22949 -0.0244,15.34375 -0.10938,6.25977 -1.50195,7.61621 -7.5625,7.66504 -2.47461,0.0195 -4.94922,0.005 -7.42432,0.007 -4.10352,2.58496 -8.61572,0.97363 -12.93896,1.27148 -3.4165,-0.58105 -6.55859,-2.10059 -9.89844,-2.95313 -0.95557,-0.23438 -1.83154,-0.63379 -2.56787,-1.28711 -0.78564,-0.2373 -1.02686,-2.38965 -2.3667,-0.64258 -0.2666,1.08203 -0.33887,2.24414 -1.47266,2.85547 -2.65771,-1.02637 -0.16455,-3.8418 -1.81738,-5.21582 l 0.005,0.003 c -0.6499,-1.29199 -0.71973,-2.49512 0.53711,-3.49512 2.33105,-0.86328 4.11865,0.37012 5.79297,1.6543 2.22461,1.70703 4.60742,3.02441 7.33594,3.70801 0.52881,0.12891 1.03174,0.31445 1.52734,0.53125 7.49121,2.17969 15.12793,1.31348 22.67871,0.79883 3.90723,-0.26563 5.78906,-2.92285 5.91602,-7.2002 0.13867,-4.67676 -1.49023,-9.5918 1.28516,-14.04102 0.33008,9.8e-4 0.66113,0.003 0.99121,0.004 0.002,0.33106 0.003,0.66212 0.004,0.99317 z" id="path190"/>
					<path style="clip-rule:evenodd;fill:#555e61;fill-rule:evenodd" d="m 319.01563,372.00195 c 1.89746,2.11279 0.61719,4.67676 0.99414,7.00537 -1.91309,-2.11084 -0.61817,-4.67675 -0.99414,-7.00537 z" id="path191"/>
					<path style="clip-rule:evenodd;fill:#797b7f;fill-rule:evenodd" d="m 271.97217,407.98438 c -1.15137,0.75098 -0.87402,1.97949 -1.02344,3.06543 -1.85303,-4.81055 -0.80615,-9.74316 -0.57227,-14.63281 0.0859,-1.80469 0.43115,-3.5957 0.6582,-5.39307 0.28564,-0.69385 0.57129,-1.38623 0.85645,-2.07959 0.40625,-0.32422 0.82178,-0.32129 1.24414,-0.0381 0.7002,1.41113 0.021,2.88916 0.25977,4.91309 1.51611,-2.84619 1.65479,-5.17578 0.26611,-7.58154 -0.12451,-0.47705 -0.0117,-0.89697 0.29883,-1.26904 l -0.007,0.0166 c 0.82031,-1.27686 1.06836,-2.83057 1.96289,-4.07227 l -0.04,0.0146 c 0.67773,-0.38086 0.99561,-1.59033 2.12793,-0.92383 -0.26709,2.50049 -0.34424,4.50293 1.31689,7.12646 1.25537,1.98193 -0.85596,6.18701 -1.64844,9.35791 -2.50146,10.01465 -1.13086,12.60547 8.99316,14.81055 6.78369,1.47656 13.87354,1.04102 20.39404,-0.75488 5.30957,-1.46387 5.62305,-7.34375 5.87891,-12.12988 0.30957,-5.7915 0.082,-11.61182 0.0869,-17.41992 0.33008,0.009 0.66113,0.0107 0.99121,0.007 l -9.8e-4,0.002 c 1.32617,7.69043 1.30469,15.46289 0.82617,23.18555 -0.48047,7.75781 -3.375,10.2207 -11.01904,10.19336 -5.94824,-0.0215 -11.91895,0.47363 -17.82764,-0.51465 -3.68994,-0.91699 -7.12891,-2.25586 -9.88574,-5.11523 -1.00828,-1.04494 -2.37888,-2.63771 -4.13718,-0.76759 z" id="path192"/>
					<path style="clip-rule:evenodd;fill:#888e94;fill-rule:evenodd" d="m 284.00732,373.07617 c 0.31396,-0.0459 0.62939,-0.0811 0.94531,-0.10645 2.72266,0.0742 5.36865,0.0703 6.35986,-3.29541 0.22656,-0.76953 0.88965,-1.50928 1.88037,-1.11377 0.95117,0.38037 0.86182,1.36768 0.76563,2.13818 -0.30566,2.43652 -1.32422,4.77881 -0.95361,7.30664 -3.07715,8.09717 -5.87354,16.28076 -7.97363,24.69775 -0.77246,3.09473 0.77344,3.67188 3.33447,3.97852 2.3291,0.2793 5.43701,-1.25977 6.64063,2.33105 -2.79834,0 -5.59619,0.0186 -8.39502,-0.002 -6.19385,-0.0449 -8.28613,-2.81348 -6.63867,-8.71289 0.39551,-1.41504 0.68994,-2.85742 1.03076,-4.28809 0.26172,-3.4917 2.14697,-6.49512 2.96387,-9.82324 0.42725,-1.74023 1.12061,-3.44385 0.0366,-5.18066 -0.33301,0 -0.66602,0 -0.99951,0 -1.69434,-1.12598 -2.08008,-2.78174 -1.89258,-4.66992 0.40673,-1.58056 1.58545,-2.47802 2.8955,-3.25976 z" id="path193"/>
					<path style="clip-rule:evenodd;fill:#8b9298;fill-rule:evenodd" d="m 295.00635,409.0127 c -2.3418,-1.96191 -5.10645,-0.79297 -7.66602,-0.9541 -4.3833,-0.27637 -4.68213,-1.71484 -3.88477,-6.04004 1.23779,-6.71631 5.86963,-12.39453 5.55518,-19.47021 -0.12598,-2.83545 3.05518,-2.68701 3.99414,-4.54297 0,1 0,2.00049 0,3.00049 1.95117,4.08789 -1.72266,7.09717 -2.04395,10.74658 -0.3457,1.10596 -0.66162,2.22217 -0.91797,3.35742 -1.79395,7.94287 2.57373,12.33154 10.80176,10.93994 2.29541,-0.38867 4.5083,-1.12402 6.81738,-1.43945 0.49121,0.005 0.94336,0.13574 1.35352,0.40527 0.18848,2.98438 -1.32031,4.10352 -4.17822,4.0166 -3.27441,-0.0986 -6.55371,-0.0205 -9.83105,-0.0195 z" id="path194"/>
					<path style="clip-rule:evenodd;fill:#868b8f;fill-rule:evenodd" d="m 284.00391,381.00586 c 2.07227,2.81885 1.60645,6.18018 0.27051,8.65723 -1.12158,2.07959 -1.90137,4.38574 -3.271,6.34668 -1.39795,-5.48047 2.72265,-9.8584 3.00049,-15.00391 z" id="path195"/>
					<path style="clip-rule:evenodd;fill:#8f959b;fill-rule:evenodd" d="m 309.01563,405.01563 c -0.33496,-9.8e-4 -0.66992,-9.8e-4 -1.00488,-0.002 -0.0996,-0.1875 -0.19824,-0.37695 -0.30078,-0.56348 -0.0772,-1.10352 0.21191,-2.11035 0.80078,-3.03906 0.16309,-0.13477 0.33008,-0.26855 0.49707,-0.40234 3.19922,-3.06641 0.79102,-7.66406 3.00195,-11 0.1123,5.22411 0.44824,10.49218 -2.99414,15.00683 z" id="path196"/>
					<path style="clip-rule:evenodd;fill:#868b8f;fill-rule:evenodd" d="m 282.00342,376 c 0.3335,1.66846 0.66748,3.3374 1.00098,5.00586 -0.78271,1.12451 -1.79639,1.21045 -2.81787,0.45313 -1.39111,-1.0293 0.0137,-2.30811 -0.18604,-3.4585 -0.62305,-1.0874 0.37305,-1.54346 0.85693,-2.19873 0.43262,-0.22852 0.8125,-0.14844 1.146,0.19824 z" id="path197"/>
					<path style="clip-rule:evenodd;fill:#888e94;fill-rule:evenodd" d="m 281.0166,376.0498 c -0.33838,0.64941 -0.67725,1.2998 -1.01611,1.95068 -0.94873,0.38574 -1.61914,1.04785 -1.99658,2.00342 -0.70898,0.30859 -1.41748,0.61621 -2.12695,0.92383 0.0986,-0.62012 0.19824,-1.23926 0.29883,-1.85889 1.28516,-1.01758 2.57031,-2.03467 3.85449,-3.05225 0.34423,-0.43749 0.67382,-0.44921 0.98632,0.0332 z" id="path198"/>
					<path style="clip-rule:evenodd;fill:#92999f;fill-rule:evenodd" d="m 290.00586,392.00928 c -0.23682,-4.00488 2.7666,-7.12646 2.99902,-11.00342 0.33301,0 0.66504,0 0.99756,-9.8e-4 0.18604,0.20898 0.37158,0.41699 0.55957,0.625 0.30469,5.21729 -0.53369,10.42236 -0.16455,15.6377 -0.10742,2.03027 0.4209,3.68945 2.21387,4.97266 1.03223,0.73828 2.57275,1.75879 0.81494,3.36426 -5.95557,-0.43652 -8.5249,-2.90918 -8.21289,-8.36816 0.0981,-1.71925 -0.10449,-3.58693 0.79248,-5.22706 z" id="path199"/>
					<path style="clip-rule:evenodd;fill:#959ba1;fill-rule:evenodd" d="m 295.99951,375.00635 c 0.002,0.99951 0.004,1.99951 0.007,3 -1.29688,0.58008 0.62549,3.30322 -1.99756,3.00049 l -0.006,-0.002 c -0.0776,-2.24659 0.061,-4.42188 1.99707,-5.99854 z" id="path200"/>
					<path style="clip-rule:evenodd;fill:#9ba2a8;fill-rule:evenodd" d="m 294.00879,381.00684 c 0.66553,-1 1.33154,-2.00049 1.99756,-3.00049 0,2.00049 -4.9e-4,4.00098 -4.9e-4,6.00146 -1.13037,2.63721 -0.71045,5.5 -0.70361,8.17334 0.0146,5.98877 6.28809,9.56787 11.88818,7.15186 0.61133,-0.2627 1.13867,-0.6084 1.81738,-0.32324 0,0.66602 0,1.33203 0,1.99902 l -9.8e-4,0.002 c -5.2085,5.66992 -11.11084,4.56348 -16.00098,-3 -0.0654,-5.69189 -0.16112,-11.38428 1.00294,-17.0039 z" id="path201"/>
					<path style="clip-rule:evenodd;fill:#a1a7ad;fill-rule:evenodd" d="m 309.00781,399.00977 c -3.39355,2.72363 -7.0498,2.85645 -10.60254,0.59082 -3.62939,-2.31348 -4.54297,-5.84082 -3.49561,-9.93359 0.47705,-1.86475 -0.6875,-4.04785 1.09619,-5.65918 4.9e-4,1.9873 0.12988,3.98584 -0.0239,5.96289 -0.34619,4.43945 2.08691,6.98926 5.57568,9.13281 3.41064,2.09668 5.07324,-1.05957 7.45215,-2.09277 -9.6e-4,0.66601 -0.002,1.333 -0.002,1.99902 z" id="path202"/>
					<path style="clip-rule:evenodd;fill:#c5c7ca;fill-rule:evenodd" d="m 301.01074,365.00537 c 0.33057,-0.002 0.66113,-0.004 0.9917,-0.006 0.002,4.00195 0.005,8.00342 0.007,12.00537 0.50439,3.39355 0.94238,6.82861 4.99902,8.00293 -2.00391,4.39844 -3.99951,1.72803 -5.99658,-0.007 -0.80615,-5.6665 -0.79248,-11.3335 -0.0102,-17.00195 0.003,-0.99707 0.006,-1.9956 0.009,-2.99365 z" id="path203"/>
					<path style="clip-rule:evenodd;fill:#bdc1c5;fill-rule:evenodd" d="m 301.00195,367.99902 c 0.003,5.66748 0.007,11.33447 0.0102,17.00195 -0.002,0.66992 -0.004,1.34033 -0.006,2.01025 -1.62255,-6.33739 -1.58788,-12.67479 -0.004,-19.0122 z" id="path204"/>
					<path style="clip-rule:evenodd;fill:#818485;fill-rule:evenodd" d="m 342.05176,394.98926 c 2.125,4.55078 0.71973,8.93652 -0.42676,13.28223 -0.35742,0.0781 -0.57422,0.20117 -0.67285,0.1377 -3.93359,-2.53711 -7.39258,-3.62598 -8.96777,2.5127 -0.20898,0.81152 -1.29199,1.39941 -1.9707,2.09082 -0.83789,-0.73438 -0.88574,-1.68652 -0.75293,-2.69238 0.0937,-0.47852 0.24512,-0.94043 0.42285,-1.39355 2.10156,-4.08887 0.27051,-8.02246 -0.57715,-11.9502 -0.90137,-4.18457 -3.09863,-7.91211 -4.58789,-11.89551 -0.44336,-1.57275 -1.71973,-3.02002 -0.72461,-4.80664 3.61035,-0.51465 3.14648,4.13477 6.16504,4.66895 2.10645,-1.50146 -0.43066,-7.41357 5.16895,-5.99072 0.87305,0.44922 1.60449,1.02295 1.78027,2.07275 -0.77051,1.10889 -1.66309,2.37451 -1.30371,3.66309 1.5459,5.54102 2.16016,11.31006 3.77246,17.52344 2.30468,-2.49905 0.48339,-5.58499 2.6748,-7.22268 z" id="path205"/>
					<path style="clip-rule:evenodd;fill:#76797a;fill-rule:evenodd" d="m 342.05176,394.98926 c -0.0137,2.15918 -0.0166,4.31738 -0.0439,6.47656 -0.0156,1.16895 0.007,2.62109 -1.38281,2.83301 -1.26465,0.19141 -1.91504,-1.11523 -2.50195,-2.11621 -0.76758,-1.31055 -0.89258,-2.78418 -1.18164,-4.25391 -0.72656,-3.69434 -0.82422,-7.48242 -2.31934,-11.09326 -0.84668,-2.04346 -2.42383,-5.46533 2.28711,-5.81006 1.59863,1.84814 2.06738,4.46484 4.0957,6.021 -0.45215,2.75341 0.91309,5.2666 1.04688,7.94287 z" id="path206"/>
					<path style="clip-rule:evenodd;fill:#8b8d8d;fill-rule:evenodd" d="m 335.12793,378.95264 c -3.3623,0.30957 -3.12988,2.7915 -3.11719,5.14893 0.007,1.3418 0.0449,2.86182 -1.4541,3.38037 -1.49414,0.51758 -1.8291,-1.12891 -2.4873,-1.93896 -1.44141,-1.77295 -2.71582,-3.68115 -4.05859,-5.53418 -0.16016,-0.18262 -0.32129,-0.36621 -0.4834,-0.54834 -0.36035,-0.97852 -0.31152,-1.87988 0.49219,-2.63818 2.9248,2.5874 5.94043,1.65576 8.96777,0.2168 0.44531,0.79248 1.19629,0.95557 2.01465,0.97803 0.0478,0.31053 0.0908,0.62205 0.12597,0.93553 z" id="path207"/>
					<path style="clip-rule:evenodd;fill:#c8cccf;fill-rule:evenodd" d="m 307.00879,385.00781 c -3.24658,0.9502 -4.95654,-0.21094 -4.99316,-3.64746 -0.0156,-1.45117 -0.005,-2.90381 -0.006,-4.35547 0.22656,0.2373 0.50635,0.44238 0.66992,0.71729 0.70654,1.18652 -0.12646,3.68506 1.86621,3.54639 2.11426,-0.14648 2.55957,-2.28662 2.45996,-4.26465 0.0244,-0.82129 0.19922,-1.56738 1.00293,-1.99854 -0.44434,3.32324 1.02637,6.83789 -1,10.00244 z" id="path208"/>
					<path style="clip-rule:evenodd;fill:#91979c;fill-rule:evenodd" d="m 281.0166,376.0498 c -0.32861,-0.0156 -0.65723,-0.0264 -0.98682,-0.0332 0.61475,-1.38232 1.74414,-2.24951 2.99023,-3.00098 0.3291,0.0195 0.6582,0.0391 0.9873,0.0605 -0.66797,0.9751 -1.33594,1.94971 -2.00439,2.92383 -0.32909,0.005 -0.65771,0.0205 -0.98632,0.0498 z" id="path209"/>
					<path style="clip-rule:evenodd;fill:#797b7f;fill-rule:evenodd" d="m 270.94336,411.04688 c 1.97217,1.15723 0.25,3.78125 1.99512,5.02832 1.09766,0.73535 1.41357,1.89746 1.69043,3.08496 0.0644,0.75488 -0.0811,1.4375 -0.69678,1.94922 -2.25879,-0.98145 -1.90039,-3.43262 -2.88281,-5.13086 -0.0352,-1.64356 -0.0708,-3.28809 -0.10596,-4.93164 z" id="path210"/>
					<path style="clip-rule:evenodd;fill:#979897;fill-rule:evenodd" d="m 332.9873,377.03906 c -4.69824,4.70313 -4.69824,4.70313 -8.96973,-0.0381 -1.63477,-0.52148 -1.9248,-1.84766 -1.9834,-3.31201 -0.005,-0.23047 -0.009,-0.46094 -0.0137,-0.69189 0,-1.66602 0,-3.33154 -9.8e-4,-4.99707 1.03321,6.1958 6.33204,7.21484 10.96778,9.03906 z" id="path211"/>
					<path style="clip-rule:evenodd;fill:#727778;fill-rule:evenodd" d="m 324.01074,380.00879 c 0.33496,1.66602 0.66895,3.33154 1.00391,4.99805 2.44629,5.57422 5.12207,11.05957 5.76172,17.25293 0.27539,2.66602 0.39648,5.25684 -0.76172,7.75391 l 9.8e-4,0.002 c -0.5293,0.33105 -0.99805,0.26074 -1.4082,-0.20801 -1.30469,-2.69824 0.14063,-5.83789 -1.36621,-8.50293 -0.54004,-3.47461 -1.35449,-6.89258 -2.22656,-10.29736 -0.85645,-6.10791 -4.56836,-11.58203 -3.99707,-18.00732 0.33496,-9.8e-4 0.66895,-0.002 1.00293,-0.003 l -9.9e-4,0.003 c 0.81836,2.29199 1.08789,4.73975 1.99219,7.00781 z" id="path212"/>
					<path style="clip-rule:evenodd;fill:#656b6d;fill-rule:evenodd" d="m 325.01465,391.00732 c 1.84277,3.08057 2.99805,6.36768 3.00293,10.00049 0.74316,4.7002 1.37891,9.37793 -1.82422,13.55664 -1.10742,1.44336 -2.14941,2.93262 -4.25098,2.88672 -2.29883,-2.86719 1.12695,-3.0752 2.06738,-4.43945 4.13965,-4.09277 2.90039,-8.92773 1.89258,-13.73047 -0.29785,-1.42188 -0.59375,-2.8457 -0.89063,-4.26904 9.9e-4,-1.33545 0.002,-2.66992 0.003,-4.00489 z" id="path213"/>
					<path style="clip-rule:evenodd;fill:#697175;fill-rule:evenodd" d="m 284.00342,413.01465 c 6.94922,9.8e-4 13.90967,-0.23047 20.84521,0.083 4.87109,0.21973 7.28223,-1.67676 8.26855,-6.40332 1.7832,-8.54004 0.4209,-17.13672 0.89844,-25.69141 1.78711,1.7583 0.67773,3.99902 1.00195,6.00146 1.01465,7.09131 0.51172,14.22412 0.33203,21.32373 -0.10938,4.28125 -2.9248,6.87207 -8.19531,6.99414 -7.3833,0.17188 -14.9043,1.30957 -22.15039,-1.30762 -0.33301,-0.002 -0.66504,-0.004 -0.99756,-0.004 -0.25488,-0.2207 -0.34033,-0.44238 -0.25635,-0.66406 0.0845,-0.22167 0.16847,-0.33202 0.25343,-0.33202 z" id="path214"/>
					<path style="clip-rule:evenodd;fill:#64686c;fill-rule:evenodd" d="m 285.00391,414.01465 c 6.23535,1.29199 12.55566,1.03906 18.85742,0.9834 8.41113,-0.0742 11.11426,-2.7832 11.14648,-11.00293 0.0215,-5.66309 0.008,-11.32715 0.01,-16.99072 1.78809,1.75732 0.66992,4.00098 1.00391,6.00146 -0.003,4.8125 -0.19043,9.63379 0.044,14.43359 0.21387,4.37305 -1.57324,7.41016 -5.78809,7.83594 -8.44434,0.85449 -17.01856,2.39453 -25.27344,-1.26074 z" id="path215"/>
					<path style="clip-rule:evenodd;fill:#7a7d7f;fill-rule:evenodd" d="m 329.0127,410.0127 c 0.33398,9.8e-4 0.66895,0.002 1.00293,0.003 0,0.99902 -9.8e-4,1.99805 -0.002,2.99707 -0.92969,1.87793 -1.80664,3.7832 -2.7998,5.62695 -3.01758,5.59863 -1.46387,8.33789 4.7959,8.37305 0.33887,-0.41504 0.6748,-0.41504 1.00879,0.005 -0.01,0.65039 -0.0186,1.30078 -0.0283,1.9502 -2.66895,1.20996 -3.56445,4.87012 -6.97559,5.05566 -0.59375,-0.79883 -1.14648,-1.62207 -1.95801,-2.24414 -4.54883,-3.48828 -5.59277,-7.69531 -2.16504,-12.2793 2.3623,-3.16016 4.18944,-6.75391 7.12109,-9.4873 z" id="path216"/>
					<path style="clip-rule:evenodd;fill:#8f9193;fill-rule:evenodd" d="m 335.0166,423.01855 c -1.92578,-0.55273 -3.31836,3.28711 -5.22461,0.90918 -1.57422,-1.96289 -1.02051,-4.44141 0.10449,-6.59082 0.99512,-1.90332 2.16016,-3.7207 3.27344,-5.56348 1.43066,-2.36621 3.88574,-2.2793 5.73145,-1.40234 2.21777,1.05273 0.18262,2.82227 -0.17578,4.28223 -0.27344,1.1123 -0.47266,2.24219 -0.70508,3.36523 -0.21387,0.0879 -0.42773,0.17676 -0.64258,0.26563 -0.45703,-0.15137 -0.79785,-0.44434 -1.04297,-0.85352 -0.42285,-0.62402 -0.53125,-1.97852 -1.35449,-1.7002 -1.43066,0.48438 -2.1709,2.04199 -2.16211,3.40723 0.0107,1.5459 1.81836,0.70703 2.67188,1.2793 1.14355,0.6875 0.87207,1.47656 0.16406,2.29688 -0.21192,0.10254 -0.42481,0.20312 -0.6377,0.30468 z" id="path217"/>
					<path style="clip-rule:evenodd;fill:#808184;fill-rule:evenodd" d="m 333.01855,427.01758 c -0.33594,-9.8e-4 -0.67188,-0.003 -1.00879,-0.005 1.00195,-1.33203 2.00488,-2.66309 3.00684,-3.99414 v 0 c 2.25879,-0.91113 1.20801,-3.81055 3.00391,-4.99805 v -0.002 c 0.76367,-1.00684 1.52832,-2.0127 2.56641,-3.37891 0.87305,1.4248 -0.14941,3.36426 1.2832,4.33301 -0.99316,1.67676 -1.98535,3.35352 -2.97754,5.03125 -1.95801,1.0039 -3.91602,2.00879 -5.87403,3.01367 z" id="path218"/>
					<path style="clip-rule:evenodd;fill:#47484a;fill-rule:evenodd" d="m 285.75098,434.17285 c -2.37256,-0.39746 -3.55371,-2.24414 -4.83057,-3.97363 -0.4585,-0.72559 -0.54883,-1.46582 -0.0874,-2.22852 1.11963,-0.50879 2.02393,0.0371 2.92773,0.58691 1.98389,2.05273 4.58301,2.92773 7.24609,2.68262 4.30664,-0.39746 8.61133,-0.54492 12.92285,-0.65039 2.43066,-0.0596 3.74219,-1.28027 3.90723,-3.60547 0.18652,-2.61621 -1.68359,-3.11914 -3.77588,-3.66406 -4.88623,-1.27441 -9.92578,-0.60352 -14.83936,-1.41406 -3.44482,-1.9375 -8.33838,-1.19141 -10.44531,-5.61523 0.28027,-0.47949 0.69678,-0.75586 1.24756,-0.82813 3.65186,0.39355 6.8501,2.49219 10.52783,2.7998 3.26221,0.74902 6.59277,0.1582 9.87842,0.51465 1.79053,0.37305 3.5625,0.75293 5.40039,0.91699 5.63721,0.50293 7.39111,2.00391 7.4585,6.07227 0.085,5.04102 -3.00195,9.08105 -7.64746,9.46289 -4.96729,0.40918 -9.97119,0.14746 -14.9541,0.32813 -1.73145,-0.14746 -3.23437,-1.1211 -4.93652,-1.38477 z" id="path219"/>
					<path style="clip-rule:evenodd;fill:#4d4f51;fill-rule:evenodd" d="m 290.00488,419.01758 c -3.33398,-1.00098 -6.66699,-2.00391 -10.00049,-3.00488 -0.56104,-0.55176 -1.66309,-0.83203 -1.00146,-1.99609 3.00049,0.99902 6.00146,1.99902 9.00195,2.99902 6.03418,0.85938 12.14014,0.74512 18.20215,1.41504 5.96094,0.6582 8.4375,1.60156 8.70215,5.42773 0.38281,5.5166 -1.32422,10.90625 -6.68262,12.51855 -4.9585,1.49023 -9.88672,0.55566 -14.82324,0.77832 -0.53369,0.31055 -1.06592,0.30762 -1.59668,-0.005 -0.59863,-0.38867 -1.19678,-0.77734 -1.79443,-1.16602 -0.34424,-0.21973 -0.45703,-0.4375 -0.33984,-0.65332 0.11572,-0.21387 0.23193,-0.32129 0.34912,-0.32129 4.646,-1.62109 9.46973,-1.05762 14.20557,-0.91992 4.87646,0.14258 6.75732,-2.67578 7.69971,-6.69531 0.89551,-3.81934 -0.72363,-6.1123 -4.64551,-6.27637 -2.49072,-0.10352 -4.89209,-0.44629 -7.27344,-1.10352 -3.22559,-1.42089 -6.77247,0.37208 -10.00294,-0.99706 z" id="path220"/>
					<path style="clip-rule:evenodd;fill:#5d6164;fill-rule:evenodd" d="m 291.80664,437.15039 c 0.38818,-0.0772 0.77686,-0.15332 1.16553,-0.23047 5.375,-0.98926 10.83447,-0.0947 16.25928,-0.79883 2.87695,-0.37305 4.02246,-1.50684 4.51465,-4.06836 0.52539,-2.7373 0.66406,-5.59961 2.26855,-8.03613 0.31152,-0.55957 0.97656,-1.1875 0.88281,-1.66895 -1.13184,-5.82422 2.07129,-8.26074 7.1123,-9.33594 -0.99805,1.33496 -1.99707,2.66992 -2.99609,4.00391 0.01,0.22949 0.0205,0.45996 0.0332,0.69043 -0.66992,2.68555 -1.68945,5.24707 -2.08691,8.04492 -1.04102,7.32422 -1.1709,7.30566 5.66895,7.80859 0.16113,0.16602 0.32129,0.33301 0.48242,0.50098 -0.35059,3.03125 -3.21875,2.86426 -5.06836,3.99219 -8.69434,0.86719 -17.38965,1.61328 -26.08545,0.01 -0.71729,-0.30469 -1.43408,-0.6084 -2.15088,-0.91211 z" id="path221"/>
					<path style="clip-rule:evenodd;fill:#797c7e;fill-rule:evenodd" d="m 293.95752,438.0625 c 8.69531,-0.004 17.39014,-0.007 26.08545,-0.0107 -2.66992,2.26465 -6.39648,-0.3623 -9.05469,1.95508 -5.75635,0.0459 -11.5293,0.23632 -17.03076,-1.94434 z" id="path222"/>
					<path style="clip-rule:evenodd;fill:#505152;fill-rule:evenodd" d="m 280.99365,428.02832 c -0.0239,0.72363 -0.0483,1.44629 -0.0727,2.16992 -1.28125,-1.10352 -2.56152,-2.20801 -3.8418,-3.3125 -1.04834,-1.92676 -2.09766,-3.85156 -3.14697,-5.77637 0.0117,-0.69727 0.0239,-1.39355 0.0361,-2.09082 1.52148,-0.47363 1.93408,0.80859 2.63184,1.64648 1.25,2.58009 3.90283,4.32911 4.39355,7.36329 z" id="path223"/>
					<path style="clip-rule:evenodd;fill:#5a5b5e;fill-rule:evenodd" d="m 290.02148,435.00977 c -0.003,0.32422 -0.006,0.65039 -0.009,0.97461 -1.6665,-0.0254 -3.021,-0.78125 -4.26025,-1.8125 1.55811,-0.41016 2.92627,0.14746 4.26953,0.83789 z" id="path224"/>
					<path style="clip-rule:evenodd;fill:#6a6c70;fill-rule:evenodd" d="m 329.0127,410.0127 c -1.85742,4.70996 -5.95898,8.13867 -7.28613,13.2168 -0.88477,3.38574 -1.48828,6.08496 2.93359,7.27344 1.4707,0.39453 2.39746,1.76953 1.35449,3.52051 -0.30176,0.0205 -0.60352,0.0322 -0.90527,0.0361 0.002,9.8e-4 -0.15332,-0.0391 -0.15332,-0.0391 -7.58301,-0.94043 -7.65332,-1.05371 -6.39063,-9.0625 0.43652,-2.76953 1.53223,-5.3252 2.44824,-7.94238 v 0 c 4.62695,-1.79688 6.44043,-5.58008 6.96191,-10.14453 0.22168,-1.92969 0.04,-3.90723 0.042,-5.86328 1.99415,2.81737 0.55763,6.01463 0.99513,9.00487 z" id="path225"/>
					<path style="clip-rule:evenodd;fill:#868b8f;fill-rule:evenodd" d="m 275.91602,380.91309 c -0.0127,1.6665 -0.58203,3.06543 -1.96289,4.07227 0.0215,-0.65527 0.043,-1.31201 0.0649,-1.96826 0.63281,-0.70118 1.26513,-1.40284 1.89795,-2.10401 z" id="path226"/>
					<path style="clip-rule:evenodd;fill:#868b8f;fill-rule:evenodd" d="m 272.96289,388.9707 c -0.35693,-0.009 -0.71338,-0.0166 -1.0708,-0.0264 0.0176,-1.67432 0.39111,-3.16504 2.06836,-3.97559 0.0288,0.35938 0.0576,0.71973 0.0869,1.0791 0.55225,1.31398 -0.0327,2.2046 -1.08447,2.92286 z" id="path227"/>
					<path style="clip-rule:evenodd;fill:#545658;fill-rule:evenodd" d="m 316.01465,424.0166 c 0.54199,4.03711 -1.79785,7.62598 -1.79199,11.59082 0.004,2.34766 -1.91699,1.33789 -2.94629,1.35156 -6.1001,0.0781 -12.20215,-0.007 -18.3042,-0.0381 0.43701,-2.25879 1.8042,-1.73926 3.39404,-1.31641 2.92334,0.77637 5.95654,0.6875 8.88916,0.13184 6.56006,-1.24316 9.42529,-5.00098 8.68018,-11.57715 -0.53027,-4.67578 -4.58105,-4.45605 -7.91797,-5.14941 -5.94385,-1.23633 -12.14307,-0.12207 -18.0127,-1.99414 4.66699,9.8e-4 9.33398,0.002 14.00049,0.003 2.3501,1.9541 5.13623,0.9541 7.67822,0.91309 4.36329,-0.0703 6.71192,1.45801 6.33106,6.08496 z" id="path228"/>
					<path style="clip-rule:evenodd;fill:#676b6f;fill-rule:evenodd" d="m 284.00342,413.01465 c -9.8e-4,0.33105 0,0.66406 0.003,0.99609 -4.85352,-0.32617 -7.33594,-5.38867 -12.03369,-6.02539 0.0298,-2.4668 0.80664,-3.8623 2.96924,-1.44922 2.56591,2.86426 5.65478,4.86035 9.06152,6.47852 z" id="path229"/>
					<path style="clip-rule:evenodd;fill:#4a4b4d;fill-rule:evenodd" d="m 275.99609,421.01855 c -0.67578,-0.66699 -1.35156,-1.33301 -2.02783,-2 -1.03369,-0.74023 -0.91553,-1.88281 -1.0293,-2.94336 0.0215,-1.35352 0.0435,-2.70703 0.0654,-4.06055 1.75049,-1.34082 2.71582,0.44824 3.9917,1.00098 0.43701,0.79883 1.18848,0.9668 2.00684,1.00098 0.33398,0.66504 0.66748,1.33105 1.00146,1.99609 -0.33594,0.002 -0.67139,0.003 -1.00684,0.005 -2.93456,0.50587 -1.53466,3.61427 -3.00146,5.00098 z" id="path230"/>
					<path style="clip-rule:evenodd;fill:#4d4f51;fill-rule:evenodd" d="m 276.99609,413.01563 c -1.33105,-0.33398 -2.66113,-0.66797 -3.9917,-1.00098 1.36622,-2.36035 1.60108,-2.30078 3.9917,1.00098 z" id="path231"/>
					<path style="clip-rule:evenodd;fill:#6b6d71;fill-rule:evenodd" d="m 272.96289,388.9707 c 0.36084,-0.97412 0.72168,-1.94873 1.08398,-2.92285 4.92627,3.86914 0.14795,7 -0.50195,11.52344 -2.33349,-3.52539 -1.56494,-6.05908 -0.58203,-8.60059 z" id="path232"/>
					<path style="clip-rule:evenodd;fill:#8f959b;fill-rule:evenodd" d="m 290.00586,392.00928 c 0.007,1.94775 -0.16162,3.91602 0.0576,5.84033 0.5293,4.65234 2.89111,7.44336 7.94434,7.16211 3.33252,-1.51953 6.6665,-0.74902 10,-0.002 l 0.003,0.004 c -6.33594,4.64258 -12.58252,1.77344 -18.83203,-0.23633 -0.93408,-0.30176 -1.21094,-1.15625 -1.11328,-1.97754 0.43163,-3.63282 -0.39601,-7.50049 1.94042,-10.79053 z" id="path233"/>
					<path style="clip-rule:evenodd;fill:#969da3;fill-rule:evenodd" d="m 308.00781,405.00977 c -3.3335,9.8e-4 -6.66699,0.002 -10,0.002 -1.52441,-2.43652 -5.91504,-2.82324 -5.00195,-7.00098 1.50977,1.22559 2.96436,2.52832 4.53906,3.66309 3.97168,2.86133 7.76074,1.63965 11.46191,-0.66309 0.15723,1.45508 -0.31738,2.75293 -0.99902,3.99903 z" id="path234"/>
					<path style="clip-rule:evenodd;fill:#787d7e;fill-rule:evenodd" d="m 330.01465,410.01367 c 0.45313,-7.58789 -0.54004,-14.87646 -4.25781,-21.66211 -0.52637,-0.9624 -0.50781,-2.22266 -0.74219,-3.34473 4.47559,5.80029 5.79883,12.73047 6.95215,19.69238 0.33398,2.01466 -0.27344,3.91993 -1.95215,5.31446 z" id="path235"/>
					<path style="clip-rule:evenodd;fill:#818485;fill-rule:evenodd" d="m 324.01172,380.00781 c -1.67773,-2.04834 -2.07422,-4.45996 -1.99219,-7.00781 0.66602,1.3335 1.33203,2.66797 1.99805,4.00098 -0.002,1.00244 -0.004,2.00439 -0.006,3.00683 z" id="path236"/>
					<path style="clip-rule:evenodd;fill:#949698;fill-rule:evenodd" d="m 336.01563,421.01563 c -0.96191,0.14746 -1.95508,0.18945 -2.87695,0.4668 -1.28906,0.38965 -2.94043,0.0801 -2.3916,-1.14844 1.12695,-2.52637 1.46387,-5.89551 4.51855,-7.03223 1.46875,-0.54688 1.68945,1.08008 1.73535,2.25977 0.0312,0.81738 0.0127,1.63672 0.0166,2.45605 1.03906,1.45801 0.0908,2.25195 -1.00195,2.99805 z" id="path237"/>
					<path style="clip-rule:evenodd;fill:#898b8d;fill-rule:evenodd" d="m 336.01563,421.01563 c 0.33398,-0.99902 0.66797,-1.99805 1.00195,-2.99805 0.33496,9.8e-4 0.66895,0.002 1.00293,0.003 -0.1416,2.18262 -0.17285,4.43164 -3.00391,4.99805 0.33301,-0.66895 0.66602,-1.33594 0.99903,-2.00293 z" id="path238"/>
					<path style="clip-rule:evenodd;fill:#3c3d3e;fill-rule:evenodd" d="m 275.99609,421.01855 c -0.0908,-0.81836 -0.0327,-1.68848 -0.29834,-2.44629 -1.48584,-4.24902 0.55225,-3.83594 3.2998,-2.55469 2.51465,3.31152 7.22803,2.2168 10.0083,4.99512 4.77344,1.5957 9.9082,0.44629 14.71631,1.98438 1.98389,0.63379 4.229,1.08594 4.29443,3.44727 0.0723,2.66113 -2.23145,3.79688 -4.46582,3.73047 -6.85547,-0.20313 -13.8418,1.61914 -20.54932,-1.15527 -0.66943,-0.33105 -1.33838,-0.66113 -2.00732,-0.99121 -2.0786,-2.04298 -4.19237,-4.05958 -4.99804,-7.00978 z" id="path239"/>
					<path style="clip-rule:evenodd;fill:#3e3f40;fill-rule:evenodd" d="m 283.00146,429.01953 c 6.84326,-0.003 13.68652,-0.0146 20.53027,-0.003 1.63232,0.002 3.25635,-0.50781 3.64014,-2.05078 0.50391,-2.02441 -1.67578,-2.07813 -2.86328,-2.68945 -4.12793,-2.12988 -8.92676,-0.49316 -13.14063,-2.23535 -0.73682,-0.30469 -1.44238,-0.68359 -2.16211,-1.02832 5.14404,0.0264 10.27148,-0.0801 15.38672,0.93164 2.7627,0.54785 5.19238,1.71289 5.12402,4.39941 -0.0752,3.00586 -1.53418,6.13086 -5.53467,5.62305 -5.60547,-0.71191 -11.12988,1.56836 -16.75928,0.15332 -1.97313,-0.49512 -3.30955,-1.39063 -4.22118,-3.10059 z" id="path240"/>
					<path style="clip-rule:evenodd;fill:#4a4b4d;fill-rule:evenodd" d="m 290.00488,419.01758 c 3.32227,0.45215 6.83887,-1.03906 10.00293,0.99707 -3.32226,-0.45215 -6.83886,1.03808 -10.00293,-0.99707 z" id="path241"/>
					<path style="clip-rule:evenodd;fill:#656b6d;fill-rule:evenodd" d="m 321.01367,417.01563 c 0.28809,2.72754 -1.04785,5.08594 -1.68555,7.60938 -1.40527,5.55371 -0.42383,7.11621 5.62793,9.39551 -1.12207,0.21777 -2.26074,0.37793 -3.36523,0.66504 -2.87988,0.75 -4.83691,-0.19922 -4.49316,-3.28516 0.55273,-4.9629 0.0625,-10.29298 3.91601,-14.38477 z" id="path242"/>
				</g>
				<rect style="display:inline;fill:url(#linearGradient109);stroke-width:0" id="rect242" width="9.9515209" height="329.78391" x="134.0289" y="47.31406" inkscape:label="pipe mask"/>
			</g>
		</mask>

From what I’ve managed to figure out, this can be implemented using f7-row components to create each element like this:

          - component: f7-row
            config:
              tag: filter
              id: opacity-mask-filter
              filterUnits: userSpaceOnUse
              x: 129.52002
              y: 45.669922
              width: 18.86475
              height: 353.66211
            slots:
              default:
                - component: f7-row
                  config:
                    tag: feColorMatrix
                    id: fe-color-matrix
                    type: matrix
                    values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
          - component: f7-row
            config:
              tag: mask
              id: glass-mask
              maskUnits: userSpaceOnUse
              x: 129.52002
              y: 45.66992
              width: 18.86475
              height: 353.66211          
            slots:
              default:
                - component: f7-row
                  config:
                    tag: g
                    id: glass-mask-group
                    filter: url(#opacity-mask-filter)
                  slots:
                    default:
                      - component: f7-row
                        config:
                          tag: g
                          id: blub-mask
                          style: display:inline
                          transform: matrix(0.27388508,0,0,0.27388508,55.001267,279.70357)
                        slots:
                          default:
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#4e575a;fill-rule:evenodd
                                d: m 315.01074,351 c 1,0 2.00098,0 3.00098,0 2.19434,2.72266 1.16406,5.94971 1.37305,8.97314 0.21289,3.08154 -0.32031,6.2002 0.4502,9.25391 0.25098,0.81738 0.37598,1.65869 0.43262,2.50732 0.16992,2.42822 -0.1875,4.90723 0.69141,7.27686 0.16211,0.54443 0.26074,1.09717 0.3252,1.66064 0.73047,6.76904 3.06152,13.17383 4.48438,19.7832 0.56641,2.63086 0.8291,5.25098 0.31152,7.86426 -0.56836,2.87109 -2.32324,5.01367 -5.36523,4.88965 -3.08789,-0.12695 -3.79297,-2.71777 -4.00781,-5.35547 -0.375,-4.59766 0.55762,-9.26172 -0.70898,-13.81836 -0.1582,-0.58789 -0.24902,-1.18359 -0.2959,-1.78955 -0.9707,-11.68994 -2.55566,-23.34082 -2.08887,-35.11328 0.0849,-2.1333 -0.2305,-4.35253 1.39743,-6.13232 z
                                id: path155
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#82888e;fill-rule:evenodd
                                d: m 312.00977,351 c 0.33398,0 0.66699,0 1.00098,0 1.19043,1.40283 0.9873,3.1084 0.98438,4.74854 -0.0147,8.11475 -0.0352,16.22998 0.42676,24.33154 -0.083,5.48633 -0.0957,10.97998 -0.0332,16.47266 0.0322,2.86816 -0.41406,5.64258 -1.23926,8.35352 -1.3291,4.36328 -3.99219,7.01465 -8.83594,7.5293 -6.95068,0.7373 -13.8833,1.60938 -20.71973,-0.44434 -7.37354,-2.21387 -9.70703,-6.625 -7.93555,-14.05176 1.09375,-4.58301 3.35547,-9.11914 0.73047,-13.97656 -0.52148,-0.96533 0.19727,-2.27344 0.396,-3.41406 0.40674,-1.30127 1.07617,-2.37744 2.4751,-2.79932 1.80176,0.53223 1.97412,3.62549 4.58105,2.92529 0.4209,0.27832 0.73145,0.6416 0.93311,1.10449 0.30029,4.90381 -3.53516,9.0542 -2.53564,14.07861 -2.45264,11.93701 -2.45264,11.93701 10.08252,11.8501 0.98682,-0.007 1.97412,-0.0391 2.96289,-0.042 2.99902,-0.01 5.99756,-0.0654 8.99072,-0.002 2.27637,0.0479 3.33301,-1.08789 3.83691,-3.08203 2.75195,-4.87109 2.74121,-10.17969 2.49023,-15.5332 0.003,-10.47217 -0.0273,-20.9375 0.0137,-31.40137 0.01,-2.29395 -0.35059,-4.70167 1.39453,-6.64747 z
                                id: path156
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#91979c;fill-rule:evenodd
                                d: m 292.00586,351 c 1.66699,0 3.33398,0 5.00098,0 2.66309,5.49756 1.26025,11.24219 0.89941,16.89063 -0.10352,1.60498 -0.4624,3.23633 -0.58447,4.86426 -0.0356,0.5542 -0.1416,1.10303 -0.29346,1.63721 -1.00635,2.12939 -1.50586,4.49121 -2.83447,6.48682 -0.4541,0.3457 -0.93164,0.375 -1.42773,0.0918 -0.70215,-0.79297 -0.90039,-1.76709 -0.98389,-2.77783 -0.15527,-2.1167 0.25244,-4.1875 0.68555,-6.76904 -2.52393,1.53711 -4.75928,3.86816 -7.65381,1.56641 -0.13721,-0.90723 0.28369,-1.59668 0.88623,-2.18848 4.17139,-4.09375 5.86377,-8.97314 4.84766,-14.78662 -0.32325,-1.84914 0.041,-3.61428 1.458,-5.01516 z
                                id: path157
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#a7adb3;fill-rule:evenodd
                                d: m 295.99951,375.00635 c 0.009,-0.3291 0.0147,-0.6582 0.0161,-0.9873 2.00293,-5.46826 1.46973,-11.23584 1.99365,-16.87891 0.19189,-2.06982 -0.521,-4.28613 0.99805,-6.14014 0.3335,0 0.6665,0 1.00049,0 2.50928,5.24268 1.29297,10.69775 0.83936,16.08203 -0.55518,6.59814 -1.88916,13.13574 -1.44727,19.80518 0.1084,1.63721 -0.0386,3.30615 1.12842,4.73926 1.86523,2.29053 3.73291,4.00781 6.47949,1.13525 0.57813,-0.604 1.2627,-1.08154 2.19629,-0.79443 1.2168,1.54834 1.12305,3.22754 0.52148,4.96338 -1.70703,2.78906 -4.13379,4.67285 -7.42676,3.6377 -3.81836,-1.20117 -6.66113,-3.78613 -7.38623,-8.0083 -0.48047,-2.79639 -0.20459,-5.6416 -0.27246,-8.46436 -0.0371,-1.97998 0.45801,-3.9209 0.44678,-5.90088 0.30225,-1.06299 0.26075,-2.2251 0.9126,-3.18848 z
                                id: path158
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#b2b8bd;fill-rule:evenodd
                                d: m 309.00293,392.00439 c -1.47363,2.00928 -2.36719,5.77588 -5.51855,4.36475 -2.79834,-1.25439 -5.37354,-3.61719 -5.55957,-7.62305 -0.31055,-6.68799 0.37158,-13.33105 1.32324,-19.84521 0.87891,-6.01025 0.44727,-11.94238 0.75977,-17.90088 0.3335,0 0.6665,0 1,0 2.64746,4.25684 0.88232,8.96338 1.37793,13.43799 -0.0244,1.17383 -0.0771,2.34717 -0.33398,3.49658 -1.27441,5.92139 -0.61133,11.89551 -0.43506,17.84668 1.75977,5.09619 1.83545,5.11279 5.51221,1.12549 0.66211,-0.71729 1.26172,-1.62451 2.36621,-0.60156 0.82422,1.41992 0.81738,2.91455 0.4209,4.4502 -0.18068,0.50683 -0.48732,0.92187 -0.9131,1.24901 z
                                id: path159
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#6f6f73;fill-opacity:1;fill-rule:evenodd
                                d: m 324.24386,359.07286 c 0,0 0.5326,-0.36716 0.475,2.79202 -0.0879,4.875 2.27531,6.88366 6.26652,9.8695 6.47266,4.84082 12.4873,10.33057 12.96875,19.34131 -2.27637,0.12012 -2.39844,-2.3208 -3.83496,-3.2041 -1.94043,-1.65381 -2.86816,-3.97119 -4.04395,-6.13037 -0.56934,-1.01172 -1.28711,-1.92676 -1.9043,-2.91455 -0.27051,-0.42285 -0.49414,-0.8623 -0.70215,-1.31445 -1.1084,-1.54541 -2.86426,-2.2251 -4.34082,-3.2666 -7.55176,-5.32129 -8.03734,-22.70742 -8.03734,-22.70742 z
                                id: path160
                                "sodipodi:nodetypes": ccccccccccc
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#cbcdd0;fill-opacity:1;fill-rule:evenodd
                                d: m 307.00879,351 h 1.00098 c 1.62598,1.78271 1.4248,4.00586 1.37793,6.13916 -0.12793,5.79541 0.45215,11.60645 -0.37891,17.38965 -0.41895,1.28857 -1.07813,2.39014 -2.34961,3.0127 -2.64014,0.61719 -4.63135,-0.68506 -4.63184,-3.07031 -10e-4,-7.82667 -0.96875,-15.7212 0.98096,-23.4712 h 1 c 2.49365,3.78223 1.29004,2.91782 1.26514,6.95102 -0.0132,2.11963 -0.51172,9.30679 -0.19141,10.47574 0.97461,-5.1709 -0.84814,-11.50147 1.92676,-17.42676 z
                                id: path161
                                "sodipodi:nodetypes": ccccccccscc
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#bdc2c7;fill-rule:evenodd
                                d: m 308.00879,375.00537 c 0,-8.00146 0,-16.00342 9.8e-4,-24.00537 0.33301,0 0.66602,0 1,0 1.2168,1.31787 1.37695,2.95605 1.38574,4.63135 0.0469,8.59229 0.0557,17.18604 -0.009,25.77881 -0.0117,1.64502 0.005,3.3418 -1.38184,4.59375 -0.4375,0.8335 -0.78125,1.73486 -1.33398,2.48438 -1.03223,1.39941 -1.99951,3.46045 -3.9541,3.0835 -2.12744,-0.41016 -2.875,-2.39307 -2.71045,-4.56055 -0.54053,-0.5625 -0.49951,-1.22119 -0.31299,-1.90088 1.69922,-1.09082 4.67285,2.52686 5.56055,-1.52002 0.59668,-2.86573 0.43945,-5.87794 1.75488,-8.58497 z
                                id: path162
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#aeafb1;fill-rule:evenodd
                                d: m 267,411.01367 c 0,-5.33398 0,-10.66992 0,-16.00342 1.2041,-1.45557 1.13184,-3.99219 3.66748,-4.32227 0.50781,0.19727 0.87354,0.54395 1.10498,1.03613 0.34912,6.01123 -1.06543,11.99951 -0.21338,18.01611 0.18652,0.49414 0.31201,1.00195 0.40234,1.52051 0.21924,1.58203 0.35742,3.15918 -0.56787,4.59961 -0.41699,0.44336 -0.87549,0.48828 -1.37402,0.1377 l -0.002,0.004 c -0.68701,-1.85547 -1.46143,-3.6582 -3.01709,-4.98828 z
                                id: path163
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#969da3;fill-rule:evenodd
                                d: m 309.00293,392.00439 c 0.008,-0.32813 0.0137,-0.65625 0.0186,-0.98438 0.72656,-0.99463 0.61035,-2.22314 0.92676,-3.33594 0.15039,-10.31104 -1.30177,-23.88057 -1.22177,-34.1877 -0.3115,-2.17205 4.56705,-3.26526 5.98014,-4.99719 l -2.58811,4.78416 -0.10874,36.72544 c -1.6084,3.5332 1.08301,8.03516 -2.50977,11.12109 -0.8623,-0.32422 -1.18359,-1.02148 -1.29004,-1.86816 0.043,-0.8291 0.30371,-1.58203 0.7998,-2.25098 -0.003,-1.66844 -0.005,-3.3369 -0.007,-5.00634 z
                                id: path164
                                "sodipodi:nodetypes": scccccccccss
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#76797f;fill-opacity:1;fill-rule:evenodd
                                d: m 283.02002,373.01563 c 7.12451,-5.94434 5.62656,-9.7252 6.21551,-14.01966 L 292.00586,351 c 0.0273,1.93994 -0.46826,3.8125 -0.0967,5.82861 1.26367,6.85205 -1.68945,12.03027 -6.95703,16.14111 -0.24268,0.31104 -0.56396,0.48486 -0.95117,0.54053 -0.39063,-0.0391 -0.71729,-0.2041 -0.98096,-0.49462 z
                                id: path165
                                "sodipodi:nodetypes": scccccss
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#d9dadb;fill-rule:evenodd
                                d: m 305.51514,372.3418 c -0.50244,0.004 -1.00439,0.007 -1.50684,0.0107 l 0.46131,-11.51134 1.07838,-7.30401 c 0,0 -0.24618,11.88469 -0.0329,18.80465 z
                                id: path166
                                "sodipodi:nodetypes": cccccc
                            - component: f7-row
                              config:
                                tag: path
                                style: clip-rule:evenodd;fill:#656462;fill-opacity:1;fill-rule:evenodd
                                d: m 323.0127,351 c 0,1.82666 0.20996,3.68262 -0.0352,5.47607 -1.1709,8.58301 1.69824,14.92822 9.87402,18.48926 1.30957,0.5708 2.16504,1.51904 2.15039,3.05176 -0.95996,0.83887 -1.89844,0.42285 -2.8418,-0.0352 -5.41309,-1.63428 -10.41992,-3.70898 -11.13965,-10.38721 -0.28027,-1.10547 -0.34473,-2.23193 -0.37793,-3.36621 0.48633,-4.4082 -1.26953,-9.04785 1.37012,-13.22852 0.33301,10e-6 0.66602,10e-6 1.00001,10e-6 z
                                id: path167
                                "sodipodi:nodetypes": scccccccss
                            - component: f7-row
                              config:
                                tag: path

…but it takes absolutely forever to do this “conversion” manually, and this is just one mask.

Am I missing something essential, or is this just tweaking the “framework too far”? I’ve considered writing a converter, it will probably be quicker - but will the resulting YAML even be manageable. Just navigating the document is very difficult with all the whitespace syntax since you can only see a little part at a time, and of course I won’t know if this will all work until much of the work is done.

Should I just abandon this?

Unless you are on an older version of OH3, you don’t even need to use the f7-row. You can put arbitrary tag names directly as the component:

- component: filter

Nope, you’re just taking on a task that is sufficiently advanced and uncommon that there has never been (and likely won’t be unless you do it yourself) an attempt to add this as a feature of the UI.

It’s true that when you get many indents into a complex yaml structure that navigation can be a little tiresome. There’s absolutely no reason you can’t do the work in some other editor and just copy the results into the UI editor, if that’s your preference.

That’s a decision only you can make. There’s no reason it shouldn’t work if you are determined enough to see it through.

You don’t say what you are using this svg for, but depending on your goal, you might also want to check out the brand new interactive svg feature of layout pages. It will be part of the official release that should be coming out today, if you’re not already on a recent snapshot or milestones.

That sounds interesting, will the name of the component then end up as the “tag” in HTML, so that I don’t need to also specify the tag? Do you have some example I can peek to for how this structure will look like?

I already partially do this, but I also “need” the feedback from OH to tell me each time I do something it doesn’t like, so editing “too much” outside of OH seems counterproductive.

I see that all this is converted into JSON before it’s stored in the JSON DB. What I’ve been wondering is if it would work if I just modified the JSON DB directly instead, so that I could do it in JSON - or if that would confuse OH completely? I assume that it’s not meant to tackle syntax errors in the JSON DB… but if all it would result in was errors in the log, I could probably work with that.

I was planning to use the SVG as both a background and an “effect foreground” for an ECharts components, so that some “layers” would be behind the ECharts component and some (partially transparent) would be in front.

Where should I look for information about the interactive SVG feature, so I can judge weather that can fit? Release notes?

Yes if the component name is not one of the f7 or oh specific component names then it will just create a tag of that name. If you were basing your svg off of this:

Then that was written before the new arbitrary tag feature so it uses the old f7-row trick.

This feature is covered directly in the docs here:

There’s a more detailed, complex recent example here:

And here’s an example of an svg based widget with some more advanced svg features:

It is generally not recommended to edit the jsondb directly, but if you find yourself in a position where you have to, then you must stop OH to make the edits. The UI will not detect or respect external changes made to the jsondb documents while it is running and your changes will just be over-written the first time something else in that file changes. As for introducing errors into the jsondb, it may depend on the exact file, but I have seen jsondb error render the entire UI unable to function.

Because it is a very new feature it is only in the latest version of the docs right now:

In the 3D widget thread linked above there is also a link to the main PR that implemented the feature.

I’m sure when the release comes out later today there will also be a description of it in the release announcement blog.

1 Like

Also, for things like the numerous paths you’ve shown above. It is definitely easier to take advantage of widget features such as an oh-repeater. The you only need one iteration of the path component and the repeater array can hold all the data (which you may find slightly easier to edit and maintain).

- component: g
  config:
    id: g242
    style:
      display: inline
      transform: matrix(0.27388508,0,0,0.27388508,55.001267,279.70357)
  slots:
    default:
      - component: oh-repeater
        config:
          fragment: true
          for: path
          sourceType: array
          in:
            - fill: "#4e575a"
              d: m 315.01074,351 c 1,0 2.00098,0 3.00098,0 2.19434,2.72266 1.16406,5.94971 1.37305,8.97314 0.21289,3.08154 -0.32031,6.2002 0.4502,9.25391 0.25098,0.81738 0.37598,1.65869 0.43262,2.50732 0.16992,2.42822 -0.1875,4.90723 0.69141,7.27686 0.16211,0.54443 0.26074,1.09717 0.3252,1.66064 0.73047,6.76904 3.06152,13.17383 4.48438,19.7832 0.56641,2.63086 0.8291,5.25098 0.31152,7.86426 -0.56836,2.87109 -2.32324,5.01367 -5.36523,4.88965 -3.08789,-0.12695 -3.79297,-2.71777 -4.00781,-5.35547 -0.375,-4.59766 0.55762,-9.26172 -0.70898,-13.81836 -0.1582,-0.58789 -0.24902,-1.18359 -0.2959,-1.78955 -0.9707,-11.68994 -2.55566,-23.34082 -2.08887,-35.11328 0.0849,-2.1333 -0.2305,-4.35253 1.39743,-6.13232 z
              id: path155
            - fill: "#82888e"
              d: m 312.00977,351 c 0.33398,0 0.66699,0 1.00098,0 1.19043,1.40283 0.9873,3.1084 0.98438,4.74854 -0.0147,8.11475 -0.0352,16.22998 0.42676,24.33154 -0.083,5.48633 -0.0957,10.97998 -0.0332,16.47266 0.0322,2.86816 -0.41406,5.64258 -1.23926,8.35352 -1.3291,4.36328 -3.99219,7.01465 -8.83594,7.5293 -6.95068,0.7373 -13.8833,1.60938 -20.71973,-0.44434 -7.37354,-2.21387 -9.70703,-6.625 -7.93555,-14.05176 1.09375,-4.58301 3.35547,-9.11914 0.73047,-13.97656 -0.52148,-0.96533 0.19727,-2.27344 0.396,-3.41406 0.40674,-1.30127 1.07617,-2.37744 2.4751,-2.79932 1.80176,0.53223 1.97412,3.62549 4.58105,2.92529 0.4209,0.27832 0.73145,0.6416 0.93311,1.10449 0.30029,4.90381 -3.53516,9.0542 -2.53564,14.07861 -2.45264,11.93701 -2.45264,11.93701 10.08252,11.8501 0.98682,-0.007 1.97412,-0.0391 2.96289,-0.042 2.99902,-0.01 5.99756,-0.0654 8.99072,-0.002 2.27637,0.0479 3.33301,-1.08789 3.83691,-3.08203 2.75195,-4.87109 2.74121,-10.17969 2.49023,-15.5332 0.003,-10.47217 -0.0273,-20.9375 0.0137,-31.40137 0.01,-2.29395 -0.35059,-4.70167 1.39453,-6.64747 z
              id: path156
            #...and so on
        slots:
          default:
            - component: path
              config:
                style:
                  clip-rule: evenodd
                  fill: =loop.path.fill
                  fill-rule: evenodd
                d: =loop.path.d
                id: =loop.path.id
1 Like

Thanks for all the info, I think I have a much improved situation when I put all this together :+1:

I’m doing something wrong with the oh-repeater, whatever I try, I get this:

<g id="glass-mask-group" filter="url(#opacity-mask-filter)">
  <g id="blub-mask" transform="matrix(0.27388508,0,0,0.27388508,55.001267,279.70357)" style="display: inline;">
    <!--fragment#17f1f1d9c7e#head-->
	<!--fragment#17f1f1d9c7e#tail-->
  </g>
</g>

…if fragment is true and nothing if it’s false. This is on 4.2.3. Are there some prerequisites for this to work, like a more recent version or that it has to be a child of a specific component or similar?

Can you please post the complete code.

There isn’t really a “complete code” as I’m just experimenting at this point, but this is an example of a YAML that produces what I posted above:

uid: widget_thermometer_svg_test
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Dec 15, 2024, 2:50:38 AM
component: f7-row
config:
  preserveAspectRatio: xMidYMid meet
  style:
    border: 2px solid blue
    height: 100%
    width: 100%
  tag: svg
  viewBox: 0 0 100 200
  xmlns: http://www.w3.org/2000/svg
slots:
  default:
    - component: f7-row
      config:
        tag: defs
      slots:
        default:
          - component: f7-row
            config:
              id: gradmask2
              tag: radialGradient
            slots:
              default:
                - component: f7-row
                  config:
                    offset: 0
                    style:
                      stop-color: white
                    tag: stop
                - component: f7-row
                  config:
                    offset: 1
                    style:
                      stop-color: black
                    tag: stop
          - component: filter
            config:
              id: opacity-mask-filter
              filterUnits: userSpaceOnUse
              x: 129.52002
              y: 45.669922
              width: 18.86475
              height: 353.66211
            slots:
              default:
                - component: feColorMatrix
                  config:
                    id: fe-color-matrix
                    type: matrix
                    values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
          - component: mask
            config:
              id: glass-mask
              maskUnits: userSpaceOnUse
              x: 129.52002
              y: 45.66992
              width: 18.86475
              height: 353.66211          
            slots:
              default:
                - component: g
                  config:
                    id: glass-mask-group
                    filter: url(#opacity-mask-filter)
                  slots:
                    default:
                      - component: g
                        config:
                          id: blub-mask
                          style: display:inline
                          transform: matrix(0.27388508,0,0,0.27388508,55.001267,279.70357)
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                fragment: true
                                for: path
                                sourceType: array
                                in:
                                  - fill: "#4e575a"
                                    d: m 315.01074,351 c 1,0 2.00098,0 3.00098,0 2.19434,2.72266 1.16406,5.94971 1.37305,8.97314 0.21289,3.08154 -0.32031,6.2002 0.4502,9.25391 0.25098,0.81738 0.37598,1.65869 0.43262,2.50732 0.16992,2.42822 -0.1875,4.90723 0.69141,7.27686 0.16211,0.54443 0.26074,1.09717 0.3252,1.66064 0.73047,6.76904 3.06152,13.17383 4.48438,19.7832 0.56641,2.63086 0.8291,5.25098 0.31152,7.86426 -0.56836,2.87109 -2.32324,5.01367 -5.36523,4.88965 -3.08789,-0.12695 -3.79297,-2.71777 -4.00781,-5.35547 -0.375,-4.59766 0.55762,-9.26172 -0.70898,-13.81836 -0.1582,-0.58789 -0.24902,-1.18359 -0.2959,-1.78955 -0.9707,-11.68994 -2.55566,-23.34082 -2.08887,-35.11328 0.0849,-2.1333 -0.2305,-4.35253 1.39743,-6.13232 z
                                    id: path155
                                  - style: "clip-rule:evenodd;fill:#4e575a;fill-rule:evenodd"
                                    d: m 315.01074,351 c 1,0 2.00098,0 3.00098,0 2.19434,2.72266 1.16406,5.94971 1.37305,8.97314 0.21289,3.08154 -0.32031,6.2002 0.4502,9.25391 0.25098,0.81738 0.37598,1.65869 0.43262,2.50732 0.16992,2.42822 -0.1875,4.90723 0.69141,7.27686 0.16211,0.54443 0.26074,1.09717 0.3252,1.66064 0.73047,6.76904 3.06152,13.17383 4.48438,19.7832 0.56641,2.63086 0.8291,5.25098 0.31152,7.86426 -0.56836,2.87109 -2.32324,5.01367 -5.36523,4.88965 -3.08789,-0.12695 -3.79297,-2.71777 -4.00781,-5.35547 -0.375,-4.59766 0.55762,-9.26172 -0.70898,-13.81836 -0.1582,-0.58789 -0.24902,-1.18359 -0.2959,-1.78955 -0.9707,-11.68994 -2.55566,-23.34082 -2.08887,-35.11328 0.0849,-2.1333 -0.2305,-4.35253 1.39743,-6.13232 z
                                    id: path155
                                    tag: path
    - component: f7-row
      config:
        id: mask2
        tag: mask
      slots:
        default:
          - component: f7-row
            config:
              fill: url(#gradmask2)
              r: 70
              tag: circle
            slots:
              default:
                - component: f7-row
                  config:
                    begin: 0.4
                    calcMode: linear
                    dur: 4
                    repeatCount: indefinite
                    tag: animateMotion
                  slots:
                    default:
                      - component: f7-row
                        config:
                          tag: mpath
                          xlink:href: "#path1"
          - component: f7-row
            config:
              fill: white
              r: 35
              tag: circle
            slots:
              default:
                - component: f7-row
                  config:
                    begin: 0
                    calcMode: linear
                    dur: 4
                    repeatCount: indefinite
                    tag: animateMotion
                  slots:
                    default:
                      - component: f7-row
                        config:
                          tag: mpath
                          xlink:href: "#path1"
    - component: f7-row
      config:
        d: M60,130 h145 c0,0 30,0 30,-30 v-155
        fill: none
        stroke: red
        id: path1
        tag: path
    - component: f7-row
      config:
        d: M95,130 h110 c0,0 30,0 30,-30 v-85
        fill: none
        id: path3
        stroke: lightblue
        stroke-width: 1
        tag: path
    - component: f7-row
      config:
        d: M95,130 h110 c0,0 30,0 30,-30 v-85
        fill: none
        mask: url(#mask2)
        stroke: blue
        stroke-width: 5
        tag: path

What should the repeater do?
There is nothing in a following slot…

Lol - you found the problem :laughing:

I’m not familiar with oh-repeater, so I naively thought that it would construct the rest from the information I had given. But, when I look a the example above, I see that I’ve skipped the whole “content” in the slot:

            - component: path
              config:
                style:
                  clip-rule: evenodd
                  fill: =loop.path.fill
                  fill-rule: evenodd
                d: =loop.path.d
                id: =loop.path.id

So, thank you and forget it - I assume it will work just fine when I insert the rest.

1 Like