How do I fill several svg path by one gradient? - html

There is an example with group of two paths, group filled by gradient.
<svg height="1000" width="1400">
<defs>
<linearGradient id="lingrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="green" />
</linearGradient>
</defs>
<g fill="url(#lingrad)">
<path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/>
<path d="M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
V490.667z"/>
</g>
</svg>
But each path is filled by its own gradient.
How do I fill all paths by one shared gradient?


By just creating one path.
Just add the d tag of one path to the d tag of the other path:
<path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/>
<path d="M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
V490.667z"/>
<svg height="1000" width="1400">
<defs>
<linearGradient id="lingrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="green" />
</linearGradient>
</defs>
<g fill="url(#lingrad)">
<path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667zM96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
V490.667z"/>
</g>
</svg>


Define the gradient dimensions not relative to the object bounding box (of the individual shapes, gradientUnits="objectBoundingBox" is the default), but relative to the local coordinate system of the <g> element (gradientUnits="userSpaceOnUse").
<svg height="1000" width="1400">
<defs>
<linearGradient id="lingrad" x1="0" y1="0" x2="512" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="green" />
</linearGradient>
</defs>
<g fill="url(#lingrad)">
<path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/>
<path d="M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
V490.667z"/>
</g>
</svg>

Related

SVG does not line up correctly with aspect ratio

I've been trying to solve this for a while now and can't get the SVGs to align correctly for some width and height. My viewBox has 16:9 aspect ratio and I would like to scale the SVG by the same aspect ratio. For some width and height, it does line correctly but for others it doesn't although both have the same aspect ratio.
Any hints on what is causing this?
I have a JSFiddle for you to try, https://jsfiddle.net/n90ty8ys/1/
<svg id="svg-main-panel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 432" preserveAspectRatio="xMinYMin meet" width="1120" height="630">
<rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" fill="blue"></rect>
<svg width="20" height="40" x="20" y="20">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="657.247" y1="172.823" x2="657.247" y2="152.907" gradientTransform="rotate(90 405.13 -232.117)">
<stop offset="0" stop-color="#BDCCD4"></stop>
<stop offset=".5" stop-color="#EBF0F2"></stop>
<stop offset="1" stop-color="#BDCCD4"></stop>
</linearGradient>
<path fill="url(#a)" d="M20 0H.034L0 40h19.966"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" x="20" y="60">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="19.775" y1="30" x2="-.14" y2="30">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#a)" d="M-.034 20h20v20h-20z" />
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-1207.701" y1="556.747" x2="-1207.701" y2="576.663" gradientTransform="matrix(0 -1 -1 0 576.556 -1188.2)">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#b)" d="M0 40l19.966-20L20-1H0" />
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-847.237" y1="1808.924" x2="-847.237" y2="1828.84" gradientTransform="matrix(-1 0 0 1 -826.737 -1788.733)">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#c)" d="M41 40V20H19.934L0 40h19.968" />
</svg>
</svg>

Updates
Originally I thought viewBox and svg had different ratio, which actually had the same. I updated #2 below accordingly.
I see two potential issues:
Your <path> elements have decimal numbers in d attribute. As browsers rendering unit is pixel (integer), it might misalign your SVG elements. In the below snippet, I changed all the decimal numbers in d attributes to integers. For example, I changed <path fill="url(#c)" d="M41 40V20H19.934L0 40h19.968" /> to <path fill="url(#c)" d="M41 40V20H20L0 40h20" />.
Your base <svg>’s viewBox size, especially ratio, is different from width and height attribute value. Your viewBox width and height is 768 and 432 respectively, while your <svg> has width="1120" height="630" for its size value. That difference makes the SVG skewed unexpectedly and might produce decimal-based rendering that causes pixel misalignment in the browser. As viewBox vs <svg> size ratio is 1:1.46 (1120/768), it could render misaligned elements. There is a great article by Sara Soueidan about how to configure your viewBox numbers.
I applied those two changes in the snippet below, and it seems to work fine. Good luck!
<svg id="svg-main-panel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1120 630" preserveAspectRatio="xMinYMin meet" width="1120" height="630">
<rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" fill="blue"></rect>
<svg width="20" height="40" x="20" y="20">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="657.247" y1="172.823" x2="657.247" y2="152.907" gradientTransform="rotate(90 405.13 -232.117)">
<stop offset="0" stop-color="#BDCCD4"></stop>
<stop offset=".5" stop-color="#EBF0F2"></stop>
<stop offset="1" stop-color="#BDCCD4"></stop>
</linearGradient>
<path fill="url(#a)" d="M20 0H0L0 40h20"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" x="20" y="60">
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="19.775" y1="30" x2="-.14" y2="30">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#a)" d="M0 20h20v20h-20z" />
<linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-1207.701" y1="556.747" x2="-1207.701" y2="576.663" gradientTransform="matrix(0 -1 -1 0 576.556 -1188.2)">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#b)" d="M0 40l20-20L20-1H0" />
<linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-847.237" y1="1808.924" x2="-847.237" y2="1828.84" gradientTransform="matrix(-1 0 0 1 -826.737 -1788.733)">
<stop offset="0" stop-color="#BDCCD4" />
<stop offset=".5" stop-color="#EBF0F2" />
<stop offset="1" stop-color="#BDCCD4" />
</linearGradient>
<path fill="url(#c)" d="M41 40V20H20L0 40h20" />
</svg>
</svg>

SVG - Filling Rectangle with Jet Colour Scheme

What is the correct way to fill an SVG rectangle with jet colour scheme? Using multiple stops in linearGradient does not seem to work.
Edit, I am trying to fill the a rectangle with one of the following colour gradient.

I edited the MDN code with a rainbow example
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients -->
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#d30000"/>
<stop offset="30%" stop-color="#ffff05"/>
<stop offset="50%" stop-color="#05ff05"/>
<stop offset="70%" stop-color="#05ffff"/>
<stop offset="100%" stop-color="#041ae0"/>
</linearGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>
in a fiddle: https://jsfiddle.net/9bmvr5hd/

The BbwrR gradient is the example used in Mozilla's SVG - Gradients documentation:
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop class="stop1" offset="25%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="75%"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="25%" stop-color="blue"/>
<stop offset="50%" stop-color="black" stop-opacity="0"/>
<stop offset="75%" stop-color="red"/>
</linearGradient>
<style type="text/css"><![CDATA[
#rect1 { fill: url(#Gradient1); }
.stop1 { stop-color: blue; }
.stop2 { stop-color: black; stop-opacity: 0; }
.stop3 { stop-color: red; }
]]></style>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>
I swapped the location of the red and blue and adjusted the offset percentages to try to make it look more like your image. You should be able to just change the colors and add/remove stops for the others.

A colorful SVG in plain HTML is all black in React. Why?

I'm using React in Meteor.
When I add an SVG to the React component, style is not applied. But the very same code is working as expected in a plain HTML.
Here is my SVG code:
<svg viewBox="0 0 1031 475" preserveAspectRatio="none">
<defs>
<linearGradient x1="100%" y1="0%" x2="0%" y2="25%" id="front-rainbow-gradient">
<stop stop-color="#00D7B9" offset="0%"/>
<stop stop-color="#B95DD7" offset="50%"/>
<stop stop-color="#FFB367" offset="100%"/>
</linearGradient>
</defs>
<path d="M0 475h1031V0C630.46 33.34 270 208.52 0 475z"
fill="url(#front-rainbow-gradient)" fill-opacity="0.65" />
</svg>
The React component:
render () {
return (
<div>
<div className="main-header">
<svg viewBox="0 0 1031 475" preserveAspectRatio="none">
<defs>
<linearGradient x1="100%" y1="0%" x2="0%" y2="25%" id="front-rainbow-gradient">
<stop stop-color="#00D7B9" offset="0%"/>
<stop stop-color="#B95DD7" offset="50%"/>
<stop stop-color="#FFB367" offset="100%"/>
</linearGradient>
</defs>
<path d="M0 475h1031V0C630.46 33.34 270 208.52 0 475z"
fill="url(#front-rainbow-gradient)" fill-opacity="0.65" />
</svg>
</div>
<div className="latest">
<Container />
</div>
</div>
)
}

classic camelCase.
<stop stopColor="#00D7B9" offset="0%"/>
<stop stopColor="#B95DD7" offset="50%"/>
<stop stopColor="#FFB367" offset="100%"/>
(mind that react expects camel case properties)

Apply an opacity mask with CSS3

I'm trying to apply a CSS Mask to fade a DIV horizontally in both direction.
I created the mask with an online editor and it works smoothly using -webkit-mask and base64 encoding:
#slicenter{-webkit-mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAUCAYAAAAeGxcbAAACWUlEQVR4Xu3bQU4DMQwFUHoH4P7ng94BGkSlyKQjRv6bqG8kVKVgd/rqjflwefl7vZWnxvly+/r6fXwt59XP31u8T3WjfnWeX672Olu/eDueIkCAAAECBAgQIECAAIEnEvgse+i1nMf352t1vu+/4/GovtZ+lH15dX742mPxrtfZpfhoqT6zzI/76Pwy4InmzVslQIAAAQIECBAgQIAAgQcC0aX59hpHS3dy2f9JxuslQTfnBAgQIECAAAECBAgQILCrgAR9+uTmBF6CvutIu28CBAgQIECAAAECBAjsKSBBnz63OYFP/rn8f/6Hfc/xcdcECBAgQIAAAQIECBAgkBKQoEvQU7OkDwECBAgQIECAAAECBAg0BCToEvTG+CglQIAAAQIECBAgQIAAgZSABF2CnpolfQgQIECAAAECBAgQIECgISBBl6A3xkcpAQIECBAgQIAAAQIECKQEJOgS9NQs6UOAAAECBAgQIECAAAECDQEJugS9MT5KCRAgQIAAAQIECBAgQCAlIEGXoKdmSR8CBAgQIECAAAECBAgQaAhI0CXojfFRSoAAAQIECBAgQIAAAQIpAQm6BD01S/oQIECAAAECBAgQIECAQENAgi5Bb4yPUgIECBAgQIAAAQIECBBICUjQJeipWdKHAAECBAgQIECAAAECBBoCEnQJemN8lBIgQIAAAQIECBAgQIBASkCCLkFPzZI+BAgQIECAAAECBAgQINAQkKBL0Bvjo5QAAQIECBAgQIAAAQIEUgISdAl6apb0IUCAAAECBAgQIECAAIGGwLYJ+jfSylgzQ2my8wAAAABJRU5ErkJggg==);}
The problem is: this works just on Chrome (and maybe Safari).
So I tried to export the same image to HTML/SVG. This is what I got:
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" >
<defs>
<linearGradient id="lgrad" x1="0%" y1="50%" x2="100%" y2="50%" >
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
<stop offset="5%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="95%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)"/>
</svg>
And then I tried to convert this vector in a mask (but it's probably wrong):
<svg height="0" >
<defs>
<linearGradient id="g" gradientUnits="objectBoundingBox" x1="0%" y1="50%" x2="100%" y2="50%" >
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
<stop offset="5%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="95%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
</linearGradient>
<mask id="lgrad" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
</mask>
</defs>
</svg>
I applied the mask to the same element with:
#slicenter{mask: url(#lgrad);}
But it doesn't works. Any Ideas?
Cheers

Use element and injected SVG: Gradients not working in Chrome

I am using an svg spritesheet with symbols and inject it inline with SVGInjector. I reference it this way:
<svg role="img" width="134px" height="89px">
<use xlink:href="path/to/sprite.symbol.svg#theid"></use>
</svg>
The gradients are declared inside the defs tag of the spritesheet, but they are not showing in Chrome.
I noticed, that it works, if the SVG is not injected. That means, I just placed the whole thing inline into my HTML and the gradients showed as expected. The Spritesheet was exactly the same. The difference is just if it is loaded by JavaScript or not. But the symbol itself is showing. The problem is only the gradient.
This is a simplified version of my spritesheet, with one of the broken icons. In that case, the group called "quadri" is not displayed:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="20.0664" y1="12.1807" x2="20.0664" y2="19.5099">
<stop offset="0" style="stop-color:#00774A"/>
<stop offset="0.6" style="stop-color:#8CCAAE"/>
<stop offset="1" style="stop-color:#00975F"/>
</linearGradient>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="20.0513" y1="10.627" x2="20.0513" y2="18.8625">
<stop offset="0" style="stop-color:#00975F"/>
<stop offset="0.3" style="stop-color:#8CCAAE"/>
<stop offset="0.55" style="stop-color:#00975F"/>
<stop offset="0.8352" style="stop-color:#00774A"/>
<stop offset="0.8691" style="stop-color:#007C4E"/>
<stop offset="0.9244" style="stop-color:#00895A"/>
<stop offset="0.9938" style="stop-color:#009E6E"/>
<stop offset="1" style="stop-color:#00A070"/>
</linearGradient>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="21.3755" y1="18.4082" x2="21.3755" y2="13.0789">
<stop offset="0" style="stop-color:#00A97C"/>
<stop offset="1" style="stop-color:#00975F"/>
</linearGradient>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="18.0532" y1="18.4072" x2="18.0532" y2="13.0789">
<stop offset="0" style="stop-color:#00A97C"/>
<stop offset="1" style="stop-color:#00975F"/>
</linearGradient>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="19.1021" y1="18.4072" x2="19.1021" y2="13.0799">
<stop offset="0" style="stop-color:#00A97C"/>
<stop offset="1" style="stop-color:#00975F"/>
</linearGradient>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="19.9897" y1="18.4082" x2="19.9897" y2="13.079">
<stop offset="0" style="stop-color:#00A97C"/>
<stop offset="1" style="stop-color:#00975F"/>
</linearGradient>
</defs>
<symbol viewBox="0 0 66 33" id="theid">
<g id="Quadri">
<polygon fill="url(#SVGID_1_)" points="23.541,19.298 16.592,19.298 16.592,12.348 23.541,12.348 "/>
<path fill="url(#SVGID_2_)" d="M23.327,15.869c0,1.455,0.062,2.939,0.062,2.939c0,0.168-0.107,0.275-0.245,0.275h-6.016
c-0.138,0-0.229-0.122-0.245-0.275c0,0-0.168-1.271-0.168-3.199s0.168-2.847,0.168-2.847c0.016-0.153,0.107-0.275,0.245-0.275
h6.016c0.138,0,0.245,0.123,0.245,0.275C23.388,12.746,23.327,14.415,23.327,15.869z"/>
<g>
<g>
<path fill="url(#SVGID_3_)" d="M21.98,14.231c-0.429,0.245-0.551,0.26-1.026,0.551l0.031-0.061
c0.245-0.26,0.352-0.383,0.505-0.612c-0.428,0.031-1.056,0.077-1.5,0.168l0,0l0,0l0,0l0.031-0.046
c0.398-0.199,1.163-0.398,1.546-0.444c-0.092-0.138-0.857-0.551-1.041-0.628l0,0l0,0l0,0l0.016-0.046
c0.582,0.062,1.347,0.337,1.668,0.536c0.138-0.046,0.291-0.046,0.551-0.076c0,0-0.046,0.153-0.322,0.352l0,0l0,0l0,0
c0.077,0.184-0.092,1.24-0.245,1.515l0,0l0,0l0,0C22.194,15.012,22.148,14.46,21.98,14.231z"/>
<path fill="url(#SVGID_4_)" d="M18.842,17.981l0.015-0.046c-0.229-0.092-0.459-0.153-0.643-0.337l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.061-0.169,0.123-0.291,0.229-0.444l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0.015-0.046c-0.199,0.03-0.367,0.107-0.536,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.138-0.229-0.184-0.551-0.26-0.857
l-0.015,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.031,0.352-0.046,0.597,0,0.873l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.138,0.046-0.26,0.046-0.383,0.092l-0.015,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.184,0.107,0.321,0.199,0.536,0.291l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.107,0.229,0.229,0.397,0.413,0.581
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0.016-0.046c-0.031-0.138-0.077-0.244-0.062-0.397l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0C18.398,17.936,18.597,17.966,18.842,17.981z"/>
<path fill="url(#SVGID_5_)" d="M19.485,14.491c0,0-0.092,0.168-0.168,0.382h-0.015l0,0l0,0c0.536,0.077,1.041,0.291,1.163,0.368
l-0.015,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.566-0.107-0.857-0.092-1.056-0.077l0,0l0,0l0,0
c-0.214,0.031-0.245,0.046-0.245,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.123,0.26-0.199,0.689-0.229,0.842l-0.016,0.046l0,0l0,0
l0,0l0,0l0,0l0,0l0,0c-0.107-0.245-0.245-0.735-0.245-0.735l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.275,0.153-0.918,0.75-0.918,0.75l0,0
l0,0l0,0l0,0l0,0l0,0l0,0c0.352-0.705,0.719-1.026,0.719-1.026l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.122-0.122-0.444-0.184-0.688-0.199l0,0l0,0l0,0l0.015-0.046c0.153-0.046,0.459-0.062,0.658-0.077l0,0l0,0l0,0l0,0l0,0l0,0
l0,0c0.245,0,0.383,0,0.383,0l0,0l0,0l0,0C19.041,14.66,19.362,14.506,19.485,14.491z"/>
<path fill="url(#SVGID_6_)" d="M20.158,17.537c-0.107,0.153-0.214,0.275-0.337,0.413l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.184,0.046-0.398,0.031-0.566,0.031
l-0.016,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0c0.123,0.061,0.245,0.106,0.383,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.107,0.092-0.245,0.168-0.352,0.245l-0.015,0.046l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.214-0.046,0.505-0.139,0.719-0.276l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.107,0,0.214,0,0.291-0.015l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0.016-0.046c-0.016-0.046-0.062-0.077-0.077-0.153l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.199-0.153,0.337-0.291,0.505-0.459l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0.03-0.046c-0.168,0.106-0.367,0.275-0.551,0.367l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
C20.174,17.721,20.174,17.645,20.158,17.537z"/>
</g>
<g>
<path fill="#FFFFFF" d="M22.01,14.185c-0.428,0.245-0.566,0.26-1.025,0.551c0.275-0.291,0.367-0.413,0.536-0.673
c-0.429,0.015-1.056,0.077-1.5,0.168l0,0l0,0l0,0c0.383-0.214,1.163-0.444,1.562-0.49c-0.092-0.123-0.857-0.536-1.041-0.628l0,0
l0,0l0,0c0.597,0.046,1.347,0.275,1.699,0.49c0.138-0.046,0.291-0.046,0.551-0.076l0,0l0,0l0,0
c-0.061,0.107-0.077,0.184-0.321,0.352l0,0l0,0l0,0c0.077,0.184-0.092,1.24-0.245,1.515l0,0l0,0l0,0
C22.209,14.966,22.179,14.415,22.01,14.185z"/>
<path fill="#FFFFFF" d="M18.873,17.936c-0.245-0.092-0.429-0.199-0.612-0.383l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.061-0.169,0.123-0.291,0.229-0.444l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.199,0.03-0.352,0.046-0.521,0.092l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.138-0.245-0.199-0.49-0.275-0.811l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0c-0.031,0.352-0.046,0.597,0,0.873l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.153,0.046-0.275,0.076-0.398,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.184,0.107,0.336,0.199,0.536,0.291l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.107,0.229,0.229,0.397,0.413,0.581l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.046-0.152-0.061-0.275-0.03-0.443l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0C18.413,17.89,18.612,17.92,18.873,17.936z"/>
<path fill="#FFFFFF" d="M19.515,14.445L19.515,14.445L19.515,14.445L19.515,14.445L19.515,14.445
c-0.076,0.107-0.168,0.291-0.184,0.367l0,0l0,0l0,0c0.627,0.092,1.133,0.429,1.133,0.429l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.551-0.107-0.842-0.092-1.056-0.077l0,0l0,0l0,0c-0.199,0.015-0.245,0.046-0.245,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.153,0.321-0.245,0.888-0.245,0.888l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.092-0.245-0.245-0.734-0.245-0.734l0,0l0,0l0,0l0,0l0,0
l0,0l0,0c-0.275,0.153-0.918,0.75-0.918,0.75l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.352-0.705,0.72-1.026,0.72-1.026l0,0l0,0l0,0l0,0
l0,0l0,0l0,0c-0.123-0.122-0.444-0.184-0.689-0.199l0,0l0,0l0,0c0.123-0.046,0.444-0.107,0.689-0.123l0,0l0,0l0,0l0,0l0,0l0,0
l0,0c0.245,0,0.382,0,0.382,0l0,0l0,0l0,0C19.071,14.613,19.393,14.46,19.515,14.445z"/>
<path fill="#FFFFFF" d="M20.189,17.491c-0.107,0.153-0.214,0.275-0.337,0.413l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.214,0.062-0.383,0.077-0.597,0.077l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.122,0.061,0.245,0.106,0.382,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.138,0.122-0.245,0.198-0.382,0.291l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.214-0.047,0.505-0.139,0.719-0.276l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.107,0,0.214,0,0.291-0.015l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.015-0.062-0.03-0.107-0.046-0.199l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.199-0.153,0.352-0.291,0.505-0.459l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.184,0.122-0.337,0.214-0.536,0.306l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0C20.189,17.675,20.189,17.599,20.189,17.491z"/>
</g>
</g>
</g>
<path d="M25.278,12.936c0.022,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022H26.4c0.55,0,1.133-0.176,1.133-0.66
c0-0.308-0.22-0.539-0.638-0.66c0.308-0.077,0.517-0.297,0.517-0.539c0-0.396-0.462-0.55-0.891-0.561h-1.243V12.936z M26.147,13.189
c0.473,0,0.649,0.099,0.649,0.352c0,0.066-0.022,0.132-0.066,0.176c-0.088,0.11-0.264,0.165-0.495,0.154h-0.011l-0.132,0.341h0.132
c0.264-0.011,0.484,0.077,0.594,0.22c0.055,0.066,0.077,0.143,0.077,0.22c0,0.264-0.231,0.407-0.693,0.407c-0.077,0-0.209,0-0.286,0
c-0.022-0.352-0.022-0.836-0.022-0.979c0-0.165,0.011-0.55,0.022-0.869C25.982,13.189,26.07,13.189,26.147,13.189z"/>
<path d="M30.129,12.914h-0.55l0.022,0.605c0.011,0.308,0.022,0.616,0.044,0.913l0,0l0,0c-0.033-0.088-0.066-0.143-0.231-0.385
c0-0.011-0.572-0.88-0.77-1.133v-0.011h-0.638v0.022c0.022,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h0.561
V15.29c-0.033-0.594-0.033-1.188-0.033-1.76l0,0c0.022,0.066,0.044,0.132,0.132,0.264c0.011,0.011,0.979,1.43,1.034,1.518
l0.011,0.011h0.451v-0.022c-0.033-0.308-0.033-1.034-0.033-1.243c0-0.231,0.011-0.869,0.033-1.122v-0.022H30.129z"/>
<path d="M30.789,12.936c0.022,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h0.671v-0.022
c-0.022-0.22-0.033-0.649-0.033-0.979c0.033,0,0.121,0.011,0.121,0.011h0.099c0.891,0,1.32-0.242,1.32-0.726
c0-0.561-0.605-0.693-1.111-0.704H30.8L30.789,12.936z M31.614,13.211c0.319,0,0.539,0.055,0.638,0.187
c0.044,0.066,0.077,0.132,0.077,0.22c0,0.352-0.396,0.429-0.726,0.429h-0.132c0,0-0.033,0-0.055-0.011c0-0.077,0-0.187,0-0.308
c0-0.154,0-0.33,0.011-0.495C31.46,13.211,31.537,13.211,31.614,13.211z"/>
<path d="M34.243,12.936c0.022,0.253,0.032,0.891,0.032,1.122c0,0.209,0,0.935-0.032,1.243v0.022h0.671v-0.022
c-0.021-0.22-0.033-0.649-0.033-0.979c0.033,0,0.121,0.011,0.121,0.011h0.1c0.891,0,1.319-0.242,1.319-0.726
c0-0.561-0.604-0.693-1.11-0.704h-1.057L34.243,12.936z M35.068,13.211c0.318,0,0.539,0.055,0.648,0.187
c0.045,0.066,0.077,0.132,0.077,0.22c0,0.352-0.396,0.429-0.726,0.429h-0.133c0,0-0.033,0-0.055-0.011c0-0.077,0-0.187,0-0.308
c0-0.154,0-0.33,0.012-0.495C34.914,13.211,34.991,13.211,35.068,13.211z"/>
<path d="M37.313,12.914L37.313,12.914l-0.012,0.011c-0.121,0.341-0.935,2.101-1.056,2.376l-0.011,0.033h0.582v-0.011
c0.056-0.165,0.111-0.352,0.188-0.55c0.021,0,0.473-0.011,0.473-0.011h0.396c0,0,0.066,0,0.088,0
c0.109,0.264,0.188,0.462,0.221,0.561v0.011h0.67l-1.078-2.42h-0.01H37.313z M37.477,13.629c0.056,0.11,0.188,0.44,0.353,0.825
c-0.022,0-0.056,0-0.056,0h-0.297c0,0-0.308,0-0.352-0.011C37.246,14.146,37.367,13.86,37.477,13.629z"/>
<path d="M39.105,12.936c0.021,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h0.67v-0.022
c-0.032-0.308-0.032-1.034-0.032-1.243c0-0.165,0.011-0.55,0.022-0.847C39.82,13.2,39.896,13.2,39.952,13.2
c0.319-0.011,0.539,0.055,0.638,0.187c0.044,0.055,0.077,0.132,0.077,0.22c0,0.275-0.265,0.418-0.506,0.429
c-0.077,0-0.144-0.011-0.144-0.011l-0.043-0.011l0.032,0.044c0.231,0.352,0.595,0.957,0.748,1.243v0.011h0.726l-0.021-0.033
c-0.021-0.044-0.495-0.737-0.693-1.034c0,0-0.011-0.011-0.011-0.022c0.363-0.11,0.55-0.319,0.55-0.638
c0-0.561-0.604-0.693-1.111-0.704h-1.055L39.105,12.936z"/>
<path d="M42.416,12.914h-0.648v0.022c0.021,0.253,0.032,0.891,0.032,1.122c0,0.209,0,0.935-0.032,1.243v0.022h0.67v-0.022
c-0.033-0.308-0.033-1.034-0.033-1.243c0-0.231,0.012-0.869,0.033-1.122v-0.022H42.416z"/>
<path d="M43.043,12.936c0.021,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h1.122
c0.55,0,1.133-0.176,1.133-0.66c0-0.308-0.22-0.539-0.638-0.66c0.308-0.077,0.518-0.297,0.518-0.539c0-0.396-0.463-0.55-0.892-0.561
h-1.243V12.936z M43.912,13.189L43.912,13.189c0.473,0,0.648,0.099,0.648,0.352c0,0.066-0.021,0.132-0.065,0.176
c-0.088,0.11-0.265,0.165-0.495,0.154h-0.012l-0.131,0.341h0.131c0.265-0.011,0.484,0.077,0.595,0.22
c0.056,0.066,0.077,0.143,0.077,0.22c0,0.264-0.23,0.407-0.693,0.407c-0.076,0-0.209,0-0.285,0
c-0.012-0.352-0.022-0.836-0.022-0.979c0-0.165,0.011-0.55,0.022-0.869C43.747,13.189,43.835,13.189,43.912,13.189z"/>
<path d="M46.959,12.914h-0.451v0.011c-0.132,0.363-0.99,2.222-1.056,2.376l-0.011,0.033h0.582v-0.011
c0.056-0.165,0.11-0.352,0.188-0.55c0.021,0,0.473-0.011,0.473-0.011l0.396,0.011c0,0,0.066,0,0.088,0
c0.1,0.264,0.176,0.462,0.221,0.561v0.011h0.67L46.959,12.914L46.959,12.914z M46.684,13.629c0.055,0.11,0.188,0.44,0.353,0.814
c-0.022,0-0.056,0-0.056,0h-0.297c0,0-0.308-0.011-0.352-0.011C46.453,14.135,46.574,13.86,46.684,13.629z"/>
<path d="M48.234,13.541c0,0.429,0.43,0.594,0.804,0.748c0.297,0.121,0.594,0.242,0.594,0.44c0,0.066-0.011,0.11-0.044,0.154
c-0.066,0.088-0.209,0.121-0.439,0.11c-0.221-0.011-0.474-0.088-0.76-0.209l-0.121-0.055v0.099v0.44l0.078,0.022l0.043,0.011
c0.143,0.033,0.407,0.099,0.682,0.099c0.716,0,1.134-0.286,1.134-0.748c0-0.44-0.44-0.616-0.825-0.77
c-0.286-0.11-0.583-0.231-0.583-0.418c0-0.055,0-0.22,0.363-0.22c0.274,0,0.538,0.11,0.682,0.176l0.144,0.055v-0.088v-0.44
l-0.133-0.022c-0.131-0.022-0.363-0.066-0.604-0.066C48.643,12.826,48.234,13.112,48.234,13.541z"/>
<path d="M26.323,16.379c0.506,0,1.1,0.143,1.1,0.693c0,0.308-0.176,0.517-0.539,0.627c0.055,0.099,0.627,0.979,0.726,1.066h-0.715
c-0.154-0.297-0.517-0.902-0.77-1.287c0.044,0.012,0.11,0.012,0.187,0.012c0.209,0,0.506-0.154,0.506-0.43
c0-0.34-0.418-0.407-0.627-0.407c-0.11,0-0.209,0.011-0.264,0.011c-0.011,0.297-0.022,0.671-0.022,0.836
c0,0.209,0,0.913,0.033,1.254h-0.66c0.033-0.33,0.044-0.759,0.044-1.254c0-0.418,0-0.913-0.033-1.133h1.034V16.379z"/>
<path d="M29.766,16.379v0.352c-0.33-0.033-0.66-0.033-1.001-0.033c-0.088,0-0.165,0-0.286,0.011
c-0.011,0.22-0.011,0.495-0.011,0.682l0.869-0.021v0.363l-0.88-0.022c0,0.209,0.011,0.506,0.022,0.759
c0.451-0.011,0.902-0.011,1.342-0.033v0.342H27.83c0.033-0.33,0.033-1.045,0.033-1.254c0-0.231-0.011-0.87-0.033-1.145H29.766z"/>
<path d="M31.548,16.379c0.088,0.242,0.88,1.991,1.067,2.387h-0.66c-0.033-0.109-0.121-0.308-0.22-0.561
c-0.132,0-0.275-0.012-0.473-0.012c-0.176,0-0.319,0-0.473,0.012c-0.077,0.197-0.132,0.385-0.187,0.561H30.03
c0.132-0.297,0.935-2.035,1.067-2.387H31.548z M31.603,17.887c-0.154-0.375-0.297-0.693-0.341-0.814
c-0.11,0.23-0.231,0.506-0.352,0.814c0.099,0,0.242,0.01,0.352,0.01C31.372,17.896,31.482,17.896,31.603,17.887z"/>
<path d="M34.684,18.766h-1.871c0.033-0.33,0.033-1.045,0.033-1.254c0-0.23-0.011-0.869-0.033-1.144h0.66
c-0.022,0.275-0.033,0.901-0.033,1.144c0,0.154,0,0.605,0.011,0.946h0.352c0.363,0,0.627-0.022,0.881-0.044V18.766z"/>
<path d="M37.73,16.379v0.352c-0.33-0.033-0.66-0.033-1.002-0.033c-0.088,0-0.164,0-0.285,0.011c-0.012,0.22-0.012,0.495-0.012,0.682
l0.869-0.021v0.363l-0.88-0.022c0,0.209,0.011,0.506,0.022,0.759c0.451-0.011,0.902-0.011,1.342-0.033v0.342h-1.991
c0.033-0.33,0.033-1.045,0.033-1.254c0-0.231-0.011-0.87-0.033-1.145H37.73z"/>
<path d="M39.139,16.335c0.297,0,0.561,0.044,0.736,0.088v0.528c-0.209-0.121-0.43-0.22-0.814-0.22c-0.34,0-0.363,0.121-0.363,0.22
c0,0.429,1.387,0.374,1.387,1.133c0,0.473-0.418,0.748-1.122,0.748c-0.319,0-0.604-0.055-0.792-0.121v-0.518
c0.43,0.199,0.693,0.275,0.936,0.275c0.274,0,0.406-0.076,0.406-0.253c0-0.473-1.386-0.396-1.386-1.198
C38.137,16.566,38.533,16.335,39.139,16.335z"/>
<path d="M42.383,16.379v0.352c-0.318-0.033-0.418-0.044-0.781-0.044c-0.011,0.286-0.011,0.67-0.011,0.836
c0,0.209,0,0.924,0.033,1.254h-0.671c0.033-0.33,0.044-1.045,0.044-1.254c0-0.166-0.011-0.55-0.022-0.836
c-0.363,0.011-0.461,0.011-0.781,0.044v-0.352H42.383z"/>
<path d="M43.67,16.379c0.088,0.242,0.88,1.991,1.066,2.387h-0.659c-0.033-0.109-0.121-0.308-0.22-0.561
c-0.133,0-0.275-0.012-0.474-0.012c-0.176,0-0.319,0-0.473,0.012c-0.077,0.197-0.132,0.385-0.187,0.561h-0.572
c0.132-0.297,0.935-2.035,1.066-2.387H43.67z M43.725,17.887c-0.154-0.375-0.297-0.693-0.341-0.814
c-0.11,0.23-0.231,0.506-0.353,0.814c0.1,0,0.242,0.01,0.353,0.01S43.615,17.896,43.725,17.887z"/>
<path d="M46.673,16.379v0.352c-0.319-0.033-0.418-0.044-0.78-0.044c-0.012,0.286-0.012,0.67-0.012,0.836
c0,0.209,0,0.924,0.033,1.254h-0.671c0.032-0.33,0.044-1.045,0.044-1.254c0-0.166-0.012-0.55-0.021-0.836
c-0.363,0.011-0.463,0.011-0.781,0.044v-0.352H46.673z"/>
<path d="M48.961,16.379v0.352c-0.33-0.033-0.66-0.033-1.001-0.033c-0.088,0-0.165,0-0.286,0.011
c-0.011,0.22-0.011,0.495-0.011,0.682l0.868-0.021v0.363l-0.879-0.022c0,0.209,0.011,0.506,0.021,0.759
c0.451-0.011,0.902-0.011,1.342-0.033v0.342h-1.99c0.033-0.33,0.033-1.045,0.033-1.254c0-0.231-0.012-0.87-0.033-1.145H48.961z"/>
</symbol>
</svg>
Edit: Clearified my question and updated it to my knowledge.