Good afternoon, dear, I was faced with the question that after I got the svg file converted to Illustrtor I got a huge amount of duplicate elements. I will give an example
<radialGradient id="SVGID_1_" cx="58.792" cy="113.0993" r="3.5393" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#E6FFFA"/> <stop offset="0.4946" style="stop-color:#83CCFA"/> <stop offset="1" style="stop-color:#266DC4"/> </radialGradient> <circle class="st1" cx="58.8" cy="113.1" r="3.5"/> <radialGradient id="SVGID_2_" cx="86.651" cy="186.2081" r="3.5384" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#E6FFFA"/> <stop offset="0.4946" style="stop-color:#83CCFA"/> <stop offset="1" style="stop-color:#266DC4"/> </radialGradient> <circle class="st2" cx="86.7" cy="186.2" r="3.5"/> <radialGradient id="SVGID_3_" cx="66.4336" cy="185.2397" r="3.5387" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#E6FFFA"/> <stop offset="0.4946" style="stop-color:#83CCFA"/> <stop offset="1" style="stop-color:#266DC4"/> </radialGradient> <circle class="st3" cx="66.4" cy="185.2" r="3.5"/> Here you can see 3 circles with the same radial gradients , in the CSS file I address them through styles
.st0{fill:none;stroke:#5FBEFF;stroke-width:2;stroke-miterlimit:10;} .st1{fill:url(#SVGID_1_);} .st2{fill:url(#SVGID_2_);} .st3{fill:url(#SVGID_3_);} The question is how to reduce (optimize) this entry through the CSS style sheet? PS The fact is that I have these circles> 200 and it weighs a lot.
