Google material icon | Can't use google material icon normally - svg

I have a problem with google material icon and can't find exact solution on google.
This is my icon
This is icon on other website
Here is the code
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"></path>
<path d="M11.57 13.16c-1.36.28-2.17 1.16-2.17 2.41 0 1.34 1.11 2.42 2.49 2.42 2.05 0 3.71-1.66 3.71-3.71 0-1.07-.15-2.12-.46-3.12-.79 1.07-2.2 1.72-3.57 2zM13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM12 20c-3.31 0-6-2.69-6-6 0-1.53.3-3.04.86-4.43 1.01 1.01 2.41 1.63 3.97 1.63 2.66 0 4.75-1.83 5.28-4.43C17.34 8.97 18 11.44 18 14c0 3.31-2.69 6-6 6z"></path>
</svg>

Related

why my icon is slightly sliding half a pixel by itself?

So from Figma, I exported icon as SVG and put it in my code.
my UI Designer mentioned it looks different in Chrome on Mac, somehow it slides from the center
I tried to check it but it seems fine on my computer (Chrome on Windows),
I tried to overlay Figma box and SVG box.
This is the detailed version with grid and 1px border.
my UI Designer tried to put on grid and it shows that it slides half a pixel.
I only put styling : vertical-align: middle; and didn't try flex center or anything bcs other icons seem fine.
here's the SVG snippet
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
width="18"
height="18"
viewBox="0 0 18 18"
style="vertical-align: middle;">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.55 10.05H4.45001C3.86971 10.05 3.40001 9.57958 3.40001 8.99998C3.40001 8.42038 3.86971 7.94998 4.45001 7.94998H13.55C14.1303 7.94998 14.6 8.42038 14.6 8.99998C14.6 9.57958 14.1303 10.05 13.55 10.05ZM9 2C5.1339 2 2 5.1346 2 9C2 12.8654 5.1339 16 9 16C12.8661 16 16 12.8654 16 9C16 5.1346 12.8661 2 9 2Z"/>
</svg>
My friend mentioned it might be because of anti-aliasing changing the SVG Path coordinates? I tried to google up but found nothing, I'm just curious if anyone knows better about this

The path itself is exactly 14x14, so in this example I moved the path to 0,0 and made the viewBox="0 0 14 14". Now without all the other attributes the SVG should fill out the parent element. Now, it is easier to control the width and the height. In some cases you might need to set the SVG to display block.
div {
margin: 1px;
}
.w100 {
width: 200px;
background-color: orange;
}
.w100 svg {
display: block;
}
.em1 {
background-color: lime;
width: 200px;
}
.em1 svg {
height: 1em;
}
<div class="w100">
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
stroke="none"
viewBox="0 0 14 14">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 11.55 8.05 H 2.45 C 1.8697 8.05 1.4 7.5796 1.4 7 C 1.4 6.4204 1.8697 5.95 2.45 5.95 H 11.55 C 12.1303 5.95 12.6 6.4204 12.6 7 C 12.6 7.5796 12.1303 8.05 11.55 8.05 Z M 7 0 C 3.1339 0 0 3.1346 0 7 C 0 10.8654 3.1339 14 7 14 C 10.8661 14 14 10.8654 14 7 C 14 3.1346 10.8661 0 7 0 Z"/>
</svg>
</div>
<div class="em1">
<span>Test: </span>
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
stroke="none"
viewBox="0 0 14 14">
<path fill-rule="evenodd" clip-rule="evenodd" d="M 11.55 8.05 H 2.45 C 1.8697 8.05 1.4 7.5796 1.4 7 C 1.4 6.4204 1.8697 5.95 2.45 5.95 H 11.55 C 12.1303 5.95 12.6 6.4204 12.6 7 C 12.6 7.5796 12.1303 8.05 11.55 8.05 Z M 7 0 C 3.1339 0 0 3.1346 0 7 C 0 10.8654 3.1339 14 7 14 C 10.8661 14 14 10.8654 14 7 C 14 3.1346 10.8661 0 7 0 Z"/>
</svg>
</div>

Make half outline in the svg

I have an SVG which looks like the image below:
Code for SVG is below:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="75"
height="61"
viewBox="0 0 75 61"
>
<path
d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
fill="red"
/>
</svg>
I want to have an outline of black at only the half circular part of the svg, I am new to svg, so I am not able to do it. Please help.
NOTE: ignore the black outline at the top and bottom, that is not the part of svg, it comes because I have taken screenshot of my application. Only the red part is svg

For this you may use a different path whose's d attribute is a part of the previous path d attribute.
This is the d attribute you have:
d="M75.2 0v61H0V0
c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1
h-.1z"
For the new d attribute you remove M75.2 0v61H0V0. This is drawing part of the lines and ends in the point 0,0. You will use this point as a starting point: M0,0 Next you are using the bézier curves c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33 c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1 without the part that is closing the path.
This new path have fill="none" and the stroke of the color and width you like.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="75"
height="61"
viewBox="0 0 75 61"
>
<path
d="M75.2 0v61H0V0
c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1
h-.1z"
fill="red"
/>
<path
d="M0,0
c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33
c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1" fill="none" stroke="black" stroke-width="3"/>
</svg>

Alternatively you could have used the exact same path, but used s dash pattern to stroke the correct section.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="75"
height="61"
viewBox="0 0 75 61"
>
<path
d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
fill="red"
/>
<path
d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
fill="none" stroke="black" stroke-width="3"
stroke-dasharray="0 197 109 100"
/>
</svg>

Issues with unflattened SVG

I have an issue with some SVG markup - I have tried every export setting in Adobe Illustrator and yet I can't seem to get a flattened SVG.
You seem to be able to adjust every letter in this - I want it flattened so it appears as just one block
I have tried adjusting all of the Illustrator settings and even converting the SVG file online
I want the SVG to be lightweight and one block rather than split into each letter
Codepen
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="780px" height="150px" viewBox="0 0 780 150" style="enable-background:new 0 0 780 150;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EDC0F9;}
.st1{fill:#333333;}
.st2{fill:#D892EC;}
</style>
<g>
<g>
<g>
<g>
<path class="st0" d="M35.2,17.3c7.2,0,15.2,1,21.8,6.9c7.1,6.3,8.1,14.4,8.1,20.2c0,10.4-3.9,16.3-7.1,19.5
c-6.6,6.8-15.3,7.4-21.1,7.4H25v29.1H5.8V17.3H35.2z M25,55.5h6.9c2.6,0,7.2-0.1,10.3-3.1c1.7-1.7,3.1-4.6,3.1-8.2
c0-3.4-1.2-6.4-3.1-8.1c-2.8-2.7-7-3.1-10.7-3.1H25V55.5z"/>
<path class="st0" d="M116.2,17.3c10.6,0,17.2,3.4,21.1,7.2c3.4,3.3,7.2,9.3,7.2,18.5c0,5.3-1.1,11.7-6.5,16.9
c-2.8,2.7-7,5.3-11.6,6.4l25.5,33.9h-23.4l-22.1-32.6v32.7H87.1v-83H116.2z M106.3,55h4.3c3.4,0,8.2-0.4,11.4-3.6
c1.4-1.4,3.1-3.9,3.1-8.1c0-4.7-2.2-7.2-3.8-8.5c-3.1-2.3-8.1-2.6-10.6-2.6h-4.4V55z"/>
<path class="st0" d="M219.6,33.5H192v16.1h26.4v16.2H192v18.4h27.8v16.2h-47v-83h46.9V33.5z"/>
<path class="st0" d="M271.2,84.1h35.6v16.2h-67.1l39.8-66.7h-33.3V17.4h64.7L271.2,84.1z"/>
<path class="st0" d="M358.5,84.1H394v16.2H327l39.8-66.8h-33.3V17.3h64.7L358.5,84.1z"/>
<path class="st0" d="M445.2,61.6l-29.7-44.3h22.6l16.7,25.8l16.7-25.8h22.6l-29.7,44.3v38.7h-19.2V61.6z"/>
<path class="st0" d="M539.4,17.3c4.4,0,14.7,0.2,21.1,6.4c5.4,5.1,6,12,6,15.7c0,3.2-0.5,7-2.7,10.6c-2.1,3.4-5,5.3-7,6.1
c3.9,0.6,8.5,2.6,11.4,5.6c2.7,2.7,5.4,7.5,5.4,14.9c0,8.4-3.2,13.5-6.5,16.8c-6.9,6.6-16.8,7.1-21.9,7.1H514v-83H539.4z
M533,50.9h3.1c2.6,0,7-0.4,9.7-2.3c1.7-1.2,3.3-3.7,3.3-7.4s-1.7-5.9-3.2-7c-2.7-2.1-6.5-2.1-10-2.1h-3v18.8H533z M533,85.3
h4.6c4.8,0,10.7-0.1,14.1-3.3c1.7-1.6,2.7-3.9,2.7-7c0-3.3-1.4-5.6-2.6-6.7c-3.3-3.1-9.8-3.1-13.6-3.1H533V85.3z"/>
<path class="st0" d="M671,27.5c7.9,7.6,12.9,18.5,12.9,31.3c0,11.1-3.9,22.4-12.9,31.1c-7.7,7.5-18.2,12.2-32.1,12.2
c-15.6,0-26.2-6.3-32.3-12.2c-8-7.5-12.9-18.7-12.9-30.8c0-11.9,5.4-24,12.8-31.5c5.6-5.6,16-12.2,32.4-12.2
C651.8,15.4,662.6,19.4,671,27.5z M620.6,40.1c-3.6,3.4-7.4,9.6-7.4,18.8c0,7.6,2.5,13.6,7.6,18.7c5.4,5.1,11.3,6.9,17.8,6.9
c8.5,0,14.4-3.1,18.4-7.1c3.2-3.1,7.2-9,7.2-18.5c0-8.6-3.4-15-7.2-18.7c-4.1-3.9-10.7-7.1-18.3-7.1
C631.5,33.1,625,35.7,620.6,40.1z"/>
<path class="st0" d="M726.7,56.2l-25.8-38.9h23l13.6,23.6l13.6-23.6h23l-25.8,38.9l30.5,44.1h-23l-18.4-28.7l-18.4,28.7h-23
L726.7,56.2z"/>
</g>
</g>
<g>
<g>
<path class="st1" d="M21,96.4H1V12.5h29.7c6.7,0,15.2,0.8,22,7c5.6,4.8,8.2,11.5,8.2,20.5c0,8.2-2.4,14.9-7.2,19.8
c-6.5,6.7-14.9,7.5-21.4,7.5H21V96.4z M1.8,95.5h18.4V66.4h12.1c6.4,0,14.5-0.8,20.8-7.2c4.6-4.8,7-11.3,7-19.2
c0-8.7-2.6-15.2-8-19.8c-6.7-6-15-6.9-21.4-6.9H1.8V95.5z M27.5,51.7h-7.3V28.2h6.9c3.7,0,8,0.4,11,3.2c2,1.9,3.2,5,3.2,8.4
c0,3.3-1.2,6.5-3.2,8.5C34.6,51.7,29.6,51.7,27.5,51.7z M21,50.7h6.4c2,0,6.9,0,10-3c1.9-1.9,2.9-4.7,2.9-7.9s-1.1-6-2.9-7.8
c-2.7-2.6-6.8-3-10.4-3h-6.1L21,50.7L21,50.7z"/>
</g>
<g>
<path class="st1" d="M148.4,96.4H124l-21.7-31.7v31.7H82.1V12.5h29.5c11.2,0,17.9,3.9,21.4,7.4c2.7,2.6,7.4,8.6,7.4,18.9
c0,7.3-2.1,12.9-6.6,17.3c-3,2.9-7.1,5.2-11.1,6.3L148.4,96.4z M124.4,95.5h22.3l-25.4-33.8l0.6-0.2c4.1-1,8.3-3.2,11.4-6.3
c4.2-4.1,6.4-9.6,6.4-16.6c0-9.9-4.4-15.7-7.1-18.2c-3.4-3.2-9.9-7.1-20.8-7.1H83v82.1h18.3V61.9L124.4,95.5z M106.1,51.1h-4.7
V27.5h5c3.3,0,7.9,0.5,10.8,2.7c2.6,2,4,5.1,4,8.8c0,4.4-2,7.2-3.2,8.4C114.6,50.6,109.8,51.1,106.1,51.1z M102.2,50.2h3.9
c3.5,0,8.1-0.4,11.1-3.4c1.1-1.1,3-3.6,3-7.8c0-3.5-1.2-6.3-3.7-8.1c-2.1-1.6-5.8-2.5-10.3-2.5h-4
C102.2,28.4,102.2,50.2,102.2,50.2z"/>
</g>
<g>
<path class="st1" d="M215.6,96.4h-47.8V12.5h47.8v17.1h-27.7v15.2h26.4v17.1h-26.4v17.6h27.8v17H215.6z M168.7,95.5h46.1V80.2
H187V60.9h26.4V45.6H187V28.7h27.8V13.4h-46.1V95.5z"/>
</g>
<g>
<path class="st1" d="M302.7,96.4h-68.2l39.8-66.8h-33V12.5h65.9l-39.7,66.8h35.3V96.4z M236,95.5h65.9V80.2H266l39.7-66.8h-63.6
v15.4h33.6L236,95.5z"/>
</g>
<g>
<path class="st1" d="M390,96.4h-68.2l39.8-66.8h-33V12.5h65.9l-39.7,66.8H390V96.4z M323.3,95.5h65.9V80.2h-35.9L393,13.5h-63.6
v15.4h33.6L323.3,95.5z"/>
</g>
<g>
<path class="st1" d="M460.2,96.4h-20v-39l-30.1-44.9h23.6l16.5,25.4l16.5-25.4h23.6l-30.1,44.9V96.4z M441.1,95.5h18.3V57.1
l29.4-43.7h-21.6l-16.9,26.1l-17-26.1h-21.6l29.4,43.7V95.5z"/>
</g>
<g>
<path class="st1" d="M540.9,96.4h-31.6V12.5H535c3.6,0,14.5,0,21.4,6.5c5.1,4.8,6.1,11.3,6.1,16c0,4.2-0.9,7.7-2.8,10.8
c-1.7,2.9-4,4.6-6,5.7c3.9,0.9,7.9,2.9,10.4,5.5c2.5,2.5,5.5,7.2,5.5,15.2c0,7-2.2,12.7-6.6,17.1C558,94,550.8,96.4,540.9,96.4z
M510,95.5h30.8c9.7,0,16.8-2.3,21.6-7c4.2-4.2,6.4-9.8,6.4-16.5c0-7.7-2.8-12.1-5.3-14.5c-2.7-2.7-7-4.8-11.2-5.5l-1.4-0.2
l1.3-0.6c2-0.9,4.7-2.6,6.8-6c1.8-2.9,2.6-6.3,2.6-10.3c0-4.4-1-10.8-5.9-15.4c-6.6-6.3-17.4-6.3-20.8-6.3h-25V95.5z
M533.2,81.5h-5.1v-21h5.7c3.9,0,10.5,0,13.9,3.2c0.8,0.7,2.7,2.9,2.7,7.1c0,3-1,5.6-2.8,7.3C543.9,81.5,537.4,81.5,533.2,81.5z
M528.9,80.6h4.1c4.1,0,10.4,0,13.8-3.2c1.7-1.6,2.6-3.8,2.6-6.7c0-3.8-1.9-5.9-2.4-6.4c-3.2-3-9.6-3-13.4-3h-4.7L528.9,80.6
L528.9,80.6z M531.7,47.1h-3.5V27.5h3.4c3.4,0,7.4,0,10.2,2.2c1,0.8,3.4,3,3.4,7.3c0,3.2-1.3,6.1-3.5,7.7
C538.6,46.8,534.1,47.1,531.7,47.1z M528.9,46.3h2.7c1.9,0,6.7-0.2,9.5-2.3c2-1.4,3.2-4,3.2-7c0-3.9-2.1-6-3-6.7
c-2.6-2-6.3-2-9.7-2h-2.5v18H528.9z"/>
</g>
<g>
<path class="st1" d="M634.4,98.2c-17.3,0-27.9-7.7-32.6-12.3c-8.3-7.8-13-19.2-13-31.1c0-11.4,5.1-23.9,12.9-31.8
c4.6-4.6,15-12.3,32.7-12.3c13.1,0,24,4.1,32.4,12.2c8.4,8.2,13,19.4,13,31.6c0,12-4.6,23.2-13,31.4
C658.4,94.1,647.4,98.2,634.4,98.2z M634.4,11.5c-16.6,0-26.7,6.6-32.1,12c-7.7,7.7-12.7,19.9-12.7,31.2
c0,11.8,4.6,22.9,12.8,30.5c4.7,4.5,15.2,12.1,32,12.1c12.8,0,23.5-4,31.8-12s12.8-19,12.8-30.8c0-12-4.5-23-12.8-31l0,0
C658,15.6,647.3,11.5,634.4,11.5z M634.1,80.5c-7.4,0-13.1-2.2-18.1-7c-5.2-5.1-7.7-11.3-7.7-19c0-10.3,4.6-16.4,7.5-19.1
c4.6-4.6,11.2-7.2,18.5-7.2c7,0,13.9,2.7,18.6,7.2c4.6,4.6,7.4,11.6,7.4,19c0,9.7-4,15.7-7.4,18.9
C648.2,78.1,641.7,80.5,634.1,80.5z M634.2,29.2c-7.1,0-13.3,2.4-17.9,7l0,0c-2.7,2.6-7.2,8.5-7.2,18.5c0,7.5,2.4,13.4,7.5,18.4
c4.8,4.5,10.4,6.8,17.5,6.8c7.3,0,13.5-2.4,18.1-7c3.2-3.1,7.1-8.8,7.1-18.2c0-10.2-5-16.3-7.1-18.4
C647.8,31.8,641,29.2,634.2,29.2z"/>
</g>
<g>
<path class="st1" d="M775.4,96.4h-24L733.1,68l-18.2,28.4h-24L721.7,52l-26.1-39.4h24l13.4,23.2l13.4-23.2h24L744.5,52
L775.4,96.4z M751.7,95.5h21.9l-30.2-43.6l25.5-38.5H747l-13.9,24l-13.8-24h-22l25.5,38.5l-0.2,0.2l-30,43.3h21.9L733,66.3
L751.7,95.5z"/>
</g>
</g>
</g>
<g>
<path class="st2" d="M341.6,130.7c-1.3,1.1-3.1,1.8-5,1.8c-4.2,0-7.6-3-7.6-7.7c0-4.6,3.4-7.6,7.6-7.6c1.9,0,3.6,0.7,5,1.7
l-0.9,1.1c-1.1-0.8-2.5-1.4-4.1-1.4c-3.4,0-6.2,2.4-6.2,6.2c0,3.8,2.8,6.3,6.2,6.3c1.5,0,2.9-0.5,4.1-1.4L341.6,130.7z"/>
<path class="st2" d="M345.5,132.1v-14.6h1.4v3.8c0.7-2.4,2.3-4.1,4.8-4.1c0.7,0,1.6,0.2,2.2,0.4l-0.2,1.4
c-0.7-0.3-1.4-0.3-1.9-0.3c-3.8,0-4.8,4.3-4.8,7.8v5.6L345.5,132.1L345.5,132.1z"/>
<path class="st2" d="M370.1,125.4h-13c0.2,3.4,2.8,5.6,5.9,5.6c2.2,0,4.1-1.1,5.1-2.8l1.3,0.5c-1.3,2.3-3.7,3.7-6.4,3.7
c-4.1,0-7.3-3-7.3-7.7c0-4.6,3.3-7.6,7.3-7.6c4.2,0,7.2,3,7.2,7.6C370.1,125,370.1,125.2,370.1,125.4z M357,124.1h11.6
c-0.3-3.4-2.6-5.5-5.7-5.5S357.3,120.7,357,124.1z"/>
<path class="st2" d="M387.2,129c-1.2,2.1-3.6,3.5-6.2,3.5c-4.2,0-7.5-3.3-7.5-7.6c0-4.4,3.4-7.6,7.5-7.6c2.6,0,5,1.3,6.2,3.4v-3.1
h1.4v14.6h-1.4V129z M381,131c3.3,0,6.1-2.5,6.2-6c0-3.7-2.8-6.3-6.2-6.3c-3.4,0-6.1,2.6-6.1,6.2C374.9,128.4,377.6,131,381,131z"
/>
<path class="st2" d="M399.7,118.8h-3.4v13.3h-1.4v-13.3h-2.7v-1.3h2.7v-5.9h1.4v5.9h3.4V118.8z"/>
<path class="st2" d="M403.9,111c0.7,0,1.2,0.5,1.2,1.2s-0.5,1.2-1.2,1.2s-1.3-0.5-1.3-1.2C402.7,111.5,403.3,111,403.9,111z
M403.3,117.5v14.6h1.4v-14.6C404.7,117.5,403.3,117.5,403.3,117.5z"/>
<path class="st2" d="M409.9,117.5h1.4v2.9c0.8-2.3,3.2-3.2,5.2-3.2c3.5,0,5.8,2.4,5.8,6.3v8.6h-1.4v-8.6c0-3.1-1.8-4.9-4.4-4.9
s-5.1,1.4-5.2,5.3v8.2h-1.4V117.5z"/>
<path class="st2" d="M428.9,135.3c1.2,1.8,3,2.7,4.9,2.7c3.8,0,6.4-1.8,6.4-8v-1.1c-1.1,2.2-3.6,3.5-6.2,3.5
c-4.2,0-7.5-3.2-7.5-7.6c0-4.4,3.4-7.6,7.5-7.6c2.6,0,5,1.3,6.2,3.5v-3.2h1.4v12.4c0,7.3-3.2,9.5-7.8,9.5c-2.3,0-4.6-1-6.1-3.3
L428.9,135.3z M434,131c3.3,0,6.2-2.5,6.2-6.2c0-3.6-2.8-6.2-6.2-6.2c-3.4,0-6.1,2.7-6.1,6.2C427.9,128.4,430.6,131,434,131z"/>
<path class="st2" d="M467.9,132.1v-8.6c0-3.1-1.8-4.9-4.4-4.9s-5.1,1.4-5.2,5.3v8.2h-1.4v-14.6h1.4v2.9c0.8-2.3,3.3-3.2,5.2-3.2
c2.6,0,4.6,1.3,5.4,3.8c1-3.1,3.8-3.8,5.6-3.8c3.4,0,5.8,2.4,5.8,6.3v8.6h-1.4v-8.6c0-3.1-1.8-4.9-4.4-4.9s-5.1,1.4-5.2,5.3v8.2
L467.9,132.1L467.9,132.1z"/>
<path class="st2" d="M484.6,124.8c0-4.6,3.4-7.6,7.6-7.6s7.6,2.9,7.6,7.6c0,4.7-3.5,7.7-7.6,7.7
C488,132.4,484.6,129.4,484.6,124.8z M498.4,124.8c0-3.8-2.8-6.2-6.2-6.2c-3.4,0-6.2,2.4-6.2,6.2s2.8,6.3,6.2,6.3
C495.6,131,498.4,128.6,498.4,124.8z"/>
<path class="st2" d="M515.2,132.1v-8.6c0-3.1-1.8-4.9-4.4-4.9s-5.1,1.4-5.2,5.3v8.2h-1.4v-14.6h1.4v2.9c0.8-2.3,3.3-3.2,5.2-3.2
c2.6,0,4.6,1.3,5.4,3.8c1-3.1,3.8-3.8,5.6-3.8c3.4,0,5.8,2.4,5.8,6.3v8.6h-1.4v-8.6c0-3.1-1.8-4.9-4.4-4.9c-2.6,0-5.1,1.4-5.2,5.3
v8.2L515.2,132.1L515.2,132.1z"/>
<path class="st2" d="M546.4,125.4h-13c0.2,3.4,2.8,5.6,5.9,5.6c2.2,0,4.1-1.1,5.1-2.8l1.3,0.5c-1.3,2.3-3.7,3.7-6.4,3.7
c-4.1,0-7.3-3-7.3-7.7c0-4.6,3.3-7.6,7.3-7.6c4.2,0,7.2,3,7.2,7.6C546.4,125,546.4,125.2,546.4,125.4z M533.3,124.1H545
c-0.3-3.4-2.6-5.5-5.7-5.5C536.1,118.6,533.6,120.7,533.3,124.1z"/>
<path class="st2" d="M550.6,117.5h1.4v2.9c0.8-2.3,3.2-3.2,5.2-3.2c3.5,0,5.8,2.4,5.8,6.3v8.6h-1.4v-8.6c0-3.1-1.8-4.9-4.4-4.9
c-2.6,0-5.1,1.4-5.2,5.3v8.2h-1.4L550.6,117.5L550.6,117.5z"/>
<path class="st2" d="M573.5,118.8h-3.4v13.3h-1.4v-13.3H566v-1.3h2.7v-5.9h1.4v5.9h3.4L573.5,118.8L573.5,118.8z"/>
<path class="st2" d="M585.7,120.9h-1.4c-0.2-1.4-1.5-2.3-3.1-2.3c-1.7,0-3,0.9-3.2,2.1c-0.3,2.1,1.3,2.7,2.5,3l2.1,0.5
c2.7,0.7,3.6,2.2,3.6,4c0,2.5-2.1,4.2-5.1,4.2c-2.4,0-4.8-1.4-5.1-4h1.3c0.4,1.2,1.3,2.7,3.9,2.7c2.2,0,3.6-1.1,3.6-2.8
c0-1.2-0.7-2.2-2.5-2.7l-2.1-0.5c-1.8-0.4-3.9-1.3-3.6-4.6c0.3-2,2.3-3.3,4.6-3.3C583.6,117.2,585.5,118.5,585.7,120.9z"/>
<path class="st2" d="M599.4,124.8c0-4.6,3.4-7.6,7.6-7.6c4.2,0,7.6,2.9,7.6,7.6c0,4.7-3.5,7.7-7.6,7.7
C602.8,132.4,599.4,129.4,599.4,124.8z M613.2,124.8c0-3.8-2.8-6.2-6.2-6.2s-6.2,2.4-6.2,6.2s2.8,6.3,6.2,6.3
C610.4,131,613.2,128.6,613.2,124.8z"/>
<path class="st2" d="M616.7,118.8v-1.3h2.9v-2.1c0-3.5,1.2-6.2,5-6.2h1.3v1.4h-1.3c-2.9,0-3.6,2.3-3.6,4.8v2.1h3.9v1.3H621v13.3
h-1.4v-13.3C619.6,118.9,616.7,118.9,616.7,118.8z"/>
<path class="st2" d="M638.3,109.2h1.4v11.2c0.8-2.3,3.2-3.2,5.2-3.2c3.4,0,5.8,2.4,5.8,6.3v8.6c-0.2,0-1.2,0-1.4,0v-8.6
c0-3.1-1.8-4.9-4.4-4.9c-2.6,0-5.1,1.4-5.2,5.3v8.2h-1.4L638.3,109.2L638.3,109.2z"/>
<path class="st2" d="M668.6,129c-1.2,2.1-3.6,3.5-6.2,3.5c-4.2,0-7.5-3.3-7.5-7.6c0-4.4,3.4-7.6,7.5-7.6c2.6,0,5,1.3,6.2,3.4v-3.1
h1.4v14.6h-1.4V129z M662.4,131c3.3,0,6.1-2.5,6.2-6c0-3.7-2.8-6.3-6.2-6.3s-6.1,2.6-6.1,6.2C656.3,128.4,659,131,662.4,131z"/>
<path class="st2" d="M676.7,120.7c1.2-2.1,3.6-3.5,6.2-3.5c4.2,0,7.5,3.3,7.5,7.7s-3.4,7.6-7.5,7.6c-2.6,0-5-1.3-6.2-3.4v10.2
h-1.4v-21.7h1.4V120.7z M682.9,118.6c-3.3,0-6.1,2.5-6.2,6.1c0,3.7,2.8,6.3,6.2,6.3s6.1-2.6,6.1-6.1
C689,121.4,686.3,118.6,682.9,118.6z"/>
<path class="st2" d="M696.3,120.7c1.2-2.1,3.6-3.5,6.2-3.5c4.2,0,7.5,3.3,7.5,7.7s-3.4,7.6-7.5,7.6c-2.6,0-5-1.3-6.2-3.4v10.2
h-1.4v-21.7h1.4V120.7z M702.4,118.6c-3.3,0-6.1,2.5-6.2,6.1c0,3.7,2.8,6.3,6.2,6.3s6.1-2.6,6.1-6.1
C708.5,121.4,705.8,118.6,702.4,118.6z"/>
<path class="st2" d="M715,111c0.7,0,1.2,0.5,1.2,1.2s-0.5,1.2-1.2,1.2s-1.3-0.5-1.3-1.2C713.8,111.5,714.3,111,715,111z
M714.3,117.5v14.6h1.4v-14.6C715.7,117.5,714.3,117.5,714.3,117.5z"/>
<path class="st2" d="M721,117.5h1.4v2.9c0.8-2.3,3.2-3.2,5.2-3.2c3.5,0,5.8,2.4,5.8,6.3v8.6H732v-8.6c0-3.1-1.8-4.9-4.4-4.9
c-2.6,0-5.1,1.4-5.2,5.3v8.2H721V117.5z"/>
<path class="st2" d="M752.1,125.4h-13c0.2,3.4,2.8,5.6,5.9,5.6c2.2,0,4.1-1.1,5.1-2.8l1.3,0.5c-1.3,2.3-3.7,3.7-6.4,3.7
c-4.1,0-7.3-3-7.3-7.7c0-4.6,3.3-7.6,7.3-7.6c4.2,0,7.2,3,7.2,7.6C752.1,125,752.1,125.2,752.1,125.4z M739.1,124.1h11.6
c-0.3-3.4-2.6-5.5-5.7-5.5C741.8,118.6,739.3,120.7,739.1,124.1z"/>
<path class="st2" d="M764.9,120.9h-1.4c-0.2-1.4-1.5-2.3-3.1-2.3c-1.7,0-3,0.9-3.2,2.1c-0.3,2.1,1.3,2.7,2.5,3l2.1,0.5
c2.7,0.7,3.6,2.2,3.6,4c0,2.5-2.1,4.2-5.1,4.2c-2.4,0-4.8-1.4-5.1-4h1.3c0.4,1.2,1.3,2.7,3.9,2.7c2.2,0,3.6-1.1,3.6-2.8
c0-1.2-0.7-2.2-2.5-2.7l-2.1-0.5c-1.8-0.4-3.9-1.3-3.6-4.6c0.3-2,2.3-3.3,4.6-3.3C762.8,117.2,764.6,118.5,764.9,120.9z"/>
<path class="st2" d="M778.5,120.9h-1.4c-0.2-1.4-1.5-2.3-3.1-2.3c-1.7,0-3,0.9-3.2,2.1c-0.3,2.1,1.3,2.7,2.5,3l2.1,0.5
c2.7,0.7,3.6,2.2,3.6,4c0,2.5-2.1,4.2-5.1,4.2c-2.4,0-4.8-1.4-5.1-4h1.3c0.4,1.2,1.3,2.7,3.9,2.7c2.2,0,3.6-1.1,3.6-2.8
c0-1.2-0.7-2.2-2.5-2.7l-2.1-0.5c-1.8-0.4-3.9-1.3-3.6-4.6c0.3-2,2.3-3.3,4.6-3.3C776.3,117.2,778.2,118.5,778.5,120.9z"/>
</g>
</g>
</svg>

You have 3 different colors, so you're going to get, at best, 3 paths. Illustrator exports <style> tags with CSS, and that's not necessary here, so I inlined your fill declarations as attrs on the paths and ditched some extraneous bits (e.g. the top level ID, class names, useless groups), ran through SVGO (using SVGOMG) and this is the result:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 150">
<path fill="#edc0f9" d="M35.2 17.3A31 31 0 0 1 57 24.2a25.6 25.6 0 0 1 8.1 20.2c0 10.4-3.9 16.3-7.1 19.5-6.6 6.8-15.3 7.4-21.1 7.4H25v29.1H5.8V17.3h29.4zM25 55.5h6.9c2.6 0 7.2-.1 10.3-3.1 1.7-1.7 3.1-4.6 3.1-8.2a11 11 0 0 0-3.1-8.1c-2.8-2.7-7-3.1-10.7-3.1H25v22.5zm91.2-38.2c10.6 0 17.2 3.4 21.1 7.2 3.4 3.3 7.2 9.3 7.2 18.5 0 5.3-1.1 11.7-6.5 16.9-2.8 2.7-7 5.3-11.6 6.4l25.5 33.9h-23.4l-22.1-32.6v32.7H87.1v-83h29.1zM106.3 55h4.3c3.4 0 8.2-.4 11.4-3.6a11 11 0 0 0 3.1-8.1c0-4.7-2.2-7.2-3.8-8.5-3.1-2.3-8.1-2.6-10.6-2.6h-4.4V55zm113.3-21.5H192v16.1h26.4v16.2H192v18.4h27.8v16.2h-47v-83h46.9v16.1zm51.6 50.6h35.6v16.2h-67.1l39.8-66.7h-33.3V17.4h64.7l-39.7 66.7zm87.3 0H394v16.2h-67l39.8-66.8h-33.3V17.3h64.7l-39.7 66.8zm86.7-22.5l-29.7-44.3h22.6l16.7 25.8 16.7-25.8h22.6l-29.7 44.3v38.7h-19.2V61.6zm94.2-44.3c4.4 0 14.7.2 21.1 6.4 5.4 5.1 6 12 6 15.7 0 3.2-.5 7-2.7 10.6-2.1 3.4-5 5.3-7 6.1 3.9.6 8.5 2.6 11.4 5.6 2.7 2.7 5.4 7.5 5.4 14.9 0 8.4-3.2 13.5-6.5 16.8-6.9 6.6-16.8 7.1-21.9 7.1H514v-83h25.4zM533 50.9h3.1c2.6 0 7-.4 9.7-2.3 1.7-1.2 3.3-3.7 3.3-7.4s-1.7-5.9-3.2-7c-2.7-2.1-6.5-2.1-10-2.1h-3v18.8h.1zm0 34.4h4.6c4.8 0 10.7-.1 14.1-3.3a9.2 9.2 0 0 0 2.7-7c0-3.3-1.4-5.6-2.6-6.7-3.3-3.1-9.8-3.1-13.6-3.1H533v20.1zm138-57.8a42.8 42.8 0 0 1 12.9 31.3 42.6 42.6 0 0 1-45 43.3 45.5 45.5 0 0 1-32.3-12.2 42.3 42.3 0 0 1-12.9-30.8c0-11.9 5.4-24 12.8-31.5 5.6-5.6 16-12.2 32.4-12.2 12.9 0 23.7 4 32.1 12.1zm-50.4 12.6a25.4 25.4 0 0 0-7.4 18.8 25 25 0 0 0 7.6 18.7 24.5 24.5 0 0 0 17.8 6.9 25 25 0 0 0 18.4-7.1 25 25 0 0 0 7.2-18.5c0-8.6-3.4-15-7.2-18.7a27 27 0 0 0-18.3-7.1c-7.2 0-13.7 2.6-18.1 7zm106.1 16.1l-25.8-38.9h23l13.6 23.6 13.6-23.6h23l-25.8 38.9 30.5 44.1h-23l-18.4-28.7-18.4 28.7h-23l30.7-44.1z"/>
<path fill="#333" d="M21 96.4H1V12.5h29.7c6.7 0 15.2.8 22 7 5.6 4.8 8.2 11.5 8.2 20.5 0 8.2-2.4 14.9-7.2 19.8-6.5 6.7-14.9 7.5-21.4 7.5H21v29.1zm-19.2-.9h18.4V66.4h12.1c6.4 0 14.5-.8 20.8-7.2 4.6-4.8 7-11.3 7-19.2 0-8.7-2.6-15.2-8-19.8a31 31 0 0 0-21.4-6.9H1.8v82.2zm25.7-43.8h-7.3V28.2h6.9c3.7 0 8 .4 11 3.2 2 1.9 3.2 5 3.2 8.4 0 3.3-1.2 6.5-3.2 8.5-3.5 3.4-8.5 3.4-10.6 3.4zm-6.5-1h6.4c2 0 6.9 0 10-3 1.9-1.9 2.9-4.7 2.9-7.9s-1.1-6-2.9-7.8c-2.7-2.6-6.8-3-10.4-3h-6.1l.1 21.7zm127.4 45.7H124l-21.7-31.7v31.7H82.1V12.5h29.5c11.2 0 17.9 3.9 21.4 7.4 2.7 2.6 7.4 8.6 7.4 18.9 0 7.3-2.1 12.9-6.6 17.3-3 2.9-7.1 5.2-11.1 6.3l25.7 34zm-24-.9h22.3l-25.4-33.8.6-.2c4.1-1 8.3-3.2 11.4-6.3 4.2-4.1 6.4-9.6 6.4-16.6 0-9.9-4.4-15.7-7.1-18.2a29.4 29.4 0 0 0-20.8-7.1H83v82.1h18.3V61.9l23.1 33.6zm-18.3-44.4h-4.7V27.5h5c3.3 0 7.9.5 10.8 2.7 2.6 2 4 5.1 4 8.8 0 4.4-2 7.2-3.2 8.4-3.4 3.2-8.2 3.7-11.9 3.7zm-3.9-.9h3.9c3.5 0 8.1-.4 11.1-3.4 1.1-1.1 3-3.6 3-7.8 0-3.5-1.2-6.3-3.7-8.1a17.7 17.7 0 0 0-10.3-2.5h-4v21.8zm113.4 46.2h-47.8V12.5h47.8v17.1h-27.7v15.2h26.4v17.1h-26.4v17.6h27.8v17h-.1zm-46.9-.9h46.1V80.2H187V60.9h26.4V45.6H187V28.7h27.8V13.4h-46.1v82.1zm134 .9h-68.2l39.8-66.8h-33V12.5h65.9l-39.7 66.8h35.3v17.1zm-66.7-.9h65.9V80.2H266l39.7-66.8h-63.6v15.4h33.6L236 95.5zm154 .9h-68.2l39.8-66.8h-33V12.5h65.9l-39.7 66.8H390v17.1zm-66.7-.9h65.9V80.2h-35.9L393 13.5h-63.6v15.4H363l-39.7 66.6zm136.9.9h-20v-39l-30.1-44.9h23.6l16.5 25.4 16.5-25.4h23.6l-30.1 44.9v39zm-19.1-.9h18.3V57.1l29.4-43.7h-21.6l-16.9 26.1-17-26.1h-21.6l29.4 43.7v38.4zm99.8.9h-31.6V12.5H535c3.6 0 14.5 0 21.4 6.5a21.4 21.4 0 0 1 6.1 16 20 20 0 0 1-2.8 10.8c-1.7 2.9-4 4.6-6 5.7 3.9.9 7.9 2.9 10.4 5.5 2.5 2.5 5.5 7.2 5.5 15.2 0 7-2.2 12.7-6.6 17.1-5 4.7-12.2 7.1-22.1 7.1zm-30.9-.9h30.8c9.7 0 16.8-2.3 21.6-7 4.2-4.2 6.4-9.8 6.4-16.5 0-7.7-2.8-12.1-5.3-14.5-2.7-2.7-7-4.8-11.2-5.5l-1.4-.2 1.3-.6c2-.9 4.7-2.6 6.8-6a19 19 0 0 0 2.6-10.3c0-4.4-1-10.8-5.9-15.4-6.6-6.3-17.4-6.3-20.8-6.3h-25v82.3zm23.2-14h-5.1v-21h5.7c3.9 0 10.5 0 13.9 3.2.8.7 2.7 2.9 2.7 7.1 0 3-1 5.6-2.8 7.3-3.7 3.4-10.2 3.4-14.4 3.4zm-4.3-.9h4.1c4.1 0 10.4 0 13.8-3.2a8.7 8.7 0 0 0 2.6-6.7 9 9 0 0 0-2.4-6.4c-3.2-3-9.6-3-13.4-3h-4.7v19.3zm2.8-33.5h-3.5V27.5h3.4c3.4 0 7.4 0 10.2 2.2a9 9 0 0 1 3.4 7.3c0 3.2-1.3 6.1-3.5 7.7a19 19 0 0 1-10 2.4zm-2.8-.8h2.7c1.9 0 6.7-.2 9.5-2.3 2-1.4 3.2-4 3.2-7 0-3.9-2.1-6-3-6.7-2.6-2-6.3-2-9.7-2h-2.5v18h-.2zm105.5 51.9a45.8 45.8 0 0 1-32.6-12.3 42.7 42.7 0 0 1-13-31.1c0-11.4 5.1-23.9 12.9-31.8a45 45 0 0 1 32.7-12.3 45 45 0 0 1 32.4 12.2c8.4 8.2 13 19.4 13 31.6 0 12-4.6 23.2-13 31.4s-19.4 12.3-32.4 12.3zm0-86.7a43.9 43.9 0 0 0-32.1 12 46.1 46.1 0 0 0-12.7 31.2c0 11.8 4.6 22.9 12.8 30.5a45.6 45.6 0 0 0 32 12.1A42.4 42.4 0 0 0 679 54.5c0-12-4.5-23-12.8-31a44.2 44.2 0 0 0-31.8-12zm-.3 69a25.3 25.3 0 0 1-25.8-26c0-10.3 4.6-16.4 7.5-19.1a26 26 0 0 1 18.5-7.2c7 0 13.9 2.7 18.6 7.2a27.1 27.1 0 0 1 7.4 19c0 9.7-4 15.7-7.4 18.9a25.5 25.5 0 0 1-18.8 7.2zm.1-51.3c-7.1 0-13.3 2.4-17.9 7a25 25 0 0 0-7.2 18.5 24.3 24.3 0 0 0 25 25.2c7.3 0 13.5-2.4 18.1-7 3.2-3.1 7.1-8.8 7.1-18.2 0-10.2-5-16.3-7.1-18.4a25.6 25.6 0 0 0-18-7.1zm141.2 67.2h-24L733.1 68l-18.2 28.4h-24L721.7 52l-26.1-39.4h24L733 35.8l13.4-23.2h24L744.5 52l30.9 44.4zm-23.7-.9h21.9l-30.2-43.6 25.5-38.5H747l-13.9 24-13.8-24h-22l25.5 38.5-.2.2-30 43.3h21.9L733 66.3l18.7 29.2z"/>
<path fill="#d892ec" d="M341.6 130.7a7.8 7.8 0 0 1-5 1.8c-4.2 0-7.6-3-7.6-7.7 0-4.6 3.4-7.6 7.6-7.6 1.9 0 3.6.7 5 1.7l-.9 1.1a7 7 0 0 0-4.1-1.4 6 6 0 0 0-6.2 6.2 6 6 0 0 0 6.2 6.3c1.5 0 2.9-.5 4.1-1.4l.9 1zm3.9 1.4v-14.6h1.4v3.8c.7-2.4 2.3-4.1 4.8-4.1.7 0 1.6.2 2.2.4l-.2 1.4c-.7-.3-1.4-.3-1.9-.3-3.8 0-4.8 4.3-4.8 7.8v5.6h-1.5zm24.6-6.7h-13a5.8 5.8 0 0 0 5.9 5.6c2.2 0 4.1-1.1 5.1-2.8l1.3.5a7.3 7.3 0 0 1-6.4 3.7c-4.1 0-7.3-3-7.3-7.7 0-4.6 3.3-7.6 7.3-7.6 4.2 0 7.2 3 7.2 7.6l-.1.7zm-13.1-1.3h11.6c-.3-3.4-2.6-5.5-5.7-5.5s-5.6 2.1-5.9 5.5zm30.2 4.9a7.2 7.2 0 0 1-6.2 3.5 7.5 7.5 0 0 1-7.5-7.6c0-4.4 3.4-7.6 7.5-7.6 2.6 0 5 1.3 6.2 3.4v-3.1h1.4v14.6h-1.4V129zm-6.2 2c3.3 0 6.1-2.5 6.2-6 0-3.7-2.8-6.3-6.2-6.3a6 6 0 0 0-6.1 6.2 6 6 0 0 0 6.1 6.1zm18.7-12.2h-3.4v13.3h-1.4v-13.3h-2.7v-1.3h2.7v-5.9h1.4v5.9h3.4v1.3zm4.2-7.8c.7 0 1.2.5 1.2 1.2s-.5 1.2-1.2 1.2-1.3-.5-1.3-1.2c.1-.7.7-1.2 1.3-1.2zm-.6 6.5v14.6h1.4v-14.6h-1.4zm6.6 0h1.4v2.9c.8-2.3 3.2-3.2 5.2-3.2 3.5 0 5.8 2.4 5.8 6.3v8.6h-1.4v-8.6c0-3.1-1.8-4.9-4.4-4.9s-5.1 1.4-5.2 5.3v8.2h-1.4v-14.6zm19 17.8c1.2 1.8 3 2.7 4.9 2.7 3.8 0 6.4-1.8 6.4-8v-1.1a6.9 6.9 0 0 1-6.2 3.5 7.4 7.4 0 0 1-7.5-7.6c0-4.4 3.4-7.6 7.5-7.6a7 7 0 0 1 6.2 3.5v-3.2h1.4v12.4c0 7.3-3.2 9.5-7.8 9.5-2.3 0-4.6-1-6.1-3.3l1.2-.8zm5.1-4.3c3.3 0 6.2-2.5 6.2-6.2 0-3.6-2.8-6.2-6.2-6.2a6 6 0 0 0-6.1 6.2 6 6 0 0 0 6.1 6.2zm33.9 1.1v-8.6c0-3.1-1.8-4.9-4.4-4.9s-5.1 1.4-5.2 5.3v8.2h-1.4v-14.6h1.4v2.9c.8-2.3 3.3-3.2 5.2-3.2 2.6 0 4.6 1.3 5.4 3.8 1-3.1 3.8-3.8 5.6-3.8 3.4 0 5.8 2.4 5.8 6.3v8.6h-1.4v-8.6c0-3.1-1.8-4.9-4.4-4.9s-5.1 1.4-5.2 5.3v8.2h-1.4zm16.7-7.3c0-4.6 3.4-7.6 7.6-7.6s7.6 2.9 7.6 7.6c0 4.7-3.5 7.7-7.6 7.7a7.5 7.5 0 0 1-7.6-7.7zm13.8 0a6 6 0 0 0-6.2-6.2c-3.4 0-6.2 2.4-6.2 6.2s2.8 6.3 6.2 6.3a6.1 6.1 0 0 0 6.2-6.3zm16.8 7.3v-8.6c0-3.1-1.8-4.9-4.4-4.9s-5.1 1.4-5.2 5.3v8.2h-1.4v-14.6h1.4v2.9c.8-2.3 3.3-3.2 5.2-3.2 2.6 0 4.6 1.3 5.4 3.8 1-3.1 3.8-3.8 5.6-3.8 3.4 0 5.8 2.4 5.8 6.3v8.6h-1.4v-8.6c0-3.1-1.8-4.9-4.4-4.9-2.6 0-5.1 1.4-5.2 5.3v8.2h-1.4zm31.2-6.7h-13a5.8 5.8 0 0 0 5.9 5.6c2.2 0 4.1-1.1 5.1-2.8l1.3.5a7.3 7.3 0 0 1-6.4 3.7c-4.1 0-7.3-3-7.3-7.7 0-4.6 3.3-7.6 7.3-7.6 4.2 0 7.2 3 7.2 7.6l-.1.7zm-13.1-1.3H545c-.3-3.4-2.6-5.5-5.7-5.5a5.8 5.8 0 0 0-6 5.5zm17.3-6.6h1.4v2.9c.8-2.3 3.2-3.2 5.2-3.2 3.5 0 5.8 2.4 5.8 6.3v8.6h-1.4v-8.6c0-3.1-1.8-4.9-4.4-4.9-2.6 0-5.1 1.4-5.2 5.3v8.2h-1.4v-14.6zm22.9 1.3h-3.4v13.3h-1.4v-13.3H566v-1.3h2.7v-5.9h1.4v5.9h3.4v1.3zm12.2 2.1h-1.4c-.2-1.4-1.5-2.3-3.1-2.3-1.7 0-3 .9-3.2 2.1-.3 2.1 1.3 2.7 2.5 3l2.1.5c2.7.7 3.6 2.2 3.6 4 0 2.5-2.1 4.2-5.1 4.2-2.4 0-4.8-1.4-5.1-4h1.3c.4 1.2 1.3 2.7 3.9 2.7 2.2 0 3.6-1.1 3.6-2.8 0-1.2-.7-2.2-2.5-2.7l-2.1-.5c-1.8-.4-3.9-1.3-3.6-4.6.3-2 2.3-3.3 4.6-3.3 2.4 0 4.3 1.3 4.5 3.7zm13.7 3.9c0-4.6 3.4-7.6 7.6-7.6 4.2 0 7.6 2.9 7.6 7.6 0 4.7-3.5 7.7-7.6 7.7a7.5 7.5 0 0 1-7.6-7.7zm13.8 0c0-3.8-2.8-6.2-6.2-6.2s-6.2 2.4-6.2 6.2 2.8 6.3 6.2 6.3a6.1 6.1 0 0 0 6.2-6.3zm3.5-6v-1.3h2.9v-2.1c0-3.5 1.2-6.2 5-6.2h1.3v1.4h-1.3c-2.9 0-3.6 2.3-3.6 4.8v2.1h3.9v1.3H621v13.3h-1.4v-13.3h-2.9zm21.6-9.6h1.4v11.2c.8-2.3 3.2-3.2 5.2-3.2 3.4 0 5.8 2.4 5.8 6.3v8.6h-1.4v-8.6c0-3.1-1.8-4.9-4.4-4.9-2.6 0-5.1 1.4-5.2 5.3v8.2h-1.4v-22.9zm30.3 19.8a7.2 7.2 0 0 1-6.2 3.5 7.5 7.5 0 0 1-7.5-7.6c0-4.4 3.4-7.6 7.5-7.6 2.6 0 5 1.3 6.2 3.4v-3.1h1.4v14.6h-1.4V129zm-6.2 2c3.3 0 6.1-2.5 6.2-6 0-3.7-2.8-6.3-6.2-6.3s-6.1 2.6-6.1 6.2a6 6 0 0 0 6.1 6.1zm14.3-10.3a7.2 7.2 0 0 1 6.2-3.5c4.2 0 7.5 3.3 7.5 7.7s-3.4 7.6-7.5 7.6c-2.6 0-5-1.3-6.2-3.4v10.2h-1.4v-21.7h1.4v3.1zm6.2-2.1a6.1 6.1 0 0 0-6.2 6.1c0 3.7 2.8 6.3 6.2 6.3s6.1-2.6 6.1-6.1c0-3.5-2.7-6.3-6.1-6.3zm13.4 2.1a7.2 7.2 0 0 1 6.2-3.5c4.2 0 7.5 3.3 7.5 7.7s-3.4 7.6-7.5 7.6c-2.6 0-5-1.3-6.2-3.4v10.2h-1.4v-21.7h1.4v3.1zm6.1-2.1a6.1 6.1 0 0 0-6.2 6.1c0 3.7 2.8 6.3 6.2 6.3s6.1-2.6 6.1-6.1c0-3.5-2.7-6.3-6.1-6.3zM715 111c.7 0 1.2.5 1.2 1.2s-.5 1.2-1.2 1.2-1.3-.5-1.3-1.2c.1-.7.6-1.2 1.3-1.2zm-.7 6.5v14.6h1.4v-14.6h-1.4zm6.7 0h1.4v2.9c.8-2.3 3.2-3.2 5.2-3.2 3.5 0 5.8 2.4 5.8 6.3v8.6H732v-8.6c0-3.1-1.8-4.9-4.4-4.9-2.6 0-5.1 1.4-5.2 5.3v8.2H721v-14.6zm31.1 7.9h-13a5.8 5.8 0 0 0 5.9 5.6c2.2 0 4.1-1.1 5.1-2.8l1.3.5a7.3 7.3 0 0 1-6.4 3.7c-4.1 0-7.3-3-7.3-7.7 0-4.6 3.3-7.6 7.3-7.6 4.2 0 7.2 3 7.2 7.6l-.1.7zm-13-1.3h11.6c-.3-3.4-2.6-5.5-5.7-5.5a5.6 5.6 0 0 0-5.9 5.5zm25.8-3.2h-1.4c-.2-1.4-1.5-2.3-3.1-2.3-1.7 0-3 .9-3.2 2.1-.3 2.1 1.3 2.7 2.5 3l2.1.5c2.7.7 3.6 2.2 3.6 4 0 2.5-2.1 4.2-5.1 4.2-2.4 0-4.8-1.4-5.1-4h1.3c.4 1.2 1.3 2.7 3.9 2.7 2.2 0 3.6-1.1 3.6-2.8 0-1.2-.7-2.2-2.5-2.7l-2.1-.5c-1.8-.4-3.9-1.3-3.6-4.6.3-2 2.3-3.3 4.6-3.3 2.4 0 4.2 1.3 4.5 3.7zm13.6 0h-1.4c-.2-1.4-1.5-2.3-3.1-2.3-1.7 0-3 .9-3.2 2.1-.3 2.1 1.3 2.7 2.5 3l2.1.5c2.7.7 3.6 2.2 3.6 4 0 2.5-2.1 4.2-5.1 4.2-2.4 0-4.8-1.4-5.1-4h1.3c.4 1.2 1.3 2.7 3.9 2.7 2.2 0 3.6-1.1 3.6-2.8 0-1.2-.7-2.2-2.5-2.7l-2.1-.5c-1.8-.4-3.9-1.3-3.6-4.6.3-2 2.3-3.3 4.6-3.3s4.2 1.3 4.5 3.7z"/>
</svg>
It's <4kb when gzipped, which is great.

SVG path 'fill' is coloring more than expected

I've got a shape that I've defined as an SVG path, and I'd like to fill it with a solid color. The path itself looks correct, and a stroke follows the shape I want. However, when I change the fill property from none to a color, the color overflows the curve I've defined and creates a rectangle shape plus a blob.
In these examples, I'm using an inline SVG style attribute, but I get the same result using CSS styles to fill the <path>.
<p>Path with stroke looks correct:</p>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:none;stroke-width:0.3;stroke:#000"
d="m47.6 69.5c0 22.9 0 45.9 0 68.8 37 0 74.1 0 111.1 0 0-22.9 0-45.9 0-68.8m-111.1 0c7.5-9.2 17.7-17.8 30-18.8 11.1-0.8 20.6 7.2 26.4 15.9 5.6 9 12.6 18.9 23.6 21.3 11.1 2.1 21-5.6 27.7-13.7 1.3-1.5 2.5-3.1 3.5-4.7"/>
</svg>
<p>But 'fill' covers more than it should:</p>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:blue;stroke-width:0.3;stroke:#000"
d="m47.6 69.5c0 22.9 0 45.9 0 68.8 37 0 74.1 0 111.1 0 0-22.9 0-45.9 0-68.8m-111.1 0c7.5-9.2 17.7-17.8 30-18.8 11.1-0.8 20.6 7.2 26.4 15.9 5.6 9 12.6 18.9 23.6 21.3 11.1 2.1 21-5.6 27.7-13.7 1.3-1.5 2.5-3.1 3.5-4.7"/>
</svg>
How can I fix this and make the fill color follow the curve on the top of the shape?

It's the way you are coding the path. If you look at the d attribute you have an m command (move to) in the middle. This means that you are not coding the path continuously. This is how I would do it:
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="210" height="297" viewBox="0 0 210 297" version="1.1">
<path
style="fill:red;stroke-width:0.3;stroke:#000"
d="M47.6,69.5
C55.1,60.3,65.3,51.7,77.6,50.7
C88.7,49.9,98.2,57.9,104,66.6
C109.6,75.6,116.6,85.5,127.6,87.9
C138.7,90,148.6,82.3,155.3,74.2
C156.6,72.7,157.8,71.1,158.8,69.5
V138.3H47.6z"/>
</svg>

What is this common path in svg

I have a bunch of svg icons all with the same second line. What is this second line. Importantly, can i assume it to be same for my own icons.
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="" />
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
<path d="M0 0h24v24H0z" fill="none"/>
Also removing that had no effect on my svg icons

Resources