Styling an SVG embedded in an object - html

<object>
#document
<svg></svg>
</object>
I want to style the svg's width to be 100% of the parent but since it's technically in a different document I'm having troubles accomplishing that. How would I add width: 100% to the svg element using any means necessary?

Style the object to have your width of 100%, then edit the SVG to have a width of 100%. You can see in the xml for the svg, we have a height and width declaration which are valid for your purposes.
Here, we're setting the object to 100% width of an 80% container to illustrate the effect.
.falsy-body {
width: 80%;
background-color: lightgray;
}
.falsy-body object {
width: 100%;
}
<div class="falsy-body">
<object>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Livello_1" x="0px" y="0px" width="100%" height="100%" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856 c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182 c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258 c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333 c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257 C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076 C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197 c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0 c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756 c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999 c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098 c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794 c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523 c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013 c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41 c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359 c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041 c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825 c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999 c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756 c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285 c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01 C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756 c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267 c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485 c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933 c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765 c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141 C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513 c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772 c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803 C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</object>
</div>

Related

SVG gradient passes gradient color to the next SVG

I have an issue with SVG icons. The first SVG icon passes its color to the next one like that:
The second icon should have red gradient.
Here's a snippet example:
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
<path d="M31.7628 63.2679L59.7926 85.5881L98.3475 34.6986" stroke="white" stroke-width="18"/>
<defs>
<linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#26A212" stop-opacity="0.4"/>
<stop offset="0.0001" stop-color="#26A212" stop-opacity="0.47"/>
<stop offset="1" stop-color="#26A212"/>
</linearGradient>
</defs>
</svg>
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
<line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/>
<line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/>
<defs>
<linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#26A212" stop-opacity="0.4"/>
<stop offset="0.0001" stop-color="#B81818" stop-opacity="0.47"/>
<stop offset="1" stop-color="#B81818"/>
</linearGradient>
</defs>
</svg>
When I remove the first icon, color of failure icon is red as expected:
Here's a snippet example:
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
<line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/>
<line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/>
<defs>
<linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#26A212" stop-opacity="0.4"/>
<stop offset="0.0001" stop-color="#B81818" stop-opacity="0.47"/>
<stop offset="1" stop-color="#B81818"/>
</linearGradient>
</defs>
</svg>
I use https://figma.com for creating icons and I export these icons as SVG. Do you have any idea what's wrong with this?
As per Danny '365CSI' Engelman. The id's was the same when we give each element this own unique id this is the result. Thanx Danny i also overlooked the id.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
</style>
</head>
<body>
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/>
<path d="M31.7628 63.2679L59.7926 85.5881L98.3475 34.6986" stroke="white" stroke-width="18"/>
<defs>
<linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#26A212" stop-opacity="0.4"/>
<stop offset="0.0001" stop-color="#26A212" stop-opacity="0.47"/>
<stop offset="1" stop-color="#26A212"/>
</linearGradient>
</defs>
</svg>
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="64" cy="64" r="64" fill="url(#paint01_linear)"/>
<line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/>
<line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/>
<defs>
<linearGradient id="paint01_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse">
<stop stop-color="red" stop-opacity="0.4"/>
<stop offset="0.0001" stop-color="red" stop-opacity="0.47"/>
<stop offset="1" stop-color="red"/>
</linearGradient>
</defs>
</svg>
</body>
</html>

How to force SVG to be bounded by container element?

How can I make this svg stay within the bounds of the container element?
Here without any CSS, when the viewport is made wide the svg overflows in the y dimension.
.container {
height: 200px;
background-color: gray;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>
Here I have tried some positioning magic, but that doesn't work either. I have tried some different things but am out of ideas.
.container {
height: 200px;
background-color: gray;
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
right: 100%;
bottom: 100%;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>
I know this is not what you asked for, but it could help, it's simple, and it will fit perfectly.
.container {
height:100px;
width:100px;
background-color:grey;
}
svg {
height:100px;
width:100px;
}
It depends on what you mean. If you want the SVG to be clipped off at the edges of the container, you can just add overflow: hidden to the container.
.container {
height: 200px;
background-color: gray;
position: relative;
overflow: hidden;
}
svg {
position: absolute;
left: 0;
top: 0;
right: 100%;
bottom: 100%;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>
If, instead, you want the SVG to resize to fit the container, you can add height: 100% to the SVG.
.container {
height: 200px;
background-color: gray;
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
right: 100%;
bottom: 100%;
height: 100%;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>

How to keep SVG the same size during browser zoom in/out

I have a landing page with an SVG image as the background. I'd like to lock its size in place so if the browser is zoomed in or out it doesn't change. It looks crappy zoomed out.k
Here's an svg example from Twitter of the functionality I'm talking about. If you open this svg code in a browser, the twitter bird doesn't change size if you command&+/- and zoom out.
<svg class="twitterIcon-bird" viewBox="0 0 1208 982" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
<title>bird</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Final-Horizon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-286.000000, -117.000000)" fill-rule="nonzero" fill="#1B95E0">
<path d="M1493.75308,233.195911 C1449.31783,252.922544 1401.56126,266.207828 1351.43951,272.19627 C1402.61804,241.549536 1441.92034,192.987798 1460.3889,135.116296 C1412.53168,163.498493 1359.49119,184.130942 1303.02874,195.252335 C1257.88897,147.093181 1193.42514,117 1122.16771,117 C962.190754,117 844.636121,266.258151 880.768067,421.202806 C674.896491,410.886582 492.324484,312.253414 370.089808,162.341063 C305.17308,273.705962 336.423691,419.391176 446.731805,493.16476 C406.171431,491.856361 367.925917,480.734968 334.561738,462.165765 C331.844294,576.95263 414.122472,684.342008 533.287442,708.245454 C498.413572,717.706186 460.218381,719.9204 421.368991,712.47259 C452.871217,810.904465 544.358512,882.514158 652.854997,884.52708 C548.686294,966.201382 417.443793,1002.68559 286,987.186091 C395.653915,1057.48739 525.940278,1098.50067 665.838342,1098.50067 C1125.89162,1098.50067 1385.81015,709.956437 1370.10936,361.469352 C1418.52012,326.494836 1460.53987,282.864756 1493.75308,233.195911 Z" id="bird"></path>
</g>
</g>
</svg>
Here's my image's svg info that I'd like to behave similarly. You might need to copy and paste this into a file and view in a browser. It's a curved image with multiple layers.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="18.4268546%" y1="27.9722359%" x2="82.7977891%" y2="77.3056038%" id="linearGradient-1">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="18.4268546%" y1="28.295015%" x2="82.7977891%" y2="76.9054869%" id="linearGradient-2">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M0.882548395,15.7999936 L1.20671504,819.366633 C336.735572,860.919994 594.34158,794.683198 774.024741,620.656245 C932.62388,467.049615 996.276998,527.683301 1151.1184,531.228148 C1305.9598,534.772995 1508.44994,684.094916 1631.51564,783.962916 C1713.55944,850.541583 1650.01507,594.487275 1440.88255,15.7999936 L0.882548395,15.7999936 Z" id="path-3"></path>
<linearGradient x1="10.0537047%" y1="28.3217065%" x2="117.215768%" y2="106.344139%" id="linearGradient-5">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M12.04293,25 L6.90201099,735.285212 C159.518234,768.654318 306.462792,773.140482 447.735683,748.743705 C773.312884,692.518943 874.037615,533.915834 1153.33439,533.901355 C1339.53225,533.891702 1497.8173,596.686321 1628.18954,722.285212 L1464.16913,25 L12.04293,25 Z" id="path-6"></path>
</defs>
<g id="Landing-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Landing-page---v2">
<g id="Bitmap" transform="translate(-12.000000, -25.000000)">
<path d="M60.8501735,0.107667822 L60.8501735,687.900102 C293.733255,762.384295 480.221381,787.428003 620.314551,763.031226 C943.172971,706.806464 1004.024,482.419288 1280.98847,482.404809 C1557.95294,482.39033 1520.08109,690.064545 1643.14678,789.932545 C1725.19058,856.511212 1677.75838,593.236253 1500.85017,0.107667822 L60.8501735,0.107667822 Z" id="Mask-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.12"></path>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask-Copy-2" fill="url(#linearGradient-2)" fill-rule="nonzero" opacity="0.12" xlink:href="#path-3"></use>
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-5)" fill-rule="nonzero" xlink:href="#path-6"></use>
</g>
</g>
</g>
</svg>
What changes can I make to my svg file to make it behave like the twitter svg?
This will give you the viewBox, now I leave it to you to put your markup in that viewbox - since it is off center.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 5000 5000">
<defs>
<linearGradient x1="18.4268546%" y1="27.9722359%" x2="82.7977891%" y2="77.3056038%" id="linearGradient-1">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="18.4268546%" y1="28.295015%" x2="82.7977891%" y2="76.9054869%" id="linearGradient-2">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M0.882548395,15.7999936 L1.20671504,819.366633 C336.735572,860.919994 594.34158,794.683198 774.024741,620.656245 C932.62388,467.049615 996.276998,527.683301 1151.1184,531.228148 C1305.9598,534.772995 1508.44994,684.094916 1631.51564,783.962916 C1713.55944,850.541583 1650.01507,594.487275 1440.88255,15.7999936 L0.882548395,15.7999936 Z" id="path-3"></path>
<linearGradient x1="10.0537047%" y1="28.3217065%" x2="117.215768%" y2="106.344139%" id="linearGradient-5">
<stop stop-color="#1E87F0" offset="0%"></stop>
<stop stop-color="#1E3E5C" offset="100%"></stop>
</linearGradient>
<path d="M12.04293,25 L6.90201099,735.285212 C159.518234,768.654318 306.462792,773.140482 447.735683,748.743705 C773.312884,692.518943 874.037615,533.915834 1153.33439,533.901355 C1339.53225,533.891702 1497.8173,596.686321 1628.18954,722.285212 L1464.16913,25 L12.04293,25 Z" id="path-6"></path>
</defs>
<g id="Landing-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Landing-page---v2">
<g id="Bitmap" transform="translate(-12.000000, -25.000000)">
<path d="M60.8501735,0.107667822 L60.8501735,687.900102 C293.733255,762.384295 480.221381,787.428003 620.314551,763.031226 C943.172971,706.806464 1004.024,482.419288 1280.98847,482.404809 C1557.95294,482.39033 1520.08109,690.064545 1643.14678,789.932545 C1725.19058,856.511212 1677.75838,593.236253 1500.85017,0.107667822 L60.8501735,0.107667822 Z" id="Mask-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.12"></path>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask-Copy-2" fill="url(#linearGradient-2)" fill-rule="nonzero" opacity="0.12" xlink:href="#path-3"></use>
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<use id="Mask" fill="url(#linearGradient-5)" fill-rule="nonzero" xlink:href="#path-6"></use>
</g>
</g>
</g>
</svg>

svg fill path animation issue

I'm working on svg animation and trying to make the letters filled just once. When they are filled, animation must stop.
<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" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve">
<linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="1" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s" begin="0s"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s" begin="0s"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<g id="preventive">
<g>
<path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7
V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5
c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/>
<path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9
c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8
c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/>
<path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/>
<path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/>
<path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/>
<path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/>
<path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/>
<path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/>
<path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/>
<path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/>
</g>
</g>
</svg>
I've used this exampl, but it doesn't work the way I want it to
Here is my js fiddle
Does anyone have any idea how I can get this to work?
If you don't want it to repeat then don't use repeatCount.
If you want it to freeze as it is post animation use fill="freeze"
I've also adjusted the values of the animation so the stop offsets just go from 0 to 1
<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" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve">
<linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="1" stop-color="royalblue">
<animate attributeName="offset" values="0;1" dur="4s" begin="0s" fill="freeze"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="royalblue">
<animate attributeName="offset" values="0;1" dur="4s" begin="0s fill="freeze"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<g id="preventive">
<g>
<path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7
V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5
c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/>
<path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9
c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8
c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/>
<path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/>
<path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/>
<path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/>
<path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/>
<path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/>
<path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/>
<path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/>
<path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/>
</g>
</g>
</svg>

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.