SVG in-line to CSS - html
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:".
Related
How to control the animation speed for multiple SVG elements using jQuery?
How can I set varied speed for multiple SVG elements? In the current script it's applying speed = .5; for all the paths and lines that are under the parent group <g id="World-On-Your-Plate">.
For further simplification and better control I have divided the child elements of the SVG into the following groups i.e. <g id="World">, <g id="On-Your"> followed by <g id="Plate">.
I want to set a different speed for the child group <g id="On-Your">, as speed = .3;, while keeping it speed = .5; as it is for the <g id="World"> and <g id="Plate"> respectively.
HTML Code
<g id="World-On-Your-Plate">
<g id="World" stroke="#003668" stroke-width="1" fill="none">
<!--W-->
<line x1="8.427" y1="9.704" x2="9.47" y2="12.345" clip-path="url(#clip-path-47)" />
<line x1="9.192" y1="12.345" x2="10.212" y2="9.704" clip-path="url(#clip-path-46)" />
<line x1="9.331" y1="9.704" x2="10.374" y2="12.345" clip-path="url(#clip-path-45)" />
<line x1="10.096" y1="12.345" x2="11.115" y2="9.704" clip-path="url(#clip-path-44)" />
<!--O-->
<path d="M12.729,9.879a1.1,1.1,0,0,0-.811.348,1.22,1.22,0,0,0-.162,1.367.984.984,0,0,0,.973.6,1.05,1.05,0,0,0,1-.6,1.246,1.246,0,0,0-.163-1.367A1.082,1.082,0,0,0,12.729,9.879Z" transform="translate(0.009 0.01)" clip-path="url(#clip-path-43)" />
<!--R-->
<line x1="14.962" y1="9.704" x2="14.962" y2="12.345" clip-path="url(#clip-path-42)" />
<path d="M15.069,9.926h.394a.5.5,0,0,1,.556.533.519.519,0,0,1-.556.533h-.394" transform="translate(0.009 0.01)" clip-path="url(#clip-path-41)" />
<path d="M15,10.992h.509c.232,0,.6.857.788,1.089l.093.093c.093.046.394.162.394.162" transform="translate(0.009 0.01)" clip-path="url(#clip-path-40)" />
<!--L-->
<line x1="17.578" y1="9.704" x2="17.578" y2="12.345" clip-path="url(#clip-path-39)" />
<path d="M17.707,12.174h.9a.177.177,0,0,0,.116-.047.658.658,0,0,0,.093-.255" transform="translate(0.009 0.01)" clip-path="url(#clip-path-38)" />
<!--D-->
<line x1="19.833" y1="9.704" x2="19.833" y2="12.345" clip-path="url(#clip-path-37)" />
<path d="M19.916,9.949h.626a1.107,1.107,0,0,1,.788.324,1.062,1.062,0,0,1,.3.765,1.089,1.089,0,0,1-.371.834,1.17,1.17,0,0,1-.765.3h-.579" transform="translate(0.009 0.01)" clip-path="url(#clip-path-36)" />
</g>
<g id="On-Your" stroke="#BDA484" stroke-width=".3" fill="none">
<!--O-->
<path d="M11.562,13.471a1.991,1.991,0,0,0-.741.812c-.441.857-.093.95-.093.95" transform="translate(0.009 0.01)" clip-path="url(#clip-path-35)" />
<path d="M10.658,15.21s.394.185,1.09-.788c.648-.927.069-.951.069-.951" transform="translate(0.009 0.01)" clip-path="url(#clip-path-34)" />
<path d="M11.91,13.518s-.209-.116-.533.255a.743.743,0,0,0-.186.556" transform="translate(0.009 0.01)" clip-path="url(#clip-path-33)" />
<!--N-->
<path d="M11.771,14.908a.419.419,0,0,1,.162-.185l.278-.186" transform="translate(0.009 0.01)" clip-path="url(#clip-path-32)" />
<path d="M12.142,14.607a.6.6,0,0,1,.046.116,1.473,1.473,0,0,1-.325.51" transform="translate(0.009 0.01)" clip-path="url(#clip-path-31)" />
<path d="M12.1,15.047a1.971,1.971,0,0,1,.394-.324,2.939,2.939,0,0,1,.348-.186" transform="translate(0.009 0.01)" clip-path="url(#clip-path-30)" />
<path d="M12.744,14.63s.07.047.023.3a.211.211,0,0,0,.093.209" transform="translate(0.009 0.01)" clip-path="url(#clip-path-29)" />
<path d="M12.79,15.117s.024.139.3-.116l.231-.232" transform="translate(0.009 0.01)" clip-path="url(#clip-path-28)" />
<!--Y-->
<path d="M14.539,14.028s-.116-.186.3-.371a2.484,2.484,0,0,1,.487-.162" transform="translate(0.009 0.01)" clip-path="url(#clip-path-27)" />
<path d="M15.165,13.518s.139.046-.279.741c-.394.672-.162.9-.162.9s.186.325,1.159-1.437" transform="translate(0.009 0.01)" clip-path="url(#clip-path-26)" />
<path d="M15.952,13.75s-.417.927-.533,1.274c-.417,1.344-.579,1.113-.579,1.113" transform="translate(0.009 0.01)" clip-path="url(#clip-path-25)" />
<path d="M14.949,16.19s-.341-.216.076-.772a6.522,6.522,0,0,1,1.09-.927" transform="translate(0.009 0.01)" clip-path="url(#clip-path-24)" />
<!--O-->
<path d="M15.893,14.885a1.748,1.748,0,0,1,.348-.278c.44-.209.463-.185.463-.185" transform="translate(0.009 0.01)" clip-path="url(#clip-path-23)" />
<path d="M16.768,14.5a.784.784,0,0,0-.556.278.28.28,0,0,0,.023.44" transform="translate(0.009 0.01)" clip-path="url(#clip-path-22)" />
<path d="M16.138,15.186s.218.186.494-.172a.3.3,0,0,0,.011-.434" transform="translate(0.009 0.01)" clip-path="url(#clip-path-21)" />
<!--U-->
<path d="M16.988,14.885a.487.487,0,0,1,.232-.208l.255-.14" transform="translate(0.009 0.01)" clip-path="url(#clip-path-20)" />
<path d="M17.384,14.561a.742.742,0,0,1-.116.3.258.258,0,0,0,0,.28" transform="translate(0.009 0.01)" clip-path="url(#clip-path-19)" />
<path d="M17.251,15.028s0,.29.4-.152A3.814,3.814,0,0,1,18.1,14.5" transform="translate(0.009 0.01)" clip-path="url(#clip-path-18)" />
<path d="M17.922,14.584s.139.069.024.278a.205.205,0,0,0,.09.28" transform="translate(0.009 0.01)" clip-path="url(#clip-path-17)" />
<!--R-->
<path d="M17.934,15.143s.058.035.5-.336c.139-.116.556-.417.556-.417" transform="translate(0.009 0.01)" clip-path="url(#clip-path-16)" />
<path d="M18.879,14.491s.162.116-.023.325c-.232.254-.051.35-.051.35" transform="translate(0.009 0.01)" clip-path="url(#clip-path-15)" />
<path d="M18.733,15.094s.05.274.42-.05c.139-.116.343-.266.343-.266" transform="translate(0.009 0.01)" clip-path="url(#clip-path-14)" />
</g>
<g id="Plate" stroke="#003668" stroke-width="1" fill="none">
<!--P-->
<line x1="9.793" y1="17.119" x2="9.793" y2="19.761" clip-path="url(#clip-path-13)" />
<path d="M9.893,17.318a4.2,4.2,0,0,1,.487.024.558.558,0,0,1,.533.579.551.551,0,0,1-.209.463.708.708,0,0,1-.463.163,2.584,2.584,0,0,1-.325-.047" transform="translate(0.009 0.01)" clip-path="url(#clip-path-12)" />
<!--L-->
<line x1="12.155" y1="17.119" x2="12.155" y2="19.761" clip-path="url(#clip-path-11)" />
<path d="M12.288,19.59a4.91,4.91,0,0,0,.834,0c.14-.024.325-.255.325-.255" transform="translate(0.009 0.01)" clip-path="url(#clip-path-10)" />
<!--A-->
<line x1="14.049" y1="19.761" x2="15.139" y2="17.119" clip-path="url(#clip-path-9)" />
<line x1="14.927" y1="17.398" x2="15.969" y2="19.785" clip-path="url(#clip-path-8)" />
<line x1="14.476" y1="18.881" x2="15.449" y2="18.881" clip-path="url(#clip-path-7)" />
<!--T-->
<line x1="16.283" y1="17.328" x2="18.276" y2="17.328" clip-path="url(#clip-path-6)" />
<line x1="17.242" y1="17.328" x2="17.242" y2="19.785" clip-path="url(#clip-path-5)" />
<!--E-->
<line x1="19.238" y1="17.119" x2="19.238" y2="19.761" clip-path="url(#clip-path-4)" />
<line x1="19.389" y1="17.328" x2="20.362" y2="17.328" clip-path="url(#clip-path-3)" />
<line x1="19.38" y1="18.339" x2="20.168" y2="18.339" clip-path="url(#clip-path-2)" />
<path d="M19.38,19.59h.788a.438.438,0,0,0,.162-.047c.093-.092.232-.208.232-.208" transform="translate(0.009 0.01)" clip-path="url(#clip-path-1)" />
</g>
</g>
CSS Code
#World * {
animation: letter-animation .7s linear forwards;
animation-timing-function: ease-in-out;
}
#On-Your * {
animation: letter-animation .5s linear forwards;
animation-timing-function: ease-in-out;
}
#Plate * {
animation: letter-animation .7s linear forwards;
animation-timing-function: ease-in-out;
}
#keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
JQuery Code
let woyp = document.querySelector("#World-On-Your-Plate")
let shapes = woyp.querySelectorAll("g line, g path");
let speed = .5;
shapes.forEach((s, i) => {
let totalLength = s.getTotalLength();
s.setAttribute("stroke-dasharray", totalLength);
s.setAttribute("stroke-dashoffset", totalLength);
s.setAttribute("style", `animation-delay:${i*speed}s`)
})
CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr
Original Question: How Can I Make SVG Text Animation Seamless And Accurate?
Linked Question 1: A JQuery Function For SVG, To Execute 2nd Animation As Soon As, 1st Animation Completes?
Linked Question 2: To Control SVG CSS Based Animation Using Jquery?
In this case instead of setting the value of speed as a global variable I'm calculating the speed for every shape.
For the delay I am using a global variable let delay = 0; and then I'm incrementing the value of the delay in the forEach: delay += Number(speed);
For the speed in the svg I'm using a data-speed attribute and for each shape let speed = s.parentNode.dataset.speed;
let svg = document.querySelector("svg")
let woyp = document.querySelector("#World-On-Your-Plate")
let shapes = woyp.querySelectorAll("g line, g path");
let delay = 0;
shapes.forEach((s, i) => {
let totalLength = s.getTotalLength();
let speed = s.parentNode.dataset.speed;
delay += Number(speed);
s.setAttribute("stroke-dasharray", totalLength);
s.setAttribute("stroke-dashoffset", totalLength);
s.setAttribute("style", `animation-duration:${speed}s;animation-delay:${delay}s`)
})
#World-On-Your-Plate * {
animation-name: letter-animation;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes letter-animation {
100% {
stroke-dashoffset: 0;
}
}
svg{width:90vh}
<svg viewBox="8 8 15 15">
<g id="World-On-Your-Plate" >
<g id="World" stroke="#003668" stroke-width="1" fill="none" data-speed=".7">
<!--W-->
<line x1="8.427" y1="9.704" x2="9.47" y2="12.345" clip-path="url(#clip-path-47)" />
<line x1="9.192" y1="12.345" x2="10.212" y2="9.704" clip-path="url(#clip-path-46)" />
<line x1="9.331" y1="9.704" x2="10.374" y2="12.345" clip-path="url(#clip-path-45)" />
<line x1="10.096" y1="12.345" x2="11.115" y2="9.704" clip-path="url(#clip-path-44)" />
<!--O-->
<path d="M12.729,9.879a1.1,1.1,0,0,0-.811.348,1.22,1.22,0,0,0-.162,1.367.984.984,0,0,0,.973.6,1.05,1.05,0,0,0,1-.6,1.246,1.246,0,0,0-.163-1.367A1.082,1.082,0,0,0,12.729,9.879Z" transform="translate(0.009 0.01)" clip-path="url(#clip-path-43)" />
<!--R-->
<line x1="14.962" y1="9.704" x2="14.962" y2="12.345" clip-path="url(#clip-path-42)" />
<path d="M15.069,9.926h.394a.5.5,0,0,1,.556.533.519.519,0,0,1-.556.533h-.394" transform="translate(0.009 0.01)" clip-path="url(#clip-path-41)" />
<path d="M15,10.992h.509c.232,0,.6.857.788,1.089l.093.093c.093.046.394.162.394.162" transform="translate(0.009 0.01)" clip-path="url(#clip-path-40)" />
<!--L-->
<line x1="17.578" y1="9.704" x2="17.578" y2="12.345" clip-path="url(#clip-path-39)" />
<path d="M17.707,12.174h.9a.177.177,0,0,0,.116-.047.658.658,0,0,0,.093-.255" transform="translate(0.009 0.01)" clip-path="url(#clip-path-38)" />
<!--D-->
<line x1="19.833" y1="9.704" x2="19.833" y2="12.345" clip-path="url(#clip-path-37)" />
<path d="M19.916,9.949h.626a1.107,1.107,0,0,1,.788.324,1.062,1.062,0,0,1,.3.765,1.089,1.089,0,0,1-.371.834,1.17,1.17,0,0,1-.765.3h-.579" transform="translate(0.009 0.01)" clip-path="url(#clip-path-36)" />
</g>
<g id="On-Your" stroke="#BDA484" stroke-width=".5" fill="none" data-speed=".1">
<!--O-->
<path d="M11.562,13.471a1.991,1.991,0,0,0-.741.812c-.441.857-.093.95-.093.95" transform="translate(0.009 0.01)" clip-path="url(#clip-path-35)" />
<path d="M10.658,15.21s.394.185,1.09-.788c.648-.927.069-.951.069-.951" transform="translate(0.009 0.01)" clip-path="url(#clip-path-34)" />
<path d="M11.91,13.518s-.209-.116-.533.255a.743.743,0,0,0-.186.556" transform="translate(0.009 0.01)" clip-path="url(#clip-path-33)" />
<!--N-->
<path d="M11.771,14.908a.419.419,0,0,1,.162-.185l.278-.186" transform="translate(0.009 0.01)" clip-path="url(#clip-path-32)" />
<path d="M12.142,14.607a.6.6,0,0,1,.046.116,1.473,1.473,0,0,1-.325.51" transform="translate(0.009 0.01)" clip-path="url(#clip-path-31)" />
<path d="M12.1,15.047a1.971,1.971,0,0,1,.394-.324,2.939,2.939,0,0,1,.348-.186" transform="translate(0.009 0.01)" clip-path="url(#clip-path-30)" />
<path d="M12.744,14.63s.07.047.023.3a.211.211,0,0,0,.093.209" transform="translate(0.009 0.01)" clip-path="url(#clip-path-29)" />
<path d="M12.79,15.117s.024.139.3-.116l.231-.232" transform="translate(0.009 0.01)" clip-path="url(#clip-path-28)" />
<!--Y-->
<path d="M14.539,14.028s-.116-.186.3-.371a2.484,2.484,0,0,1,.487-.162" transform="translate(0.009 0.01)" clip-path="url(#clip-path-27)" />
<path d="M15.165,13.518s.139.046-.279.741c-.394.672-.162.9-.162.9s.186.325,1.159-1.437" transform="translate(0.009 0.01)" clip-path="url(#clip-path-26)" />
<path d="M15.952,13.75s-.417.927-.533,1.274c-.417,1.344-.579,1.113-.579,1.113" transform="translate(0.009 0.01)" clip-path="url(#clip-path-25)" />
<path d="M14.949,16.19s-.341-.216.076-.772a6.522,6.522,0,0,1,1.09-.927" transform="translate(0.009 0.01)" clip-path="url(#clip-path-24)" />
<!--O-->
<path d="M15.893,14.885a1.748,1.748,0,0,1,.348-.278c.44-.209.463-.185.463-.185" transform="translate(0.009 0.01)" clip-path="url(#clip-path-23)" />
<path d="M16.768,14.5a.784.784,0,0,0-.556.278.28.28,0,0,0,.023.44" transform="translate(0.009 0.01)" clip-path="url(#clip-path-22)" />
<path d="M16.138,15.186s.218.186.494-.172a.3.3,0,0,0,.011-.434" transform="translate(0.009 0.01)" clip-path="url(#clip-path-21)" />
<!--U-->
<path d="M16.988,14.885a.487.487,0,0,1,.232-.208l.255-.14" transform="translate(0.009 0.01)" clip-path="url(#clip-path-20)" />
<path d="M17.384,14.561a.742.742,0,0,1-.116.3.258.258,0,0,0,0,.28" transform="translate(0.009 0.01)" clip-path="url(#clip-path-19)" />
<path d="M17.251,15.028s0,.29.4-.152A3.814,3.814,0,0,1,18.1,14.5" transform="translate(0.009 0.01)" clip-path="url(#clip-path-18)" />
<path d="M17.922,14.584s.139.069.024.278a.205.205,0,0,0,.09.28" transform="translate(0.009 0.01)" clip-path="url(#clip-path-17)" />
<!--R-->
<path d="M17.934,15.143s.058.035.5-.336c.139-.116.556-.417.556-.417" transform="translate(0.009 0.01)" clip-path="url(#clip-path-16)" />
<path d="M18.879,14.491s.162.116-.023.325c-.232.254-.051.35-.051.35" transform="translate(0.009 0.01)" clip-path="url(#clip-path-15)" />
<path d="M18.733,15.094s.05.274.42-.05c.139-.116.343-.266.343-.266" transform="translate(0.009 0.01)" clip-path="url(#clip-path-14)" />
</g>
<g id="Plate" stroke="#003668" stroke-width="1" fill="none" data-speed=".7">
<!--P-->
<line x1="9.793" y1="17.119" x2="9.793" y2="19.761" clip-path="url(#clip-path-13)" />
<path d="M9.893,17.318a4.2,4.2,0,0,1,.487.024.558.558,0,0,1,.533.579.551.551,0,0,1-.209.463.708.708,0,0,1-.463.163,2.584,2.584,0,0,1-.325-.047" transform="translate(0.009 0.01)" clip-path="url(#clip-path-12)" />
<!--L-->
<line x1="12.155" y1="17.119" x2="12.155" y2="19.761" clip-path="url(#clip-path-11)" />
<path d="M12.288,19.59a4.91,4.91,0,0,0,.834,0c.14-.024.325-.255.325-.255" transform="translate(0.009 0.01)" clip-path="url(#clip-path-10)" />
<!--A-->
<line x1="14.049" y1="19.761" x2="15.139" y2="17.119" clip-path="url(#clip-path-9)" />
<line x1="14.927" y1="17.398" x2="15.969" y2="19.785" clip-path="url(#clip-path-8)" />
<line x1="14.476" y1="18.881" x2="15.449" y2="18.881" clip-path="url(#clip-path-7)" />
<!--T-->
<line x1="16.283" y1="17.328" x2="18.276" y2="17.328" clip-path="url(#clip-path-6)" />
<line x1="17.242" y1="17.328" x2="17.242" y2="19.785" clip-path="url(#clip-path-5)" />
<!--E-->
<line x1="19.238" y1="17.119" x2="19.238" y2="19.761" clip-path="url(#clip-path-4)" />
<line x1="19.389" y1="17.328" x2="20.362" y2="17.328" clip-path="url(#clip-path-3)" />
<line x1="19.38" y1="18.339" x2="20.168" y2="18.339" clip-path="url(#clip-path-2)" />
<path d="M19.38,19.59h.788a.438.438,0,0,0,.162-.047c.093-.092.232-.208.232-.208" transform="translate(0.009 0.01)" clip-path="url(#clip-path-1)" />
</g>
</g>
</svg>
Why are succesive SVG's sized after the first one?
I'm trying to build a dashboard with overview of a series of build jobs from Azure. The badges provided by Azure are rendered differently depending on the sequence of the badges. It can be boiled down to a very simple piece of HTML, which is available in this jsfiddle If you change the order of the three div's it is obvious that the first div is limiting the width of the successive div's. I have tried with Chrome, Edge, Edge Beta, FireFox and IE, all with the same (mis)behaviour. <div> <svg width="135.0" height="20.0" xmlns="http://www.w3.org/2000/svg"> <linearGradient id="a" x2="0" y2="100%"> <stop offset="0.0" stop-opacity="0.0" stop-color="#000" /> <stop offset="1.0" stop-opacity="0.2" stop-color="#000" /> </linearGradient> <clipPath id="c"> <rect width="135.0" height="20.0" rx="3.0" /> </clipPath> <g clip-path="url(#c)"> <rect width="135.0" height="20.0" fill="#555555" /> <rect width="70.8" height="20.0" fill="#4da2db" x="64.2" /> <rect width="135.0" height="20.0" fill="url(#a)" /> </g> <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" x="5" y="4"> <g> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 9H1V11H3L3 12H0V9Z" fill="#fff" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666656 4H3.7352L6.20309 0.444336C6.38861 0.166992 6.70068 0 7.03479 0H11.5C11.7762 0 12 0.224609 12 0.5V4.96484C12 5.29883 11.8332 5.61133 11.5553 5.79688L8 8.26465V11.333C8 11.7012 7.70154 12 7.33334 12H5L4 11L5.25 9.75L4.25 8.75L2.99997 10L1.99997 9L3.25 7.75L2.25 6.75L1 8L0 7V4.66699C0 4.29883 0.298462 4 0.666656 4ZM10.5 3C10.5 3.82812 9.82843 4.5 9.00003 4.5C8.1716 4.5 7.50003 3.82812 7.50003 3C7.50003 2.17188 8.1716 1.5 9.00003 1.5C9.82843 1.5 10.5 2.17188 10.5 3Z" fill="#fff" /> </g> </svg> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="41.1" y="15.0" fill="#000" fill-opacity="0.3">Short</text> <text x="41.1" y="14.0" fill="#fff">Short</text> <text x="98.6" y="15.0" fill="#000" fill-opacity="0.3">never built</text> <text x="98.6" y="14.0" fill="#fff">never built</text> </g> </svg> </div> <div> <svg width="155.9" height="20.0" xmlns="http://www.w3.org/2000/svg"> <linearGradient id="a" x2="0" y2="100%"> <stop offset="0.0" stop-opacity="0.0" stop-color="#000" /> <stop offset="1.0" stop-opacity="0.2" stop-color="#000" /> </linearGradient> <clipPath id="c"> <rect width="155.9" height="20.0" rx="3.0" /> </clipPath> <g clip-path="url(#c)"> <rect width="155.9" height="20.0" fill="#555555" /> <rect width="70.8" height="20.0" fill="#4da2db" x="85.1" /> <rect width="155.9" height="20.0" fill="url(#a)" /> </g> <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" x="5" y="4"> <g> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 9H1V11H3L3 12H0V9Z" fill="#fff" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666656 4H3.7352L6.20309 0.444336C6.38861 0.166992 6.70068 0 7.03479 0H11.5C11.7762 0 12 0.224609 12 0.5V4.96484C12 5.29883 11.8332 5.61133 11.5553 5.79688L8 8.26465V11.333C8 11.7012 7.70154 12 7.33334 12H5L4 11L5.25 9.75L4.25 8.75L2.99997 10L1.99997 9L3.25 7.75L2.25 6.75L1 8L0 7V4.66699C0 4.29883 0.298462 4 0.666656 4ZM10.5 3C10.5 3.82812 9.82843 4.5 9.00003 4.5C8.1716 4.5 7.50003 3.82812 7.50003 3C7.50003 2.17188 8.1716 1.5 9.00003 1.5C9.82843 1.5 10.5 2.17188 10.5 3Z" fill="#fff" /> </g> </svg> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="51.6" y="15.0" fill="#000" fill-opacity="0.3">Longer title</text> <text x="51.6" y="14.0" fill="#fff">Longer title</text> <text x="119.5" y="15.0" fill="#000" fill-opacity="0.3">never built</text> <text x="119.5" y="14.0" fill="#fff">never built</text> </g> </svg> </div> <div> <svg width="255.9" height="20.0" xmlns="http://www.w3.org/2000/svg"> <linearGradient id="a" x2="0" y2="100%"> <stop offset="0.0" stop-opacity="0.0" stop-color="#000" /> <stop offset="1.0" stop-opacity="0.2" stop-color="#000" /> </linearGradient> <clipPath id="c"> <rect width="255.9" height="20.0" rx="3.0" /> </clipPath> <g clip-path="url(#c)"> <rect width="255.9" height="20.0" fill="#555555" /> <rect width="68.9" height="20.0" fill="#4EC820" x="187.0" /> <rect width="255.9" height="20.0" fill="url(#a)" /> </g> <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" x="5" y="4"> <g> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 9H1V11H3L3 12H0V9Z" fill="#fff" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666656 4H3.7352L6.20309 0.444336C6.38861 0.166992 6.70068 0 7.03479 0H11.5C11.7762 0 12 0.224609 12 0.5V4.96484C12 5.29883 11.8332 5.61133 11.5553 5.79688L8 8.26465V11.333C8 11.7012 7.70154 12 7.33334 12H5L4 11L5.25 9.75L4.25 8.75L2.99997 10L1.99997 9L3.25 7.75L2.25 6.75L1 8L0 7V4.66699C0 4.29883 0.298462 4 0.666656 4ZM10.5 3C10.5 3.82812 9.82843 4.5 9.00003 4.5C8.1716 4.5 7.50003 3.82812 7.50003 3C7.50003 2.17188 8.1716 1.5 9.00003 1.5C9.82843 1.5 10.5 2.17188 10.5 3Z" fill="#fff" /> </g> </svg> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="102.5" y="15.0" fill="#000" fill-opacity="0.3">Very very very very long title</text> <text x="102.5" y="14.0" fill="#fff">Very very very very long title</text> <text x="220.5" y="15.0" fill="#000" fill-opacity="0.3">succeeded</text> <text x="220.5" y="14.0" fill="#fff">succeeded</text> </g> </svg> </div>
Badges from Azure are not intended to be displayed alongside other badges in the same context, as they make use of Id's that are not unique.
I am building a C# Razor page app, so I load the SVG's before inserting them in the Razor page.
To solve this issue, I run the SVG through this ReplaceIds method, before passing them to the Razor page:
private static string ReplaceIds(string text)
{
string pattern = " id=\"(\\w)\"";
while (true)
{
var res = Regex.Match(text, pattern, RegexOptions.IgnoreCase);
if (res.Success && res.Groups.Count > 0)
{
var id = res.Groups[1];
Guid g = Guid.NewGuid();
text = Regex.Replace(text, $" id=\"{id}\"", $" id=\"{g}\"");
text = Regex.Replace(text, #$"url\(#{id}\)", $"url(#{g})");
}
else
return text;
}
}
CSS Select #shadow-root
I'd like to use CSS to set the fill of the bottom right circle to green.
The snippet below successfully colors entire shape to green, but I just want to color part of the shape (just the circle).
[row="2"] [col="b"] {fill: green;}
<svg>
<defs>
<symbol id="myShape">
<polygon points="0,0 40,0 20,20" />
<circle r="10" cx="10" cy="10" stroke="black" />
</symbol>
</defs>
<g row="1" translate="transform(0,0)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
<g row="2" transform="translate(0,50)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
</svg>
If you want something to always be a specific colour, then set it to be that colour explicitly.
[row="2"] [col="b"] {fill: green;}
[row="1"] [col="b"] {fill: blue;}
<svg>
<defs>
<symbol id="myShape">
<polygon points="0,0 40,0 20,20" fill="black" />
<circle r="10" cx="10" cy="10" stroke="black" />
</symbol>
</defs>
<g row="1" translate="transform(0,0)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
<g row="2" transform="translate(0,50)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
</svg>
SVG not displaying in any browser
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" >
SVG Elements not in view on page load do not display
I have an SVG image (with code generated by Adobe Illustrator CS6) embedded in a web page. I've isolated the SVG code in this jsFiddle (it is also embedded below). In Chrome (but not Firefox), when the bottom part of the SVG isn't in view, it doesn't render. Shrink the window and scroll to the top of the HTML section on the jsFiddle and then reload to see what I'm talking about. Once you click the section, it appears. What can I do to fix this? Edit: WebKit bug filed, as it appears to be a WebKit bug. View bug report <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="690px" height="420px" viewBox="0 43 690 420" enable-background="new 0 43 690 420" xml:space="preserve"> <defs></defs> <filter id="fullblur" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="2" /> </filter> <filter id="halfblur" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="1" /> </filter> <filter id="noblur" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="0" /> </filter> <!-- BACKGROUND (hidden) --> <rect y="43" display="none" fill="#D1DBBB" width="690" height="420"/> <!-- STAGE --> <ellipse fill="#CC3333" stroke="#000000" cx="339.5" cy="43" rx="169.5" ry="42.5"/> <!-- SEATS --> <g> <!-- STUDENT SECTIONS --> <g id="studhover"> <g filter="url(#halfblur)" id="studchart" class="chartsection"> <g id="s1"> <path class="sFill" fill="#FECB2F" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150 c-2.761,0-5,2.239-5,5V136z"/> <path class="sStroke" fill="none" stroke="#000000" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150 c-2.761,0-5,2.239-5,5V136z"/> </g> <g id="s2"> <path class="sFill" fill="#FECB2F" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150 c-2.761,0-5,2.239-5,5V150z"/> <path class="sStroke" fill="none" stroke="#000000" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150 c-2.761,0-5,2.239-5,5V150z"/> </g> <g id="s3"> <path class="sFill" fill="#FECB2F" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150c-2.762,0-5,2.239-5,5V136z"/> <path class="sStroke" fill="none" stroke="#000000" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150 c-2.762,0-5,2.239-5,5V136z"/> </g> <g id="s4"> <path class="sFill" fill="#FECB2F" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150 c-2.761,0-5,2.239-5,5V205.5z"/> <path class="sStroke" fill="none" stroke="#000000" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150 c-2.761,0-5,2.239-5,5V205.5z"/> </g> <g id="s5"> <path class="sFill" fill="#FECB2F" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150 c-2.761,0-5,2.239-5,5V218z"/> <path class="sStroke" fill="none" stroke="#000000" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150 c-2.761,0-5,2.239-5,5V218z"/> </g> <g id="s6"> <path class="sFill" fill="#FECB2F" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150 c-2.762,0-5,2.239-5,5V205.5z"/> <path class="sStroke" fill="none" stroke="#000000" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150 c-2.762,0-5,2.239-5,5V205.5z"/> </g> </g> <!-- Filling in the gaps --> <g> <rect x="251" y="84" fill="transparent" width="15" height="140" id="sVertLine1" /> <rect x="425" y="84" fill="transparent" width="15" height="140" id="sVertLine2" /> <rect x="266" y="84" fill="transparent" width="159" height="15" id="sHorizLine1" /> <rect x="90" y="140" fill="transparent" width="161" height="15" id="sHorizLine2a" /> <rect x="440" y="140" fill="transparent" width="161" height="15" id="sHorizLine2b" /> <rect x="266" y="153" fill="transparent" width="161" height="15" id="sHorizLine3" /> <rect x="90" y="210" fill="transparent" width="161" height="12" id="sHorizLine4a" /> <rect x="440" y="210" fill="transparent" width="161" height="12" id="sHorizLine4b" /> </g> </g> <!-- GUEST SECTIONS --> <g id="guesthover"> <g filter="url(#halfblur)" id="guestchart" class="chartsection"> <g> <path class="gFill" fill="#3333CC" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150 c-2.761,0-5,2.239-5,5V273z"/> <path class="gStroke" fill="none" stroke="#000000" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150 c-2.761,0-5,2.239-5,5V273z"/> </g> <g> <path class="gFill" fill="#3333CC" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445c-2.762,0-5,2.239-5,5 V273z"/> <path class="gStroke" fill="none" stroke="#000000" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445 c-2.762,0-5,2.239-5,5V273z"/> </g> <g> <path class="gFill" fill="#3333CC" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150 c-2.761,0-5,2.238-5,5V342.5z"/> <path class="gStroke" fill="none" stroke="#000000" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150 c-2.761,0-5,2.238-5,5V342.5z"/> </g> <g> <path class="gFill" fill="#3333CC" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5 V342.5z"/> <path class="gStroke" fill="none" stroke="#000000" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445 c-2.762,0-5,2.238-5,5V342.5z"/> </g> <g> <path class="gFill" fill="#3333CC" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150 c-2.761,0-5,2.239-5,5V287z"/> <path class="gStroke" fill="none" stroke="#000000" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150 c-2.761,0-5,2.239-5,5V287z"/> </g> <g> <path class="gFill" fill="#3333CC" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150 c-2.761,0-5,2.238-5,5V355z"/> <path class="gStroke" fill="none" stroke="#000000" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150 c-2.761,0-5,2.238-5,5V355z"/> </g> <g> <path class="gFill" fill="#3333CC" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150 c-2.761,0-5,2.238-5,5V410.5z"/> <path class="gStroke" fill="none" stroke="#000000" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150 c-2.761,0-5,2.238-5,5V410.5z"/> </g> <g> <path class="gFill" fill="#3333CC" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5 V410.5z"/> <path class="gStroke" fill="none" stroke="#000000" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445 c-2.762,0-5,2.238-5,5V410.5z"/> </g> <g> <path class="gFill" fill="#3333CC" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150 c-2.761,0-5,2.238-5,5V423z"/> <path class="gStroke" fill="none" stroke="#000000" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150 c-2.761,0-5,2.238-5,5V423z"/> </g> </g> <!-- Filling in the gaps --> <g> <rect x="251" y="224" fill="transparent" width="15" height="206" id="gVertLine1" /> <rect x="425" y="224" fill="transparent" width="15" height="206" id="gVertLine2" /> <rect x="266" y="222" fill="transparent" width="159" height="15" id="gHorizLine1" /> <rect x="90" y="278" fill="transparent" width="161" height="15" id="gHorizLine2a" /> <rect x="440" y="278" fill="transparent" width="161" height="15" id="gHorizLine2b" /> <rect x="266" y="291" fill="transparent" width="161" height="15" id="gHorizLine3" /> <rect x="90" y="348" fill="transparent" width="161" height="15" id="gHorizLine4a" /> <rect x="440" y="348" fill="transparent" width="161" height="15" id="gHorizLine4b" /> <rect x="266" y="360" fill="transparent" width="161" height="15" id="gHorizLine5" /> <rect x="90" y="417" fill="transparent" width="161" height="13" id="gHorizLine4a" /> <rect x="440" y="417" fill="transparent" width="161" height="13" id="gHorizLine4b" /> </g> </g> </g> </svg>
This is a Webkit bug caused by the use of filters. I removed the <filter> sections and the flter="url(...)" tags to stop the filters from running and it now works.