Related
I have a svg image that I use in-line on my html file and it works perfectly. How can I have less HTML in-line code and convert it to CSS?
I have tried to create a css class and use it like an image with a class but that doesn't seem to work.
I wanted to have less HTML code and have more CSS so I can I use my styles.css file.
<div class="divright">
<CultureSelector />
<div class="elements2 loginimageDiv">
<svg xmlns="http://www.w3.org/2000/svg" width="832.304" height="407.825" viewBox="0 0 832.304 407.825">
<g id="Group_531" data-name="Group 531" transform="translate(-897.84 -269.303)">
<g id="Ilustração" transform="translate(1858.333 -34.063)">
<g id="Detalhes" transform="translate(-920 310.063)">
<path id="Fundo" d="M96.416,393.891S-77.153,293.156,41.471,185.157,318.842-33.245,425.246,9.478s96.833,96.711,213.715,174.869S728.8,324.567,707.869,356s-24.417,39.484-24.417,39.484l-266.574-.736Z" transform="translate(0 -0.063)" fill="#464646" opacity="0.12" />
<path id="Base" d="M657.445,169.633H40.25a5.182,5.182,0,0,1-1.08-10.307,7.568,7.568,0,0,1,1.055,0h617.2a5.182,5.182,0,0,1,1.08,10.307A3.8,3.8,0,0,1,657.445,169.633Z" transform="translate(50.202 231.458)" fill="#2d2d2d" />
<g id="Planta" transform="translate(542.739 54.191)">
<path id="Caminho_176" d="M68.669,275.41c10.724-58.87,8.393-79.925-20.368-127.974S16.842,9.966,6,36.2s-9.374,92.1,24.564,124.048S69.086,206.528,71.1,219.534s-4.834,52.981-4.834,52.981Z" transform="translate(0.005 45.598)" fill="#7d7d7d" />
<path id="Caminho_177" d="M74.037,237.451c.025-.221.025-.442.049-.687-.638-4.834-4.049-29.668-8.761-39.46-5.227-10.871-28.2-29.816-34.65-53.594S14.013,101.5,7.289,86.483C-1.57,66.655,3.265,40.3,10.6,31.735a1.533,1.533,0,0,0-.54-.245L7.633,32.962a17.049,17.049,0,0,0-1.644,3.19C-4.833,62.385-3.386,128.25,30.553,160.2s38.527,46.282,40.539,59.288a77.53,77.53,0,0,1,0,15.092Z" transform="translate(0.012 45.619)" fill="#2d2d2d" />
<path id="Caminho_178" d="M28.945,310.671c7.975-69.177,5.325-93.128-10.11-148.465S103.988-19.239,100.8,2.576s-13.84,76.1-41.5,110.158S29.51,174.476,34.81,203.728,33.755,301.1,33.755,301.1l-3.19,12.245Z" transform="translate(25.054 -0.068)" fill="#7d7d7d" />
<g id="Grupo_55" transform="translate(47.196 7.777)">
<path id="Caminho_179" d="M10.5,274.164h-.025a.66.66,0,0,1-.638-.687h0c0-.221.81-21.546.393-39.042A326.478,326.478,0,0,0,2.2,176.57c-2.626-9.4-5.939-40.883,10.11-73.4A417.838,417.838,0,0,1,35.527,62.559C44.263,48.547,55.134,31.124,72.361.4A.654.654,0,0,1,73.269.18a.665.665,0,0,1,.245.883C56.263,31.787,45.392,49.234,36.656,63.247a415.29,415.29,0,0,0-23.141,40.49C-2.362,135.884.9,166.951,3.478,176.2a327.816,327.816,0,0,1,8.074,58.183c.393,17.546-.393,38.92-.417,39.116A.625.625,0,0,1,10.5,274.164Z" transform="translate(-0.004 -0.079)" fill="#2d2d2d" />
</g>
<path id="Caminho_180" d="M33.924,256.538c4.785-46.306,5.6-23.46-14.307-86.379C-3.131,98.184,78.1,34.258,91.4,60.344s28.736,108.023,22.871,105.373S69.58,86.945,68.525,90.135s-52.687,29.791-50.552,56.932,21.816,70.257,21.816,70.257l-.54,39.754Z" transform="translate(22.726 78.924)" fill="#7d7d7d" />
<g id="Grupo_56" transform="translate(37.694 132.662)">
<path id="Caminho_181" d="M24.3,202.868h-.074l-5.325-.54a.663.663,0,0,1-.589-.736h0c.564-5.35,1.055-9.865,1.472-13.472,2.233-19.656,2.233-19.656-3.877-36.49-2.748-7.607-6.528-18.037-11.877-34.92A86.062,86.062,0,0,1,.963,77.79,99.521,99.521,0,0,1,12.815,43.729C23.367,24.883,39.956,8.711,55.072,2.527,65.575-1.792,73.6-.369,77.035,6.38,82.679,17.447,89.428,40.122,95.1,66.992c3.264,15.509,8.074,42.552,5.35,45.4a1.2,1.2,0,0,1-1.4.245C95.857,111.188,85.281,92.514,70.7,66.33,63.391,53.2,55.833,39.631,53.8,37.3a55.571,55.571,0,0,1-7.19,5.251c-14.454,9.816-44.539,30.208-42.92,50.8,2.086,26.7,21.57,69.594,21.767,70.011a.422.422,0,0,1,.049.294l-.54,38.552a.618.618,0,0,1-.221.491A.706.706,0,0,1,24.3,202.868Zm-4.589-1.791,3.926.393.515-37.668C22.926,161.077,4.4,119.654,2.337,93.471c-1.669-21.349,28.834-42.061,43.509-52a50.6,50.6,0,0,0,7.092-5.2.834.834,0,0,1,.663-.54c1.3-.123,3.853,4.074,18.257,29.963,10.356,18.576,24.491,43.975,27.681,45.717.245-.393.982-2.577-.442-13.816-1.031-8.123-2.9-18.822-5.251-30.11C88.2,40.612,81.477,17.987,75.857,6.969,72.765.907,65.379-.271,55.588,3.754,29.06,14.625-11.6,62.87,5.306,116.293c5.325,16.859,9.1,27.263,11.853,34.871,6.209,17.129,6.209,17.129,3.951,37.1-.417,3.656-.883,7.755-1.4,12.81Z" transform="translate(0.004 -0.068)" fill="#2d2d2d" />
</g>
<path id="Caminho_182" d="M51.018,178.014H26.871c-1.669,0-3.141-.957-3.288-2.11L15.46,114.9a4.338,4.338,0,0,1,3.386-5.1,3.811,3.811,0,0,1,.761-.074H58.281a4.311,4.311,0,0,1,4.221,4.417,4,4,0,0,1-.074.761L54.306,175.9C54.159,177.081,52.686,178.014,51.018,178.014Z" transform="translate(22.368 159.362)" fill="#057085" />
<path id="Caminho_183" d="M32.579,172.089h-3.46c-1.693,0-3.043-.982-3.018-2.209l1.227-52.687a4.933,4.933,0,0,1,4.785-4.834h5.251a4.236,4.236,0,0,1,4.2,4.245,4.765,4.765,0,0,1-.049.589l-5.6,52.687C35.744,171.108,34.272,172.089,32.579,172.089Z" transform="translate(37.961 163.201)" fill="#0aa7c4" opacity="0.45" />
<g id="Grupo_57" transform="translate(41.507 167.842)">
<path id="Caminho_184" d="M3.288,43.746l.417-.736A153.224,153.224,0,0,1,0,26.47,84.554,84.554,0,0,0,3.288,43.746Z" transform="translate(0 38.329)" fill="#464646" />
<path id="Caminho_185" d="M3.143,37.526A48.792,48.792,0,0,0,.1,49.575C7.216,26.189,46.9,5.06,49.474,1.477L49.94.594C35.02-3.553,11.192,17.379,3.143,37.526Z" transform="translate(0.145 -0.064)" fill="#2d2d2d" />
</g>
<g id="Grupo_58" transform="translate(42.5 143.186)">
<path id="Caminho_186" d="M94.556,100.061a.657.657,0,0,1-.638-.515L86.7,70.2C81.059,47.2,74.065,18.59,66.188,5.854c-1.3-2.11-6.969-4.932-14.994-4.368C40.348,2.246,19.44,9.755,1.281,51.3a.666.666,0,0,1-.883.344.666.666,0,0,1-.344-.883h0C18.507,8.553,39.955.946,51.1.136c8.662-.613,14.7,2.552,16.221,5.006C75.292,18.05,82.04,45.583,87.979,69.877l7.215,29.349a.656.656,0,0,1-.491.81h0A.311.311,0,0,1,94.556,100.061Z" transform="translate(0.003 -0.059)" fill="#2d2d2d" />
</g>
<g id="Grupo_59" transform="translate(111.612 153.62)">
<path id="Caminho_187" d="M4.294,51.357H4.22a.663.663,0,0,1-.589-.736A156.831,156.831,0,0,0,.024.9.656.656,0,0,1,.515.094a.656.656,0,0,1,.81.491h0A158.477,158.477,0,0,1,4.956,50.793.663.663,0,0,1,4.294,51.357Z" transform="translate(0 -0.07)" fill="#2d2d2d" />
</g>
<g id="Grupo_60" transform="translate(107.777 147.975)">
<path id="Caminho_188" d="M.666,42.083H.592A.663.663,0,0,1,0,41.347,223.7,223.7,0,0,0,.813.807.681.681,0,0,1,1.4.071.681.681,0,0,1,2.138.66h0a226.951,226.951,0,0,1-.81,40.834A.645.645,0,0,1,.666,42.083Z" transform="translate(0.002 -0.069)" fill="#2d2d2d" />
</g>
<g id="Grupo_61" transform="translate(82.399 39.986)">
<path id="Caminho_189" d="M.663,31.606a.66.66,0,0,1-.294-1.252A76.23,76.23,0,0,0,30.7.416a.68.68,0,0,1,.908-.27.68.68,0,0,1,.27.908,77.523,77.523,0,0,1-30.92,30.5A.622.622,0,0,1,.663,31.606Z" transform="translate(0 -0.068)" fill="#2d2d2d" />
</g>
<g id="Grupo_62" transform="translate(68.296 75.829)">
<path id="Caminho_190" d="M.663,19.937A.66.66,0,0,1,0,19.274a.681.681,0,0,1,.54-.663c.147-.025,15.8-3.386,34.355-18.4a.663.663,0,0,1,.834,1.031C16.883,16.5.957,19.888.81,19.937Z" transform="translate(0 -0.06)" fill="#2d2d2d" />
</g>
<g id="Grupo_63" transform="translate(56.207 105.251)">
<path id="Caminho_191" d="M1.105,13.919a2.019,2.019,0,0,1-.491-.025.664.664,0,0,1,.1-1.325c.1,0,10.9.589,28.171-12.368a.665.665,0,1,1,.81,1.055C13.817,13.158,3.436,13.919,1.105,13.919Z" transform="translate(0.001 -0.064)" fill="#2d2d2d" />
</g>
</g>
<g id="Senhora" transform="translate(214.064 80.489)">
<g id="Grupo_15905" transform="translate(0 0)">
<g id="Grupo_15901" transform="translate(0 15.686)">
<g id="Grupo_15898" transform="translate(22.882 169.601)">
<path id="Caminho_10424" d="M33.766.07l-28.1,125H0L22.454.07Z" transform="translate(0 -0.07)" fill="#2d2d2d" />
<path id="Caminho_10425" d="M69.8.07l-28.1,125H36.03L58.484.07H69.8Z" transform="translate(52.386 -0.07)" fill="#2d2d2d" />
</g>
<g id="Grupo_15899" transform="translate(99.409 169.601)">
<path id="Caminho_10426" d="M60.668,125.075H55L36.03.07H47.367Z" transform="translate(52.386 -0.07)" fill="#2d2d2d" />
<path id="Caminho_10427" d="M24.638,125.075H18.969L0,.07H11.337Z" transform="translate(0 -0.07)" fill="#2d2d2d" />
</g>
<g id="Grupo_15900" transform="translate(0 0)">
<path id="Caminho_10428" d="M20.018.07h114.5a16.469,16.469,0,0,1,16.466,16.466v.147c-.2,19.951-1.6,54.7-1.6,86.993,0,28.049,35.043,24.417,57.643,23.533s22.6,21.718,22.6,21.718l-18.061,66.919s-158.182,1.816-161.79,0S15.429,145.271,5.49,81.934A313.448,313.448,0,0,1,1.073,18.008,18.926,18.926,0,0,1,20.018.07Z" transform="translate(1.311 -0.07)" fill="#23bcd9" />
<path id="Caminho_10429" d="M88.49,52.19a7.675,7.675,0,0,1,2.847,1.2A19.408,19.408,0,0,0,88.49,52.19Z" transform="translate(128.664 75.71)" fill="#b13f02" />
<path id="Caminho_10430" d="M2.358,10.165c3.485-7.779,6.184-8.1,8.221-8.785-6.6,18.5-8.662,84.367,14.282,105.545,32.539,30.012,33.251,22.282,46.8,35.828s5.423,17.423,14.454,42.6,12.662,24.2,12.662,24.2H208.343s15.534-46.036,18.086-61.962c.834-5.251.54-15.607-6.429-20.319a20.043,20.043,0,0,1,10.945,12.564c2.822,11.337-13.57,77.717-13.57,77.717a13.508,13.508,0,0,1-11.754,10.65c-8.147.785-116.735-.2-162.059-.564a20.932,20.932,0,0,1-20.147-15.828C14.088,174.9-6.893,80.4,2.26,10.337A.4.4,0,0,0,2.358,10.165Z" transform="translate(0.001 1.835)" fill="#11a2bd" />
</g>
<rect id="Retângulo_6227" width="139.238" height="31.19" transform="translate(71.267 181.691)" fill="#23bcd9" />
<path id="Caminho_10431" d="M149.783,93.879a9.292,9.292,0,0,0-5.2-1.472H73.2C62.57,83.916,51.183,76.7,41.76,74.1H149.783Z" transform="translate(60.721 107.567)" fill="#23bcd9" />
</g>
<path id="Caminho_10432" d="M43.742,25.2s15.509.613,21.276,24.392c7.877,32.417,24.368,70.7,24.368,70.7l-17.03,3.656L42.712,61.393S29.779,15.43,43.742,25.2Z" transform="translate(54.174 34.506)" fill="#fff" />
<g id="Grupo_15902" transform="translate(47.846 19.122)">
<path id="Caminho_10433" d="M53.451,3.923s-.54,8.638-1.546,26.233c-.613,10.8-1.546,12.957-1.546,12.957s-24.122-22.7-42.944-9.276C.519,38.793,11.194.07,11.194.07Z" transform="translate(7.43 -0.07)" />
<path id="Caminho_10434" d="M33.241,51.57S96.43,70.392,121.681,76.576,143.374,107,143.374,107s-31.386-1.3-36.589-3.779-84.244,1.3-84.244,1.3c-21.3-3.043-14.748-42.65-14.748-42.65Z" transform="translate(9.971 74.809)" fill="#bebebe" />
<path id="Caminho_10435" d="M31.072,55.768s8.54,1.963,44.1-.982c26.7-2.233,42.208,1.963,48.294,4.2a9.944,9.944,0,0,1,5.006,4l.025.025a74.153,74.153,0,0,1,11.19,19.018c5.276,13.055,37.177,67.778,37.177,67.778l-14.626,6.037s-27.705-30.724-37.1-43.852c-4.245-5.914-10.65-17.325-11.411-28.392-13.3,3.067-52.882,13.129-78.354,14.9-19.021-.4-25.94-13.227-25.94-13.227Z" transform="translate(13.71 78.562)" fill="#7d7d7d" />
<path id="Caminho_10436" d="M11.768,33.328c.908,10.945,9.08,21.693,15.386,29.742C37.387,76.149,48.43,86.162,64.479,91.462c.294.1.564.147.834.221a11.555,11.555,0,0,0,5.1,7.215c-.932.736-11.485,4.736-13.006,5.669-.663.417-1.129.712-1.472.933a11.54,11.54,0,0,0-1.252.294c-2.478.712-4.883,1.571-7.386,2.184-1.89.466-3.8.859-5.742,1.2.172-.123-4.736.466-5.62.54a151.864,151.864,0,0,1-16.711.1c-.933-.049-1.865-.147-2.773-.2C12.921,99.364,3.571,56.69.725,38.653a49.531,49.531,0,0,1-.368-14.5C4.087,27.316,7.89,30.359,11.768,33.328Z" transform="translate(0.009 34.941)" opacity="0.06" />
<path id="Caminho_10437" d="M92.341,64.846a17.355,17.355,0,0,1,8,8.638c2.675,8.147,10.208,112,10.208,112l-13.816.466s-11.975-41.349-17.3-57.766c-6.258-19.264-6.086-33.57-4.319-36.589S21.25,86.76,21.25,86.76L78.943,63.791A15.182,15.182,0,0,1,92.341,64.846Z" transform="translate(30.919 91.005)" fill="#7d7d7d" />
<path id="Caminho_10438" d="M37.734,72.185c10.177-.441,20.4-1.766,30.606-1.177,11.232.638,17.167,3.188,20.11,14.42,3.752,14.224,4.341,29.036,6.793,43.506,2.526,14.911,8.142,29.184,13.317,43.334a8.922,8.922,0,0,0,.736,1.545l-6.548.2s-11.968-41.323-17.289-57.73C79.2,97.028,79.376,82.73,81.141,79.714S20.224,75.3,20.224,75.3L17.06,71.474C17.943,71.694,36.679,72.234,37.734,72.185Z" transform="translate(24.885 102.921)" fill="#2d2d2d" opacity="0.36" />
<path id="Caminho_10439" d="M12.064,49.778c11.509,3.043,48.809,8.074,48.809,8.074l-2.11,10.5S21.758,75.4,1.022,62.711C1.022,62.711.555,46.735,12.064,49.778Z" transform="translate(1.503 71.644)" fill="#fff" />
<path id="Caminho_10440" d="M42.763,52.09l14.184,9.889L36.6,64.752H22.42L29.782,53.93Z" transform="translate(32.62 75.565)" fill="#fff" />
<path id="Caminho_10441" d="M103.732,108.007s5.423,3.19,12.491,7.705c5.3,3.362.27,8.883-8.662,7.705-14.429-1.939-14.92-5.3-20.687-4.81a22.583,22.583,0,0,1-11.534-2.9s-3.534-.81-4-15.73L84.959,92.13Z" transform="translate(103.747 133.782)" fill="#fff" />
<path id="Caminho_10442" d="M108.846,101.8a10.377,10.377,0,0,0,1.521-.27c1.546.957,3.288,2.037,5.129,3.215,5.3,3.362.27,8.883-8.662,7.705-14.429-1.939-14.92-5.3-20.687-4.81a22.583,22.583,0,0,1-11.534-2.9s-1.571-.393-2.773-5.08a47.5,47.5,0,0,0,15.583,4.564C93.975,105.167,103.005,105.584,108.846,101.8Z" transform="translate(104.474 144.744)" fill="#057085" />
<path id="Caminho_10443" d="M65.581,111.75s5.759,7.2,21.123,11.542c1.495.417,4.7,4.386,2.843,5.562H52.618a46.06,46.06,0,0,1-.637-15.658Z" transform="translate(75.088 162.308)" fill="#fff" />
<path id="Caminho_10444" d="M76.572,117.307a9.539,9.539,0,0,0,4.834-1.252c1.62.614,3.362,1.178,5.276,1.718,1.5.417,4.712,4.393,2.847,5.57H52.548a34.775,34.775,0,0,1-.908-7.8A107.476,107.476,0,0,0,76.572,117.307Z" transform="translate(75.104 167.819)" fill="#057085" stroke="#057085" stroke-width="1" />
</g>
<path id="Caminho_10445" d="M37.168,33.739c3.386,5.055,5.227,29.055,2.4,49.447s4.123,37.963-6.724,39.46-15.067-28.122-16-56.441c-.54-16.1-1.62-30.282,5.325-36.245C30,23.261,33.855,28.831,37.168,33.739Z" transform="translate(23.915 38.921)" fill="#fff" />
<path id="Caminho_10446" d="M2.529,17.476A13.4,13.4,0,0,1,13.915,7.12c-7.092,18.5-11.828,85.938,12.81,107.091,34.944,30.036,46.674,24.736,61.251,38.306s5.816,17.423,15.534,42.6c2.552,6.65,6.626,15.411,6.7,15.632,3.853,10.208-2.159,17.325,5.914,24.736-26.4-.172-52.1-.393-69.3-.515a22.257,22.257,0,0,1-21.644-15.828C15.142,182.21-7.41,87.733,2.431,17.672A.493.493,0,0,0,2.529,17.476Z" transform="translate(0.002 10.203)" fill="#11a2bd" />
<path id="Caminho_10447" d="M19.527,110.905c17.84,40.981,50.4,72.318,94.208,82.478a14.954,14.954,0,0,0,2.11,2.38c-26.4-.172-52.1-.393-69.3-.515A22.257,22.257,0,0,1,24.9,179.42C17.392,151.837,2.914,92.108.19,34.44c.393,3.411.834,6.8,1.3,10.184A252.3,252.3,0,0,0,19.527,110.905Z" transform="translate(0.28 49.925)" fill="#057085" />
<g id="Grupo_15903" transform="translate(53.383)">
<path id="Caminho_10448" d="M28.313,22.917,27.086,34.353s.834,9.2-4.712,9.62c-2.92.221-11.337-3.411-14.945-8.834L12.78,19.31Z" transform="translate(10.802 27.927)" fill="#866f5d" />
<path id="Caminho_10449" d="M28.873,20.7,27.646,32.113s.834,9.178-4.712,9.62C20.014,41.953,11.6,38.321,7.99,32.9L13.34,17.07Z" transform="translate(11.616 24.67)" fill="#dedede" />
<path id="Caminho_10450" d="M34.147,3.676c12.221,3.853,9.988,23.877,7.779,31.877S38,48.387,32.4,51.013s-19.337-7.607-19.337-7.607c-4.319-9.742-7.485-21.84-6.209-28.171S21.927-.177,34.147,3.676Z" transform="translate(9.557 3.856)" fill="#fff" />
<path id="Caminho_10451" d="M17.938,4.108A28.781,28.781,0,0,1,49.4,5.433c9.055,6.8,7.853,21.3,7.853,21.3S31.9,23.347,29.275,24.868c-1.4.81-3.239,5.325-3.926,9.718-3.558,22.626-.294,25.84-.294,25.84S6.306,61.015,1.2,50.242,8.318,9.776,17.938,4.108Z" transform="translate(0 -0.061)" />
</g>
<g id="Grupo_15904" transform="translate(85.328 100.606)">
<path id="Caminho_10452" d="M76.378,7.179,63.1,58.172,15.52,60.062,29.655,5.731a5.68,5.68,0,0,1,5.276-4.245L70.636.063A5.7,5.7,0,0,1,76.55,5.51,6.324,6.324,0,0,1,76.378,7.179Z" transform="translate(22.565 -0.058)" fill="#2d2d2d" />
<path id="Caminho_10453" d="M85.913,22.52l.025.785a3.847,3.847,0,0,1-3.705,4h0L7.705,30.25C5.57,30.324.1,28.827,0,26.692l3.656-.933Z" transform="translate(0 32.6)" fill="#2d2d2d" />
</g>
<path id="Caminho_10454" d="M42.852,26.081l2.307,1.742a5.332,5.332,0,0,0,2.871,1.055c2.748.147,6.4-3.73,9.153-3.73a5.3,5.3,0,0,0,2.65-.712h0a5.251,5.251,0,0,1,7.141,1.939,4.809,4.809,0,0,1,.466,1.1l21.57,80.244a5.209,5.209,0,0,1-3.534,6.478,6.915,6.915,0,0,1-.761.172l-6.209.883a4.821,4.821,0,0,1-1.571-.025l-43.509-7.19a5.2,5.2,0,0,1-4.368-5.276C29.428,89.442,29.846,50.6,23,37.516a5.208,5.208,0,0,1,2.037-7.092,5.9,5.9,0,0,1,.564-.27l12.2-4.761A5.325,5.325,0,0,1,42.852,26.081Z" transform="translate(32.489 34.382)" fill="#bdbdbd" />
</g>
</g>
</g>
</g>
<path id="Path_423" data-name="Path 423" d="M-806.868,2457.019c-24.645.017-55.72,15.018-42.862,27.877s40.484,16.483,56.792,5.358S-782.222,2457-806.868,2457.019Z" transform="translate(110.964 2513.176) rotate(-161)" fill="#e8e8e8" />
<path id="Path_424" data-name="Path 424" d="M-826.152,2457.019c-14.283.01-1.378,25.708,8.073,19.261S-811.869,2457.009-826.152,2457.019Z" transform="translate(-927.286 136.717) rotate(-103)" fill="#e8e8e8" />
<path id="Path_425" data-name="Path 425" d="M-1267.953,2622.091c-17.5-28.652-223.159,1.791-153.148,42.978S-1250.45,2650.743-1267.953,2622.091Z" transform="matrix(-0.788, 0.616, -0.616, -0.788, 1550.089, 3264.817)" fill="#e8e8e8" />
</g>
</svg>
</div>
</div>
<BlazoredToasts />
create a svg file
import that file into you html like
<object data="./svg/svgImage.svg" type="image/svg+xml"> </object>
With URL-encoder for SVG you paste in the SVG code into "Insert SVG:" and take out the code at the "Ready for CSS:".
In the given below SVG meter, How to create / fix the following :
Vertical lines exactly below the reading value ( textPath ), to recreate a circular scale ?
And how to fix the overflowing values to be visible, which are at each end's of the path both at startOffset: "0%" and startOffset: "100%" ?
CODEPEN : https://codepen.io/sparkeplug/pen/OJvmLOB
SAMPLE IMAGE FOR RECREATION :
I think it is easier to handle this case if you can work in degrees. Your arc had a specific starting point (10,50) and therefore it was not easy to calculate other positions (like the small lines). I changed the "starting point" to the rotation point of the meter hand and replaced the arc/path
with a circle. All the numbers also have this starting point and are just rotated together with the small lines. I also "replaced" the meter hand so that it is easier to rotate that according to a given value.
document.forms.form01.range.addEventListener('change', e => {
document.querySelector('#meterHand path').setAttribute('transform', `rotate(${e.target.value})`);
});
<form name="form01">
<input name="range" type="range" min="-25" max="25" value="0"/>
</form>
<section class="container">
<svg class="svg" width="300" viewbox="0 0 100 100">
<g stroke="black" stroke-width="1">
<circle cx="50" cy="110" r="100" fill="none"
stroke-dasharray="50 360" stroke-dashoffset="-245"
pathLength="360"/>
</g>
<g transform="translate(50 110)" text-anchor="middle"
stroke="black" font-size="4" font-weight="bold"
stroke-width="0">
<g transform="rotate(-25) translate(0 -100)">
<text y="-2">-50</text>
<line y2="4" stroke-width="1" />
</g>
<g transform="rotate(-20) translate(0 -100)">
<text y="-2">-40</text>
<line y2="4" stroke-width="1" />
</g>
<g transform="rotate(-15) translate(0 -100)">
<text y="-2">-30</text>
<line y2="4" stroke-width="1" />
</g>
<g transform="rotate(-10) translate(0 -100)">
<text y="-2">-20</text>
<line y2="4" stroke-width="1" />
</g>
<g transform="rotate(-5) translate(0 -100)">
<text y="-2">-10</text>
<line y2="4" stroke-width="1" />
</g>
<g transform="rotate(0) translate(0 -100)">
<text y="-2">0</text>
<line y2="4" stroke-width="1" />
</g>
<g transform="rotate(5) translate(0 -100)">
<text y="-2">10</text>
<line y2="4" stroke-width="1" />
</g>
<g transform="rotate(10) translate(0 -100)">
<text y="-2">20</text>
<line y2="4" stroke-width="1" />
</g>
<g transform="rotate(15) translate(0 -100)">
<text y="-2">30</text>
<line y2="4" stroke-width="1" />
</g>
<g transform="rotate(20) translate(0 -100)">
<text y="-2">40</text>
<line y2="4" stroke-width="1" />
</g>
<g transform="rotate(25) translate(0 -100)">
<text y="-2">50</text>
<line y2="4" stroke-width="1" />
</g>
</g>
<g id="meterHand" transform="translate(50 110)">
<path transform="rotate(0)"
d="m -0.5 10 v -90 l 0.5 -10 l 0.5 10 v 90 z"
stroke="black" stroke-width="0.5" fill="red"/>
</g>
</svg>
</section>
The text
<textPath> text will not be drawn before the start, or after the end, of the line. That's because there is no line for which to determine the orientation of the characters. You would either need to either:
extend the path used for <textPath> further on each end. But obviously that will mess with your percentages. The extended path will need to match the drawn one. Working out the new start and end points of the arc will thus probably require some trigonometry. Or
Position and rotate the text yourself. This will require some trigonometry.
The tick marks
To position the ticks, you will to either:
Draw eleven vertical tick marks at the '0' point. Then rotate the non-zero ones left or right by X degrees. The value of X will need to be determined by working out what number of degrees is equivalent to +/-10 units on your meter. Also the ticks will need to be rotated around the centre point of the circular arc. Or
Position and draw the tick marks yourself. This will require some trigonometry.
crwahl his answer as native JavaScript Web Component <svg-meter value="20">
<input id=setMeter oninput="meter1.value=this.value" type="range" min="-50" max="50" value="10" />
<br>
<svg-meter id=meter1 value="20"></svg-meter>
<svg-meter id=meter2 value="-20"></svg-meter>
<svg-meter id=meter3 value="40"></svg-meter>
<script>
customElements.define("svg-meter", class extends HTMLElement {
set value(v) {
this.querySelector('[hand]').setAttribute('transform', `rotate(${v*(this.angle_step/this.step)})`);
}
connectedCallback() {
Object.assign(this, {
min: -50,
angle_min: -25,
angle_step: 5,
step: 10,
color: "darkgreen",
scalecolor: "green"
});
this.innerHTML = `
<svg viewbox="0 0 100 100" height="180">
<circle cx="50" cy="110" r="100" fill="none"
stroke="${this.scalecolor}" stroke-width="1"
stroke-dasharray="50.65 360" stroke-dashoffset="-245.1" pathLength="360"/>
<g transform="translate(50 110)" stroke="${this.scalecolor}">
${Array(11).fill().map((d,idx)=>{
return `<g transform="rotate(${this.angle_min+(idx*this.angle_step)}) translate(0 -100)">
<text y="-2" fill="${this.color}" text-anchor="middle" font-size="4" font-weight="bold" stroke-width="0">${this.min+(idx*this.step)}</text>
<line y2="4" stroke-width="1"/></g>`;
}).join("")}
</g>
<g transform="translate(50 110)">
<path hand transform="rotate(0)" d="m-0.5 10v-90l0.5-10l0.5 10v90z" stroke="black" stroke-width="0.5" fill="red"/>
</g>
</svg>`;
this.value = this.getAttribute("value") || 0;
}
})
</script>
You can use css property:
.svg #meterHand{
transform: rotate(-20deg);
}
How do I horisontally and vertically center a <g> transform that has both a scale + rotate (90 degree) values defined?
Im my example I have a 85x85mm SVG element that im trying to center towards.
If im not rotating I can center with scale(0.25) rotate(0 42.5 42.5) translate(42.5 42.5)
However introducing the 90degree rotation, things go wrong.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="85mm"
height="85mm"
viewBox="0 0 85 85">
<style type="text/css">
svg {
border: 1px solid red;
position: absolute;
top: 10px;
left: 10px;
overflow: hidden;
}
</style>
<!-- TRANSFORMATION HERE-->
<g class="svg-merge-item-wrapper" transform="scale(0.25) rotate(90 42.5 42.5) translate(42.5 42.5)">
<!-- TRANSFORMATION HERE-->
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:0.375;stroke-miterlimit:3.9892;}
</style>
<path id="path6" class="st0" d="M119.2,35.9c0,0,11.2,0,15,7.4c3.8,7.4,4.2,17.8,4.5,19.2c0.3,1.4,0.3,6.3,6,10.8
c5.6,4.5,6.3,18.5,6.3,18.5s1.4,0,1.4,1.7v5.2c0,0.6-0.4,1-1,1c0,0,0,18.5-0.4,28.7c-0.4,10.1-4.2,43-6,50
c-1.8,7-10.5,31.9-10.5,31.9h-29.7c0,0-9.4-21.7-11.9-36.4s-5.3-24.8-5.6-39.5c-0.3-14.7,0-34.6,0-34.6s-2.1,0.3-2.1-1.4v-5.6
c0-0.8,0.6-1.4,1.3-1.4c0,0,0,0,0.1,0c0,0,0-12.6,4.5-16.8c4.5-4.2,6-8,6.3-9.4c0.3-1.4,0.7-7.7,0.7-7.7c1.6-2.2,2.7-4.7,3.1-7.3
c0.7-4.2,1.1-5.6,1.1-5.6s2.8-6,5.9-7c1.7-0.6,3.5-1,5.3-1.4C115.4,36.1,117.3,35.9,119.2,35.9z"/>
<path id="path8" class="st0" d="M88.4,91.5v-0.3c0,0,0-12.1,4.3-16.1c4.3-4,5.7-7.7,6-9.1c0.2-0.9,0.4-3.9,0.6-5.8
c0.1-1,0.4-2,0.9-2.8c1.1-1.8,1.8-3.8,2.2-5.9c0.7-4,1-5.4,1-5.4s2.7-5.7,5.6-6.7c1.6-0.6,3.3-1,5-1.3c1.8-0.2,3.5-0.3,5.3-0.3
c0,0,10.6,0,14.3,7.1c3.7,7.1,3.7,17.5,4.1,18.8c0.4,4,2.4,7.7,5.6,10.1c5.3,4.4,6.3,17.8,6.3,17.8v0.3"/>
<path id="path10" class="st0" d="M98.2,57.6c0,0-10.5-15-15.7-17.5s-11.9-4.5-10.8-6.6c0,0,7-2.1,18.5,4.5s12.1,7.4,12.1,7.4"/>
<path id="path12" class="st0" d="M107,38.4c0,0-0.1-1.8-1.5-1.8c-1.4,0-2.4,1-5.6,0c-3.2-1-3.1-1.4-3.5-1.4
c-0.3,0-14.3-6.6-18.2-6.6s-6.3,0-7,2.1c-0.7,2.1,0,2.7,0,2.7l0.3,0.1"/>
<circle id="circle14" class="st0" cx="112.2" cy="44.3" r="1.4"/>
<circle id="circle16" class="st0" cx="111.8" cy="44" r="0.7"/>
<line id="line18" class="st0" x1="86.6" y1="91.5" x2="151" y2="91.9"/>
<line id="line20" class="st0" x1="151.3" y1="99.9" x2="87.3" y2="99.9"/>
<path id="path22" class="st0" d="M151.2,118.6c0,0,1.5,0.5,1.5-1.6v-9.8c0,0-0.3-2.1,3.8-1.4c4.2,0.7,9.4,2.1,10.8,8.4
c0.8,3.8,1,7.7,0.8,11.6c-0.1,1.6-0.2,3.2-0.5,4.8c-1,5.3-3.1,16.6-7.5,24.5c-4.1,7.2-13.5,20.9-17.5,30.9"/>
<path id="path24" class="st0" d="M151.3,104.8c0,0,2-1.4,5.9-0.6c4.2,0.9,10.1,2.4,11.8,9.6c1.6,6.5,0.9,11.6,0.2,16.7
c-0.7,4.7-1.7,9.3-3.1,13.8c-0.9,2.9-3.4,9.8-5.8,13.6c-1.3,2-13.6,21.7-16.1,27.9s-3.5,8-3.5,16.8c0,7.3,2.8,7.7,2.8,7.7h-2.1
c0,0-4.6-6.2-1.1-17.2"/>
<path id="path26" class="st0" d="M113.2,105.1h11.5c4.6,5.4,5.2,13.1,1.7,19.2c-6,10.8-6.3,7.3-7,16.8c-0.6,7.9,1.5,17,2.2,19.8
c0.3,1,0.3,2,0.2,3c-0.3,2.3-1.9,4.7-8-1.4c-7.7-7.7-8.6-23.2-8.7-27.8c0-0.8,0.1-1.7,0.2-2.5c0.9-4.3,2.4-8.5,4.3-12.4
C112.9,113.9,113.2,105.5,113.2,105.1z"/>
<path id="path28" class="st0" d="M104.8,210.4H93.7c-0.4,0.3-0.5,1-0.2,1.4c0.1,0.2,0.3,0.3,0.5,0.3c1.4,0.7,51.7-0.3,51.7-0.3
c0.4-0.4,0.4-1,0-1.4h-11.2"/>
<polyline id="polyline30" class="st0" points="113.1,106.9 125.8,106.9 126,106.8 "/>
<line id="line32" class="st0" x1="118" y1="165.8" x2="121.1" y2="165.8"/>
<line id="line34" class="st0" x1="116.6" y1="164.8" x2="121.7" y2="164.8"/>
<line id="line36" class="st0" x1="121.9" y1="163.9" x2="115.5" y2="163.9"/>
<line id="line38" class="st0" x1="114.5" y1="163.1" x2="122" y2="163.1"/>
<line id="line40" class="st0" x1="122" y1="162.1" x2="113.6" y2="162.1"/>
<line id="line42" class="st0" x1="112.6" y1="161" x2="121.7" y2="161"/>
<polyline id="polyline44" class="st0" points="112.9,108.5 126.9,108.5 127,108.5 "/>
<polyline id="polyline46" class="st0" points="112.6,110.1 127.5,110.1 127.6,110.1 "/>
<polyline id="polyline48" class="st0" points="112.4,111.6 127.9,111.6 128.1,111.6 "/>
<line id="line50" class="st0" x1="111.6" y1="114.8" x2="128.7" y2="114.8"/>
<line id="line52" class="st0" x1="128.8" y1="116.4" x2="111.2" y2="116.4"/>
<line id="line54" class="st0" x1="110.5" y1="118.3" x2="114.6" y2="118.3"/>
<line id="line56" class="st0" x1="115" y1="118.3" x2="116" y2="118.3"/>
<line id="line58" class="st0" x1="117" y1="118.3" x2="125.5" y2="118.3"/>
<line id="line60" class="st0" x1="125.8" y1="118.3" x2="128.6" y2="118.3"/>
<line id="line62" class="st0" x1="114.2" y1="120.3" x2="115.2" y2="120.3"/>
<line id="line64" class="st0" x1="116.2" y1="120.3" x2="121.3" y2="120.3"/>
<line id="line66" class="st0" x1="122.1" y1="120.3" x2="124.1" y2="120.3"/>
<line id="line68" class="st0" x1="124.6" y1="120.3" x2="125.8" y2="120.3"/>
<line id="line70" class="st0" x1="126.7" y1="120.3" x2="127.5" y2="120.3"/>
<line id="line72" class="st0" x1="109.5" y1="120.3" x2="113.6" y2="120.3"/>
<line id="line74" class="st0" x1="106.6" y1="127.7" x2="124.6" y2="127.7"/>
<polyline id="polyline76" class="st0" points="128.5,113.2 128.2,113.2 112,113.2 "/>
<ellipse id="ellipse78" class="st0" cx="113.4" cy="44.7" rx="4.7" ry="3.8"/>
<path id="path80" class="st0" d="M123.4,125.9l2.2,0.1"/>
<path id="path82" class="st0" d="M119.3,125.8h2.4"/>
<path id="path84" class="st0" d="M116.4,125.8h1.5"/>
<path id="path86" class="st0" d="M112.5,125.9h2.4"/>
<path id="path88" class="st0" d="M109.6,125.9h1.4"/>
<path id="path90" class="st0" d="M107.2,125.9h1.1"/>
<path id="path92" class="st0" d="M107.5,129.4h-1.3"/>
<path id="path94" class="st0" d="M110.6,129.3h-1.8"/>
<path id="path96" class="st0" d="M116.1,129.3h-4.1"/>
<path id="path98" class="st0" d="M123.6,129.4c-2,0-4-0.1-6.1-0.1"/>
<line id="line100" class="st0" x1="105.7" y1="131.1" x2="122.4" y2="131.1"/>
<path id="path102" class="st0" d="M107.5,132.8h-2.1"/>
<path id="path104" class="st0" d="M113.7,132.8h-4.9"/>
<path id="path106" class="st0" d="M121.3,132.8h-6.2"/>
<path id="path108" class="st0" d="M107.7,134.5h-2.5"/>
<path id="path110" class="st0" d="M114.4,134.5h-5.3"/>
<path id="path112" class="st0" d="M120.5,134.5h-4.6"/>
<line id="line114" class="st0" x1="105.2" y1="136.2" x2="120" y2="136.2"/>
<path id="path116" class="st0" d="M117.2,137.9h2.6"/>
<path id="path118" class="st0" d="M111.7,137.9h3.8"/>
<path id="path120" class="st0" d="M105.3,137.9h5"/>
<line id="line122" class="st0" x1="119.7" y1="139.3" x2="105.4" y2="139.3"/>
<line id="line124" class="st0" x1="105.6" y1="140.7" x2="119.6" y2="140.7"/>
<line id="line126" class="st0" x1="119.5" y1="141.9" x2="105.8" y2="141.9"/>
<line id="line128" class="st0" x1="105.9" y1="143.2" x2="119.4" y2="143.2"/>
<line id="line130" class="st0" x1="119.4" y1="144.4" x2="106.1" y2="144.4"/>
<path id="path132" class="st0" d="M114.1,145.6h5.4"/>
<path id="path134" class="st0" d="M109.4,145.6h2.9"/>
<path id="path136" class="st0" d="M106.3,145.7h1.8"/>
<line id="line138" class="st0" x1="111.7" y1="159.8" x2="121.4" y2="159.7"/>
<line id="line140" class="st0" x1="121.2" y1="158.5" x2="110.9" y2="158.5"/>
<line id="line142" class="st0" x1="110.2" y1="157.3" x2="120.9" y2="157.3"/>
<line id="line144" class="st0" x1="109.6" y1="156.2" x2="120.7" y2="156.2"/>
<line id="line146" class="st0" x1="109.1" y1="154.9" x2="120.4" y2="154.9"/>
<line id="line148" class="st0" x1="120.2" y1="153.5" x2="108.5" y2="153.5"/>
<line id="line150" class="st0" x1="107.9" y1="152" x2="120" y2="152"/>
<line id="line152" class="st0" x1="107.6" y1="150.7" x2="119.8" y2="150.7"/>
<line id="line154" class="st0" x1="119.7" y1="149.2" x2="107.1" y2="149.2"/>
<path id="path156" class="st0" d="M115.5,148h4.1"/>
<path id="path158" class="st0" d="M110.7,148h3.3"/>
<path id="path160" class="st0" d="M106.8,148h2.4"/>
<line id="line162" class="st0" x1="119.5" y1="146.8" x2="106.6" y2="146.8"/>
<path id="path164" class="st0" d="M114.3,92.7h1.7"/>
<path id="path166" class="st0" d="M106.3,92.6c2.1,0,4.2,0,6.3,0"/>
<path id="path168" class="st0" d="M98.2,92.6h6.6"/>
<path id="path170" class="st0" d="M91.7,92.7l4.9-0.1"/>
<path id="path172" class="st0" d="M85.3,92.7h5"/>
<path id="path174" class="st0" d="M130,92.7h-5"/>
<path id="path176" class="st0" d="M136.5,92.6l-4.8,0.1"/>
<path id="path178" class="st0" d="M137.8,92.6c4.7,0,9.5,0,14.2,0.1h0.2"/>
<line id="line180" class="st0" x1="86.6" y1="99.9" x2="86.6" y2="93.3"/>
<line id="line182" class="st0" x1="88.9" y1="99.9" x2="88.9" y2="93.3"/>
<line id="line184" class="st0" x1="91.1" y1="99.9" x2="91.1" y2="93.3"/>
<path id="path186" class="st0" d="M93.3,94.3v-1.1"/>
<path id="path188" class="st0" d="M93.3,99.9v-4.4"/>
<path id="path190" class="st0" d="M95.6,95.4v-2.1"/>
<path id="path192" class="st0" d="M95.6,99.9v-3"/>
<line id="line194" class="st0" x1="97.8" y1="99.9" x2="97.8" y2="93.3"/>
<line id="line196" class="st0" x1="100" y1="99.9" x2="100" y2="93.3"/>
<line id="line198" class="st0" x1="102.2" y1="99.9" x2="102.2" y2="93.3"/>
<path id="path200" class="st0" d="M104.5,94.7v-1.5"/>
<path id="path202" class="st0" d="M104.5,99.9V96"/>
<path id="path204" class="st0" d="M106.7,95.2v-1.9"/>
<path id="path206" class="st0" d="M106.7,99.9v-3"/>
<path id="path208" class="st0" d="M108.9,94.7v-1.5"/>
<path id="path210" class="st0" d="M108.9,97.5v-1.7"/>
<path id="path212" class="st0" d="M108.9,99.9v-1.2"/>
<path id="path214" class="st0" d="M111.1,94.3v-1.1"/>
<path id="path216" class="st0" d="M111.1,99.6v-1.1"/>
<path id="path218" class="st0" d="M126.9,94.8v-1.6"/>
<path id="path220" class="st0" d="M126.9,99.9v-1.6"/>
<path id="path222" class="st0" d="M129.1,94.5v-1.3"/>
<path id="path224" class="st0" d="M129.1,97.3v-1.2"/>
<path id="path226" class="st0" d="M129.1,99.9v-1.4"/>
<path id="path228" class="st0" d="M131.3,94.4v-1.2"/>
<path id="path230" class="st0" d="M131.3,96.9v-1.2"/>
<path id="path232" class="st0" d="M131.3,99.9v-1.8"/>
<path id="path234" class="st0" d="M133.5,94.8v-1.6"/>
<path id="path236" class="st0" d="M133.5,99.9v-2.6"/>
<path id="path238" class="st0" d="M135.7,94.5v-1.3"/>
<path id="path240" class="st0" d="M135.7,96.8v-1.2"/>
<path id="path242" class="st0" d="M135.7,99.9V98"/>
<path id="path244" class="st0" d="M138,95.1v-1.8"/>
<path id="path246" class="st0" d="M138,99.9v-3.6"/>
<line id="line248" class="st0" x1="140.2" y1="99.9" x2="140.2" y2="93.3"/>
<line id="line250" class="st0" x1="142.4" y1="99.9" x2="142.4" y2="93.3"/>
<line id="line252" class="st0" x1="144.6" y1="99.9" x2="144.6" y2="93.3"/>
<line id="line254" class="st0" x1="146.9" y1="99.9" x2="146.9" y2="93.3"/>
<line id="line256" class="st0" x1="149.1" y1="99.9" x2="149.1" y2="93.3"/>
<line id="line258" class="st0" x1="151" y1="99.9" x2="151" y2="93.3"/>
<path id="path260" class="st0" d="M142.3,211.3c1.2,0,2.4,0,3.7,0.1"/>
<path id="path262" class="st0" d="M136.5,211.4h2.9"/>
<path id="path264" class="st0" d="M131.9,211.5l3.4-0.1"/>
<path id="path266" class="st0" d="M111.2,211.8c1.9,0,3.7,0,5.6,0"/>
<path id="path268" class="st0" d="M93.5,211.8h13"/>
<path id="path270" class="st0" d="M114.8,47.7c1.7-0.3,2.9-2,2.6-3.7"/>
<path id="path272" class="st0" d="M112.2,47.8c0.4,0,0.9,0,1.3,0"/>
<path id="path274" class="st0" d="M71,32.1c0,0,11.2-1.5,19.4,6"/>
<path id="path276" class="st0" d="M106.5,37.1c-2.3,1-3.6,3.4-3.2,5.9"/>
<path id="path278" class="st0" d="M79.8,28.8c0,0,16,6.4,17.7,7.5c1.7,1.1,4.9,1.7,6,1.4c0.8-0.2,1.6-0.4,2.5-0.4"/>
<path id="path280" class="st0" d="M75.4,28.6c3.5,0.7,6.9,1.9,10.2,3.5c4.9,2.5,11.5,5.2,11.5,5.2s4.5,2.1,6,1.4
c1.4-0.7,1.8-0.6,1.8-0.6"/>
<path id="path282" class="st0" d="M72.5,29.2c0,0,2.9-0.3,7.8,1.8c4.9,2.1,16.8,7.7,16.8,7.7s4.2,1.8,5.2,1.1
c0.5-0.4,1.1-0.6,1.7-0.7"/>
<path id="path284" class="st0" d="M81,32.3c0.6,0.2,1.2,0.4,1.8,0.5"/>
<path id="path286" class="st0" d="M76.9,30.9c1,0.3,2,0.7,3,1.1"/>
<path id="path288" class="st0" d="M71.5,30.3c1.4-0.3,2.9-0.3,4.3,0.2"/>
<path id="path290" class="st0" d="M71.6,34.4c0,0,9.4,2.9,12.6,5.7c3.1,2.8,14.8,15.1,14.5,16.7"/>
<path id="path292" class="st0" d="M99.6,55.3c0,0-13-15.5-17.5-17.6c-4.6-2.1-9.8-4.3-9.8-4.3"/>
<path id="path294" class="st0" d="M88.7,41.6c4.2,3.8,7.8,8.3,11.5,12.6"/>
<path id="path296" class="st0" d="M83.9,37.9c0.9,0.6,1.7,1.2,2.5,1.9"/>
<path id="path298" class="st0" d="M81.4,36.3c0.5,0.3,1,0.5,1.4,0.8"/>
<path id="path300" class="st0" d="M74.9,33.2c1.1,0.5,2.1,1,3.2,1.5"/>
<path id="path302" class="st0" d="M91.8,43.5c-0.4-0.4-0.8-0.8-1.3-1.2"/>
<path id="path304" class="st0" d="M95.1,46.9c-0.8-0.9-1.6-1.7-2.4-2.6"/>
<path id="path306" class="st0" d="M97.8,49.8l-1.1-1.2"/>
<path id="path308" class="st0" d="M100.6,52.9l-2.1-2.3"/>
<path id="path310" class="st0" d="M106.8,37.6c0,0-2.8,1.5-2.7,4.1"/>
<polyline id="polyline312" class="st0" points="124.1,99.9 124.1,103.8 124.1,105.1 "/>
<line id="line314" class="st0" x1="127.2" y1="99.9" x2="127.2" y2="109.3"/>
<path id="path316" class="st0" d="M123,150.1c0,1,0,1.9,0,2.9"/>
<path id="path318" class="st0" d="M123.1,146.3c0,0.8-0.1,1.6-0.1,2.4"/>
<path id="path320" class="st0" d="M123.3,142.7c0,0.6,0,1.1-0.1,1.7"/>
<path id="path322" class="st0" d="M123.6,135.6c-0.1,1.7-0.2,3.3-0.3,5"/>
<path id="path324" class="st0" d="M123.9,128.8l-0.2,5.5"/>
<path id="path326" class="st0" d="M124.9,169.2c0,0.6-0.1,1.1-0.2,1.7"/>
<path id="path328" class="st0" d="M125.2,165.8c0,0.5-0.1,1-0.1,1.4"/>
<path id="path330" class="st0" d="M125.5,161.2c0,0.6-0.1,1.1-0.1,1.7"/>
<path id="path332" class="st0" d="M125.8,155.6c0,1.1-0.1,2.3-0.2,3.4"/>
<path id="path334" class="st0" d="M126.1,148.6c0,1-0.1,2.1-0.2,3.1"/>
<path id="path336" class="st0" d="M126.7,139.7c-0.2,2-0.3,4-0.4,6"/>
<path id="path338" class="st0" d="M126.8,135.3c0,1,0,2-0.1,2.9"/>
<path id="path340" class="st0" d="M127,123.5c-0.1,3.3-0.1,6.5-0.1,10.1"/>
<path id="path342" class="st0" d="M124.8,180.5c-0.1,0.6-0.3,1.3-0.4,1.9"/>
<path id="path344" class="st0" d="M125.6,177.2c-0.1,0.6-0.2,1.3-0.4,1.9"/>
<path id="path346" class="st0" d="M128,159.2c-0.6,5.7-1.3,11.3-2.3,17"/>
<path id="path348" class="st0" d="M130.3,99.9c-0.2,14.5-0.3,29-1.1,43.5c-0.2,4.1-0.5,8.3-0.9,12.4"/>
<path id="path350" class="st0" d="M125.4,185c-0.2,0.8-0.4,1.5-0.6,2.3"/>
<path id="path352" class="st0" d="M126.8,180.5c-0.3,0.9-0.5,1.9-0.9,2.8"/>
<path id="path354" class="st0" d="M129.1,167.6c-0.4,3.8-1.1,7.6-2,11.4"/>
<path id="path356" class="st0" d="M132.1,99.9c0,21.7,0,43.3-2.7,64.8"/>
<path id="path358" class="st0" d="M126.2,189.9c-0.1,0.5-0.3,1.1-0.4,1.6"/>
<path id="path360" class="st0" d="M127.1,186.4c-0.1,0.6-0.3,1.2-0.5,1.9"/>
<path id="path362" class="st0" d="M129.7,173.7c-0.5,3.1-1.1,6.1-1.8,9.2"/>
<path id="path364" class="st0" d="M133.9,99.9c-0.4,23.1-0.8,46.1-3.5,69.1"/>
<path id="path366" class="st0" d="M127.3,192.5c-0.2,1-0.5,2.1-0.8,3.1"/>
<path id="path368" class="st0" d="M135.7,99.9c-0.5,30.4-0.8,61.2-8,90.8"/>
<path id="path370" class="st0" d="M127.1,198c-0.1,0.4-0.2,0.8-0.3,1.2"/>
<path id="path372" class="st0" d="M128,194.8c-0.1,0.5-0.2,0.9-0.3,1.4"/>
<path id="path374" class="st0" d="M137.5,99.9c-0.9,31.1-0.5,62.6-9,92.5"/>
<path id="path376" class="st0" d="M128.7,197.7c-0.3,1.1-0.5,2.1-0.8,3.2"/>
<path id="path378" class="st0" d="M139.3,99.9c-0.6,16.1,0.1,32.2-2,48.6v3.5c-1.4,15-3.8,30.1-8.2,44.2"/>
<path id="path380" class="st0" d="M141.2,99.9c0,0-0.3,25.4-1,37.3c-0.6,9.1-2.7,31.8-5.3,42.3c-2.2,8.6-6,21.9-6.6,24.3"/>
<path id="path382" class="st0" d="M143,99.9c0,0-0.4,27.2-1.1,38c-0.6,8.6-3,32.8-5.8,43c-2.4,8.8-7.4,25.1-7.8,27"/>
<path id="path384" class="st0" d="M144.8,99.9c0,0-0.4,28.9-1.2,38.7c-0.6,8.1-3.3,33.8-6.3,43.8c-2.7,9-6.3,20.9-6.7,22.4l-1.7,5.5
"/>
<path id="path386" class="st0" d="M146.6,99.9c0,0-0.5,30.7-1.2,39.5c-0.6,7.6-3.6,34.7-6.7,44.6c-3,9.1-6.9,21.8-7.1,22.7
c0,0-1,3.3-1.1,3.7"/>
<path id="path388" class="st0" d="M148.4,99.9c0,0-0.6,32.5-1.3,40.2c-0.7,7.2-3.9,35.7-7.2,45.4c-3.2,9.3-7.4,22.6-7.5,23.1
l-0.6,1.8"/>
<path id="path390" class="st0" d="M150.2,99.9c0,0-0.7,34.3-1.4,40.9c-0.7,6.6-4.2,36.7-7.7,46.1c-3.5,9.4-8,23.4-8,23.4"/>
<path id="path392" class="st0" d="M114.2,180.4c0.1,0.6,0.3,1.2,0.4,1.9"/>
<path id="path394" class="st0" d="M113.5,177.1c0.1,0.6,0.2,1.3,0.4,1.9"/>
<path id="path396" class="st0" d="M111.1,160.1c0.6,5.3,1.3,10.6,2.2,16"/>
<path id="path398" class="st0" d="M108.7,99.9c0.1,6.8,0.2,13.5,0.4,20.3"/>
<path id="path400" class="st0" d="M113.6,184.9c0.2,0.8,0.4,1.5,0.6,2.3"/>
<path id="path402" class="st0" d="M112.3,180.4c0.3,0.9,0.5,1.9,0.9,2.8"/>
<path id="path404" class="st0" d="M109.9,167.5c0.4,3.8,1.1,7.6,2,11.4"/>
<path id="path406" class="st0" d="M108.5,154.3c0.3,3.5,0.7,6.9,1.1,10.4"/>
<path id="path408" class="st0" d="M106.6,99.9c0,8.6,0.4,17,0.5,25.6"/>
<path id="path410" class="st0" d="M112.8,189.8c0.1,0.5,0.3,1.1,0.4,1.6c0,0,1,5,1.4,7.1"/>
<path id="path412" class="st0" d="M112,186.3c0.1,0.6,0.3,1.2,0.5,1.9"/>
<path id="path414" class="st0" d="M109.3,173.6c0.5,3.1,1.1,6.1,1.8,9.2"/>
<path id="path416" class="st0" d="M106.8,148.3c0.5,6.9,1.1,13.7,1.9,20.5"/>
<path id="path418" class="st0" d="M104.8,99.9c0.2,9.6,0.6,19.2,0.9,28.8"/>
<path id="path420" class="st0" d="M111.7,192.4c0.2,1,0.5,2.1,0.8,3.1"/>
<path id="path422" class="st0" d="M103.1,99.9c0.5,30.4,1,61.1,8.2,90.8"/>
<path id="path424" class="st0" d="M111.9,197.9c0.1,0.4,0.2,0.8,0.3,1.2c0,0,0.7,2.9,1,4"/>
<path id="path426" class="st0" d="M111.1,194.7l0.3,1.4"/>
<path id="path428" class="st0" d="M101.3,99.9c0.9,31.1,0.7,62.5,9.1,92.4"/>
<path id="path430" class="st0" d="M110.3,197.6c0.3,1.1,0.5,2.1,0.8,3.2c0,0,1.7,6,2.1,6.4"/>
<path id="path432" class="st0" d="M99.6,99.9c0.6,16.1,0,32.1,2.1,48.5v3.5c1.4,15.1,3.8,30,8.2,44.2"/>
<path id="path434" class="st0" d="M97.5,99.9c0,0,0.7,25.3,1.4,37.2c0.6,9.1,2.7,31.8,5.3,42.3c2.2,8.6,7.3,27.2,8.3,29.3"/>
<path id="path436" class="st0" d="M96.1,99.9c0,0,0.3,27.1,1.1,37.9c0.6,8.6,3,32.8,5.8,43c2.4,8.8,7.4,25.1,7.8,27"/>
<path id="path438" class="st0" d="M94.3,99.9c0,0,0.3,28.8,1.1,38.6c0.6,8.1,3.3,33.8,6.3,43.8c2.7,9,6.3,20.9,6.7,22.4l1.7,5.5v0.1
"/>
<path id="path440" class="st0" d="M92.2,99.9c0,0,0.7,30.6,1.4,39.4c0.6,7.6,3.6,34.7,6.7,44.6c3,9.1,6.9,21.8,7.1,22.7
c0,0,1,3.3,1.1,3.7l0.1,0.1"/>
<path id="path442" class="st0" d="M90.5,99.9c0,0,0.7,32.4,1.4,40.1c0.7,7.1,3.9,35.7,7.2,45.4c3.2,9.3,7.4,22.6,7.5,23.1l0.6,1.8
l0.1,0.1"/>
<path id="path444" class="st0" d="M88.8,99.9c0,0,0.7,34.2,1.4,40.8c0.7,6.6,4.2,36.7,7.7,46.1s8,23.4,8,23.4"/>
<line id="line446" class="st0" x1="105.8" y1="210.2" x2="105.9" y2="210.4"/>
<path id="path448" class="st0" d="M110.6,110.3c-0.1,1,0,2,0.2,2.9"/>
<path id="path450" class="st0" d="M110.7,105c0,1,0,2.1,0,3.1"/>
<path id="path452" class="st0" d="M110.8,99.9c0,0.9,0,1.8-0.1,2.7"/>
<path id="path454" class="st0" d="M112.5,39.6c1.7-0.4,3.5-0.5,5.2-0.5c0,0,10.8-0.8,14.7,6.6c3.9,7.4,3.5,17.2,3.8,18.5
c0.3,1.3,0.1,5.5,5.3,9.7s5.9,17.2,5.9,17.2v0.3"/>
<path id="path456" class="st0" d="M118.6,40.4c4.7,0.3,9.1,1.3,11.8,5.4c3.1,4.7,3.9,11.4,4.4,16.8c0.3,3.2,0.8,6.4,2.6,9.1"/>
<path id="path458" class="st0" d="M118.9,42.5c4.3,0.3,8.3,1.3,10.8,5.1c2.9,4.3,3.6,10.5,4,15.5c0.3,2.9,0.7,5.9,2.4,8.4"/>
<path id="path460" class="st0" d="M119.2,44.6c3.9,0.3,7.4,1.2,9.7,4.7c2.6,4,3.3,9.7,3.7,14.2c0.3,2.7,0.7,5.4,2.2,7.7"/>
<path id="path462" class="st0" d="M119.5,46.8c3.4,0.2,6.6,1.2,8.6,4.4c2.3,3.6,2.9,8.8,3.3,13c0.2,2.5,0.6,5,2,7"/>
<path id="path464" class="st0" d="M119.8,48.9c3,0.2,5.8,1.2,7.6,4.1c2,3.3,2.6,7.9,3,11.6c0.1,2.2,0.7,4.4,1.8,6.3"/>
<path id="path466" class="st0" d="M120.1,51.1c2.7,0,5.2,1.5,6.5,3.8c1.7,3,2.2,7.1,2.6,10.4c0.1,2,0.6,3.9,1.6,5.6"/>
<path id="path468" class="st0" d="M124.6,55.1c1.9,1.9,2.6,4.9,3,7.5s0.3,5.8,1.9,8.1"/>
<path id="path470" class="st0" d="M120.4,53.2c0.9,0.1,1.7,0.3,2.5,0.6"/>
<path id="path472" class="st0" d="M127,66.6c0.1,1.4,0.5,2.7,1.2,3.9"/>
<path id="path474" class="st0" d="M120.7,55.3c4.4,0.3,5.5,5.5,6,9.1"/>
<path id="path476" class="st0" d="M121,57.5c1.3,0.1,2.5,1,3.4,2.9c0.8,2.1,1.3,4.3,1.5,6.5c0.1,1.2,0.4,2.4,1.1,3.4"/>
<path id="path478" class="st0" d="M123.7,62.4c0.4,1.3,0.7,2.6,0.9,4c0,1.3,0.4,2.6,1,3.7"/>
<path id="path480" class="st0" d="M121.3,59.6c0.6,0.1,1.1,0.4,1.4,0.9"/>
<path id="path482" class="st0" d="M123.6,67.8c0.1,0.8,0.3,1.5,0.7,2.2"/>
<path id="path484" class="st0" d="M121.6,61.8c1.1,0.4,1.4,3,1.6,4"/>
<path id="path486" class="st0" d="M122.4,67.8c0,0.7,0.3,1.4,0.6,2"/>
<path id="path488" class="st0" d="M122,63.9c0,0.7,0.1,1.3,0.2,2"/>
<path id="path490" class="st0" d="M141.7,76.1c3.5,4.3,4.3,10.1,4.7,15.5"/>
<path id="path492" class="st0" d="M140.4,77.2c3.2,3.9,4,9.2,4.3,14.4"/>
<path id="path494" class="st0" d="M139.1,78.4c2.9,3.5,3.7,8.3,4,13.3"/>
<path id="path496" class="st0" d="M137.8,79.5c2.6,3.1,3.3,7.5,3.6,12.2"/>
<path id="path498" class="st0" d="M136.5,80.6c2.2,2.7,3,6.6,3.2,11.1"/>
<path id="path500" class="st0" d="M135.2,81.7c1.9,2.4,2.7,5.7,2.8,10"/>
<path id="path502" class="st0" d="M134,82.8c1.6,2,2.4,4.8,2.4,8.9"/>
<path id="path504" class="st0" d="M132.7,83.9c1.3,1.6,2,4,2.1,7.8"/>
<path id="path506" class="st0" d="M132.9,89.2c0.1,0.8,0.1,1.7,0.1,2.5"/>
<path id="path508" class="st0" d="M131.4,85c0.5,0.6,0.8,1.3,1.1,2"/>
<path id="path510" class="st0" d="M130.1,86.2c0.6,0.8,1.4,2.2,1.3,5.6"/>
<path id="path512" class="st0" d="M129.7,90.6c0,0.4,0,0.7,0,1.1"/>
<path id="path514" class="st0" d="M128.8,87.3c0.3,0.4,0.5,0.8,0.6,1.3"/>
<path id="path516" class="st0" d="M128.1,90c0,0.6,0,1.2,0,1.7"/>
<path id="path518" class="st0" d="M127.6,88.4c0.3,0.3,0.4,0.7,0.5,1.1"/>
<path id="path520" class="st0" d="M98.2,70.8c0.9-1.3,1.6-2.6,2.1-4.1c0.3-2.4,0-5.2,1-7.7c1.8-4.2,2.5-8.7,3.8-13
c0.4-1.1,1.1-2.2,2.1-2.9"/>
<path id="path522" class="st0" d="M106.9,46.7c-1,1.7-1.3,3.9-1.8,5.8c-0.5,2.1-1.1,4.2-1.8,6.3c-0.7,2-1.1,4.2-1.2,6.3
c-0.2,2-0.9,3.9-2,5.6"/>
<path id="path524" class="st0" d="M108,48.6c-1.4,2.4-1.4,5.5-2.1,8.3c-1.4,3.5-1.7,7.3-2.8,11.2c-0.3,0.8-0.6,1.6-1,2.4"/>
<path id="path526" class="st0" d="M109.7,49.8c-0.6,0.6-1,1.4-1.2,2.3c-0.7,3-1.3,6.6-2.4,9.6c-0.2,0.5-0.3,1.1-0.5,1.6
c-0.3,1.4-0.2,2.8-0.4,4.1c-0.2,1.1-0.6,2.1-1.2,3.1"/>
<path id="path528" class="st0" d="M108.5,59.4c-0.4,1.9-1.2,3.7-1.4,5.6c-0.3,1.9-0.2,3.7-1.1,5.3"/>
<path id="path530" class="st0" d="M110.5,52c-1.2,1-1.2,3.6-1.5,5"/>
<path id="path532" class="st0" d="M111.3,54.3c-0.4,0.5-0.6,1.2-0.6,1.8c-0.3,2.5-0.8,4.9-1.4,7.4c-0.1,0.4-0.2,0.8-0.3,1.2
c-0.2,1-0.4,2.1-0.4,3.1c-0.1,0.8-0.2,1.6-0.5,2.4"/>
<path id="path534" class="st0" d="M111.5,60.7c-1,2.9-1,6-1.6,9.3"/>
<path id="path536" class="st0" d="M112.1,56.4c-0.3,0.7-0.4,1.5-0.4,2.3"/>
<path id="path538" class="st0" d="M111.8,67.7c-0.1,0.7-0.1,1.5,0,2.2"/>
<path id="path540" class="st0" d="M112.7,62.7c-0.1,1-0.3,2-0.5,3"/>
<path id="path542" class="st0" d="M112.9,58.7c0,0.7,0,1.3,0,2"/>
<path id="path544" class="st0" d="M90.2,91.5C89.8,85.2,90.8,78.2,96,74"/>
<path id="path546" class="st0" d="M92.2,91.5c-0.3-5.6,0.6-12.1,5.3-15.9"/>
<path id="path548" class="st0" d="M94.2,91.5c-0.3-4.9,0.4-10.9,4.6-14.3"/>
<path id="path550" class="st0" d="M96.3,91.6c-0.2-4.2,0.3-9.7,4-12.7"/>
<path id="path552" class="st0" d="M98.3,91.6c-0.2-3.5,0.1-8.5,3.4-11.2"/>
<path id="path554" class="st0" d="M100.3,91.6c-0.1-2.8,0-7.3,2.7-9.6"/>
<path id="path556" class="st0" d="M102.4,91.6c-0.1-2.1-0.1-6.1,2.1-8"/>
<path id="path558" class="st0" d="M104.7,87.3c0.2-0.8,0.6-1.5,1.2-2.1"/>
<path id="path560" class="st0" d="M104.4,91.6c0-0.8,0-1.6,0-2.3"/>
<path id="path562" class="st0" d="M106.6,87.9c0.1-0.4,0.3-0.8,0.6-1.1"/>
<path id="path564" class="st0" d="M106.5,91.6c0-0.6-0.1-1.2-0.1-1.8"/>
<path id="path566" class="st0" d="M108.5,91.6c0,0-0.5-2.6,0.2-3.3"/></g> </svg>
If you get a reference to an SVG element, you can call getBBox() on it. That will return the bounding box of the element and its contents. However that bounding box does not include any transform that is applied to that element.
For example if we call getBBox() on your group:
document.querySelect("."svg-merge-item-wrapper"").getBBox();
// returns {x: 70.88888549804688,
// y: 28.600000381469727,
// width: 99.08346557617188,
// height: 183.74867248535156}
If we want the bounds of the transformed group, we need to call getBBox() on an element that contains that transformed group.
<g><!-- <=== wrapper group -->
<g class="svg-merge-item-wrapper" transform="scale(0.25) rotate(90 42.5 42.5) translate(42.5 42.5)">
...all the other elements...
</g>
</g>
document.querySelect("."svg-merge-item-wrapper"").parentElement.getBBox();
// returns {x: -42.4621696472168,
// y: 28.34722137451172,
// width: 45.93716812133789,
// height: 24.77086639404297}
... which are the real bounds of the group.
To centre the group in your SVG viewBox, it's just a simple bit of arithmetic to work out how much the group needs to be moved.
dx = newX - oldX
newX = (svgWidth - groupWidth) / 2 = (85 - 45.937) / 2 = 19.53
dx = 19.53 - (-42.46) = 61.99
dy = (svgHeight - groupHeight) / 2 - oldY
dy = (85 - 24.77) / 2 - 28.35 = 1.77
So to centre the group we need to add the transform: translate(61.99 1.77).
We can either add that to our temporary wrapping group. Or, if we don't want to keep that, just add it to the front (ie. first) of the existing group transform.
<g class="svg-merge-item-wrapper" transform="translate(61.99 1.77) scale(0.25) rotate(90 42.5 42.5) translate(42.5 42.5)">
I've done it manually here. But obviously this could also be easily done at run-time with JS.
Demo
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="85mm"
height="85mm"
viewBox="0 0 85 85">
<style type="text/css">
svg {
border: 1px solid red;
position: absolute;
top: 10px;
left: 10px;
overflow: hidden;
}
</style>
<!-- TRANSFORMATION HERE-->
<g class="svg-merge-item-wrapper" transform="translate(61.99 1.77) scale(0.25) rotate(90 42.5 42.5) translate(42.5 42.5)">
<!-- TRANSFORMATION HERE-->
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:0.375;stroke-miterlimit:3.9892;}
</style>
<path id="path6" class="st0" d="M119.2,35.9c0,0,11.2,0,15,7.4c3.8,7.4,4.2,17.8,4.5,19.2c0.3,1.4,0.3,6.3,6,10.8
c5.6,4.5,6.3,18.5,6.3,18.5s1.4,0,1.4,1.7v5.2c0,0.6-0.4,1-1,1c0,0,0,18.5-0.4,28.7c-0.4,10.1-4.2,43-6,50
c-1.8,7-10.5,31.9-10.5,31.9h-29.7c0,0-9.4-21.7-11.9-36.4s-5.3-24.8-5.6-39.5c-0.3-14.7,0-34.6,0-34.6s-2.1,0.3-2.1-1.4v-5.6
c0-0.8,0.6-1.4,1.3-1.4c0,0,0,0,0.1,0c0,0,0-12.6,4.5-16.8c4.5-4.2,6-8,6.3-9.4c0.3-1.4,0.7-7.7,0.7-7.7c1.6-2.2,2.7-4.7,3.1-7.3
c0.7-4.2,1.1-5.6,1.1-5.6s2.8-6,5.9-7c1.7-0.6,3.5-1,5.3-1.4C115.4,36.1,117.3,35.9,119.2,35.9z"/>
<path id="path8" class="st0" d="M88.4,91.5v-0.3c0,0,0-12.1,4.3-16.1c4.3-4,5.7-7.7,6-9.1c0.2-0.9,0.4-3.9,0.6-5.8
c0.1-1,0.4-2,0.9-2.8c1.1-1.8,1.8-3.8,2.2-5.9c0.7-4,1-5.4,1-5.4s2.7-5.7,5.6-6.7c1.6-0.6,3.3-1,5-1.3c1.8-0.2,3.5-0.3,5.3-0.3
c0,0,10.6,0,14.3,7.1c3.7,7.1,3.7,17.5,4.1,18.8c0.4,4,2.4,7.7,5.6,10.1c5.3,4.4,6.3,17.8,6.3,17.8v0.3"/>
<path id="path10" class="st0" d="M98.2,57.6c0,0-10.5-15-15.7-17.5s-11.9-4.5-10.8-6.6c0,0,7-2.1,18.5,4.5s12.1,7.4,12.1,7.4"/>
<path id="path12" class="st0" d="M107,38.4c0,0-0.1-1.8-1.5-1.8c-1.4,0-2.4,1-5.6,0c-3.2-1-3.1-1.4-3.5-1.4
c-0.3,0-14.3-6.6-18.2-6.6s-6.3,0-7,2.1c-0.7,2.1,0,2.7,0,2.7l0.3,0.1"/>
<circle id="circle14" class="st0" cx="112.2" cy="44.3" r="1.4"/>
<circle id="circle16" class="st0" cx="111.8" cy="44" r="0.7"/>
<line id="line18" class="st0" x1="86.6" y1="91.5" x2="151" y2="91.9"/>
<line id="line20" class="st0" x1="151.3" y1="99.9" x2="87.3" y2="99.9"/>
<path id="path22" class="st0" d="M151.2,118.6c0,0,1.5,0.5,1.5-1.6v-9.8c0,0-0.3-2.1,3.8-1.4c4.2,0.7,9.4,2.1,10.8,8.4
c0.8,3.8,1,7.7,0.8,11.6c-0.1,1.6-0.2,3.2-0.5,4.8c-1,5.3-3.1,16.6-7.5,24.5c-4.1,7.2-13.5,20.9-17.5,30.9"/>
<path id="path24" class="st0" d="M151.3,104.8c0,0,2-1.4,5.9-0.6c4.2,0.9,10.1,2.4,11.8,9.6c1.6,6.5,0.9,11.6,0.2,16.7
c-0.7,4.7-1.7,9.3-3.1,13.8c-0.9,2.9-3.4,9.8-5.8,13.6c-1.3,2-13.6,21.7-16.1,27.9s-3.5,8-3.5,16.8c0,7.3,2.8,7.7,2.8,7.7h-2.1
c0,0-4.6-6.2-1.1-17.2"/>
<path id="path26" class="st0" d="M113.2,105.1h11.5c4.6,5.4,5.2,13.1,1.7,19.2c-6,10.8-6.3,7.3-7,16.8c-0.6,7.9,1.5,17,2.2,19.8
c0.3,1,0.3,2,0.2,3c-0.3,2.3-1.9,4.7-8-1.4c-7.7-7.7-8.6-23.2-8.7-27.8c0-0.8,0.1-1.7,0.2-2.5c0.9-4.3,2.4-8.5,4.3-12.4
C112.9,113.9,113.2,105.5,113.2,105.1z"/>
<path id="path28" class="st0" d="M104.8,210.4H93.7c-0.4,0.3-0.5,1-0.2,1.4c0.1,0.2,0.3,0.3,0.5,0.3c1.4,0.7,51.7-0.3,51.7-0.3
c0.4-0.4,0.4-1,0-1.4h-11.2"/>
<polyline id="polyline30" class="st0" points="113.1,106.9 125.8,106.9 126,106.8 "/>
<line id="line32" class="st0" x1="118" y1="165.8" x2="121.1" y2="165.8"/>
<line id="line34" class="st0" x1="116.6" y1="164.8" x2="121.7" y2="164.8"/>
<line id="line36" class="st0" x1="121.9" y1="163.9" x2="115.5" y2="163.9"/>
<line id="line38" class="st0" x1="114.5" y1="163.1" x2="122" y2="163.1"/>
<line id="line40" class="st0" x1="122" y1="162.1" x2="113.6" y2="162.1"/>
<line id="line42" class="st0" x1="112.6" y1="161" x2="121.7" y2="161"/>
<polyline id="polyline44" class="st0" points="112.9,108.5 126.9,108.5 127,108.5 "/>
<polyline id="polyline46" class="st0" points="112.6,110.1 127.5,110.1 127.6,110.1 "/>
<polyline id="polyline48" class="st0" points="112.4,111.6 127.9,111.6 128.1,111.6 "/>
<line id="line50" class="st0" x1="111.6" y1="114.8" x2="128.7" y2="114.8"/>
<line id="line52" class="st0" x1="128.8" y1="116.4" x2="111.2" y2="116.4"/>
<line id="line54" class="st0" x1="110.5" y1="118.3" x2="114.6" y2="118.3"/>
<line id="line56" class="st0" x1="115" y1="118.3" x2="116" y2="118.3"/>
<line id="line58" class="st0" x1="117" y1="118.3" x2="125.5" y2="118.3"/>
<line id="line60" class="st0" x1="125.8" y1="118.3" x2="128.6" y2="118.3"/>
<line id="line62" class="st0" x1="114.2" y1="120.3" x2="115.2" y2="120.3"/>
<line id="line64" class="st0" x1="116.2" y1="120.3" x2="121.3" y2="120.3"/>
<line id="line66" class="st0" x1="122.1" y1="120.3" x2="124.1" y2="120.3"/>
<line id="line68" class="st0" x1="124.6" y1="120.3" x2="125.8" y2="120.3"/>
<line id="line70" class="st0" x1="126.7" y1="120.3" x2="127.5" y2="120.3"/>
<line id="line72" class="st0" x1="109.5" y1="120.3" x2="113.6" y2="120.3"/>
<line id="line74" class="st0" x1="106.6" y1="127.7" x2="124.6" y2="127.7"/>
<polyline id="polyline76" class="st0" points="128.5,113.2 128.2,113.2 112,113.2 "/>
<ellipse id="ellipse78" class="st0" cx="113.4" cy="44.7" rx="4.7" ry="3.8"/>
<path id="path80" class="st0" d="M123.4,125.9l2.2,0.1"/>
<path id="path82" class="st0" d="M119.3,125.8h2.4"/>
<path id="path84" class="st0" d="M116.4,125.8h1.5"/>
<path id="path86" class="st0" d="M112.5,125.9h2.4"/>
<path id="path88" class="st0" d="M109.6,125.9h1.4"/>
<path id="path90" class="st0" d="M107.2,125.9h1.1"/>
<path id="path92" class="st0" d="M107.5,129.4h-1.3"/>
<path id="path94" class="st0" d="M110.6,129.3h-1.8"/>
<path id="path96" class="st0" d="M116.1,129.3h-4.1"/>
<path id="path98" class="st0" d="M123.6,129.4c-2,0-4-0.1-6.1-0.1"/>
<line id="line100" class="st0" x1="105.7" y1="131.1" x2="122.4" y2="131.1"/>
<path id="path102" class="st0" d="M107.5,132.8h-2.1"/>
<path id="path104" class="st0" d="M113.7,132.8h-4.9"/>
<path id="path106" class="st0" d="M121.3,132.8h-6.2"/>
<path id="path108" class="st0" d="M107.7,134.5h-2.5"/>
<path id="path110" class="st0" d="M114.4,134.5h-5.3"/>
<path id="path112" class="st0" d="M120.5,134.5h-4.6"/>
<line id="line114" class="st0" x1="105.2" y1="136.2" x2="120" y2="136.2"/>
<path id="path116" class="st0" d="M117.2,137.9h2.6"/>
<path id="path118" class="st0" d="M111.7,137.9h3.8"/>
<path id="path120" class="st0" d="M105.3,137.9h5"/>
<line id="line122" class="st0" x1="119.7" y1="139.3" x2="105.4" y2="139.3"/>
<line id="line124" class="st0" x1="105.6" y1="140.7" x2="119.6" y2="140.7"/>
<line id="line126" class="st0" x1="119.5" y1="141.9" x2="105.8" y2="141.9"/>
<line id="line128" class="st0" x1="105.9" y1="143.2" x2="119.4" y2="143.2"/>
<line id="line130" class="st0" x1="119.4" y1="144.4" x2="106.1" y2="144.4"/>
<path id="path132" class="st0" d="M114.1,145.6h5.4"/>
<path id="path134" class="st0" d="M109.4,145.6h2.9"/>
<path id="path136" class="st0" d="M106.3,145.7h1.8"/>
<line id="line138" class="st0" x1="111.7" y1="159.8" x2="121.4" y2="159.7"/>
<line id="line140" class="st0" x1="121.2" y1="158.5" x2="110.9" y2="158.5"/>
<line id="line142" class="st0" x1="110.2" y1="157.3" x2="120.9" y2="157.3"/>
<line id="line144" class="st0" x1="109.6" y1="156.2" x2="120.7" y2="156.2"/>
<line id="line146" class="st0" x1="109.1" y1="154.9" x2="120.4" y2="154.9"/>
<line id="line148" class="st0" x1="120.2" y1="153.5" x2="108.5" y2="153.5"/>
<line id="line150" class="st0" x1="107.9" y1="152" x2="120" y2="152"/>
<line id="line152" class="st0" x1="107.6" y1="150.7" x2="119.8" y2="150.7"/>
<line id="line154" class="st0" x1="119.7" y1="149.2" x2="107.1" y2="149.2"/>
<path id="path156" class="st0" d="M115.5,148h4.1"/>
<path id="path158" class="st0" d="M110.7,148h3.3"/>
<path id="path160" class="st0" d="M106.8,148h2.4"/>
<line id="line162" class="st0" x1="119.5" y1="146.8" x2="106.6" y2="146.8"/>
<path id="path164" class="st0" d="M114.3,92.7h1.7"/>
<path id="path166" class="st0" d="M106.3,92.6c2.1,0,4.2,0,6.3,0"/>
<path id="path168" class="st0" d="M98.2,92.6h6.6"/>
<path id="path170" class="st0" d="M91.7,92.7l4.9-0.1"/>
<path id="path172" class="st0" d="M85.3,92.7h5"/>
<path id="path174" class="st0" d="M130,92.7h-5"/>
<path id="path176" class="st0" d="M136.5,92.6l-4.8,0.1"/>
<path id="path178" class="st0" d="M137.8,92.6c4.7,0,9.5,0,14.2,0.1h0.2"/>
<line id="line180" class="st0" x1="86.6" y1="99.9" x2="86.6" y2="93.3"/>
<line id="line182" class="st0" x1="88.9" y1="99.9" x2="88.9" y2="93.3"/>
<line id="line184" class="st0" x1="91.1" y1="99.9" x2="91.1" y2="93.3"/>
<path id="path186" class="st0" d="M93.3,94.3v-1.1"/>
<path id="path188" class="st0" d="M93.3,99.9v-4.4"/>
<path id="path190" class="st0" d="M95.6,95.4v-2.1"/>
<path id="path192" class="st0" d="M95.6,99.9v-3"/>
<line id="line194" class="st0" x1="97.8" y1="99.9" x2="97.8" y2="93.3"/>
<line id="line196" class="st0" x1="100" y1="99.9" x2="100" y2="93.3"/>
<line id="line198" class="st0" x1="102.2" y1="99.9" x2="102.2" y2="93.3"/>
<path id="path200" class="st0" d="M104.5,94.7v-1.5"/>
<path id="path202" class="st0" d="M104.5,99.9V96"/>
<path id="path204" class="st0" d="M106.7,95.2v-1.9"/>
<path id="path206" class="st0" d="M106.7,99.9v-3"/>
<path id="path208" class="st0" d="M108.9,94.7v-1.5"/>
<path id="path210" class="st0" d="M108.9,97.5v-1.7"/>
<path id="path212" class="st0" d="M108.9,99.9v-1.2"/>
<path id="path214" class="st0" d="M111.1,94.3v-1.1"/>
<path id="path216" class="st0" d="M111.1,99.6v-1.1"/>
<path id="path218" class="st0" d="M126.9,94.8v-1.6"/>
<path id="path220" class="st0" d="M126.9,99.9v-1.6"/>
<path id="path222" class="st0" d="M129.1,94.5v-1.3"/>
<path id="path224" class="st0" d="M129.1,97.3v-1.2"/>
<path id="path226" class="st0" d="M129.1,99.9v-1.4"/>
<path id="path228" class="st0" d="M131.3,94.4v-1.2"/>
<path id="path230" class="st0" d="M131.3,96.9v-1.2"/>
<path id="path232" class="st0" d="M131.3,99.9v-1.8"/>
<path id="path234" class="st0" d="M133.5,94.8v-1.6"/>
<path id="path236" class="st0" d="M133.5,99.9v-2.6"/>
<path id="path238" class="st0" d="M135.7,94.5v-1.3"/>
<path id="path240" class="st0" d="M135.7,96.8v-1.2"/>
<path id="path242" class="st0" d="M135.7,99.9V98"/>
<path id="path244" class="st0" d="M138,95.1v-1.8"/>
<path id="path246" class="st0" d="M138,99.9v-3.6"/>
<line id="line248" class="st0" x1="140.2" y1="99.9" x2="140.2" y2="93.3"/>
<line id="line250" class="st0" x1="142.4" y1="99.9" x2="142.4" y2="93.3"/>
<line id="line252" class="st0" x1="144.6" y1="99.9" x2="144.6" y2="93.3"/>
<line id="line254" class="st0" x1="146.9" y1="99.9" x2="146.9" y2="93.3"/>
<line id="line256" class="st0" x1="149.1" y1="99.9" x2="149.1" y2="93.3"/>
<line id="line258" class="st0" x1="151" y1="99.9" x2="151" y2="93.3"/>
<path id="path260" class="st0" d="M142.3,211.3c1.2,0,2.4,0,3.7,0.1"/>
<path id="path262" class="st0" d="M136.5,211.4h2.9"/>
<path id="path264" class="st0" d="M131.9,211.5l3.4-0.1"/>
<path id="path266" class="st0" d="M111.2,211.8c1.9,0,3.7,0,5.6,0"/>
<path id="path268" class="st0" d="M93.5,211.8h13"/>
<path id="path270" class="st0" d="M114.8,47.7c1.7-0.3,2.9-2,2.6-3.7"/>
<path id="path272" class="st0" d="M112.2,47.8c0.4,0,0.9,0,1.3,0"/>
<path id="path274" class="st0" d="M71,32.1c0,0,11.2-1.5,19.4,6"/>
<path id="path276" class="st0" d="M106.5,37.1c-2.3,1-3.6,3.4-3.2,5.9"/>
<path id="path278" class="st0" d="M79.8,28.8c0,0,16,6.4,17.7,7.5c1.7,1.1,4.9,1.7,6,1.4c0.8-0.2,1.6-0.4,2.5-0.4"/>
<path id="path280" class="st0" d="M75.4,28.6c3.5,0.7,6.9,1.9,10.2,3.5c4.9,2.5,11.5,5.2,11.5,5.2s4.5,2.1,6,1.4
c1.4-0.7,1.8-0.6,1.8-0.6"/>
<path id="path282" class="st0" d="M72.5,29.2c0,0,2.9-0.3,7.8,1.8c4.9,2.1,16.8,7.7,16.8,7.7s4.2,1.8,5.2,1.1
c0.5-0.4,1.1-0.6,1.7-0.7"/>
<path id="path284" class="st0" d="M81,32.3c0.6,0.2,1.2,0.4,1.8,0.5"/>
<path id="path286" class="st0" d="M76.9,30.9c1,0.3,2,0.7,3,1.1"/>
<path id="path288" class="st0" d="M71.5,30.3c1.4-0.3,2.9-0.3,4.3,0.2"/>
<path id="path290" class="st0" d="M71.6,34.4c0,0,9.4,2.9,12.6,5.7c3.1,2.8,14.8,15.1,14.5,16.7"/>
<path id="path292" class="st0" d="M99.6,55.3c0,0-13-15.5-17.5-17.6c-4.6-2.1-9.8-4.3-9.8-4.3"/>
<path id="path294" class="st0" d="M88.7,41.6c4.2,3.8,7.8,8.3,11.5,12.6"/>
<path id="path296" class="st0" d="M83.9,37.9c0.9,0.6,1.7,1.2,2.5,1.9"/>
<path id="path298" class="st0" d="M81.4,36.3c0.5,0.3,1,0.5,1.4,0.8"/>
<path id="path300" class="st0" d="M74.9,33.2c1.1,0.5,2.1,1,3.2,1.5"/>
<path id="path302" class="st0" d="M91.8,43.5c-0.4-0.4-0.8-0.8-1.3-1.2"/>
<path id="path304" class="st0" d="M95.1,46.9c-0.8-0.9-1.6-1.7-2.4-2.6"/>
<path id="path306" class="st0" d="M97.8,49.8l-1.1-1.2"/>
<path id="path308" class="st0" d="M100.6,52.9l-2.1-2.3"/>
<path id="path310" class="st0" d="M106.8,37.6c0,0-2.8,1.5-2.7,4.1"/>
<polyline id="polyline312" class="st0" points="124.1,99.9 124.1,103.8 124.1,105.1 "/>
<line id="line314" class="st0" x1="127.2" y1="99.9" x2="127.2" y2="109.3"/>
<path id="path316" class="st0" d="M123,150.1c0,1,0,1.9,0,2.9"/>
<path id="path318" class="st0" d="M123.1,146.3c0,0.8-0.1,1.6-0.1,2.4"/>
<path id="path320" class="st0" d="M123.3,142.7c0,0.6,0,1.1-0.1,1.7"/>
<path id="path322" class="st0" d="M123.6,135.6c-0.1,1.7-0.2,3.3-0.3,5"/>
<path id="path324" class="st0" d="M123.9,128.8l-0.2,5.5"/>
<path id="path326" class="st0" d="M124.9,169.2c0,0.6-0.1,1.1-0.2,1.7"/>
<path id="path328" class="st0" d="M125.2,165.8c0,0.5-0.1,1-0.1,1.4"/>
<path id="path330" class="st0" d="M125.5,161.2c0,0.6-0.1,1.1-0.1,1.7"/>
<path id="path332" class="st0" d="M125.8,155.6c0,1.1-0.1,2.3-0.2,3.4"/>
<path id="path334" class="st0" d="M126.1,148.6c0,1-0.1,2.1-0.2,3.1"/>
<path id="path336" class="st0" d="M126.7,139.7c-0.2,2-0.3,4-0.4,6"/>
<path id="path338" class="st0" d="M126.8,135.3c0,1,0,2-0.1,2.9"/>
<path id="path340" class="st0" d="M127,123.5c-0.1,3.3-0.1,6.5-0.1,10.1"/>
<path id="path342" class="st0" d="M124.8,180.5c-0.1,0.6-0.3,1.3-0.4,1.9"/>
<path id="path344" class="st0" d="M125.6,177.2c-0.1,0.6-0.2,1.3-0.4,1.9"/>
<path id="path346" class="st0" d="M128,159.2c-0.6,5.7-1.3,11.3-2.3,17"/>
<path id="path348" class="st0" d="M130.3,99.9c-0.2,14.5-0.3,29-1.1,43.5c-0.2,4.1-0.5,8.3-0.9,12.4"/>
<path id="path350" class="st0" d="M125.4,185c-0.2,0.8-0.4,1.5-0.6,2.3"/>
<path id="path352" class="st0" d="M126.8,180.5c-0.3,0.9-0.5,1.9-0.9,2.8"/>
<path id="path354" class="st0" d="M129.1,167.6c-0.4,3.8-1.1,7.6-2,11.4"/>
<path id="path356" class="st0" d="M132.1,99.9c0,21.7,0,43.3-2.7,64.8"/>
<path id="path358" class="st0" d="M126.2,189.9c-0.1,0.5-0.3,1.1-0.4,1.6"/>
<path id="path360" class="st0" d="M127.1,186.4c-0.1,0.6-0.3,1.2-0.5,1.9"/>
<path id="path362" class="st0" d="M129.7,173.7c-0.5,3.1-1.1,6.1-1.8,9.2"/>
<path id="path364" class="st0" d="M133.9,99.9c-0.4,23.1-0.8,46.1-3.5,69.1"/>
<path id="path366" class="st0" d="M127.3,192.5c-0.2,1-0.5,2.1-0.8,3.1"/>
<path id="path368" class="st0" d="M135.7,99.9c-0.5,30.4-0.8,61.2-8,90.8"/>
<path id="path370" class="st0" d="M127.1,198c-0.1,0.4-0.2,0.8-0.3,1.2"/>
<path id="path372" class="st0" d="M128,194.8c-0.1,0.5-0.2,0.9-0.3,1.4"/>
<path id="path374" class="st0" d="M137.5,99.9c-0.9,31.1-0.5,62.6-9,92.5"/>
<path id="path376" class="st0" d="M128.7,197.7c-0.3,1.1-0.5,2.1-0.8,3.2"/>
<path id="path378" class="st0" d="M139.3,99.9c-0.6,16.1,0.1,32.2-2,48.6v3.5c-1.4,15-3.8,30.1-8.2,44.2"/>
<path id="path380" class="st0" d="M141.2,99.9c0,0-0.3,25.4-1,37.3c-0.6,9.1-2.7,31.8-5.3,42.3c-2.2,8.6-6,21.9-6.6,24.3"/>
<path id="path382" class="st0" d="M143,99.9c0,0-0.4,27.2-1.1,38c-0.6,8.6-3,32.8-5.8,43c-2.4,8.8-7.4,25.1-7.8,27"/>
<path id="path384" class="st0" d="M144.8,99.9c0,0-0.4,28.9-1.2,38.7c-0.6,8.1-3.3,33.8-6.3,43.8c-2.7,9-6.3,20.9-6.7,22.4l-1.7,5.5
"/>
<path id="path386" class="st0" d="M146.6,99.9c0,0-0.5,30.7-1.2,39.5c-0.6,7.6-3.6,34.7-6.7,44.6c-3,9.1-6.9,21.8-7.1,22.7
c0,0-1,3.3-1.1,3.7"/>
<path id="path388" class="st0" d="M148.4,99.9c0,0-0.6,32.5-1.3,40.2c-0.7,7.2-3.9,35.7-7.2,45.4c-3.2,9.3-7.4,22.6-7.5,23.1
l-0.6,1.8"/>
<path id="path390" class="st0" d="M150.2,99.9c0,0-0.7,34.3-1.4,40.9c-0.7,6.6-4.2,36.7-7.7,46.1c-3.5,9.4-8,23.4-8,23.4"/>
<path id="path392" class="st0" d="M114.2,180.4c0.1,0.6,0.3,1.2,0.4,1.9"/>
<path id="path394" class="st0" d="M113.5,177.1c0.1,0.6,0.2,1.3,0.4,1.9"/>
<path id="path396" class="st0" d="M111.1,160.1c0.6,5.3,1.3,10.6,2.2,16"/>
<path id="path398" class="st0" d="M108.7,99.9c0.1,6.8,0.2,13.5,0.4,20.3"/>
<path id="path400" class="st0" d="M113.6,184.9c0.2,0.8,0.4,1.5,0.6,2.3"/>
<path id="path402" class="st0" d="M112.3,180.4c0.3,0.9,0.5,1.9,0.9,2.8"/>
<path id="path404" class="st0" d="M109.9,167.5c0.4,3.8,1.1,7.6,2,11.4"/>
<path id="path406" class="st0" d="M108.5,154.3c0.3,3.5,0.7,6.9,1.1,10.4"/>
<path id="path408" class="st0" d="M106.6,99.9c0,8.6,0.4,17,0.5,25.6"/>
<path id="path410" class="st0" d="M112.8,189.8c0.1,0.5,0.3,1.1,0.4,1.6c0,0,1,5,1.4,7.1"/>
<path id="path412" class="st0" d="M112,186.3c0.1,0.6,0.3,1.2,0.5,1.9"/>
<path id="path414" class="st0" d="M109.3,173.6c0.5,3.1,1.1,6.1,1.8,9.2"/>
<path id="path416" class="st0" d="M106.8,148.3c0.5,6.9,1.1,13.7,1.9,20.5"/>
<path id="path418" class="st0" d="M104.8,99.9c0.2,9.6,0.6,19.2,0.9,28.8"/>
<path id="path420" class="st0" d="M111.7,192.4c0.2,1,0.5,2.1,0.8,3.1"/>
<path id="path422" class="st0" d="M103.1,99.9c0.5,30.4,1,61.1,8.2,90.8"/>
<path id="path424" class="st0" d="M111.9,197.9c0.1,0.4,0.2,0.8,0.3,1.2c0,0,0.7,2.9,1,4"/>
<path id="path426" class="st0" d="M111.1,194.7l0.3,1.4"/>
<path id="path428" class="st0" d="M101.3,99.9c0.9,31.1,0.7,62.5,9.1,92.4"/>
<path id="path430" class="st0" d="M110.3,197.6c0.3,1.1,0.5,2.1,0.8,3.2c0,0,1.7,6,2.1,6.4"/>
<path id="path432" class="st0" d="M99.6,99.9c0.6,16.1,0,32.1,2.1,48.5v3.5c1.4,15.1,3.8,30,8.2,44.2"/>
<path id="path434" class="st0" d="M97.5,99.9c0,0,0.7,25.3,1.4,37.2c0.6,9.1,2.7,31.8,5.3,42.3c2.2,8.6,7.3,27.2,8.3,29.3"/>
<path id="path436" class="st0" d="M96.1,99.9c0,0,0.3,27.1,1.1,37.9c0.6,8.6,3,32.8,5.8,43c2.4,8.8,7.4,25.1,7.8,27"/>
<path id="path438" class="st0" d="M94.3,99.9c0,0,0.3,28.8,1.1,38.6c0.6,8.1,3.3,33.8,6.3,43.8c2.7,9,6.3,20.9,6.7,22.4l1.7,5.5v0.1
"/>
<path id="path440" class="st0" d="M92.2,99.9c0,0,0.7,30.6,1.4,39.4c0.6,7.6,3.6,34.7,6.7,44.6c3,9.1,6.9,21.8,7.1,22.7
c0,0,1,3.3,1.1,3.7l0.1,0.1"/>
<path id="path442" class="st0" d="M90.5,99.9c0,0,0.7,32.4,1.4,40.1c0.7,7.1,3.9,35.7,7.2,45.4c3.2,9.3,7.4,22.6,7.5,23.1l0.6,1.8
l0.1,0.1"/>
<path id="path444" class="st0" d="M88.8,99.9c0,0,0.7,34.2,1.4,40.8c0.7,6.6,4.2,36.7,7.7,46.1s8,23.4,8,23.4"/>
<line id="line446" class="st0" x1="105.8" y1="210.2" x2="105.9" y2="210.4"/>
<path id="path448" class="st0" d="M110.6,110.3c-0.1,1,0,2,0.2,2.9"/>
<path id="path450" class="st0" d="M110.7,105c0,1,0,2.1,0,3.1"/>
<path id="path452" class="st0" d="M110.8,99.9c0,0.9,0,1.8-0.1,2.7"/>
<path id="path454" class="st0" d="M112.5,39.6c1.7-0.4,3.5-0.5,5.2-0.5c0,0,10.8-0.8,14.7,6.6c3.9,7.4,3.5,17.2,3.8,18.5
c0.3,1.3,0.1,5.5,5.3,9.7s5.9,17.2,5.9,17.2v0.3"/>
<path id="path456" class="st0" d="M118.6,40.4c4.7,0.3,9.1,1.3,11.8,5.4c3.1,4.7,3.9,11.4,4.4,16.8c0.3,3.2,0.8,6.4,2.6,9.1"/>
<path id="path458" class="st0" d="M118.9,42.5c4.3,0.3,8.3,1.3,10.8,5.1c2.9,4.3,3.6,10.5,4,15.5c0.3,2.9,0.7,5.9,2.4,8.4"/>
<path id="path460" class="st0" d="M119.2,44.6c3.9,0.3,7.4,1.2,9.7,4.7c2.6,4,3.3,9.7,3.7,14.2c0.3,2.7,0.7,5.4,2.2,7.7"/>
<path id="path462" class="st0" d="M119.5,46.8c3.4,0.2,6.6,1.2,8.6,4.4c2.3,3.6,2.9,8.8,3.3,13c0.2,2.5,0.6,5,2,7"/>
<path id="path464" class="st0" d="M119.8,48.9c3,0.2,5.8,1.2,7.6,4.1c2,3.3,2.6,7.9,3,11.6c0.1,2.2,0.7,4.4,1.8,6.3"/>
<path id="path466" class="st0" d="M120.1,51.1c2.7,0,5.2,1.5,6.5,3.8c1.7,3,2.2,7.1,2.6,10.4c0.1,2,0.6,3.9,1.6,5.6"/>
<path id="path468" class="st0" d="M124.6,55.1c1.9,1.9,2.6,4.9,3,7.5s0.3,5.8,1.9,8.1"/>
<path id="path470" class="st0" d="M120.4,53.2c0.9,0.1,1.7,0.3,2.5,0.6"/>
<path id="path472" class="st0" d="M127,66.6c0.1,1.4,0.5,2.7,1.2,3.9"/>
<path id="path474" class="st0" d="M120.7,55.3c4.4,0.3,5.5,5.5,6,9.1"/>
<path id="path476" class="st0" d="M121,57.5c1.3,0.1,2.5,1,3.4,2.9c0.8,2.1,1.3,4.3,1.5,6.5c0.1,1.2,0.4,2.4,1.1,3.4"/>
<path id="path478" class="st0" d="M123.7,62.4c0.4,1.3,0.7,2.6,0.9,4c0,1.3,0.4,2.6,1,3.7"/>
<path id="path480" class="st0" d="M121.3,59.6c0.6,0.1,1.1,0.4,1.4,0.9"/>
<path id="path482" class="st0" d="M123.6,67.8c0.1,0.8,0.3,1.5,0.7,2.2"/>
<path id="path484" class="st0" d="M121.6,61.8c1.1,0.4,1.4,3,1.6,4"/>
<path id="path486" class="st0" d="M122.4,67.8c0,0.7,0.3,1.4,0.6,2"/>
<path id="path488" class="st0" d="M122,63.9c0,0.7,0.1,1.3,0.2,2"/>
<path id="path490" class="st0" d="M141.7,76.1c3.5,4.3,4.3,10.1,4.7,15.5"/>
<path id="path492" class="st0" d="M140.4,77.2c3.2,3.9,4,9.2,4.3,14.4"/>
<path id="path494" class="st0" d="M139.1,78.4c2.9,3.5,3.7,8.3,4,13.3"/>
<path id="path496" class="st0" d="M137.8,79.5c2.6,3.1,3.3,7.5,3.6,12.2"/>
<path id="path498" class="st0" d="M136.5,80.6c2.2,2.7,3,6.6,3.2,11.1"/>
<path id="path500" class="st0" d="M135.2,81.7c1.9,2.4,2.7,5.7,2.8,10"/>
<path id="path502" class="st0" d="M134,82.8c1.6,2,2.4,4.8,2.4,8.9"/>
<path id="path504" class="st0" d="M132.7,83.9c1.3,1.6,2,4,2.1,7.8"/>
<path id="path506" class="st0" d="M132.9,89.2c0.1,0.8,0.1,1.7,0.1,2.5"/>
<path id="path508" class="st0" d="M131.4,85c0.5,0.6,0.8,1.3,1.1,2"/>
<path id="path510" class="st0" d="M130.1,86.2c0.6,0.8,1.4,2.2,1.3,5.6"/>
<path id="path512" class="st0" d="M129.7,90.6c0,0.4,0,0.7,0,1.1"/>
<path id="path514" class="st0" d="M128.8,87.3c0.3,0.4,0.5,0.8,0.6,1.3"/>
<path id="path516" class="st0" d="M128.1,90c0,0.6,0,1.2,0,1.7"/>
<path id="path518" class="st0" d="M127.6,88.4c0.3,0.3,0.4,0.7,0.5,1.1"/>
<path id="path520" class="st0" d="M98.2,70.8c0.9-1.3,1.6-2.6,2.1-4.1c0.3-2.4,0-5.2,1-7.7c1.8-4.2,2.5-8.7,3.8-13
c0.4-1.1,1.1-2.2,2.1-2.9"/>
<path id="path522" class="st0" d="M106.9,46.7c-1,1.7-1.3,3.9-1.8,5.8c-0.5,2.1-1.1,4.2-1.8,6.3c-0.7,2-1.1,4.2-1.2,6.3
c-0.2,2-0.9,3.9-2,5.6"/>
<path id="path524" class="st0" d="M108,48.6c-1.4,2.4-1.4,5.5-2.1,8.3c-1.4,3.5-1.7,7.3-2.8,11.2c-0.3,0.8-0.6,1.6-1,2.4"/>
<path id="path526" class="st0" d="M109.7,49.8c-0.6,0.6-1,1.4-1.2,2.3c-0.7,3-1.3,6.6-2.4,9.6c-0.2,0.5-0.3,1.1-0.5,1.6
c-0.3,1.4-0.2,2.8-0.4,4.1c-0.2,1.1-0.6,2.1-1.2,3.1"/>
<path id="path528" class="st0" d="M108.5,59.4c-0.4,1.9-1.2,3.7-1.4,5.6c-0.3,1.9-0.2,3.7-1.1,5.3"/>
<path id="path530" class="st0" d="M110.5,52c-1.2,1-1.2,3.6-1.5,5"/>
<path id="path532" class="st0" d="M111.3,54.3c-0.4,0.5-0.6,1.2-0.6,1.8c-0.3,2.5-0.8,4.9-1.4,7.4c-0.1,0.4-0.2,0.8-0.3,1.2
c-0.2,1-0.4,2.1-0.4,3.1c-0.1,0.8-0.2,1.6-0.5,2.4"/>
<path id="path534" class="st0" d="M111.5,60.7c-1,2.9-1,6-1.6,9.3"/>
<path id="path536" class="st0" d="M112.1,56.4c-0.3,0.7-0.4,1.5-0.4,2.3"/>
<path id="path538" class="st0" d="M111.8,67.7c-0.1,0.7-0.1,1.5,0,2.2"/>
<path id="path540" class="st0" d="M112.7,62.7c-0.1,1-0.3,2-0.5,3"/>
<path id="path542" class="st0" d="M112.9,58.7c0,0.7,0,1.3,0,2"/>
<path id="path544" class="st0" d="M90.2,91.5C89.8,85.2,90.8,78.2,96,74"/>
<path id="path546" class="st0" d="M92.2,91.5c-0.3-5.6,0.6-12.1,5.3-15.9"/>
<path id="path548" class="st0" d="M94.2,91.5c-0.3-4.9,0.4-10.9,4.6-14.3"/>
<path id="path550" class="st0" d="M96.3,91.6c-0.2-4.2,0.3-9.7,4-12.7"/>
<path id="path552" class="st0" d="M98.3,91.6c-0.2-3.5,0.1-8.5,3.4-11.2"/>
<path id="path554" class="st0" d="M100.3,91.6c-0.1-2.8,0-7.3,2.7-9.6"/>
<path id="path556" class="st0" d="M102.4,91.6c-0.1-2.1-0.1-6.1,2.1-8"/>
<path id="path558" class="st0" d="M104.7,87.3c0.2-0.8,0.6-1.5,1.2-2.1"/>
<path id="path560" class="st0" d="M104.4,91.6c0-0.8,0-1.6,0-2.3"/>
<path id="path562" class="st0" d="M106.6,87.9c0.1-0.4,0.3-0.8,0.6-1.1"/>
<path id="path564" class="st0" d="M106.5,91.6c0-0.6-0.1-1.2-0.1-1.8"/>
<path id="path566" class="st0" d="M108.5,91.6c0,0-0.5-2.6,0.2-3.3"/></g>
</svg>
I want to navigate through an SVG Image and focus the current path. The paths in the SVG Image represent one part of the BodyImage.
In my app I want to realise, that the user can select with keyboard interaktion one part of the body and submit the value of this body part.
import Footer from '../components/Footer'
export default {
name: "Localisation.vue",
components: {
Footer
}
}
.localisation{
display: grid;
height: 100vh;
width: 70%;
grid-template-rows: 70% 30%;
}
.bodyMap{
display: grid;
}
#Layer_1{
height: 400px;
width: 500px;
}
#Kopf{
}
.Kopf:focus{
fill: gray;
}
.rechtesOhr:focus{
fill: yellow;
}
.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st1{display:none;fill:#FFFFFF;}
<div class="localisation">
<div class="localisationLayout">
<div class="bodyMap">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 322 981" xml:space="preserve">
<path id="Kopf" class="Kopf" d="M162.7,13.5c-4.3,0-7.5,0.6-9.5,1c-11.1,2.2-27.7,9.4-31.5,22.1c-0.6,2.2-0.9,4.5-1.2,7.5
c-0.5,4.4-0.4,7.4-0.2,15.2c0.2,9.6,0.1,7.6,0.2,11.6c0.7,21.7,1,32.5,3.4,37.7c4.5,9.7,12.5,15.8,17.9,19.9
c3.6,2.8,6.4,4.8,10.6,6.3c10.8,3.8,21.1,0.1,24.8-1.4c12.7-5.4,19.8-17.1,22.1-26.4c0.6-2.4,0.8-6.5,1.2-14.8
c0.2-5,0.2-7.4,0.5-23.8c0.1-3.5,0.1-5.3,0.1-6.1c0.6-22.2,2.2-22.4,1.2-26.6C199,22.3,178.6,13.6,162.7,13.5z"></path>
<path v-focus data-right='AUTOFOCUS'
data-left='AUTOFOCUS' id="rechtes_x5F_Ohr" class="rechtesOhr" d="M202.1,69.1c-0.3,0.2-0.8,0.7-1.2,4.7c-0.3,3.6-0.2,6.5-0.1,7.3c0.1,1.9,0.3,4.3,0.3,6.3
c0,0.1,0,0.6,0,1.3c0,0.6,0.1,1.4,0.2,2.6c0.2,1.9,0.3,2.3,0.6,2.4c0.7,0.4,2.4-0.6,3.2-2c1.4-2.3-0.5-4,0.6-7.1
c0.8-2.2,1.8-1.8,2.6-4.3c0.5-1.5,0.5-2.9,0.4-5.7c0-1.9-0.1-2.8-0.4-3.4C207.2,69,203.7,67.9,202.1,69.1z"></path>
<path v-focus data-right='AUTOFOCUS'
data-left='AUTOFOCUS' id="linkes_x5F_Ohr" class="st0" d="M120.2,69.1c0.9,0.7,0.9,2.1,0.8,5c-0.1,3.9-0.7,3.6-0.6,6.2c0.1,2.3,0.8,4.7,0.8,7.1
c0,1,0,1.9-0.2,3.9c-0.2,1.9-0.3,2.3-0.6,2.4c-0.7,0.4-2.4-0.6-3.2-2c-1.4-2.3,0.5-4-0.6-7.1c-0.8-2.2-1.8-1.8-2.6-4.3
c-0.5-1.5-0.5-2.9-0.4-5.7c0-1.9,0.1-2.8,0.4-3.4C115.1,69,118.7,67.9,120.2,69.1z"></path>
<path v-focus data-right='AUTOFOCUS'
data-left='AUTOFOCUS' id="Hals" class="st0" d="M125.9,112.3c0.7-0.2,1.6,2.6,5.3,6.9c1.9,2.2,3.5,3.5,6,5.6c5.3,4.4,7.9,6.6,11.5,8.3
c6.4,3.1,12.2,3.3,14.2,3.3c7,0.1,12.1-2.1,14.3-3.1c1.8-0.8,5.5-2.4,9.2-5.7c6.2-5.5,7.2-10.8,8.6-10.4c2.1,0.5,1.1,12-0.5,20.5
c-1.3,6.8-3,12-4.3,16c-0.8,2.5-2.6,6.9-6.1,15.6c-4.9,12.1-5.9,14.3-8.5,17c-1.7,1.7-4.6,4.7-9.5,5.9c-1.2,0.3-5.8,1.3-10.8-0.6
c-5.5-2.1-8.5-6.6-10.3-9.7c-11.3-19.5-16.4-42.2-16.9-44.5C125.4,123.6,124.5,112.6,125.9,112.3z"></path>
<path id="pp" class="st1" d="M140.4,192.5c1.4-1.3,2.7-2.6,4.1-3.9"></path>
<path class="st0" d="M147.4,186.5c2.2,2.4,4.3,3.5,5.7,4.1s2.7,0.9,4.5,1.3c1.8,0.4,3.3,0.7,4.4,0.9c-9-0.3-18.1-0.6-27.1-0.9
l-13.6-4.2l-12.6-3.8l-11-3.5c-15.3-3.1-18.9-5.7-18.9-7.5c0-1.9,3.8-2.4,13.2-6.9c13.2-6.3,12.6-8.7,20.3-11c1.3-0.4,3.8-1,6.8-2.5
c1.4-0.7,3.1-1.6,4-2.2c4.4-3.2,5-10.1,5.1-12.8c1.9,8.3,4.7,17.8,8.9,28.1C140.4,173.5,143.9,180.5,147.4,186.5z"></path>
<path class="st0" d="M176,187.9c-4.7,1.7-9.3,3.3-14,5c8.7-0.3,17.5-0.6,26.2-0.9l13.6-4.2l12.6-3.8l11-3.5
c19.8-2.3,24.1-4.4,24.1-5.9c0-1.7-5.8-2.3-18.4-8.5c-4.4-2.2-6.5-3.3-8.6-4.6c-5-3.1-6.3-4.8-11.7-6.4c-1.3-0.4-3.8-1-6.8-2.5
c-0.7-0.3-2.4-1.1-4-2.2c-1.6-1.1-4.3-3.4-6.5-7.5C187.7,157.8,181.8,172.9,176,187.9z"></path>
</g>
<path class="st0" d="M161,203.6l0.1,71.1c0,3.9-3.1,7-6.9,7c-3.4,0-7.3,0-11.6-0.2c-11.4-0.6-12.3-1.9-19.5-1.6
c-9.5,0.3-10.6,2.6-23.3,3.9c-8.9,0.9-13.4,1.2-17-0.8c-1.4-0.8-3.4-2.3-10.8-18.1c-6.2-13.4-6.3-15.4-5.9-17.2
c1-4.6,4-6.3,5.3-13.2c0.3-1.5,0.4-2.8,0.5-3.9c0,0,0.1-1.8-0.1-3.6c-0.6-6.9-8.5-50.3-2.4-52.6c0.6-0.2,0.8,0.2,3,0
c3.8-0.3,4.4-1.6,6.4-1.5c2.7,0.2,3.1,2.5,7,4.5c2.2,1.1,4.2,1.4,5.5,1.6c8.2,2.4,16.4,4.7,24.6,7.1c5.9,2.2,11.8,4.3,17.6,6.5
c2.1,0.1,4.3,0.1,6.7,0c2.3-0.1,4.4-0.3,6.4-0.6c1.8,0.3,3.7,0.6,5.5,0.9c1.4,0.6,3.2,1.2,4.9,0.6c1.3-0.4,1.7-1.1,2.6-1
c2,0.3,3.3,4,2.8,4.3c-0.2,0.2-0.8-0.6-1.3-0.4C160.5,196.5,160.3,198.4,161,203.6z"></path>
<path class="st0" d="M161.1,203.6l-0.1,71.1c0,3.9,3.1,7,6.9,7c3.4,0,7.3,0,11.6-0.2c11.4-0.6,12.3-1.9,19.5-1.6
c9.5,0.3,10.6,2.6,23.3,3.9c8.9,0.9,13.4,1.2,17-0.8c1.4-0.8,3.4-2.3,10.8-18.1c6.2-13.4,6.3-15.4,5.9-17.2c-1-4.6-4-6.3-5.3-13.2
c-0.3-1.5-0.4-2.8-0.5-3.9c0,0-0.1-1.8,0.1-3.6c0.7-7.5,11-47.3,2.6-52.6c-1-0.6-1.5-0.3-16.9,3.4c-4.6,1.1-8.4,2-10.6,2.6
c-5.3,1.6-10.5,3.3-15.8,4.9c-5.2,1.6-10.4,3.2-15.6,4.8c-3.2,0.8-6.9,1.6-11.1,2c-2.7,0.3-5.2,0.3-7.5,0.3c-3.1,0-6.1,0-9.2-0.1
c-2.7-0.6-3.8,0.2-4.2,0.5c-0.8,0.8-0.8,1.8-0.9,7C161.1,200.6,161.1,201.9,161.1,203.6z"></path>
<path class="st0" d="M69.4,174.4c-3.2,0.1-8,0.6-13.4,2.6c-3.2,1.2-8.4,3.3-13,8.1c-3.8,4-5.3,7.9-7.1,13c-0.7,1.8-2.2,6.2-4.3,21.3
c-1.6,11.5-2.3,17.3-1.4,21.3c1.4,6.2,3.7,7.6,4.3,13.8c0.5,5.7-0.9,9.8-2.2,14.2c0,0-5.3,17.5-6.9,35.9c-0.5,6-1.7,19.5,2.4,20.9
c1.9,0.6,3.2-1.7,6.3-3.2c11.6-5.9,25.9,10.4,32.9,5.9c4-2.6,0.3-8.9,2.8-26.2c2.1-14.3,5.2-14.5,4.5-22.1
C73,267,63.7,264.3,62.7,252.7c-0.4-4.9,7.7-9.7,7.5-21.1"></path>
<path class="st0" d="M252.9,174.4c3.2,0.1,8,0.6,13.4,2.6c3.2,1.2,8.4,3.3,13,8.1c3.8,4,5.3,7.9,7.1,13c0.7,1.8,2.2,6.2,4.3,21.3
c1.6,11.5,2.3,17.3,1.4,21.3c-1.4,6.2-3.7,7.6-4.3,13.8c-0.5,5.7,0.9,9.8,2.2,14.2c0,0,5.3,17.5,6.9,35.9c0.5,6,1.7,19.5-2.4,20.9
c-1.9,0.6-3.2-1.7-6.3-3.2c-11.6-5.9-25.9,10.4-32.9,5.9c-4-2.6-0.3-8.9-2.8-26.2c-2.1-14.3-5.2-14.5-4.5-22.1
c1.3-12.9,10.6-15.6,11.6-27.2c0.4-4.9-7.7-9.7-7.5-21.1"></path>
<path class="st0" d="M27.8,325.5c-2.3,2.3-1.3,6.1-1,10.2c0.8,12.4-5.5,24.1-5.5,24.1c-1.9,15.3-3.1,24.9-3,39.2
c0.1,13.1,1.1,11.7,1.6,31.7c0.4,15,0.5,22.6-0.4,29c-2,13.4-5.4,17.7-2.4,21.5c5,6.5,22.2,4.3,25.4-2.4c1-2.2-0.1-3.6,0-9.1
c0.1-4.2,0.9-7.5,2.6-13.4c3.4-11.4,7.2-21,7.9-22.9c5.9-15.2,8.8-22.7,9.5-25.6c2.4-9.4,2.6-16.4,3-27c0.2-4.9,0.9-22.7-2.4-23.3
c-1.4-0.2-2.7,2.5-3.2,2.2c8.6-24.4,8.8-30.7,7.1-31.5c-1-0.5-2.5,0.8-6.2,0.2c-0.6-0.1-1.9-0.3-4.7-1.5c-4.2-1.8-4.6-2.6-7.6-3.9
c-2.7-1.2-5.3-2.3-8.6-2c-1.9,0.1-3.7,0.8-7.4,2.3C29.8,324.3,28.5,324.8,27.8,325.5z"></path>
<path class="st0" d="M294.5,325.5c2.9,3,2.3,7.9,2.1,10.2c-0.4,5.2,0.3,13.1,5.5,24.1c1.9,15.3,3.1,24.9,3,39.2
c-0.1,13.1-1.1,11.7-1.6,31.7c-0.4,15-0.5,22.6,0.4,29c2,13.4,5.4,17.7,2.4,21.5c-5,6.5-22.2,4.3-25.4-2.4c-1-2.2,0.1-3.6,0-9.1
c-0.1-4.2-0.9-7.5-2.6-13.4c-3.4-11.4-7.2-21-7.9-22.9c-5.9-15.2-8.8-22.7-9.5-25.6c-2.4-9.4-2.6-16.4-3-27
c-0.2-4.9-0.9-22.7,2.4-23.3c1.4-0.2,2.7,2.5,3.2,2.2c-9.2-24.2-9.8-30.7-8.2-31.5c0.8-0.4,2.2,0.8,5.2,0.5c1.7-0.2,2.5-0.6,5.8-2.2
c4.5-2.1,6.7-3.2,9-4c2.6-0.9,4.1-1.4,6.3-1.5c2.7-0.1,4.8,0.6,6.6,1.3C290.8,323.2,293,323.9,294.5,325.5z"></path>
<path class="st0" d="M17.1,481.2c-0.4,0.2-1.2,1-0.3,11c0.3,2.8,0.5,4.6,0.6,5.9c0.7,6.2,1,10,0.8,14.4c-0.5,8.8-3,11.9-0.6,16.2
c1,1.9,1.7,1.6,3.2,4.3c2.2,3.6,1.6,5.1,3.2,9.9c1.3,3.5,2.7,7.4,6.3,10.1c1.8,1.3,2.6,1.1,5.3,2.4c3.1,1.5,8.8,6.8,9.1,7.1
c7.3,7.8,11.4,11.6,15,11c4.2-0.7,7.4-7.4,7.1-13s-4.2-9.5-7.9-13.2c-5.8-5.8-8.3-4.9-13.4-10.8c-2.8-3.2-6.2-7.3-5.5-12.2
c0.5-3.4,3.1-7.1,5.3-6.9c1.7,0.1,2.3,2.6,7.3,12.4c2.1,4.1,3.5,6.6,6.5,8.3c0.8,0.5,3.7,2.2,5.5,1c1.8-1.2,1.1-4.7,0.8-6.7
c-0.3-1.6-1.1-4.9-3.8-8c-1.6-1.8-2-1.4-2.6-2.6c-1.4-2.6,0.1-4.7,0-9c0-1.7-0.4-3.1-1.1-5.9c-1.1-4.3-2.7-7.9-5.5-13.4
c-4.2-8.2-7.9-15.3-9.9-14.7c-0.7,0.2-0.6,1-2,2.4c-0.3,0.3-1.3,1.3-4.1,2.3c-3.7,1.4-6.9,1.6-8.3,1.6c-2.5,0-4.2,0-6.2-0.8
C18.8,483,18.1,480.8,17.1,481.2z"></path>
<path class="st0" d="M306.3,481.2c1.1,0.4-0.1,4.9-0.7,13.5c0,0-0.1,1.6-0.3,4.8c-0.5,9.5-0.8,14.2-0.8,14.4
c0.5,8.8,3,11.9,0.6,16.2c-1,1.9-1.7,1.6-3.2,4.3c-2.2,3.6-1.6,5.1-3.2,9.9c-1.3,3.5-2.7,7.4-6.3,10.1c-1.8,1.3-2.6,1.1-5.3,2.4
c-3.1,1.5-8.8,6.8-9.1,7.1c-7.3,7.8-11.4,11.6-15,11c-4.2-0.7-7.4-7.4-7.1-13s4.2-9.5,7.9-13.2c5.8-5.8,8.3-4.9,13.4-10.8
c2.8-3.2,6.2-7.3,5.5-12.2c-0.5-3.4-3.1-7.1-5.3-6.9c-1.7,0.1-2.3,2.6-7.3,12.4c-2.1,4.1-3.5,6.6-6.5,8.3c-0.8,0.5-3.7,2.2-5.5,1
c-1.7-1.1-1.6-4.4-0.8-6.7c1.3-3.9,4.4-3.8,6.7-8.3c1.2-2.3,1.4-4.3,1.6-6.6c0.5-4.8-0.6-7.1-0.8-10.6c-0.3-4.5,1.1-7.8,3.4-13.3
c3.1-7.5,9.2-17.2,12.7-16.3c1.3,0.4,1.1,1.8,3.6,3.6c1.8,1.2,3.4,1.6,5.6,2.1c3.7,0.8,6.6,0.6,7.7,0.5c2-0.2,3.4-0.4,5-1.2
C305.2,482.5,305.7,481,306.3,481.2z"></path>
<path class="st0" d="M160.3,277.9c0.6,7.2,0.9,15.1,0.7,23.6c-0.1,4.6-0.3,9.1-0.7,13.3c-0.1,20,0.5,26.9,1.1,28.7
c0.5,1.5,0.5,2.6,0.4,4.7c0,0.4-0.1,1.2-0.6,1.6c-0.2,0.1-0.4,0.2-1.5,0.2c-1.1,0.1-1.7,0.1-2,0.1c-0.9-0.1-1-0.2-1.7-0.3
c-1.5-0.2-1.8,0.3-3.6,0.4c-0.3,0-0.9,0-2-0.1c-1.4-0.1-1.8-0.2-3.2-0.3c-1-0.1-1.5-0.1-2.2-0.1c-1.7,0-2.1,0.2-3.3,0.1
c-1.5,0-1.7-0.3-3.6-0.6c-0.9-0.1-2.3-0.3-4.1-0.3c-0.7,0-1.7,0-2.8,0c-1.2,0-1.8,0-2.3,0c-1.5,0.1-1.7,0.3-2.8,0.3
c-0.6,0-1.5,0-2.6-0.3c-0.5,0-1.2,0-2.1-0.1c-1.5,0-1.8,0-2.8-0.1c-0.7,0-1.5-0.1-2.5-0.2c-1.2-0.2-1.2-0.2-2-0.3
c-1.1-0.1-1.2,0-2.9,0c-1.1,0-2-0.1-2.2-0.1c-1-0.1-1.5-0.1-2.1-0.2c-0.9-0.2-1.3-0.4-2.2-0.4c-0.2,0-0.5,0-1,0.1
c-1.8,0.2-1.7,0.2-2.3,0.2c-1.1,0-1.2-0.3-2.2-0.3c-0.6,0-1.1,0.2-1.4,0.3c-0.8-0.4-1.5-0.5-1.9-0.5c-0.5,0-0.9,0.1-1.6,0
c-0.5-0.1-0.5-0.1-0.9-0.1c-0.8-0.1-1.4,0.3-1.6,0.3c-2.5,0.7-8.4-18.3-8.4-18.3c-3.2-10.4-4.5-14.2-5.1-19.7
c-1-8.7,0.1-11.3,0-15.8c-0.1-2.1-0.4-3-0.8-5.5c-0.9-5.4-1.6-13.3-0.6-13.6c0.9-0.2,1.4,5.7,6.1,8.6c2.1,1.3,4.2,1.4,8.2,1.5
c3.5,0.1,6.7-0.2,11.6-1c8.5-1.4,8.5-2.3,14.6-3c5.3-0.7,9.6-0.5,11.4-0.4c2.6,0.1,3,0.3,10.2,1.2c10.6,1.4,12.8,1.4,15.5,0.5
C157,280.7,159.1,279.1,160.3,277.9z"></path>
<path class="st0" d="M92.3,384.1c-0.4-1.4-0.8-2.7-1.1-4.1c-1.8,5.2-2.7,8.2-3.1,10c-0.1,0.5-0.7,3-1.6,5.5
c-0.9,2.6-1.2,3.1-1.8,4.9c-1.8,5.5-1.7,10.2-1.6,12.8c0.1,5,0.2,15.5-1.6,23.9c-1.3,5.9-2.8,7.2-5.3,12.1c-1.3,2.5-2.1,4.5-3.6,8.6
c-1.2,3.2-8,21.5-4.4,23.6c0.9,0.5,1.8-0.4,9-4.5c5.5-3.1,8.3-4.7,9.9-5.1c3.1-0.8,7.3-0.1,15.5,1.5c4.1,0.8,4.4,1,12.1,2.5
c5.5,1.1,7.3,1.4,9.7,1.5c3.3,0.3,6.4,0.5,9.6-0.1c2.2-0.4,3.7-1.1,12.9-7.8c0.8-0.6,9.6-7,13.6-13.5c0.5-0.7,1.3-2.1,0.8-3.2
c-0.8-1.7-4.2-1.7-5.1-1.7c-9.5-0.2-26.2-12.3-36-20c-3-2.3-7.1-6.1-11-12c-1.2-1.7-2.6-3.8-4.1-6.2c0,0-1.8-2.9-3.5-6.1
C97,398.2,92.5,384.9,92.3,384.1z"></path>
<path class="st0" d="M232.7,382.7c1.7,3.2,2.5,5.6,3,7.3c0.2,0.7,0.7,3,1.6,5.5c0.9,2.6,1.2,3.1,1.8,4.9c1.8,5.5,1.7,10.2,1.6,12.8
c-0.1,5-0.3,15.5,1.6,23.9c1.9,8.4,4.1,7.5,8.9,20.7c1.5,4.1,7.2,19.7,4.1,21.5c-1.9,1.1-5.4-3.4-9.5-6.3
c-16.5-11.7-36.1,7.9-59.5,0.6c-12.4-3.8-23.7-14.3-22.3-21c1.5-7.6,18.6-6.1,37.6-20.3c7.5-5.6,12.5-11.6,15.3-15.4
c0.9-1.4,2.1-3.2,3.5-5.4c0.8-1.4,3.2-5.4,5.7-10.8C228.1,396.3,230.6,390.2,232.7,382.7z"></path>
<path class="st0" d="M162.9,445.9c-0.5,1.9-1,3.8-1.4,5.7c-0.3,1.4-0.7,2.8-1,4.2c-0.7,1.1-1.7,2.5-3,4.1c-1,1.2-3.1,2.6-5.9,5.8
c-0.6,0.7-11.2,8.3-10.3,7.6c-4,1.4-6.2,1.5-6.5,2.8c-0.4,1.9,3.7,2.9,6.1,7.3c1.7,3.1,1,4.8,1.8,9.5c1,5.5,1.9,10.6,5.1,14.4
c3.7,4.4,11,7.6,17.9,5.7c9.5-2.6,12.4-13.1,12.6-13.8c1.6-6-1.3-8.2,1.4-12.6c2.8-4.5,3.2-7.3,5.9-9.3c0.7-0.6,1.9-1.3,1.8-2.2
c-0.1-1.2-2.4-1.7-4.7-2.4c-0.5-0.2-10.7-3.7-16.2-11.4c-0.2-0.3-0.5-0.7-0.8-1.2C162.5,454.9,162.5,449.4,162.9,445.9z"></path>
<path class="st0" d="M68.1,481.4c-6.5,1-0.2,38.8-0.2,38.8c5.3,31.8-0.2,24.2,5.3,58.8c6,38.1,9.9,29,18.1,72.4
c2.1,11.2,4.5,25.8,9.9,26.4c4,0.4,4.7-7.1,12.6-12.4c13.9-9.2,31.4,0.8,36.1-6.9c1.2-2,0.6-3.5,0.2-8.3
c-0.8-10.2,1.1-15.9,3.4-28.6c2.4-13.1,3.5-26.4,5.3-39.6c2.7-19.9,1.6-30.3,3-39.6c0.3-1.8,0.8-4.5,0.8-8.3c0.1-3.4-0.2-4.1-0.1-8
c0.1-2.2,0.3-3.1,0.4-6.3c0.2-4.9,0-5.8-0.7-6.3c-1.1-1-2.6-0.3-5.1-0.5c-3.5-0.4-5.9-2.5-7.5-3.8c-6.1-5.2-7-15.2-7.2-17.4
c-0.3-2.9-0.1-5.3-1.6-8.3c-0.9-1.8-2.2-4.3-4.6-5c-1.4-0.4-4.8-0.6-6.1-0.9c-0.1,0-0.3-0.1-0.5-0.1c-2.5-0.5-2.9,0-6.5-0.2
c-3.9-0.2-5.8-0.9-10.8-2c-1-0.2-7.3-1.7-14.2-2.6c-7-1-10.5-1.4-13.6-0.2c-2.4,0.9-5.4,2.1-7.5,4.5c-0.5,0.5-1.8,2-3.9,3
c-0.9,0.5-1.9,0.8-2,0.8C70.2,480.9,69.1,481.2,68.1,481.4z"></path>
<path class="st0" d="M255.3,479.3c0,0,3.7,1.8,3.8,21.9c-0.8,9.6-2.4,19-2.4,19c-5.3,31.8,0.2,24.2-5.3,58.8
c-6,38.1-9.9,29-18.1,72.4c-2.1,11.2-4.5,25.8-9.9,26.4c-4,0.4-4.7-7.1-12.6-12.4c-13.5-9-30.2,1.3-36.1-6.9c-1.3-1.7-1-3-1.4-8.5
c-0.9-12.6-2.6-15-4.7-28.8c-0.5-3.1-0.8-5.8-1-8.3c-1.3-13-1.5-23.3-1.8-30.9c-0.7-19.6-3.7-50.6-3.2-57.8c0.1-2,0.6-3.3,0.6-6.4
c0-2.1-0.3-3.4,0.5-4.4c0.9-1,2.2-0.4,3.7-1c4.9-2,7.5-6.1,8.4-7.6c1.8-2.9,2.4-5.5,2.9-7.6c1.2-5.3-0.6-6.6,1-10.7
c0.5-1.3,0.6-1,3-5.6c0.7-1.4,1-2,1.7-2.6c0.8-0.7,1.6-0.9,2.3-2c0.5-0.7,0.3-0.9,0.7-1.3c0.8-0.8,2.2-0.5,4.8-0.2
c0.8,0.1,2.9,0.3,5,0.4c1.8,0,3.3-0.1,4.5-0.2c2-0.2,3.6-0.4,5-0.7c3.9-0.7,6.8-1.5,8.5-1.9c6-1.6,9.1-2.3,11.3-2.7
c4.9-0.7,9.9-1.4,14.8,0.7c4.1,1.8,6.4,3.9,6.4,3.9c1.1,0.9,1.8,1.9,3.4,3C252.8,478.5,254.3,479,255.3,479.3z"></path>
<path class="st0" d="M124,663.6c-1.5-0.1-4.3-0.1-7.3,1.2c-2.9,1.3-4.6,3.3-5.9,4.9c-2.5,3.1-2,4-4.9,7.9c-2.5,3.4-3.3,3.1-3.9,4.9
c-0.9,2.8,0.7,4.4,2,9.9c0.5,2.1,0.8,4.1,1.2,8.1c0.8,6.7,1.2,10.1,0.6,12.6c-1.3,5.6-5,9.1-3.7,10.6c0.6,0.6,1.4,0.1,2.4,0.8
c1.6,1.1,1.6,3.4,1.8,5.9c0.2,2.9,0.8,7,1.2,8.3c2.7,7.9,32.3,11.5,41-0.8c0.9-1.3,1.7-4.3,3.2-10.3c2.6-10.3,3.9-18.3,4.3-20.9
c1.9-12.9,2.9-19.4,2.2-26.4c-0.7-7.6-2.5-8.9-4.5-18.1c-2-9.3-2.6-18.1-2.2-26.2"></path>
<path class="st0" d="M197.9,663.6c1.5-0.1,4.3-0.1,7.3,1.2c2.9,1.3,4.6,3.3,5.9,4.9c2.5,3.1,2,4,4.9,7.9c2.5,3.4,3.3,3.1,3.9,4.9
c0.9,2.8-0.7,4.4-2,9.9c-0.5,2.1-0.8,4.1-1.2,8.1c-0.8,6.7-1.2,10.1-0.6,12.6c1.3,5.6,5,9.1,3.7,10.6c-0.6,0.6-1.4,0.1-2.4,0.8
c-1.6,1.1-1.6,3.4-1.8,5.9c-0.2,2.9-0.8,7-1.2,8.3c-2.7,7.9-32.3,11.5-41-0.8c-0.9-1.3-1.7-4.3-3.2-10.3
c-2.6-10.3-3.9-18.3-4.3-20.9c-1.9-12.9-2.9-19.4-2.2-26.4c0.7-7.6,2.5-8.9,4.5-18.1c2-9.3,2.6-18.1,2.2-26.2"></path>
<path class="st0" d="M102.1,723.7c1,0,2.8,1.1,3.7,2.7c0.9,1.6,0.7,3.2,0.5,4c0.1,1.4,0.2,2.6,0.4,3.6c0.1,0.9,0.2,1.6,0.4,2.9
c0.2,1.2,0.3,1.4,0.4,1.8c0.1,0.2,0.4,1.1,1.4,2.1c0.2,0.2,1,1,3,2c1.6,0.8,2.9,1.2,4,1.5c1.7,0.5,3.1,0.8,4,0.9
c0.8,0.1,2.7,0.5,5.2,0.6c4.1,0.2,7.2-0.2,7.9-0.3c1.6-0.2,3.5-0.5,6-1.3c1.8-0.6,3.5-1.2,5.3-2.4c3.5-2.5,4.2-5.6,5-5.4
c0.9,0.3-0.6,4.8-0.3,12c0.1,2.2,0.2,1.9,0.6,6.7c0.4,5.2,0.4,7.6,0.5,9.5c0.5,6.5,3.4,10.7,4.9,14.8c3.2,8.6,3.5,16.4,3.9,25.8
c0.4,9.9-0.7,17.7-3,33.3c-1.6,10.7-2.3,9.8-3,14.2c-0.2,1.1-0.3,2.4-1.2,3.9c-0.8,1.2-1.6,1.9-1.4,2.2c0.3,0.5,2.3-0.8,3.9,0
c0.9,0.5,1.4,1.5,1.8,3.7c0.9,4.6,0.4,7.7,0.4,7.7c-0.9,5.6-0.3,11.4-1,17c-2.1,17.5-3.1,26.2-2.4,30c1.9,10.3,4.3,17.7,4.3,17.7
c1.7,5.3,2.6,6.6,1.8,8.3c-3,7.3-26.3,7.1-29.2,0.2c-0.4-0.9-0.2-2.3,0.2-5.1c0.8-5.7,2.3-9.2,3-11.8c1.2-4,0.9-7.5,0.4-14.4
c-1-14-4.8-25.6-5.5-27.8c-4.7-14.2-8.6-20.7-15-34.5c-7.4-16.1-12.9-27.9-16.8-43.4c-5.6-22.2-5-39.8-4.3-47.9
C93.2,740.9,98.1,723.6,102.1,723.7z"></path>
<path class="st0" d="M221.1,724.9c-0.4-0.7-1-1-1-1c-0.5-0.2-1-0.1-1.3,0c-0.4,0-1,0.2-1.4,0.6c-0.1,0.1-0.2,0.2-0.4,0.4
s-0.6,0.7-0.8,1.3c-0.1,0.3-0.2,0.5-0.3,1s-0.2,0.9-0.2,2c0,0.6-0.1,0.9-0.1,1.3c-0.1,0.9-0.3,3.5-0.6,5c-0.3,1.4-0.8,4.2-3,6.2
c-1,0.9-1.9,1.2-3.9,2c-0.7,0.3-2.5,0.9-5.4,1.5c-3.5,0.7-6.5,0.8-8.1,0.8c-2,0-4.8,0-8.3-0.8c-3.2-0.7-6-1.3-8.7-3.3
s-3.6-4.2-4.2-3.9c-0.7,0.4,1.5,4.2,1.7,10.1c0.1,2.4-0.5,4.1-0.8,7.7c-0.2,2.3-0.8,4.6-2,8.9c-2.2,7.6-4.4,13.5-4.9,14.8
c-3.2,8.6-3.5,16.4-3.9,25.8c-0.4,9.9,0.7,17.7,3,33.3c1.6,10.7,2.3,9.8,3,14.2c0.2,1.1,0.3,2.4,1.2,3.9c0.8,1.2,1.6,1.9,1.4,2.2
c-0.3,0.5-2.3-0.8-3.9,0c-0.9,0.5-1.4,1.5-1.8,3.7c-0.9,4.6-0.4,7.7-0.4,7.7c0.9,5.6,0.3,11.4,1,17c2.1,17.5,3.1,26.2,2.4,30
c-1.9,10.3-4.3,17.7-4.3,17.7c-1.7,5.3-2.6,6.6-1.8,8.3c3,7.3,26.3,7.1,29.2,0.2c0.4-0.9,0.2-2.3-0.2-5.1c-0.8-5.7-2.3-9.2-3-11.8
c-1.2-4-0.9-7.5-0.4-14.4c1-14,4.8-25.6,5.5-27.8c4.7-14.2,8.6-20.7,15-34.5c7.4-16.1,12.9-27.9,16.8-43.4
c1.2-4.7,5.8-23.6,4.3-47.9C230.5,758.5,230.6,742.8,221.1,724.9z"></path>
<path class="st0" d="M129.6,942c-2.1,0-2.6,3.8-6.3,8.9c-1.7,2.4-5,6.9-10.3,9.5c-5.2,2.6-8.1,1.1-10.8,4.3
c-0.2,0.2-2.8,3.4-1.8,6.3c1.4,4.1,9.3,4.7,14.2,5.1c9.1,0.7,10.4-1.6,19.9-0.8c5.3,0.4,6.4,1.3,11,1c5-0.3,10.3-0.6,12.6-4.5
c2.2-3.7,1-9.8-2-12.2c-1-0.8-1.9-0.9-2.4-2c0-0.1-0.1-0.2-0.1-0.3c-0.6-2.2,1.9-6.2,1.9-6.2c1.1-1.7,2.4-4.3,3.5-7.9
c-2.8,2-7.6,4.8-13.9,5.4c-3.4,0.3-7.1,0.7-10.3-1.5C131.6,945,131.4,942.1,129.6,942z"></path>
<path class="st0" d="M192.5,943.4c2.2-0.1,3.4,3.3,6.5,7.5c1.8,2.5,5.2,6.9,10.3,9.5c5.2,2.6,8.1,1.1,10.8,4.3
c0.2,0.2,2.8,3.4,1.8,6.3c-1.4,4.1-9.3,4.7-14.2,5.1c-9.1,0.7-10.4-1.6-19.9-0.8c-5.3,0.4-6.4,1.3-11,1c-5-0.3-10.3-0.6-12.6-4.5
c-2.2-3.7-1-9.8,2-12.2c1-0.8,1.9-0.9,2.4-2c0-0.1,0.1-0.2,0.1-0.3c0.6-2.2-1.9-6.2-1.9-6.2c-1.1-1.7-2.4-4.3-3.5-7.9
c1.5,1.4,4.1,3.5,7.8,4.7c4.9,1.6,9.1,0.8,11.1,0.4c2.2-0.4,4.5-0.9,7-2.6C191.1,944.4,191.4,943.5,192.5,943.4z"></path>
<path class="st0" d="M91.2,347.3c-1.1,0.8-0.2,3.5,0.4,6.1c1.3,5.8,0.9,10.9,0.2,18.2c-0.4,4-0.7,4.5-0.6,7c0.2,3,0.9,5.1,2.3,9.3
c1.3,4,2.6,7,3.3,8.7c0.7,1.6,2.2,4.8,5.1,10.2c4.4,8,6.5,12,10.1,16.3c2.9,3.5,5.5,5.8,8.1,8c5.2,4.5,9.5,7.3,13.3,9.7
c3.7,2.4,9.5,5,21.3,10.2c1.5,0.6,4.4,1.9,6.3,0.6c0.4-0.3,1.1-0.9,1.7-3.4c0.8-3.1,0.4-5.1,0.4-7.8c0-2.4,0.3-1.6,1.1-8.2
c0.6-4.8,0.9-8.5,0.9-9.3c0.3-3.8,0.3-6.7,0.3-9.1c0.1-3.2,0-5.6,0-7.3c0-3.4-0.1-6.1-0.2-7.8c-0.1-2-0.2-3.6-0.2-4.6
c-0.1-2.6-0.2-4.6-0.3-5.9c-0.2-2.5-0.3-4.4-0.4-5.8c-0.2-2.3-0.3-4.1-0.4-5.5c-0.1-0.9-0.2-2.5-0.4-5.5c-0.1-1-0.2-2.5-0.7-8.1
c-0.7-8.8-0.7-8.6-0.7-8.9c-0.1-3,0-3.1-0.3-3.6c-1.5-2.4-6.1-0.9-14.8-1c-5.1-0.1-4.2-0.6-11.4-0.9c-6-0.2-6.2,0.1-13.2,0
c-3.2-0.1-7.5-0.2-12.9-0.7c-4.7-0.4-6.4-0.8-9.5-0.6c-2,0.1-3.1,0.3-5.2,0.1C92.7,347.3,91.9,346.9,91.2,347.3z"></path>
<path class="st0" d="M167.4,281.9c2.7,0.9,4.9,0.9,15.5-0.5c7.2-0.9,7.6-1.1,10.2-1.2c1.8-0.1,6.1-0.3,11.4,0.4
c6.1,0.7,6.1,1.6,14.6,3c4.9,0.8,8.1,1.1,11.6,1c4-0.1,6.1-0.2,8.2-1.5c4.7-2.9,5.2-8.8,6.1-8.6c1,0.3,0.3,8.2-0.6,13.6
c-0.4,2.5-0.7,3.4-0.8,5.5c-0.1,4.5,1,7.1,0,15.8c-0.9,8-3.2,11.1-5.1,19.7c-2.1,9.2-2.1,17.9-4.8,18.2c-0.9,0.1-3.9-0.5-5.3-0.2
c-0.1,0-0.4,0.1-0.9,0.1c-0.7,0.1-1.1,0-1.6,0c-0.4,0-1.1,0.1-1.9,0.5c-0.3-0.1-0.8-0.3-1.4-0.3c-1-0.1-1.1,0.3-2.2,0.3
c-0.5,0-0.4-0.1-2.3-0.2c-0.6,0-0.8-0.1-1-0.1c-0.9,0-1.2,0.2-2.2,0.4c-0.6,0.1-1.1,0.2-2.1,0.2c-0.3,0-1.1,0.1-2.2,0.1
c-1.7,0-1.9-0.1-2.9,0c-0.8,0.1-0.7,0.1-2,0.3c-1,0.1-1.8,0.2-2.5,0.2c-1,0-1.2,0-2.8,0.1c-0.9,0-1.6,0.1-2.1,0.1
c-1.1,0.3-2,0.3-2.6,0.3c-1.1,0-1.3-0.2-2.8-0.3c-0.5,0-1.1,0-2.3,0c-1.1,0-2,0-2.8,0c-1.7,0-3.1,0.1-4.1,0.3
c-1.9,0.3-2.1,0.6-3.6,0.6c-1.2,0-1.6-0.2-3.3-0.1c-0.7,0-1.2,0.1-2.2,0.1c-1.4,0.1-1.7,0.2-3.2,0.3c-1.1,0.1-1.7,0.2-2,0.1
c-1.9,0-2.2-0.5-3.6-0.4c-0.8,0.1-0.8,0.2-1.7,0.3c-0.3,0-0.9,0-2-0.1s-1.3-0.1-1.5-0.2c-0.5-0.4-0.6-1.1-0.6-1.6
c-0.1-1.6-0.1-2.5,0-3.5c0.1-0.6,0.3-1.1,0.3-1.1c1.1-3.3,0.1-25,0-29.9c0-1.1,0-0.1,0.4-12.1c0.3-10.1,0.6-18.3,0.7-23.6
C162.7,279.1,164.8,280.7,167.4,281.9z"></path>
<path class="st0" d="M233.8,347.3c1.1,0.8,0.2,3.5-0.4,6.1c-1.3,5.8-0.9,10.9-0.2,18.2c0.4,4,0.7,4.5,0.6,7c-0.2,3-0.9,5.1-2.3,9.3
c-1.3,4-2.6,7-3.3,8.7c-0.7,1.6-2.2,4.8-5.1,10.2c-4.4,8-6.5,12-10.1,16.3c-2.9,3.5-5.5,5.8-8.1,8c-5.2,4.5-9.5,7.3-13.3,9.7
c-3.7,2.4-9.5,5-21.3,10.2c-1.5,0.6-4.4,1.9-6.3,0.6c-0.4-0.3-1.1-0.9-1.7-3.4c-0.8-3.1-0.4-5.1-0.4-7.8c0-2.4-0.3-1.6-1.1-8.2
c-0.6-4.8-0.9-8.5-0.9-9.3c-0.3-3.8-0.3-6.7-0.3-9.1c-0.1-3.2,0-5.6,0-7.3c0-3.4,0.1-6.1,0.2-7.8c0.1-2,0.2-3.6,0.2-4.6
c0.1-2.6,0.2-4.6,0.3-5.9c0.2-2.5,0.3-4.4,0.4-5.8c0.2-2.3,0.3-4.1,0.4-5.5c0.1-0.9,0.2-2.5,0.4-5.5c0.1-1,0.2-2.5,0.7-8.1
c0.7-8.8,0.7-8.6,0.7-8.9c0.1-3,0-3.1,0.3-3.6c1.5-2.4,6.1-0.9,14.8-1c5.1-0.1,4.2-0.6,11.4-0.9c6-0.2,6.2,0.1,13.2,0
c3.2-0.1,7.5-0.2,12.9-0.7c4.7-0.4,6.4-0.8,9.5-0.6c2,0.1,3.1,0.3,5.2,0.1C232.3,347.3,233.1,346.9,233.8,347.3z"></path>
<path class="st0" d="M134.6,45.7c0.8-0.6,6.1-4.6,11.6-4.1c2.7,0.3,4.7,1.5,4.7,1.5c1.4,0.9,2.4,1.9,2.9,2.6"></path>
<path class="st0" d="M167.9,45.2c2.5-1.5,4.8-2.2,6.4-2.6c1.6-0.4,3-0.8,4.9-0.6c2.9,0.3,5.1,1.6,6.4,2.6"></path>
<path class="st0" d="M143.7,51.7c-1.9,0.2-2.9,2.9-3.5,4.4c-0.5,1.3-1.7,4.7,0,6.7c0.8,1,2.1,1.3,2.6,1.5c0.6,0.2,1.9,0.5,3.2,0
c2.1-0.8,2.7-3,2.9-3.5c0.5-1.7,0.2-3.1,0-3.8c-0.4-1.6-1.2-2.6-1.5-2.9C146.9,53.4,145.4,51.5,143.7,51.7z"></path>
<path class="st0" d="M176.9,51.7c-1.9,0.2-2.9,2.9-3.5,4.4c-0.5,1.3-1.7,4.7,0,6.7c0.8,1,2.1,1.3,2.6,1.5c0.6,0.2,1.9,0.5,3.2,0
c2.1-0.8,2.7-3,2.9-3.5c0.5-1.7,0.2-3.1,0-3.8c-0.4-1.6-1.2-2.6-1.5-2.9C180.1,53.4,178.6,51.5,176.9,51.7z"></path>
<path class="st0" d="M160.5,73.3c0,1.7,0,3.5,0,5.2c0,1.2,0,2.9,0,2.9l0,0c-0.4,1.8-0.1,2.6,0.3,2.9c0,0,0.4,0.3,2.9,0.3l0,0
c0.3,0.2,2,1.3,2.3,3.5c0.1,0.4,0.2,1.7-0.6,2.9c-0.9,1.2-2.6,1.8-4.4,1.5"></path>
<path class="st0" d="M146,101.2c1.4,0.9,3.5,2,6.1,2.9c1.7,0.6,3.4,1.2,5.8,1.5c0.8,0.1,4.6,0.4,9-1.2c2.9-1,4.9-2.4,6.4-3.5
c1.8-1.3,3.1-2.5,4.1-3.5"></path>
</svg>
</div>
</div>
JSFiddle File: https://jsfiddle.net/RaKa7/0hLxarfs/8/
I am trying to get an SVG to display in a HTML webpage, but I must be missing something.
I have a svg file called logo-a.svg this is the code for it:
<svg x="0px" y="0px" width="197px" height="71px" viewbox="0 0 346 51">
<style type="text/css">
.Arched_x0020_Green{fill:url(#SVGID_1_);stroke:#FFFFFF;stroke-width:0.25;stroke-miterlimit:1;}
.st0{fill:#008751;}
.st1{fill:#FFFFFF;}
.st2{fill:#F9FBFB;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-32.7222" y1="228.6171" x2="-32.0151" y2="227.9099">
<stop offset="0" style="stop-color:#20AC4B"/>
<stop offset="0.9831" style="stop-color:#19361A"/>
</linearGradient>
<rect y="-0.1" class="st0" width="315.63" height="59.33"/>
<g>
<path class="st1" d="M289.44,54.22c-1.58,1.58-4.15,1.58-5.73,0l-22.21-22.21c-1.58-1.58-1.58-4.15,0-5.73L283.7,4.06
c1.58-1.58,4.15-1.58,5.73,0l22.21,22.21c1.58,1.58,1.58,4.15,0,5.73L289.44,54.22z"/>
<path class="st1" d="M68.19,30.39c0-8.81,5.82-20.2,21.28-20.2c12.83,0,20.82,7.47,20.82,19.27c0,11.8-8.24,21.12-21.33,21.12
C74.17,50.59,68.19,39.51,68.19,30.39z M103.08,31.37c0-11.54-6.65-18.7-15.1-18.7c-5.93,0-12.68,3.3-12.68,16.13
c0,10.72,5.92,19.22,15.82,19.22C94.73,48.01,103.08,46.26,103.08,31.37z"/>
<path class="st2" d="M13.81,36.42c-0.26,0-0.36,0.1-0.46,0.41l-2.78,7.37c-0.52,1.29-0.77,2.53-0.77,3.14c0,0.93,0.46,1.6,2.06,1.6
h0.77c0.62,0,0.77,0.1,0.77,0.41c0,0.41-0.31,0.51-0.87,0.51c-1.65,0-3.86-0.15-5.46-0.15c-0.57,0-3.4,0.15-6.08,0.15
C0.31,49.87,0,49.76,0,49.35c0-0.31,0.21-0.41,0.62-0.41c0.47,0,1.18-0.05,1.6-0.1c2.37-0.31,3.35-2.06,4.38-4.64l12.93-32.36
c0.62-1.49,0.93-2.06,1.44-2.06c0.46,0,0.77,0.46,1.29,1.65c1.24,2.83,9.48,23.86,12.78,31.69c1.96,4.64,3.45,5.36,4.53,5.62
c0.77,0.15,1.55,0.21,2.16,0.21c0.41,0,0.67,0.05,0.67,0.41c0,0.41-0.46,0.51-2.37,0.51c-1.86,0-5.62,0-9.74-0.11
c-0.93-0.05-1.55-0.05-1.55-0.41c0-0.31,0.21-0.41,0.72-0.47c0.36-0.1,0.72-0.56,0.46-1.18l-4.12-10.92
c-0.1-0.26-0.26-0.36-0.52-0.36H13.81z M24.32,33.84c0.26,0,0.31-0.16,0.26-0.31L19.94,20.8c-0.05-0.21-0.1-0.46-0.26-0.46
c-0.15,0-0.26,0.26-0.31,0.46l-4.74,12.68c-0.05,0.21,0,0.36,0.21,0.36H24.32z"/>
<path class="st1" d="M29.14,49.76c-0.9-0.07,3.01-0.17,3.01-1.3c0-2.83-2.31-9.34-2.26-10.16c0.05-0.77,0.2-1.34,0.62-1.34
c0.46,0,0.52,0.46,0.52,0.88c0,0.67,0.22-0.97,0.55-0.11c3.6,9.41,13.99,10.96,19.98,10.39c4.62-0.44,6.9-3.14,6.9-5.87
c0-2.52-0.77-4.89-5.05-8.24l-2.37-1.86c-5.67-4.43-7.63-8.04-7.63-12.21c0-5.67,4.74-9.74,11.9-9.74c3.35,0,5.51,0.52,6.85,0.88
c0.46,0.1,0.72,0.26,0.72,0.62c0,0.67-0.21,2.17-0.21,6.19c0,1.13-0.15,1.55-0.57,1.55c-0.36,0-0.51-0.31-0.51-0.93
c0-0.47-0.26-2.06-1.34-3.4c-0.77-0.98-2.27-2.53-5.62-2.53c-3.81,0-6.13,2.22-6.13,5.31c0,2.37,1.19,4.17,5.46,7.42l1.44,1.08
c6.23,4.69,8.45,8.25,8.45,13.14c0,2.99-1.13,6.54-4.84,8.96c-2.58,1.65-5.46,2.11-8.19,2.11C47.84,50.59,31.33,49.94,29.14,49.76z
"/>
<path class="st1" d="M115.85,25.85c0-7.83,0-9.27-0.1-10.92c-0.11-1.75-0.52-2.58-2.22-2.94c-0.41-0.1-1.29-0.15-2.01-0.15
c-0.57,0-0.88-0.1-0.88-0.46c0-0.36,0.36-0.46,1.13-0.46c2.73,0,5.98,0.15,7.06,0.15c1.75,0,5.67-0.15,7.26-0.15
c3.25,0,6.7,0.31,9.48,2.22c1.45,0.98,3.51,3.61,3.51,7.06c0,3.81-1.6,7.32-6.8,11.54c4.58,5.77,8.14,10.35,11.18,13.55
c2.89,2.99,5,3.35,5.77,3.5c0.57,0.1,1.03,0.16,1.44,0.16c0.41,0,0.62,0.16,0.62,0.41c0,0.41-0.36,0.51-0.98,0.51h-4.89
c-2.89,0-4.18-0.26-5.51-0.98c-2.22-1.18-4.17-3.61-7.06-7.57c-2.06-2.84-4.43-6.34-5.1-7.11c-0.26-0.31-0.57-0.36-0.93-0.36
l-4.48-0.1c-0.26,0-0.41,0.1-0.41,0.41v0.72c0,4.79,0,8.87,0.26,11.03c0.15,1.49,0.46,2.63,2.01,2.84c0.77,0.1,1.9,0.21,2.52,0.21
c0.41,0,0.62,0.16,0.62,0.41c0,0.36-0.36,0.51-1.03,0.51c-2.99,0-6.8-0.15-7.57-0.15c-0.98,0-4.23,0.15-6.29,0.15
c-0.67,0-1.03-0.15-1.03-0.51c0-0.26,0.2-0.41,0.82-0.41c0.77,0,1.39-0.1,1.86-0.21c1.03-0.21,1.29-1.34,1.49-2.84
c0.26-2.16,0.26-6.23,0.26-10.97V25.85z M121.93,29.93c0,0.57,0.1,0.77,0.46,0.93c1.08,0.36,2.63,0.52,3.92,0.52
c2.06,0,2.73-0.21,3.66-0.88c1.54-1.14,3.04-3.5,3.04-7.73c0-7.32-4.85-9.43-7.88-9.43c-1.29,0-2.21,0.05-2.73,0.21
c-0.36,0.1-0.46,0.31-0.46,0.72V29.93z"/>
<path class="st1" d="M144.82,30.39c0-8.81,5.82-20.2,21.28-20.2c12.83,0,20.82,7.47,20.82,19.27c0,11.8-8.24,21.12-21.33,21.12
C150.8,50.59,144.82,39.51,144.82,30.39z M179.7,31.37c0-11.54-6.65-18.7-15.1-18.7c-5.93,0-12.68,3.3-12.68,16.13
c0,10.72,5.93,19.22,15.82,19.22C171.36,48.01,179.7,46.26,179.7,31.37z"/>
<g>
<g>
<path class="st1" d="M272.7,48.93c-0.63,0-1.65-0.15-3.21-0.77c-2.79-1.09-5.12-3.41-7.39-5.58
c-2.01-1.91-10.67-11.2-12.56-13.67l-0.07-0.05c-0.62,0.81-1.84,2.3-3.55,4.14c2.16,2.71,9.62,11.53,11.74,13.4
c2.22,1.97,3.62,3.1,6.41,3.36c1.09,0.11,2.02,0.11,3.56,0.11h4.51c0.98,0,1.24-0.15,1.24-0.52
C273.37,49.04,273.07,48.93,272.7,48.93z"/>
</g>
<path class="st1" d="M243.64,30.23h-0.26v2.55c0.42-0.44,0.83-0.87,1.2-1.28c-0.17-0.21-0.3-0.38-0.38-0.49L243.64,30.23z"/>
<path class="st1" d="M228.24,43.22c-2.75,1.51-7.52,4.34-14.47,4.37c-6.9,0.03-16.23-6.08-16.23-18.34c0-5,0.98-9.89,4.74-13.34
c2.27-2.06,5.21-3.19,9.69-3.19c4.74,0,8.76,1.39,10.46,3.19c1.29,1.34,1.96,3.14,2.01,4.74c0,0.72,0.1,1.13,0.52,1.13
c0.46,0,0.56-0.41,0.62-1.19c0.11-1.03,0.05-3.86,0.16-5.57c0.1-1.8,0.26-2.42,0.26-2.83c0-0.31-0.2-0.57-0.77-0.62
c-1.54-0.15-3.19-0.62-5.15-0.88c-2.37-0.31-4.28-0.52-7.47-0.52c-7.68,0-12.57,2.06-16.28,5.46c-4.95,4.54-6.03,10.62-6.03,14.12
c0,5,1.34,10.77,6.39,15.2c4.69,4.07,10.63,6.08,17.67,5.62c7.93-0.52,16.29-6.13,22.77-11.78c0-0.77,0.01-1.57,0.01-2.39
C234.24,39.16,231.24,41.58,228.24,43.22z"/>
<path class="st1" d="M243.17,26.32h-0.24v-2.18c0-7.52,0-7.79,0.1-9.37c0.1-1.73,0.5-2.57,1.83-2.82c0.59-0.1,0.89-0.15,1.38-0.15
c0.4,0,0.69-0.1,0.69-0.45c0-0.34-0.35-0.44-1.04-0.44c-1.68,0-4.8,0.15-5.98,0.15c-1.19,0-4.3-0.15-6.92-0.15
c-0.74,0-1.09,0.1-1.09,0.44c0,0.35,0.29,0.45,0.84,0.45c0.69,0,1.54,0.05,1.93,0.15c1.63,0.35,2.03,1.14,2.13,2.82
c0.1,1.58,0.1,1.86,0.1,9.37v8.71c0,0.49,0,0.41,0,0.88C241.55,29.25,244.09,25.32,243.17,26.32z"/>
<g>
<path class="st1" d="M237.47,41.41c-0.02,2.93-0.07,3.12-0.25,4.62c-0.2,1.44-0.45,2.54-1.44,2.74c-0.45,0.1-1.05,0.2-1.79,0.2
c-0.6,0-0.8,0.15-0.8,0.4c0,0.35,0.35,0.5,1,0.5c1.99,0,5.13-0.15,6.28-0.15c1.24,0,4.38,0.15,7.18,0.15
c0.54,0,0.95-0.15,0.95-0.5c0-0.25-0.25-0.4-0.65-0.4c-0.65,0-1.74-0.1-2.44-0.2c-1.25-0.2-1.7-1.3-1.8-2.69
c-0.15-2.14-0.15-6.08-0.15-10.67v0.17C241.85,37.37,239.79,39.39,237.47,41.41z"/>
</g>
<path class="st1" d="M254.09,17.15c-0.85,0.95-2.52,2.7-4.3,4.56c-3.38,4.44-7.83,10.05-12.68,14.71c0,0.82,0,1.62-0.01,2.39
c2.4-2.09,4.53-4.18,6.29-6.03v-2.55h0.26l0.57,0.77c0.08,0.11,0.21,0.28,0.38,0.49c2.42-2.63,3.89-4.53,3.98-4.77
C248.78,26.17,252.11,20.62,254.09,17.15z"/>
<path class="st1" d="M248.18,27.4c1.76-1.85,9.54-9.58,11.13-11.13c2.22-2.16,3.97-3.25,5.57-3.86c0.98-0.36,2.27-0.57,2.99-0.57
c0.51,0,0.77-0.1,0.77-0.46c0-0.36-0.36-0.46-0.88-0.46c-1.6,0-4.43,0.15-6.03,0.15c-1.39,0-4.23-0.15-5.31-0.15
c-0.57,0-0.82,0.1-0.82,0.46c0,0.31,0.2,0.41,0.67,0.52c0.52,0.1,0.72,0.46,0.72,1.03c0,0.88-1.13,2.16-2.58,3.86
c-0.09,0.1-0.2,0.23-0.33,0.37c-1.98,3.47-5.3,9.02-5.51,9.57c-0.02,0.07-0.18,0.3-0.45,0.65l0.07,0.05
C248.19,27.41,248.19,27.4,248.18,27.4z"/>
</g>
<path class="st0" d="M269.57,31.17c1.44,0.11,2.81,0.4,4.23,0.51c4.83,0.36,9.84,0,14.55,0c2.54,0,5.04,0,7.45,0
c2.23,0,4.75,0.48,6.6-0.85c0-0.34,0-0.68,0-1.02c-3.06-4.04-13.16-4.06-21.15-4.06c-1.2,0-2.55-0.05-3.72,0
c-1.24,0.06-2.63-0.03-3.39,0.17c-0.81,0.21-1.85,1.85-2.71,2.2c-2.24,0.93-6.39,0.38-9.47,0.51c-1.13,0.05-2.29,0.07-3.44,0.08
c0.46,0.57,1.16,1.37,1.98,2.3C263.55,30.9,266.61,30.95,269.57,31.17z"/>
<path class="st0" d="M270.82,20.5c2.94,0,6.47-0.57,8.8,0.17c1.15,0.36,1.73,1.51,2.88,2.03c1.11,0.5,2.65,0.79,4.23,0.85
c4.78,0.16,9.63-0.8,14.21-1.18c-4.03-0.6-9.61,0.37-13.37-0.51c0.6-0.93,1.98-0.61,3.04-0.67c3.1-0.19,7.23-0.16,10.32-0.51
c-1.19-0.67-3.06-0.26-4.91-0.34c-2.87-0.12-6.06,0-8.46-0.51c0.27-0.66,1.13-0.61,1.69-0.68c3.4-0.39,8.29,0.41,11.68-0.17
c-0.84-0.52-2.14-0.46-3.39-0.51c-2.24-0.08-5.09,0.03-7.61-0.17c-0.77-0.06-2.02-0.01-2.37-0.85c4.04-0.67,8.73,0.08,13.37-0.17
c-0.3-0.57-1.15-0.43-1.69-0.51c-1.69-0.24-3.6-0.35-5.58-0.51c-3.73-0.29-7.91-0.85-10.83,0.34c-1.17,0.48-2.44,1.93-3.56,2.2
c-1.15,0.28-2.97,0.15-4.4,0.17c-2.41,0.04-4.69,0.03-6.92-0.02c-0.48,0.48-1.03,1.02-1.6,1.59
C267.84,20.52,269.33,20.5,270.82,20.5z"/>
<path class="st0" d="M296.33,35.11c-3.52-1.94-9.5-2.63-13.03-0.34c-1.33,0.86-2.26,2.74-3.73,3.22c-1.09,0.36-2.88,0.28-4.4,0.34
c-2.6,0.11-5.37,0.02-8.03-0.14c0.6,0.63,1.13,1.16,1.52,1.55c2.27-0.03,4.56,0,6.86,0.11c1.65,0.08,3.05-0.12,4.23,0.34
c1.52,0.59,2.35,2.55,3.89,3.38c3.54,1.91,9.29,1.21,12.69-0.67c1.71-0.95,3.38-2.1,3.38-3.89
C299.71,36.92,297.62,35.82,296.33,35.11z"/>
</g>
</svg>
Then I have a page in my website trying to display it like this:
<div class="brand-logo">
<object id="svg1" data="/images/logo-a.svg" type="image/svg+xml"></object>
</div>
What am I doing wrong? The SVG was created in illustrator, not sure if that makes any difference though.
Your svg is not real svg, just an xml file while you don't declare its namespace
<svg x="0px" y="0px" width="197px" height="71px" viewbox="0 0 346 51"
xmlns="http://www.w3.org/2000/svg"
>