Why SVG doesn't appear correctly in Firefox? - svg
My SVG logo appears fine in Chrome and Safari. It is made in Illustrator (not by me, I don't know the version). But in FF it is looking weird. Can't find out the reason. I do not use any filters, just SVG image. I've noticed, if I implement it with 'img' tag it looks fine, but becomes too little. Here's the code:
<span>
<a href="#">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="190px" height="42px" viewBox="93.496 77.153 190 42"
overflow="visible" enable-background="new 93.496 77.153 190 42" xml:space="preserve">
<defs></defs>
<g>
<defs>
<path class="logotype" id="SVGID_2_" d="M125.99,85.758c-0.725-0.005-1.443-0.016-2.154-0.034c0.072-1.776,0.818-3.368,2.002-4.549
c1.244-1.236,2.953-2,4.854-2c1.898,0,3.609,0.764,4.854,2c1.102,1.1,1.829,2.561,1.978,4.193
c-3.235,0.256-6.702,0.396-10.312,0.396C126.806,85.765,126.398,85.762,125.99,85.758 M124.41,79.744
c-1.531,1.522-2.508,3.611-2.596,5.918c-4.139-0.158-8.042-0.497-11.571-0.982l-1.538,7.253c5.02,0.72,10.882,1.135,17.144,1.135
c1.814,0,3.595-0.036,5.331-0.104l4.226,21.692c9.233,0.162,17.411,1.503,22.897,3.531l-6.656-35.073
c-3.283,0.903-7.416,1.617-12.107,2.078c-0.195-2.121-1.139-4.029-2.566-5.447c-1.605-1.602-3.832-2.591-6.281-2.591
S126.014,78.142,124.41,79.744"/>
</defs>
<clipPath id="SVGID_3_">
<use xlink:href="#SVGID_2_" overflow="visible"/>
</clipPath>
<rect x="102.238" y="77.153" clip-path="url(#SVGID_3_)" fill="#C80711" width="59.287" height="52.211"/>
<path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M137.781,150.214l-13.065-12.074l-13.067,12.074l1.295-17.745l-17.588-2.688
l14.68-10.052l-8.865-15.427l17.012,5.211l6.534-16.55l6.534,16.55l17.013-5.211l-8.866,15.427l14.682,10.052l-17.59,2.688
L137.781,150.214z M124.716,133.246l8.821,8.153l-0.873-11.981l11.873-1.812l-9.912-6.787l5.986-10.414l-11.484,3.517
l-4.411-11.171l-4.411,11.171l-11.485-3.517l5.986,10.414l-9.911,6.787l11.873,1.812l-0.873,11.981L124.716,133.246z"/>
<path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M146.598,169.522l-21.882-20.223l-21.88,20.223l2.166-29.714l-29.449-4.5
l24.58-16.832L85.289,92.644l28.487,8.724l10.939-27.71l10.939,27.71l28.488-8.724l-14.846,25.832l24.583,16.832l-29.451,4.5
L146.598,169.522z M124.716,144.407l17.634,16.298l-1.746-23.947l23.736-3.627l-19.812-13.566l11.965-20.818l-22.958,7.032
l-8.818-22.334l-8.817,22.334L92.94,98.746l11.964,20.818L85.092,133.13l23.736,3.627l-1.746,23.947L124.716,144.407z"/>
<path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M94.051,188.764l3.037-41.644l-41.273-6.305l34.45-23.59L69.461,81.023
l39.923,12.227l15.332-38.834l15.333,38.834l39.924-12.225l-20.805,36.201l34.451,23.59l-41.275,6.305l3.037,41.644l-30.665-28.338
L94.051,188.764z M124.716,155.534l26.419,24.413l-2.615-35.878l35.559-5.431l-29.682-20.324l17.926-31.188L137.925,97.66
l-13.209-33.461L111.507,97.66L77.111,87.125l17.924,31.188l-29.681,20.324l35.558,5.431l-2.615,35.878L124.716,155.534z"/>
<path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M85.701,207.058l3.863-52.984l-52.515-8.022l43.834-30.014L54.411,69.977
l50.796,15.556l19.509-49.412l19.507,49.412l50.798-15.556l-26.472,46.061l43.833,30.014l-52.515,8.022l3.863,52.984
l-39.015-36.056L85.701,207.058z M124.716,166.11l34.771,32.131l-3.443-47.217l46.8-7.15l-39.064-26.748l23.59-41.046
l-45.268,13.863l-17.386-44.037L107.33,89.943L62.062,76.078l23.592,41.048l-39.063,26.748l46.799,7.15l-3.442,47.217
L124.716,166.11z"/>
<path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M171.932,225.026l-47.216-43.637l-47.217,43.637l4.677-64.124l-63.556-9.708
l53.048-36.323L39.634,59.128l61.474,18.825l23.608-59.8l23.61,59.8l61.472-18.825l-32.035,55.742l53.046,36.323l-63.552,9.708
L171.932,225.026z M124.716,176.497l42.971,39.712l-4.254-58.356l57.838-8.837l-48.277-33.056l29.154-50.731l-55.945,17.135
l-21.487-54.424l-21.487,54.424L47.285,65.228l29.153,50.731l-48.277,33.056L86,157.852l-4.254,58.356L124.716,176.497z"/>
<path class="logotype" clip-path="url(#SVGID_3_)" fill="#E74200" d="M180.219,243.18l-55.503-51.295L69.212,243.18l5.497-75.378L0,156.389
l62.357-42.699L24.701,48.164l72.264,22.133L124.716,0l27.753,70.296l72.263-22.131l-37.658,65.524l62.357,42.699l-74.708,11.413
L180.219,243.18z M124.716,186.994l51.257,47.369l-5.076-69.61l68.994-10.541l-57.587-39.433l34.777-60.514l-66.734,20.438
l-25.63-64.917l-25.63,64.918L32.352,54.265l34.777,60.514L9.541,154.211l68.993,10.541l-5.075,69.61L124.716,186.994z"/>
</g>
<g>
<defs>
<path class="logotype" id="SVGID_1_" d="M98.551,89.699l-4.895,28.619c5.639-1.504,13.049-2.419,21.174-2.419c8.184,0,15.645,0.927,21.295,2.451
l-4.945-25.388c-1.736,0.068-3.517,0.104-5.331,0.104c-11.22,0-21.155-1.329-27.261-3.368H98.551z"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect x="87.936" y="84.597" transform="matrix(1 0.0028 -0.0028 1 0.2934 -0.3189)" clip-path="url(#SVGID_4_)" fill="#F8B700" width="53.723" height="41.486"/>
<path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,93.814c-6.564,0-9.894-1.302-13.111-2.561
c-3.082-1.205-5.994-2.344-11.964-2.344c-5.974,0-8.884,1.139-11.965,2.344c-3.219,1.259-6.547,2.561-13.113,2.561
c-6.567,0-9.894-1.302-13.111-2.561c-3.082-1.205-5.993-2.344-11.964-2.344v-3.151c6.564,0,9.894,1.302,13.111,2.56
c3.082,1.205,5.992,2.345,11.964,2.345s8.884-1.14,11.966-2.345c3.218-1.258,6.544-2.56,13.112-2.56
c6.564,0,9.894,1.302,13.111,2.56c3.082,1.205,5.992,2.345,11.964,2.345V93.814z"/>
<path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,99.516c-6.564,0-9.894-1.301-13.111-2.56
c-3.082-1.205-5.994-2.344-11.964-2.344c-5.974,0-8.884,1.139-11.965,2.344c-3.219,1.259-6.547,2.56-13.113,2.56
c-6.567,0-9.894-1.301-13.111-2.56c-3.082-1.205-5.993-2.344-11.964-2.344v-3.15c6.564,0,9.894,1.3,13.111,2.559
c3.082,1.203,5.992,2.344,11.964,2.344s8.884-1.141,11.966-2.344c3.218-1.259,6.544-2.559,13.112-2.559
c6.564,0,9.894,1.3,13.111,2.559c3.082,1.203,5.992,2.344,11.964,2.344V99.516z"/>
<path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,105.219c-6.564,0-9.894-1.302-13.111-2.562
c-3.082-1.204-5.994-2.343-11.964-2.343c-5.974,0-8.884,1.139-11.965,2.343c-3.219,1.26-6.547,2.562-13.113,2.562
c-6.567,0-9.894-1.302-13.111-2.562c-3.082-1.204-5.993-2.343-11.964-2.343v-3.151c6.564,0,9.894,1.301,13.111,2.561
c3.082,1.205,5.992,2.343,11.964,2.343s8.884-1.138,11.966-2.343c3.218-1.26,6.544-2.561,13.112-2.561
c6.564,0,9.894,1.301,13.111,2.561c3.082,1.205,5.992,2.343,11.964,2.343V105.219z"/>
<path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,110.921c-6.564,0-9.894-1.301-13.111-2.561
c-3.082-1.203-5.994-2.343-11.964-2.343c-5.974,0-8.884,1.14-11.965,2.343c-3.219,1.26-6.547,2.561-13.113,2.561
c-6.567,0-9.894-1.301-13.111-2.561c-3.082-1.203-5.993-2.343-11.964-2.343v-3.151c6.564,0,9.894,1.301,13.111,2.56
c3.082,1.205,5.992,2.343,11.964,2.343s8.884-1.138,11.966-2.343c3.218-1.259,6.544-2.56,13.112-2.56
c6.564,0,9.894,1.301,13.111,2.56c3.082,1.205,5.992,2.343,11.964,2.343V110.921z"/>
<path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,116.625c-6.564,0-9.894-1.303-13.111-2.56
c-3.082-1.207-5.994-2.347-11.964-2.347c-5.974,0-8.884,1.14-11.965,2.347c-3.219,1.257-6.547,2.56-13.113,2.56
c-6.567,0-9.894-1.303-13.111-2.56c-3.082-1.207-5.993-2.347-11.964-2.347v-3.15c6.564,0,9.894,1.303,13.111,2.561
c3.082,1.205,5.992,2.345,11.964,2.345s8.884-1.14,11.966-2.345c3.218-1.258,6.544-2.561,13.112-2.561
c6.564,0,9.894,1.303,13.111,2.561c3.082,1.205,5.992,2.345,11.964,2.345V116.625z"/>
<path class="logotype yellow" clip-path="url(#SVGID_4_)" fill="#FFD303" d="M147.943,122.328c-6.564,0-9.894-1.302-13.111-2.561
c-3.082-1.204-5.994-2.344-11.964-2.344c-5.974,0-8.884,1.14-11.965,2.344c-3.219,1.259-6.547,2.561-13.113,2.561
c-6.567,0-9.894-1.302-13.111-2.561c-3.082-1.204-5.993-2.344-11.964-2.344v-3.15c6.564,0,9.894,1.3,13.111,2.558
c3.082,1.206,5.992,2.345,11.964,2.345s8.884-1.139,11.966-2.345c3.218-1.258,6.544-2.558,13.112-2.558
c6.564,0,9.894,1.3,13.111,2.558c3.082,1.206,5.992,2.345,11.964,2.345V122.328z"/>
</g>
<path class="logotype" fill="#FFFFFF" d="M104.481,98.085c0.056-1.06,0.961-1.873,2.02-1.818c1.061,0.057,1.874,0.962,1.816,2.021
c-0.056,1.059-0.963,1.874-2.021,1.816C105.237,100.049,104.425,99.143,104.481,98.085"/>
<path class="logotype" fill="#FFFFFF" d="M121.512,98.991c0.057-1.06,0.96-1.874,2.021-1.817c1.058,0.057,1.872,0.963,1.816,2.021
c-0.057,1.06-0.963,1.873-2.02,1.816C122.269,100.955,121.454,100.049,121.512,98.991"/>
<path class="logotype" fill="#FFFFFF" d="M122.422,100.533c-0.112,2.086-1.057,3.921-2.504,5.219c-1.448,1.294-3.385,2.037-5.483,1.927
c-2.101-0.112-3.947-1.059-5.25-2.499c-1.302-1.442-2.047-3.367-1.937-5.454l-1.662-0.088c-0.137,2.541,0.779,4.906,2.363,6.659
c1.583,1.755,3.846,2.909,6.396,3.046c2.551,0.134,4.924-0.774,6.684-2.351c1.762-1.575,2.922-3.829,3.058-6.37L122.422,100.533z"/>
<polygon fill="#E50004" points="164.267,111.836 169.359,111.836 169.359,112.818 167.371,112.818 167.371,117.895 166.293,117.895
166.293,112.818 164.267,112.818 "/>
<path class="logotype red" fill="#E50004" d="M173.748,111.731c1.877,0,3.238,1.32,3.238,3.131c0,1.783-1.387,3.127-3.238,3.127
c-1.855,0-3.233-1.337-3.233-3.127C170.515,113.112,171.929,111.731,173.748,111.731 M173.756,117.049
c1.17,0,2.086-0.938,2.086-2.172c0-1.24-0.871-2.18-2.086-2.18c-1.199,0-2.086,0.939-2.086,2.18
C171.67,116.093,172.583,117.049,173.756,117.049"/>
<path class="logotype red" fill="#E50004" d="M180.176,116.137v1.757h-1.068v-6.058h1.854c1.611,0,2.422,0.888,2.422,2.155
c0,1.266-0.803,2.146-2.629,2.146H180.176z M180.176,112.818v2.369h0.707c1.001,0,1.344-0.533,1.344-1.195
c0-0.664-0.336-1.174-1.344-1.174H180.176z"/>
<polygon fill="#E50004" points="185.557,111.836 189.494,111.836 189.494,112.818 186.623,112.818 186.623,117.895 185.557,117.895
"/>
<path class="logotype red" fill="#E50004" d="M193.855,111.731c1.879,0,3.24,1.32,3.24,3.131c0,1.783-1.387,3.127-3.24,3.127s-3.23-1.337-3.23-3.127
C190.625,113.112,192.037,111.731,193.855,111.731 M193.865,117.049c1.174,0,2.084-0.938,2.084-2.172c0-1.24-0.869-2.18-2.084-2.18
c-1.201,0-2.088,0.939-2.088,2.18C191.777,116.093,192.691,117.049,193.865,117.049"/>
<path class="logotype red" fill="#E50004" d="M199.214,111.836h1.939c1.561,0,2.26,0.646,2.26,1.602c0,0.656-0.381,1.122-1.061,1.363
c0.836,0.241,1.223,0.73,1.223,1.379c0,1.076-1.043,1.714-2.422,1.714h-1.939V111.836z M200.285,112.818v1.647h0.766
c0.869,0.008,1.25-0.44,1.25-0.897c0-0.413-0.309-0.75-1.096-0.75H200.285z M200.285,115.231v1.681h0.92
c0.906,0,1.215-0.396,1.215-0.845c0-0.413-0.344-0.836-1.471-0.836H200.285z"/>
<path class="logotype red" fill="#E50004" d="M207.394,113.592c1.828,0,2.629,0.881,2.629,2.147c0,1.268-0.811,2.153-2.422,2.153h-1.854v-6.057h1.068
v1.756H207.394z M207.521,116.912c1.008,0,1.346-0.508,1.346-1.172c0-0.663-0.344-1.196-1.346-1.196h-0.705v2.368H207.521z"/>
<rect x="211.56" y="111.836" fill="#E50004" width="1.068" height="6.057"/>
<polygon fill="#E50004" points="220.744,117.893 219.675,117.893 219.675,114.137 215.873,117.937 215.589,117.937 215.589,111.836
216.658,111.836 216.658,115.706 220.406,111.801 220.744,111.801 "/>
<polygon fill="#E50004" points="231.878,116.912 231.878,111.836 230.81,111.836 230.81,116.912 228.136,116.912 228.136,111.836
227.068,111.836 227.068,117.893 231.414,117.893 231.414,118.552 232.398,118.552 232.482,116.912 "/>
<polygon fill="#E50004" points="234.394,111.836 238.333,111.836 238.333,112.818 235.462,112.818 235.462,114.516 238.066,114.516
238.066,115.463 235.462,115.463 235.462,116.912 238.333,116.912 238.333,117.895 234.394,117.895 "/>
<polygon fill="#E50004" points="244.634,115.507 241.675,115.507 241.675,117.893 240.607,117.893 240.607,111.836 241.675,111.836
241.675,114.559 244.634,114.559 244.634,111.844 245.703,111.844 245.703,117.893 244.634,117.893 "/>
<polygon fill="#E50004" points="247.449,111.836 252.542,111.836 252.542,112.818 250.554,112.818 250.554,117.895 249.476,117.895
249.476,112.818 247.449,112.818 "/>
<path class="logotype" fill="#E50004" d="M255.361,116.137v1.757h-1.068v-6.058h1.854c1.611,0,2.422,0.888,2.422,2.155
c0,1.266-0.803,2.146-2.629,2.146H255.361z M255.361,112.818v2.369h0.707c1.002,0,1.346-0.533,1.346-1.195
c0-0.664-0.336-1.174-1.346-1.174H255.361z"/>
<polygon fill="#E50004" points="219.472,111.126 217.14,111.426 217.14,110.569 219.472,110.569 "/>
<path class="logotype red" fill="#E50004" d="M179.885,93.099c-0.427-1.114-1.057-2.094-1.874-2.91c-0.815-0.814-1.829-1.459-3.011-1.918
c-1.18-0.455-2.529-0.686-4.015-0.686c-1.338,0-2.603,0.251-3.763,0.746c-1.155,0.498-2.18,1.188-3.046,2.051l-0.208,0.211
c0,0,0.322,1.734,2.021,2.366l0.242-0.243c0.611-0.611,1.334-1.098,2.148-1.446c0.811-0.348,1.694-0.524,2.627-0.524
c0.996,0,1.88,0.131,2.625,0.395c0.736,0.262,1.365,0.63,1.873,1.098c0.511,0.465,0.921,1.033,1.224,1.682
c0.228,0.49,0.355,1.18,0.479,1.758c-0.229-0.252-0.679-0.4-1.052-0.453c-0.559-0.076-1.127-0.116-1.686-0.116h-5.823
c0,0-0.592,1.777,0,3.161h5.823c0.498,0,1.01,0.037,1.514,0.109c0.4,0.061,0.877,0.184,1.129,0.49
c-0.176,0.579-0.389,0.968-0.734,1.456c-0.4,0.562-0.879,1.055-1.432,1.459c-0.552,0.403-1.174,0.724-1.85,0.947
c-0.674,0.224-1.385,0.339-2.112,0.339c-1.062,0-2.046-0.23-2.93-0.685c-0.886-0.451-1.646-1.075-2.257-1.856l-0.26-0.329
c-1.424,0.595-1.938,2.635-1.938,2.635l0.174,0.194c0.895,0.99,1.979,1.779,3.213,2.344c1.236,0.568,2.59,0.856,4.02,0.856
c1.336,0,2.598-0.248,3.75-0.737c1.148-0.487,2.162-1.164,3.014-2.017s1.529-1.87,2.018-3.026c0.488-1.16,0.736-2.418,0.736-3.736
C180.525,95.421,180.31,94.208,179.885,93.099"/>
<path class="logotype red" fill="#E50004" d="M200.203,93.099c0.428-1.114,1.059-2.094,1.873-2.91c0.816-0.814,1.83-1.459,3.014-1.918
c1.178-0.455,2.529-0.686,4.014-0.686c1.338,0,2.605,0.251,3.764,0.746c1.154,0.498,2.178,1.188,3.045,2.051l0.207,0.211
c0,0-0.32,1.734-2.02,2.366l-0.242-0.243c-0.611-0.611-1.338-1.098-2.148-1.446c-0.811-0.348-1.697-0.524-2.625-0.524
c-1,0-1.881,0.131-2.627,0.395c-0.734,0.262-1.365,0.63-1.873,1.098c-0.512,0.465-0.922,1.033-1.223,1.682
c-0.23,0.49-0.355,1.18-0.482,1.758c0.23-0.252,0.682-0.4,1.055-0.453c0.559-0.076,1.125-0.116,1.684-0.116h5.824
c0,0,0.592,1.777,0,3.161h-5.824c-0.498,0-1.008,0.037-1.514,0.109c-0.402,0.061-0.875,0.184-1.129,0.49
c0.176,0.579,0.391,0.968,0.734,1.456c0.4,0.562,0.881,1.055,1.432,1.459c0.553,0.403,1.174,0.724,1.852,0.947
c0.674,0.224,1.385,0.339,2.111,0.339c1.062,0,2.047-0.23,2.93-0.685c0.889-0.451,1.646-1.075,2.256-1.856l0.26-0.329
c1.424,0.595,1.939,2.635,1.939,2.635l-0.174,0.194c-0.896,0.99-1.977,1.779-3.211,2.344c-1.24,0.568-2.592,0.856-4.02,0.856
c-1.338,0-2.602-0.248-3.752-0.737c-1.148-0.487-2.162-1.164-3.016-2.017c-0.85-0.853-1.527-1.87-2.016-3.026
c-0.488-1.16-0.736-2.418-0.736-3.736C199.564,95.421,199.781,94.208,200.203,93.099"/>
<path class="logotype red" fill="#E50004" d="M235.472,91.248h6.102v14.592c0,0,1.51,0.681,3.068,0V91.248h6.031c0.674-1.414,0-3.158,0-3.158h-15.201
C235.472,88.089,234.785,89.76,235.472,91.248"/>
<path class="logotype red" fill="#E50004" d="M267.292,95.464c0.252-0.641,0.381-1.37,0.381-2.171c0-0.802-0.129-1.53-0.381-2.17
c-0.252-0.644-0.617-1.2-1.086-1.651c-0.467-0.447-1.039-0.797-1.701-1.032c-0.652-0.231-1.377-0.351-2.16-0.351h-9.121v17.75
c0,0,1.492,0.717,3.139,0v-6.707c0.436-0.21,0.887-0.355,1.344-0.433c0.529-0.089,1.066-0.132,1.602-0.132h3.033
c0.789,0,1.516-0.123,2.168-0.365c0.662-0.244,1.234-0.605,1.703-1.071C266.675,96.666,267.041,96.105,267.292,95.464
M262.33,91.248c0.748,0,1.312,0.154,1.678,0.456c0.35,0.286,0.527,0.821,0.527,1.59c0,1.442-0.701,2.114-2.203,2.114h-3.027
c-0.572,0-1.146,0.037-1.707,0.115c-0.416,0.062-0.828,0.182-1.229,0.365l-0.006-4.641H262.33z"/>
<path class="logotype red" fill="#E50004" d="M274.802,88.105h-1.17l-8.762,17.734c0,0,1.758,0.664,3.404,0l0.529-0.979
c0.047-0.096,1.137-1.521,3.656-1.521h6.246l1.123,2.501c1.346,0.591,3.506,0,3.506,0L274.802,88.105z M277.265,100.177h-3.289
c-1.996,0-2.592,0.282-3.018,0.536l3.105-6.72L277.265,100.177z"/>
<path class="logotype red" fill="#E50004" d="M186.615,88.089l-0.271,2.808c-0.088,0.845-0.197,1.722-0.318,2.601c-0.121,0.858-0.283,1.71-0.477,2.533
c-0.195,0.822-0.445,1.628-0.744,2.396c-0.297,0.768-0.847,1.761-1.291,2.467c-0.31,0.487-0.598,0.873-0.855,1.145
c-0.256,0.268-0.492,0.469-0.713,0.596c-0.211,0.126-0.406,0.206-0.579,0.238c-0.202,0.033-0.39,0.052-0.565,0.052h-0.008
c0,0-0.85,1.702,0,3.16h0.008c0.237,0,0.521-0.016,0.844-0.048c0.337-0.033,0.692-0.107,1.06-0.221
c0.374-0.109,0.758-0.285,1.138-0.511c0.387-0.23,0.752-0.547,1.079-0.941c0.703-0.842,1.308-1.802,1.8-2.856
c0.486-1.046,1.075-2.401,1.404-3.547c0.329-1.145,0.6-2.33,0.8-3.525c0.182-1.082,0.327-2.15,0.434-3.187h4.325v14.591
c0,0,1.777,0.57,3.137,0v-17.75H186.615z"/>
<path class="logotype red" fill="#E50004" d="M228.027,96.486h0.01l-0.008-0.005l0.008-0.008h-0.01l-0.006-0.009l5.844-8.374c0,0-2.352-0.743-3.783,0
l-4.348,6.416h-2.32c-0.965,0-1.328,0.256-1.541,0.474v-6.936c0,0-1.572-0.759-3.137,0v17.762c1.564,0.758,3.137,0,3.137,0V98.16
c0.193-0.23,0.469-0.553,1.545-0.553h1.85l4.814,8.153c1.432,0.741,3.783,0,3.783,0l-5.844-9.263L228.027,96.486z"/>
</svg>
</a>
</span>
Finally I implemented it through <img> tag like this:
<img src="app/svg-icons/logo.svg" alt="logo" height="87px" width="200px" />
But it would be interesting, why it doesn't work with inline implementation.
Do you have other embedded SVGs on the page? If so then read on.
Perhaps the most common cause for problems like this is that you are including multiple SVG images on the page which have clashing id attributes. This can easily happen if you have made the SVGs in an editor like Illustrator, which reuses the same ids for every image it creates.
If you look at the SVG contents, you'll see that the ids in there are "SVGID_1_", "SVGID_2_", "SVGID_3_", etc.
id attributes in an HTML must be unique. How duplicate ids are handled can vary from browser to browser, which is why you are getting different results in FF and Chrome.
The fix is to (manually) edit each id value to make them unique. Don't forget to edit any references to them as well (eg.: the entries like xlink:href="#SVGID_1_").
Related
Cutting out intersecting lines in SVG files using python
I am attempting to generate svgs where all the stuff in the middle of the outer ring of circles is removed. Ideally I would like this to all be in one path. So far I have tried calculating arcs and merging them with circle paths but that gets kinda messy. Is there a way to go through and collapse this all down to just one path or a clean series of paths. [1]: https://i.stack.imgur.com/72PoK.png Edit: Added The code for the svg <svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" fill-rule="evenodd" height="1024" version="1.1" width="1024"> <defs/> <polyline fill="none" points="512,312 512.0,512.0 668,387 512.0,512.0 707,557 512.0,512.0 599,692 512.0,512.0 425,692 512.0,512.0 317,557 512.0,512.0 356,387 512.0,512.0" stroke="green" stroke-width="1"/> <polygon fill="none" points="512,312 668,387 707,557 599,692 425,692 317,557 356,387" stroke="green" stroke-linejoin="bevel" stroke-width="1"/> <circle cx="512.0" cy="512.0" fill="none" r="200" stroke="purple" stroke-width="1"/> <circle cx="512" cy="312" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/> <circle cx="668" cy="387" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/> <circle cx="707" cy="557" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/> <circle cx="599" cy="692" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/> <circle cx="425" cy="692" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/> <circle cx="317" cy="557" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/> <circle cx="356" cy="387" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/> </svg> Im using a module called Svgwrite to generate this
Here's a modified version of your SVG, where a mask has been used to blank out the interior of all your small outer circles. <svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" fill-rule="evenodd" height="1024" version="1.1" width="1024"> <defs> <mask id="blank-circles"> <rect width="100%" height="100%" fill="white"/> <!-- Holes where each of the outer circles are. --> <!-- We are using <use> elements so we don't need to define the circles twice. --> <use xlink:href="#c1" fill="black"/> <use xlink:href="#c2" fill="black"/> <use xlink:href="#c3" fill="black"/> <use xlink:href="#c4" fill="black"/> <use xlink:href="#c5" fill="black"/> <use xlink:href="#c6" fill="black"/> <use xlink:href="#c7" fill="black"/> </mask> </defs> <!-- Mask is applied to all the elements via a parent <g> element --> <g mask="url(#blank-circles)"> <polyline fill="none" points="512,312 512.0,512.0 668,387 512.0,512.0 707,557 512.0,512.0 599,692 512.0,512.0 425,692 512.0,512.0 317,557 512.0,512.0 356,387 512.0,512.0" stroke="green" stroke-width="1"/> <polygon fill="none" points="512,312 668,387 707,557 599,692 425,692 317,557 356,387" stroke="green" stroke-linejoin="bevel" stroke-width="1"/> <circle cx="512.0" cy="512.0" fill="none" r="200" stroke="purple" stroke-width="1"/> <g fill="none" stroke="purple" stroke-width="1"> <!-- fill and stroke properties are moved to a parent <g> so that they aren't applied when referenced from the <mask>. --> <circle id="c1" cx="512" cy="312" r="66.66666666666667"/> <circle id="c2" cx="668" cy="387" r="66.66666666666667"/> <circle id="c3" cx="707" cy="557" r="66.66666666666667"/> <circle id="c4" cx="599" cy="692" r="66.66666666666667"/> <circle id="c5" cx="425" cy="692" r="66.66666666666667"/> <circle id="c6" cx="317" cy="557" r="66.66666666666667"/> <circle id="c7" cx="356" cy="387" r="66.66666666666667"/> </g> </g> </svg>
svg mirror paths without changing coordinates
i have an svg graphic but wanted to mirror it without changing the coordinates of the line/stroke but swap the position of the arrowhead and circle… is there a more efficient way of doing this? one thing that i thought about is changing the angle of each arrowhead and circle but is tedious to do. another suggestion is using transform matrix. does anybody know how to do this? thanks in advance. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg"> <g> <path fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" /> <g fill="#4caf50" id="test"> <polygon class="one" points="201.6,79 202.1,77.7 195.7,75.1 198.8,68.9 197.5,68.3 193.8,75.9"/> <path class="two" d="M461.6,138.1c0.8,1.4,2.7,1.9,4.1,1.1s1.9-2.7,1.1-4.1c-0.8-1.4-2.7-1.9-4.1-1.1 C461.3,134.8,460.8,136.6,461.6,138.1z"/> </g> </g> </svg>
This can be solved with the help of SVG markers. MDN and W3C
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow1" viewBox="0 0 20 20" refX="0" refY="10"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
</marker>
<marker id="circle1" viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="userSpaceOnUse"
markerWidth="10" markerHeight="10">
<circle cx="5" cy="5" r="5" fill="#4caf50"" />
</marker>
</defs
<g>
<path fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" style=" marker-start: url(#circle1); marker-end: url(#arrow1);
fill:none; stroke:green; stroke-width:2; " />
</svg>
Update
The angle of the marker can be changed using the attribute orient = ("180").
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrowLeft" viewBox="0 0 20 20" refX="0" refY="10"
markerUnits="userSpaceOnUse" orient="170"
markerWidth="20" markerHeight="20">
<polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
</marker>
<marker id="arrowRight" viewBox="0 0 20 20" refX="0" refY="10"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
</marker>
<marker id="circle1" viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="10" markerHeight="10">
<circle cx="5" cy="5" r="5" fill="#4caf50" />
</marker>
</defs>
<path id="path1" fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" style=" marker-end: url(#arrowRight); marker-start: url(#circle1);
fill:none; stroke:green; stroke-width:2; " />
<g transform="translate(0 100)" >
<path id="path1" fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" style=" marker-end: url(#circle1); marker-start: url(#arrowLeft);
fill:none; stroke:green; stroke-width:2; " />
</g>
</svg>
Trying to use svg sprites
Does not work SVG sprites on my template. I google it a lot but found solutions did not work for me. when I use: <svg> <use xlink:href="icons.svg#icon"></use> </svg> browser shows 'shadow-root closed' when I trying to use SVG as inline, g tag inside SVG tag moves far away from parent SVG tag. How to make my SVG file is useful? My svg file > Codepen
From your file with icons, first make a sprite of icons.
To do this, wrap the code of each icon with <symbol> tags instead
of the group tag <g>
Then save as a stand-alone icons.svg file and add it to the same folder next to index.html
Add this file to your application’s HTML
<object type="image/svg+xml" data="icons.svg">
Your browser does not support SVG
</object>
or specify the full path if the file with icons is in another folder
<object type="image/svg+xml" data="images/icons.svg">
Your browser does not support SVG
</object>
An example of your converted sprite icon file:
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 676 289" style="enable-background:new 0 0 676 289;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EA3B58;}
.st1{fill:#FFFFFF;}
.st2{fill:#4C76BE;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st4{fill:#F99400;}
.st5{fill:#4C75A3;}
.st6{fill:#00C7FF;}
.st7{fill:#FC5345;}
.st8{fill:#71C644;}
</style>
<symbol id="instagram">
<circle class="st0" cx="68.8" cy="52" r="29.1"/>
<g>
<path class="st1" d="M82.6,44.5c-0.2-1.9-0.9-3.5-2.3-4.8c-1.4-1.4-3.2-2-5.2-2.1c-3.3-0.2-11.2-0.3-13.9,0.2
c-3.2,0.5-5.2,2.4-6.1,5.5C54.5,45.6,54.6,56.6,55,59c0.5,3.2,2.4,5.3,5.7,6.1c2.2,0.6,13.1,0.5,15.6,0.1c3.2-0.5,5.3-2.4,6.2-5.6
C83.1,57.2,82.8,46.7,82.6,44.5z M80,58.6c-0.4,2.5-2,4-4.5,4.3c-2.3,0.2-12.4,0.4-14.5-0.2c-2-0.6-3.2-1.9-3.5-4
c-0.3-1.9-0.4-11.6,0-14.2c0.4-2.4,2-4,4.5-4.2c2.5-0.3,11.5-0.3,13.9,0.1c2.5,0.4,4,2,4.2,4.5C80.3,47,80.4,56.1,80,58.6z
M68.8,44.3c-4,0-7.2,3.2-7.2,7.2c0,4,3.2,7.2,7.2,7.2c4,0,7.2-3.2,7.2-7.2C76,47.5,72.8,44.3,68.8,44.3z M68.7,56.2
c-2.5,0-4.6-2.1-4.6-4.7c0-2.6,2.1-4.7,4.7-4.7c2.6,0,4.7,2.1,4.7,4.7C73.4,54.1,71.3,56.2,68.7,56.2z M78,44
c0,0.9-0.8,1.7-1.7,1.7s-1.7-0.7-1.7-1.7c0-1,0.8-1.7,1.7-1.7C77.2,42.3,78,43.1,78,44z"/>
</g>
</symbol>
<symbol id="facebook">
<circle class="st2" cx="139" cy="52" r="29.1"/>
<path class="st3" d="M143.8,41.1c1,0,1.9,0,2.9,0c0.1,0,0.2,0,0.4,0v-5c-0.5-0.1-1.1-0.1-1.6-0.2c-1,0-2-0.1-3-0.1 c-1.5,0-3,0.4-4.2,1.3c-1.4,1-2.2,2.5-2.5,4.2c-0.1,0.7-0.2,1.4-0.2,2.2c0,1.1,0,2.3,0,3.4v0.4h-4.8V53h4.8v14.1h5.9V53h4.8c0.2-1.9,0.5-3.7,0.7-5.7c-0.4,0-0.7,0-1.1,0c-1.4,0-4.5,0-4.5,0s0-2.8,0-4C141.5,41.7,142.5,41.2,143.8,41.1z"/>
</symbol>
<symbol id="ok">
<circle class="st4" cx="209.2" cy="52" r="29.1"/>
<g>
<path class="st1" d="M212.7,59.3c0.7,0.6,1.3,1.1,1.8,1.7c1,0.9,1.9,1.9,2.8,2.9c0.9,1.1,0.8,2.5-0.2,3.4c-1,0.9-2.4,1-3.5,0 c-1.3-1.3-2.6-2.6-3.9-3.9c-0.2-0.2-0.3-0.5-0.5-0.7c-1,0.9-1.7,1.7-2.5,2.4c-0.7,0.7-1.4,1.4-2.1,2c-1.1,1.1-2.6,1.1-3.6,0.1c-1.1-1-1.1-2.5,0-3.7c1.3-1.3,2.6-2.6,3.9-4c0.1-0.1,0.2-0.3,0.3-0.3c-1.5-0.7-3-1.3-4.4-2.1c-1-0.6-1.4-1.7-1.1-2.8c0.5-1.7,2.1-2.3,3.7-1.6c1.1,0.5,2.2,1.1,3.3,1.3c2.6,0.7,5,0.2,7.4-1c0.5-0.2,1-0.5,1.5-0.6c1.2-0.2,2.3,0.5,2.7,1.6c0.4,1.1,0.1,2.4-1,3c-1.2,0.7-2.5,1.2-3.8,1.8C213.4,59.1,213.2,59.2,212.7,59.3z"/>
<path class="st1" d="M200.9,44.2c-0.2-3.9,3.1-8.3,8.3-8.3c5.2,0,8.5,4.5,8.4,8.5c-0.1,4.6-3.8,8.3-8.4,8.3
C203.7,52.5,200.6,47.9,200.9,44.2z M209.1,47.5c1.9,0,3.4-1.4,3.4-3.3c0-1.8-1.5-3.2-3.3-3.2c-1.9,0-3.3,1.4-3.3,3.2
C205.9,46,207.4,47.5,209.1,47.5z"/>
</g>
</symbol >
<symbol id="vk">
<circle class="st5" cx="279.4" cy="52" r="29.1"/>
<g>
<path class="st1" d="M281.5,47.6c0,1.1,0,2.1,0,3.2c0,0.3,0.1,0.6,0.3,0.8c0.3,0.5,0.7,0.5,1.1,0.2c0.6-0.5,1.1-1.1,1.5-1.7
c1.1-1.6,2-3.4,2.8-5.2c0,0,0-0.1,0.1-0.1c0.3-0.7,0.5-0.8,1.2-0.8c1.7,0,3.4,0,5.1,0c0.3,0,0.6,0,0.8,0.1
c0.4,0.1,0.6,0.4,0.5,0.8c-0.1,0.5-0.3,1-0.5,1.4c-0.8,1.5-1.8,2.8-2.8,4.1c-0.5,0.7-1.1,1.4-1.6,2.1c-0.5,0.8-0.5,1.3,0.2,2
c0.9,0.9,1.8,1.7,2.6,2.6c0.6,0.7,1.2,1.5,1.8,2.2c0.2,0.2,0.3,0.5,0.3,0.8c0.1,0.6-0.1,0.9-0.7,1.1c-0.3,0.1-0.6,0.1-0.9,0.1
c-1.5,0-3,0.1-4.4,0.1c-0.8,0-1.5-0.3-2-0.8c-0.8-0.7-1.4-1.5-2.2-2.2c-0.3-0.3-0.6-0.6-0.9-0.9c-0.1-0.1-0.2-0.2-0.4-0.3
c-0.4-0.2-0.7-0.2-1,0.1c-0.4,0.4-0.6,0.9-0.7,1.5c-0.1,0.5-0.1,0.9-0.1,1.4c-0.1,0.6-0.4,1-1,1c-2.1,0.1-4.2,0.2-6.2-0.8
c-1.8-0.9-3.4-2.1-4.7-3.7c-2.8-3.4-4.9-7.2-6.6-11.2c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.5,0.1-0.8,0.5-0.9c0.2,0,0.4-0.1,0.7-0.1
c1.4,0,2.8,0,4.2,0c0.7,0,1.2,0.3,1.5,1c0.7,1.8,1.6,3.4,2.6,5.1c0.4,0.7,0.8,1.3,1.5,1.8c0.3,0.2,0.6,0.4,1,0.3
c0.1,0,0.2-0.1,0.3-0.2c0.3-0.4,0.4-0.9,0.4-1.4c0.2-1.2,0.2-2.4,0.1-3.6c0-0.4-0.1-0.8-0.2-1.2c-0.2-0.7-0.7-1-1.3-1.2
c-0.1,0-0.3-0.1-0.4-0.2c0.1-0.1,0.2-0.3,0.3-0.4c0.3-0.4,0.7-0.5,1.2-0.6c1.7-0.3,3.4-0.3,5.1-0.1c0.2,0,0.3,0,0.5,0.1
c0.8,0.2,1,0.4,1.1,1.3c0.1,0.7,0,1.4,0,2.1C281.5,47,281.5,47.3,281.5,47.6C281.5,47.6,281.5,47.6,281.5,47.6z"/>
</g>
</symbol>
<symbol id="twitter">
<circle class="st6" cx="419.9" cy="52" r="29.1"/>
<path class="st3" d="M413.7,59.9c-3.4-0.1-5.5-2.5-6-4.5c0.9,0.2,1.9,0.1,2.8-0.1c0,0,0,0,0.1,0c-1.8-0.4-3.2-1.4-4.2-3
c-0.6-1-1-2.2-0.9-3.4c0.9,0.5,1.9,0.8,2.9,0.8c-1.4-1-2.3-2.3-2.7-3.9c-0.4-1.6-0.1-3.2,0.7-4.7c3.5,4.1,7.9,6.4,13.3,6.8
c0-0.3-0.1-0.5-0.1-0.7c-0.2-1.5,0.1-2.9,0.9-4.2c1-1.6,2.5-2.6,4.4-2.9c2.2-0.4,4.1,0.3,5.7,1.8c0.1,0.1,0.2,0.1,0.3,0.1
c1.3-0.3,2.6-0.8,3.8-1.4c0,0,0.1,0,0.1,0c0,0,0,0,0,0c-0.5,1.5-1.4,2.7-2.8,3.5c1.3-0.1,2.4-0.5,3.6-1c0,0,0,0,0,0
c-0.2,0.3-0.5,0.7-0.7,1c-0.7,0.8-1.5,1.6-2.4,2.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,1,0,1.9-0.1,2.9c-0.2,2-0.8,3.9-1.7,5.8
c-0.9,1.9-2,3.6-3.5,5.1c-2.5,2.5-5.4,4.2-8.9,5c-1.2,0.3-2.4,0.4-3.6,0.4c-3.7,0.1-7.2-0.8-10.4-2.8c0,0-0.1-0.1-0.2-0.1
c2.3,0.2,4.4,0,6.5-0.9C411.7,61.2,412.7,60.7,413.7,59.9z"/>
</symbol>
<symbol id="GooglePlus">
<circle class="st7" cx="349.7" cy="52" r="29.1"/>
<g>
<path class="st1" d="M343.8,49.3c0,0.1,0,0.1,0,0.2c0,1.3,0,4.3,0,4.3s5.6,0,5.9,0c0,0.4-0.5,2.2-2.2,3.3c-1,0.7-2.1,1-3.2,1
c-0.8,0.1-1.6,0-2.4-0.3c-2.5-0.8-4.3-3-4.6-5.7c-0.1-0.7,0-1.3,0.1-2c0.7-3.2,3.8-5.6,7.3-5.1c1.5,0.2,2.4,0.9,3.2,1.6
c1.1-1.1,2.1-2.1,3.2-3.2c-0.3-0.2-0.9-0.8-2-1.4c-1.6-0.9-3.4-1.4-5.2-1.4c-0.4,0-0.7,0-1.1,0c-0.6,0-1.2,0.1-1.8,0.3
c-2.4,0.6-4.4,1.9-5.9,3.8c-1.5,1.8-2.3,4-2.4,6.3c-0.1,1,0,2,0.2,3c0.6,2.7,2.1,4.9,4.3,6.6c1.8,1.3,3.7,2,5.9,2.1
c1.2,0.1,2.4,0,3.6-0.4c2.2-0.6,4.1-1.7,5.4-3.6c2-2.7,2.5-6.1,1.9-9.3C350.7,49.3,347.3,49.3,343.8,49.3z"/>
<polygon class="st1" points="367.6,49.4 363.8,49.4 363.8,45.7 363.8,45.6 363.7,45.6 360.9,45.6 360.8,45.6 360.8,45.7
360.8,49.4 357,49.4 356.9,49.4 356.9,49.5 356.9,52.3 356.9,52.4 357,52.4 360.8,52.4 360.8,56.2 360.8,56.3 360.9,56.3
363.7,56.3 363.8,56.3 363.8,56.2 363.8,52.4 367.6,52.4 367.7,52.4 367.7,52.3 367.7,49.5 367.7,49.4 "/>
</g>
</symbol>
<symbol id="Search">
<path class="st8" d="M515,67.5h-25c-5,0-9-4-9-9v-25c0-5,4-9,9-9h25c5,0,9,4,9,9v25C524,63.5,520,67.5,515,67.5z"/>
<path class="st1" d="M506.1,54.2c-6.1,0-11-4.9-11-11s4.9-11,11-11c6.1,0,11,4.9,11,11S512.1,54.2,506.1,54.2z M506.1,35.1
c-4.5,0-8.1,3.7-8.1,8.1s3.7,8.1,8.1,8.1c4.5,0,8.1-3.7,8.1-8.1S510.6,35.1,506.1,35.1z"/>
<path class="st1" d="M489.8,60.3c-0.4,0-0.7-0.1-1-0.4c-0.6-0.6-0.6-1.5,0-2l8.6-8.6c0.6-0.6,1.5-0.6,2,0c0.6,0.6,0.6,1.5,0,2
l-8.6,8.6C490.5,60.2,490.1,60.3,489.8,60.3z"/>
</symbol>
</svg>
The icons are loaded into your application, but they will not be
visible until called by the <use> command
Then by ID icon you call it in the right placeHTML page
<svg viewBox="0 0 676 289">
<use xlink:href="icons.svg#instagram" />
</svg>
Below is a sample code for inline adding sprite icons:
<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 676 289" style="enable-background:new 0 0 676 289;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EA3B58;}
.st1{fill:#FFFFFF;}
.st2{fill:#4C76BE;}
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st4{fill:#F99400;}
.st5{fill:#4C75A3;}
.st6{fill:#00C7FF;}
.st7{fill:#FC5345;}
.st8{fill:#71C644;}
</style>
<symbol id="instagram">
<circle class="st0" cx="68.8" cy="52" r="29.1"/>
<g>
<path class="st1" d="M82.6,44.5c-0.2-1.9-0.9-3.5-2.3-4.8c-1.4-1.4-3.2-2-5.2-2.1c-3.3-0.2-11.2-0.3-13.9,0.2
c-3.2,0.5-5.2,2.4-6.1,5.5C54.5,45.6,54.6,56.6,55,59c0.5,3.2,2.4,5.3,5.7,6.1c2.2,0.6,13.1,0.5,15.6,0.1c3.2-0.5,5.3-2.4,6.2-5.6
C83.1,57.2,82.8,46.7,82.6,44.5z M80,58.6c-0.4,2.5-2,4-4.5,4.3c-2.3,0.2-12.4,0.4-14.5-0.2c-2-0.6-3.2-1.9-3.5-4
c-0.3-1.9-0.4-11.6,0-14.2c0.4-2.4,2-4,4.5-4.2c2.5-0.3,11.5-0.3,13.9,0.1c2.5,0.4,4,2,4.2,4.5C80.3,47,80.4,56.1,80,58.6z
M68.8,44.3c-4,0-7.2,3.2-7.2,7.2c0,4,3.2,7.2,7.2,7.2c4,0,7.2-3.2,7.2-7.2C76,47.5,72.8,44.3,68.8,44.3z M68.7,56.2
c-2.5,0-4.6-2.1-4.6-4.7c0-2.6,2.1-4.7,4.7-4.7c2.6,0,4.7,2.1,4.7,4.7C73.4,54.1,71.3,56.2,68.7,56.2z M78,44
c0,0.9-0.8,1.7-1.7,1.7s-1.7-0.7-1.7-1.7c0-1,0.8-1.7,1.7-1.7C77.2,42.3,78,43.1,78,44z"/>
</g>
</symbol>
<symbol id="facebook">
<circle class="st2" cx="139" cy="52" r="29.1"/>
<path class="st3" d="M143.8,41.1c1,0,1.9,0,2.9,0c0.1,0,0.2,0,0.4,0v-5c-0.5-0.1-1.1-0.1-1.6-0.2c-1,0-2-0.1-3-0.1
c-1.5,0-3,0.4-4.2,1.3c-1.4,1-2.2,2.5-2.5,4.2c-0.1,0.7-0.2,1.4-0.2,2.2c0,1.1,0,2.3,0,3.4v0.4h-4.8V53h4.8v14.1h5.9V53h4.8
c0.2-1.9,0.5-3.7,0.7-5.7c-0.4,0-0.7,0-1.1,0c-1.4,0-4.5,0-4.5,0s0-2.8,0-4C141.5,41.7,142.5,41.2,143.8,41.1z"/>
</symbol>
<symbol id="ok">
<circle class="st4" cx="209.2" cy="52" r="29.1"/>
<g>
<path class="st1" d="M212.7,59.3c0.7,0.6,1.3,1.1,1.8,1.7c1,0.9,1.9,1.9,2.8,2.9c0.9,1.1,0.8,2.5-0.2,3.4c-1,0.9-2.4,1-3.5,0
c-1.3-1.3-2.6-2.6-3.9-3.9c-0.2-0.2-0.3-0.5-0.5-0.7c-1,0.9-1.7,1.7-2.5,2.4c-0.7,0.7-1.4,1.4-2.1,2c-1.1,1.1-2.6,1.1-3.6,0.1
c-1.1-1-1.1-2.5,0-3.7c1.3-1.3,2.6-2.6,3.9-4c0.1-0.1,0.2-0.3,0.3-0.3c-1.5-0.7-3-1.3-4.4-2.1c-1-0.6-1.4-1.7-1.1-2.8
c0.5-1.7,2.1-2.3,3.7-1.6c1.1,0.5,2.2,1.1,3.3,1.3c2.6,0.7,5,0.2,7.4-1c0.5-0.2,1-0.5,1.5-0.6c1.2-0.2,2.3,0.5,2.7,1.6
c0.4,1.1,0.1,2.4-1,3c-1.2,0.7-2.5,1.2-3.8,1.8C213.4,59.1,213.2,59.2,212.7,59.3z"/>
<path class="st1" d="M200.9,44.2c-0.2-3.9,3.1-8.3,8.3-8.3c5.2,0,8.5,4.5,8.4,8.5c-0.1,4.6-3.8,8.3-8.4,8.3
C203.7,52.5,200.6,47.9,200.9,44.2z M209.1,47.5c1.9,0,3.4-1.4,3.4-3.3c0-1.8-1.5-3.2-3.3-3.2c-1.9,0-3.3,1.4-3.3,3.2
C205.9,46,207.4,47.5,209.1,47.5z"/>
</g>
</symbol >
<symbol id="vk">
<circle class="st5" cx="279.4" cy="52" r="29.1"/>
<g>
<path class="st1" d="M281.5,47.6c0,1.1,0,2.1,0,3.2c0,0.3,0.1,0.6,0.3,0.8c0.3,0.5,0.7,0.5,1.1,0.2c0.6-0.5,1.1-1.1,1.5-1.7
c1.1-1.6,2-3.4,2.8-5.2c0,0,0-0.1,0.1-0.1c0.3-0.7,0.5-0.8,1.2-0.8c1.7,0,3.4,0,5.1,0c0.3,0,0.6,0,0.8,0.1
c0.4,0.1,0.6,0.4,0.5,0.8c-0.1,0.5-0.3,1-0.5,1.4c-0.8,1.5-1.8,2.8-2.8,4.1c-0.5,0.7-1.1,1.4-1.6,2.1c-0.5,0.8-0.5,1.3,0.2,2
c0.9,0.9,1.8,1.7,2.6,2.6c0.6,0.7,1.2,1.5,1.8,2.2c0.2,0.2,0.3,0.5,0.3,0.8c0.1,0.6-0.1,0.9-0.7,1.1c-0.3,0.1-0.6,0.1-0.9,0.1
c-1.5,0-3,0.1-4.4,0.1c-0.8,0-1.5-0.3-2-0.8c-0.8-0.7-1.4-1.5-2.2-2.2c-0.3-0.3-0.6-0.6-0.9-0.9c-0.1-0.1-0.2-0.2-0.4-0.3
c-0.4-0.2-0.7-0.2-1,0.1c-0.4,0.4-0.6,0.9-0.7,1.5c-0.1,0.5-0.1,0.9-0.1,1.4c-0.1,0.6-0.4,1-1,1c-2.1,0.1-4.2,0.2-6.2-0.8
c-1.8-0.9-3.4-2.1-4.7-3.7c-2.8-3.4-4.9-7.2-6.6-11.2c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.5,0.1-0.8,0.5-0.9c0.2,0,0.4-0.1,0.7-0.1
c1.4,0,2.8,0,4.2,0c0.7,0,1.2,0.3,1.5,1c0.7,1.8,1.6,3.4,2.6,5.1c0.4,0.7,0.8,1.3,1.5,1.8c0.3,0.2,0.6,0.4,1,0.3
c0.1,0,0.2-0.1,0.3-0.2c0.3-0.4,0.4-0.9,0.4-1.4c0.2-1.2,0.2-2.4,0.1-3.6c0-0.4-0.1-0.8-0.2-1.2c-0.2-0.7-0.7-1-1.3-1.2
c-0.1,0-0.3-0.1-0.4-0.2c0.1-0.1,0.2-0.3,0.3-0.4c0.3-0.4,0.7-0.5,1.2-0.6c1.7-0.3,3.4-0.3,5.1-0.1c0.2,0,0.3,0,0.5,0.1
c0.8,0.2,1,0.4,1.1,1.3c0.1,0.7,0,1.4,0,2.1C281.5,47,281.5,47.3,281.5,47.6C281.5,47.6,281.5,47.6,281.5,47.6z"/>
</g>
</symbol>
<symbol id="twitter">
<circle class="st6" cx="419.9" cy="52" r="29.1"/>
<path class="st3" d="M413.7,59.9c-3.4-0.1-5.5-2.5-6-4.5c0.9,0.2,1.9,0.1,2.8-0.1c0,0,0,0,0.1,0c-1.8-0.4-3.2-1.4-4.2-3
c-0.6-1-1-2.2-0.9-3.4c0.9,0.5,1.9,0.8,2.9,0.8c-1.4-1-2.3-2.3-2.7-3.9c-0.4-1.6-0.1-3.2,0.7-4.7c3.5,4.1,7.9,6.4,13.3,6.8
c0-0.3-0.1-0.5-0.1-0.7c-0.2-1.5,0.1-2.9,0.9-4.2c1-1.6,2.5-2.6,4.4-2.9c2.2-0.4,4.1,0.3,5.7,1.8c0.1,0.1,0.2,0.1,0.3,0.1
c1.3-0.3,2.6-0.8,3.8-1.4c0,0,0.1,0,0.1,0c0,0,0,0,0,0c-0.5,1.5-1.4,2.7-2.8,3.5c1.3-0.1,2.4-0.5,3.6-1c0,0,0,0,0,0
c-0.2,0.3-0.5,0.7-0.7,1c-0.7,0.8-1.5,1.6-2.4,2.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,1,0,1.9-0.1,2.9c-0.2,2-0.8,3.9-1.7,5.8
c-0.9,1.9-2,3.6-3.5,5.1c-2.5,2.5-5.4,4.2-8.9,5c-1.2,0.3-2.4,0.4-3.6,0.4c-3.7,0.1-7.2-0.8-10.4-2.8c0,0-0.1-0.1-0.2-0.1
c2.3,0.2,4.4,0,6.5-0.9C411.7,61.2,412.7,60.7,413.7,59.9z"/>
</symbol>
<symbol id="GooglePlus">
<circle class="st7" cx="349.7" cy="52" r="29.1"/>
<g>
<path class="st1" d="M343.8,49.3c0,0.1,0,0.1,0,0.2c0,1.3,0,4.3,0,4.3s5.6,0,5.9,0c0,0.4-0.5,2.2-2.2,3.3c-1,0.7-2.1,1-3.2,1
c-0.8,0.1-1.6,0-2.4-0.3c-2.5-0.8-4.3-3-4.6-5.7c-0.1-0.7,0-1.3,0.1-2c0.7-3.2,3.8-5.6,7.3-5.1c1.5,0.2,2.4,0.9,3.2,1.6
c1.1-1.1,2.1-2.1,3.2-3.2c-0.3-0.2-0.9-0.8-2-1.4c-1.6-0.9-3.4-1.4-5.2-1.4c-0.4,0-0.7,0-1.1,0c-0.6,0-1.2,0.1-1.8,0.3
c-2.4,0.6-4.4,1.9-5.9,3.8c-1.5,1.8-2.3,4-2.4,6.3c-0.1,1,0,2,0.2,3c0.6,2.7,2.1,4.9,4.3,6.6c1.8,1.3,3.7,2,5.9,2.1
c1.2,0.1,2.4,0,3.6-0.4c2.2-0.6,4.1-1.7,5.4-3.6c2-2.7,2.5-6.1,1.9-9.3C350.7,49.3,347.3,49.3,343.8,49.3z"/>
<polygon class="st1" points="367.6,49.4 363.8,49.4 363.8,45.7 363.8,45.6 363.7,45.6 360.9,45.6 360.8,45.6 360.8,45.7
360.8,49.4 357,49.4 356.9,49.4 356.9,49.5 356.9,52.3 356.9,52.4 357,52.4 360.8,52.4 360.8,56.2 360.8,56.3 360.9,56.3
363.7,56.3 363.8,56.3 363.8,56.2 363.8,52.4 367.6,52.4 367.7,52.4 367.7,52.3 367.7,49.5 367.7,49.4 "/>
</g>
</symbol>
<symbol id="Search">
<path class="st8" d="M515,67.5h-25c-5,0-9-4-9-9v-25c0-5,4-9,9-9h25c5,0,9,4,9,9v25C524,63.5,520,67.5,515,67.5z"/>
<path class="st1" d="M506.1,54.2c-6.1,0-11-4.9-11-11s4.9-11,11-11c6.1,0,11,4.9,11,11S512.1,54.2,506.1,54.2z M506.1,35.1
c-4.5,0-8.1,3.7-8.1,8.1s3.7,8.1,8.1,8.1c4.5,0,8.1-3.7,8.1-8.1S510.6,35.1,506.1,35.1z"/>
<path class="st1" d="M489.8,60.3c-0.4,0-0.7-0.1-1-0.4c-0.6-0.6-0.6-1.5,0-2l8.6-8.6c0.6-0.6,1.5-0.6,2,0c0.6,0.6,0.6,1.5,0,2
l-8.6,8.6C490.5,60.2,490.1,60.3,489.8,60.3z"/>
</symbol>
<svg viewBox="0 0 676 289">
<use xlink:href="#instagram" />
<use xlink:href="#facebook" />
<use xlink:href="#ok" />
<use xlink:href="#vk" />
<use xlink:href="#GooglePlus" />
<use xlink:href="#twitter" />
<use xlink:href="#Search" />
</svg>
</svg>
SVG Cannot be aligned in the center
I have been playing with this svg whole day but cant align it in the middle of the div. Eirther it go outside the container or descrease size to very small. I changed viewBox million time and also played with css but no luck. Please help. <svg viewbox="0 0 300 300" style="border:1px solid red"> <g> <path fill="#9FC1BD" d="M241.861,379.774l-0.26-13.229h-50.975l-0.448,11.762c-0.053,0.49-0.081,0.977-0.081,1.47v8.234 c0,7.085,5.746,12.862,12.852,12.862h26.047c7.106,0,12.865-5.777,12.865-12.862v-8.234V379.774z"/> <path fill="#E4BA97" d="M241.565,366.13c-0.986-9.696-3.556-16.594-5.167-19.653c-0.222-0.448-5.262-6.989-5.262-15.911 c0-6.278,0.32-14.296,0.447-16.919c0.015-0.176,0.029-0.36,0.046-0.557c1.124-14.716,4.008-24.849,10.225-24.849v-3.328 c0-1.819-1.847-3.32-4.109-3.32h-18.159v-0.123h-25.477c-2.26,0-4.103,1.498-4.103,3.334v3.317c6.313,0,9.045,10.511,10.074,25.618 c0.057,0.786,0.095,1.604,0.148,2.403c0.138,4.124,0.367,11.131,0.374,16.348c0,0.229,0,0.444,0,0.645 c-0.127,6.609-3.21,12.072-3.278,12.164l0,0c0,0-4.68,8.537-6.457,20.451c-0.057,0.367-0.113,0.796-0.113,0.796l25.786,1.653 l25.062-1.66C241.601,366.539,241.615,366.451,241.565,366.13z"/> <path fill="#E4BA97" d="M248.079,281.336c0,0.677-0.113,1.343-0.307,1.999l-0.25,0.649l-0.015,0.035 c-0.757,1.787-2.192,3.053-3.87,3.68c-0.19,0.063-0.395,0.147-0.585,0.184c-1.305,0.345-2.708,0.32-4.054-0.166h-44.94 c-0.818,0.31-1.653,0.426-2.46,0.405c-0.274-0.024-0.543-0.031-0.803-0.078c-0.061-0.01-0.127-0.01-0.176-0.018 c-0.142-0.042-0.272-0.046-0.409-0.091c-2.009-0.473-3.778-1.869-4.656-3.917c-0.011-0.007-0.019-0.035-0.019-0.035l-0.247-0.649 c-0.204-0.656-0.299-1.322-0.299-1.999c0-2.326,1.202-4.558,3.253-5.798c0.278-0.183,0.578-0.334,0.888-0.451l0.215-0.105h0.004 l7.155-3.045l0.021-0.008l0.345-0.137l0.803-0.342c0.018,0,0.018,0,0.036-0.024l1.575-0.659l0.032-0.018l0.818-0.341l2.02-0.86 c0.299-0.184,0.588-0.357,0.892-0.55c0.116-0.081,0.246-0.162,0.367-0.247c0.817-0.529,1.621-1.113,2.375-1.706 c0.402-0.31,0.789-0.631,1.156-0.952c0.099-0.085,0.19-0.172,0.282-0.268c1.498-1.326,2.741-2.729,3.454-4.036 c0.061-0.103,0.113-0.215,0.176-0.328c0.487-0.913,0.927-1.734,1.301-2.527c1.068-2.196,1.709-4.001,2.069-5.774 c0.145-0.726,0.237-1.477,0.311-2.241c0.254-3.384,0.162-4.072,0.162-4.072h3.659c0,0-0.081,0.688,0.169,4.072 c0.134,1.766,0.487,3.384,1.156,5.224c0.303,0.817,0.677,1.685,1.121,2.615c0.395,0.821,0.867,1.734,1.403,2.704 c0.052,0.113,0.105,0.225,0.176,0.328c0.733,1.35,2.052,2.816,3.63,4.219c0.205,0.17,0.409,0.342,0.627,0.536 c1.128,0.931,2.355,1.84,3.599,2.602c0.137,0.077,0.257,0.158,0.384,0.236c0.091,0.06,0.179,0.113,0.274,0.166l2.023,0.86 l3.426,1.438l1.484,0.635l1.738,0.747h0.028l4.329,1.861c0.571,0.226,1.1,0.558,1.565,0.923 C247.128,277.297,248.079,279.277,248.079,281.336z"/> <path opacity="0.2" fill="#231F20" d="M219.684,256.142c-1.734-0.715-3.595-1.597-4.86-2.531c-0.208-0.144-0.413-0.3-0.596-0.452 c0.145-0.726,0.237-1.477,0.311-2.241c0.254-3.384,0.162-4.072,0.162-4.072h3.659c0,0-0.081,0.688,0.169,4.072 C218.662,252.684,219.015,254.302,219.684,256.142z"/> <path fill="#9FC1BD" d="M197.947,546.743l-5.319-137.611c0,0-2.692-19.672,5.319-21.416c8.025-1.717,14.021,1.744,12.58,15.548 c-1.449,13.802-5.245,143.479-5.245,143.479H197.947z"/> <path fill="#9FC1BD" d="M226.761,546.743l-4.137-145.204c0,0,0-11.396,10.349-12.435c10.362-1.033,6.217,19.682,5.872,26.929 c-0.341,7.264-4.835,130.71-4.835,130.71H226.761z"/> <path fill="#5C8BAA" d="M267.811,406.101l-5.302,0.641l-2.439-18.265l-0.395-3.009l-0.159-1.22l-0.406-3.003l-13.422-100.645 c-0.049-0.208-0.099-0.409-0.119-0.627c-0.346-2.883,1.717-5.526,4.596-5.862c2.904-0.359,5.534,1.707,5.879,4.601 c0.036,0.274,0.036,0.567,0.029,0.838l9.446,101.893l0.286,3.024l0.102,1.191l0.289,3.017L267.811,406.101z"/> <path fill="#E4BA97" d="M266.055,407.411c0,0,1.784,1.309,2.535-3.425c0.747-4.745,1.149-12.403-3.648-13.433 c-4.794-1.046-7.5,2.922-7.924,5.034c-0.416,2.136-1.015,5.079,0.007,5.343c1.025,0.268,1.53-0.863,1.53-0.863 c-0.423,2.556-0.321,2.404-0.67,5.051c-0.261,2.002,0.205,3.754,0.898,4.015c0.469,0.176,1.093-0.335,1.093-0.335 s-0.271,4.342,1.279,4.399c1.543,0.049,2.059-2.095,2.059-2.095s0.655,0.624,1.353,0.173 C265.414,410.725,266.055,407.411,266.055,407.411z"/> <path fill="#5C8BAA" d="M168.984,406.619l5.301,0.5l1.978-18.322l0.321-3.027l0.133-1.205l0.321-3.027l10.874-100.938 c0.046-0.208,0.078-0.409,0.099-0.634c0.282-2.89-1.854-5.467-4.745-5.742c-2.911-0.292-5.484,1.851-5.76,4.755 c-0.021,0.282-0.021,0.557,0,0.832l-6.866,102.103l-0.208,3.011l-0.078,1.219l-0.204,3.021L168.984,406.619z"/> <path fill="#E4BA97" d="M170.605,408.444c0,0-1.783,1.3-2.53-3.447c-0.747-4.734-1.149-12.372,3.645-13.415 c4.794-1.055,7.5,2.915,7.924,5.036c0.416,2.111,1.015,5.073-0.007,5.351c-1.022,0.271-1.523-0.874-1.523-0.874 c0.409,2.556,0.318,2.407,0.659,5.041c0.269,1.998-0.208,3.771-0.899,4.024c-0.465,0.176-1.1-0.328-1.1-0.328 s0.269,4.343-1.265,4.402c-1.547,0.049-2.069-2.114-2.069-2.114s-0.642,0.641-1.351,0.19 C171.247,411.769,170.605,408.444,170.605,408.444z"/> <path opacity="0.54" fill="#A87C4F" d="M223.575,226.767c-1.375-0.558-2.679-1.255-3.747-2.055 c-0.412-0.332-0.807-0.642-1.173-0.974c0.007-0.049,0.007-0.105,0.014-0.165c0.247-3.359,0.172-4.043,0.172-4.043h4.072 C222.913,219.53,222.68,222.793,223.575,226.767z"/> <path fill="#E7C1A5" d="M196.259,229.244v12.76c0,0,0.353,4.663,7.247,7.433c6.908,2.76,18.649,2.936,24.518,0.166 c5.523-2.608,8.283-4.653,8.452-11.395c0.176-6.733,0-31.399,0-31.399s-1.826-12.95-20.062-12.95 c-18.248,0-20.154,13.817-20.154,20.183C196.259,220.439,196.259,229.244,196.259,229.244z"/> <path fill="#E7C1A5" d="M239.74,226.245c0,2.234-1.494,4.082-3.335,4.082c-1.843,0-3.333-1.848-3.333-4.082 c0-2.263,1.491-4.092,3.333-4.092C238.246,222.153,239.74,223.982,239.74,226.245z"/> <path fill="#E7C1A5" d="M199.378,226.245c0,2.234-1.501,4.082-3.341,4.082c-1.844,0-3.331-1.848-3.331-4.082 c0-2.263,1.487-4.092,3.331-4.092C197.876,222.153,199.378,223.982,199.378,226.245z"/> <path fill="#9B8579" d="M229.44,213.372c-0.733-2.055-3.37-2.985-5.875-2.083l-0.204-0.578c2.815-0.987,5.791,0.099,6.644,2.453 L229.44,213.372z"/> <path fill="#9B8579" d="M209.554,212.495l0.571,0.198c-0.416,1.17-1.347,2.051-2.612,2.516c-1.244,0.452-2.682,0.441-4.036-0.052 l0.205-0.579c1.212,0.441,2.51,0.469,3.623,0.06C208.405,214.222,209.202,213.472,209.554,212.495z"/> <path fill="#F1F2F2" d="M209.554,221.24c0,1.279-1.033,2.319-2.309,2.319c-1.279,0-2.309-1.041-2.309-2.319 c0-1.251,1.03-2.298,2.309-2.298C208.521,218.941,209.554,219.988,209.554,221.24z"/> <path fill="#F1F2F2" d="M226.98,220.993c0,1.301-1.043,2.327-2.341,2.327c-1.286,0-2.333-1.026-2.333-2.327 c0-1.3,1.047-2.326,2.333-2.326C225.937,218.667,226.98,219.692,226.98,220.993z"/> <path fill="#58595B" d="M208.556,221.24c0,0.737-0.584,1.322-1.311,1.322c-0.733,0-1.322-0.585-1.322-1.322 c0-0.712,0.589-1.301,1.322-1.301C207.972,219.939,208.556,220.527,208.556,221.24z"/> <path fill="#58595B" d="M226.057,220.993c0,0.737-0.592,1.336-1.333,1.336c-0.733,0-1.326-0.6-1.326-1.336 c0-0.733,0.592-1.321,1.326-1.321C225.465,219.671,226.057,220.26,226.057,220.993z"/> <path fill="#A5826A" d="M236.448,222.029c-0.021-0.884-0.733-1.589-1.615-1.589c-0.874,0-1.585,0.705-1.593,1.589l0,0v4.882 c0,2.27-1.854,4.12-4.121,4.12H203.4c-2.267,0-4.109-1.85-4.109-4.12v-4.882h-0.004c-0.035-0.853-0.737-1.533-1.594-1.533 c-0.849,0-1.54,0.681-1.582,1.533h-0.028v17.483c0,11.138,9.03,20.168,20.182,20.168c11.152,0,20.183-9.031,20.183-20.168V222.029 L236.448,222.029z"/> <path fill="#FFFFFF" d="M207.686,232.84h17.024c0,0,0.353,9.777-8.509,9.89C207.341,242.839,207.686,232.84,207.686,232.84z"/> <path opacity="0.2" fill="#231F20" d="M219.483,232.089c0,2.059-1.667,3.726-3.729,3.726l0,0c-2.062,0-3.726-1.667-3.726-3.726 c0,0-0.303-15.041,2.954-15.086c3.264-0.046,1.932-0.046,1.932-0.046C218.965,216.957,219.483,232.089,219.483,232.089z"/> <path fill="#E7C1A5" d="M219.103,230.168c0,1.847-1.501,3.341-3.348,3.341l0,0c-1.84,0-3.342-1.495-3.342-3.341 c0,0-0.261-13.476,2.654-13.528c2.915-0.025,1.727-0.025,1.727-0.025C218.641,216.615,219.103,230.168,219.103,230.168z"/> <path fill="#A5826A" d="M262.826,198.491c-0.317-1.255-1.607-2.005-2.855-1.678c-0.416,0.089-0.761,0.307-1.036,0.572 c-0.289-0.173-0.599-0.296-0.938-0.367c0.092-0.363,0.099-0.765,0-1.177c-0.303-1.131-1.36-1.847-2.489-1.749 c0-0.183-0.013-0.373-0.066-0.553c-0.184-0.723-0.681-1.293-1.311-1.561c0.61-0.567,0.892-1.442,0.672-2.306 c-0.324-1.254-1.607-2.012-2.869-1.691c-0.599,0.145-1.079,0.532-1.381,1.015c-0.36-0.733-1.065-1.223-1.854-1.315 c-0.014-0.042-0.014-0.099-0.032-0.133c-0.42-1.625-1.893-2.658-3.479-2.609c-0.176-1.451-1.244-2.679-2.731-3.002 c-0.709-0.134-1.396-0.074-2.017,0.169c0.286-0.395,0.504-0.846,0.604-1.354c0.415-1.889-0.783-3.761-2.679-4.169 c-1.89-0.412-3.765,0.786-4.18,2.661c-0.134,0.628-0.092,1.23,0.07,1.774c-0.437,0.257-0.817,0.605-1.107,1.018 c-0.437-0.387-0.973-0.669-1.585-0.792c-1.702-0.391-3.374,0.539-4.011,2.104c-0.247-0.106-0.508-0.205-0.775-0.265 c-1.093-0.243-2.165,0.06-2.968,0.705c-0.345-1.206-1.318-2.165-2.629-2.454c-1.893-0.416-3.761,0.79-4.174,2.679 c-0.197,0.898-0.031,1.793,0.403,2.524c-0.678,0-1.333,0.19-1.89,0.539c-0.071-0.007-0.142-0.032-0.219-0.007 c0.43-0.754,0.606-1.635,0.402-2.541c-0.402-1.893-2.284-3.091-4.184-2.687c-1.29,0.296-2.266,1.251-2.608,2.468 c-0.807-0.663-1.886-0.962-2.968-0.715c-0.278,0.052-0.542,0.162-0.786,0.282c-0.627-1.564-2.312-2.502-4.011-2.129 c-0.613,0.142-1.145,0.413-1.585,0.825c-0.088-0.497-0.388-0.923-0.825-1.178c-4-2.622-6.753,0.825-6.457,1.224 c-0.631-0.236-1.318-0.306-2.023-0.145c-1.607,0.349-2.721,1.734-2.763,3.334c-1.614-0.147-3.145,0.846-3.659,2.433 c-0.715,0.119-1.347,0.588-1.665,1.258c-0.313-0.472-0.796-0.832-1.389-0.997c-1.258-0.324-2.548,0.426-2.869,1.678 c-0.219,0.881,0.063,1.738,0.677,2.323c-0.638,0.279-1.135,0.821-1.318,1.554c-0.053,0.18-0.074,0.367-0.074,0.543 c-1.121-0.091-2.182,0.627-2.485,1.755c-0.103,0.409-0.088,0.814,0.007,1.205c-0.332,0.046-0.652,0.163-0.938,0.35 c-0.282-0.265-0.638-0.476-1.033-0.582c-1.266-0.328-2.542,0.434-2.869,1.699c-0.328,1.248,0.427,2.53,1.688,2.862 c0.027,0,0.049,0,0.066,0.01c-0.084,0.575-0.024,1.125,0.145,1.639c-0.07,1.1,0.656,2.136,1.763,2.418 c0.437,0.102,0.877,0.077,1.276-0.053c0.113,0.018,0.226,0.018,0.335,0.018c0.021,0.159,0.067,0.299,0.102,0.423 c-0.278,0.381-0.5,0.796-0.627,1.254c-0.5,1.878,0.614,3.821,2.488,4.304c0.063,0.024,0.109,0.024,0.166,0.039 c0.208,0.799,0.828,1.479,1.682,1.685c0.444,0.126,0.88,0.091,1.289-0.046c0.049,0.081,0.106,0.13,0.156,0.19 c-0.275,1.244,0.465,2.481,1.698,2.815c0.607,0.152,1.195,0.05,1.703-0.218c0.116,0.25,0.257,0.465,0.419,0.67 c-0.744,0.441-1.325,1.178-1.565,2.097c-0.501,1.882,0.62,3.789,2.491,4.29c0.783,0.211,1.583,0.127,2.274-0.169 c-0.036,0.091-0.071,0.211-0.085,0.307c-0.512,1.886,0.617,3.796,2.488,4.289c1.882,0.501,3.8-0.613,4.3-2.506 c0.021-0.081,0.049-0.19,0.063-0.296c0.184,0.088,0.374,0.166,0.578,0.215c1.883,0.49,3.8-0.62,4.304-2.492 c0.441-1.682-0.413-3.401-1.946-4.103c0.014-0.549-0.099-1.089-0.321-1.568c0.987-0.406,1.787-1.248,2.076-2.355 c0.285-1.068,0.039-2.157-0.568-2.988c0.142-0.244,0.254-0.526,0.332-0.79c0.113-0.444,0.141-0.867,0.091-1.293 c1.53-0.024,2.918-1.068,3.328-2.611c0.028-0.106,0.042-0.233,0.07-0.37c0.367,0.042,0.733,0.035,1.121-0.053 c0.796-0.162,1.474-0.606,1.949-1.191c0.811,0.994,2.147,1.516,3.497,1.219c1.822-0.387,2.989-2.122,2.718-3.951 c1.656-0.561,2.665-2.306,2.288-4.067c-0.092-0.385-0.229-0.73-0.434-1.043c1.575-0.476,2.608-1.953,2.53-3.55 c0.106-0.024,0.198-0.032,0.304-0.056c0.289-0.057,0.549-0.163,0.803-0.279c0.007,1.522,0.997,2.915,2.523,3.345 c-0.204,0.324-0.341,0.687-0.426,1.089c-0.391,1.737,0.617,3.474,2.274,4.063c-0.276,1.794,0.902,3.556,2.714,3.938 c1.354,0.31,2.686-0.223,3.497-1.251c0.479,0.61,1.156,1.05,1.959,1.212c0.311,0.074,0.614,0.084,0.923,0.074 c0.007,0.01,0.007,0.01,0.007,0.01c0.406,1.572,1.79,2.591,3.327,2.626c-0.042,0.412-0.021,0.821,0.092,1.272 c0.07,0.269,0.19,0.55,0.328,0.8c-0.603,0.821-0.856,1.911-0.563,2.975c0.289,1.121,1.081,1.977,2.083,2.358 c-0.222,0.479-0.338,1.021-0.331,1.579c-1.523,0.711-2.383,2.421-1.935,4.092c0.49,1.885,2.421,2.999,4.296,2.506 c0.197-0.061,0.395-0.113,0.585-0.205c0.014,0.092,0.029,0.188,0.056,0.296c0.494,1.868,2.418,2.992,4.3,2.485 c1.875-0.483,2.993-2.4,2.503-4.29c-0.035-0.096-0.067-0.183-0.106-0.282c0.698,0.282,1.487,0.356,2.28,0.148 c1.872-0.501,2.993-2.411,2.503-4.29c-0.25-0.923-0.832-1.649-1.579-2.104c0.138-0.169,0.25-0.331,0.363-0.519 c0.542,0.423,1.29,0.6,2.016,0.423c1.254-0.328,2.009-1.604,1.688-2.873c-0.018-0.074-0.032-0.134-0.067-0.198 c0.465,0.198,1.001,0.254,1.53,0.113c1.007-0.271,1.685-1.138,1.741-2.125c1.776-0.564,2.812-2.422,2.333-4.241 c-0.084-0.325-0.218-0.627-0.38-0.899c0.063-0.18,0.113-0.367,0.127-0.567c0.483,0.229,1.036,0.3,1.597,0.134 c1.259-0.311,2.016-1.608,1.695-2.845c-0.028-0.091-0.06-0.183-0.099-0.264c0.071-0.3,0.099-0.599,0.084-0.91 c0.099,0,0.198-0.007,0.289-0.035C262.404,201.039,263.165,199.739,262.826,198.491z M203.364,195.478 c0.021,0.052,0.021,0.12,0.029,0.169c0.021,0.067,0.042,0.12,0.06,0.194c-0.018,0.021-0.038,0.029-0.067,0.046 c-0.032-0.049-0.063-0.12-0.098-0.172C203.322,195.622,203.34,195.555,203.364,195.478z M199.015,187.19 c0.021,0.032,0.046,0.057,0.078,0.103c-0.113,0.029-0.222,0.039-0.325,0.091C198.853,187.322,198.938,187.265,199.015,187.19z M177.408,199.256c-0.024,0.071-0.039,0.159-0.039,0.226c-0.018-0.066-0.031-0.141-0.053-0.201 C177.352,199.281,177.384,199.256,177.408,199.256z M233.691,186.659c0.081,0.077,0.166,0.148,0.25,0.208 c-0.109-0.024-0.214-0.074-0.328-0.103C233.642,186.736,233.67,186.718,233.691,186.659z M229.314,195.118 c0.01-0.042,0.014-0.098,0.028-0.151c0.028,0.07,0.056,0.151,0.085,0.243c-0.043,0.032-0.071,0.092-0.106,0.163 c-0.018-0.025-0.042-0.025-0.063-0.039C229.278,195.266,229.303,195.186,229.314,195.118z"/> <path fill="#E6E7E8" d="M246.641,273.381v97.775h-59.652v-97.775l17.99-7.617c1.77,4.177,6.458,7.155,11.981,7.155 c5.484,0,10.154-2.936,11.949-7.046L246.641,273.381z"/> <polygon fill="#5C8BAA" points="211.517,281.653 202.843,266.606 184.395,274.403 184.395,391.522 211.517,391.522 "/> <polygon fill="#5C8BAA" points="231.112,266.733 222.43,281.77 222.43,391.649 249.553,391.649 249.553,274.523 "/> <polygon fill="#517B93" points="211.503,281.664 197.281,267.541 204.443,262.764 213.516,276.179 "/> <polygon opacity="0.2" fill="#231F20" points="206.491,282.086 197.323,267.523 203.957,263.339 213.562,276.165 "/> <polygon fill="#5C8BAA" points="206.389,280.949 197.323,267.523 204.479,262.758 213.562,276.165 "/> <polygon fill="#517B93" points="222.462,281.664 236.694,267.541 229.532,262.764 220.467,276.179 "/> <polygon opacity="0.2" fill="#231F20" points="227.481,282.086 236.652,267.523 230.018,263.339 220.42,276.165 "/> <polygon fill="#5C8BAA" points="227.579,280.949 236.652,267.523 229.494,262.758 220.42,276.165 "/> </g> </svg>
I think your paths are drawn on that side of the viewbox. all your paths start with M[x], where x is always closer to 300 than 0. M stands for MoveTo. meaning, you're starting at the right side. Adding <g transform="translate(-75)"> seems to work.
The bounding box of the "man" image is:
x: 166.92599487304688
y: 176.1710205078125
width: 102.81298828125
height: 370.572021484375
So an appropriate bounding box would be:
viewBox="166 176 104 371"
Then if you surround it with a <div> of your desired size, it will be automatically centred.
Demo:
DIV {
width: 500px;
height: 400px;
background-color: #f7f7f7;
}
<div>
<svg width="100%" height="100%" viewBox="166 176 104 371" style="border:1px solid red">
<g>
<path fill="#9FC1BD" d="M241.861,379.774l-0.26-13.229h-50.975l-0.448,11.762c-0.053,0.49-0.081,0.977-0.081,1.47v8.234
c0,7.085,5.746,12.862,12.852,12.862h26.047c7.106,0,12.865-5.777,12.865-12.862v-8.234V379.774z"/>
<path fill="#E4BA97" d="M241.565,366.13c-0.986-9.696-3.556-16.594-5.167-19.653c-0.222-0.448-5.262-6.989-5.262-15.911
c0-6.278,0.32-14.296,0.447-16.919c0.015-0.176,0.029-0.36,0.046-0.557c1.124-14.716,4.008-24.849,10.225-24.849v-3.328
c0-1.819-1.847-3.32-4.109-3.32h-18.159v-0.123h-25.477c-2.26,0-4.103,1.498-4.103,3.334v3.317c6.313,0,9.045,10.511,10.074,25.618
c0.057,0.786,0.095,1.604,0.148,2.403c0.138,4.124,0.367,11.131,0.374,16.348c0,0.229,0,0.444,0,0.645
c-0.127,6.609-3.21,12.072-3.278,12.164l0,0c0,0-4.68,8.537-6.457,20.451c-0.057,0.367-0.113,0.796-0.113,0.796l25.786,1.653
l25.062-1.66C241.601,366.539,241.615,366.451,241.565,366.13z"/>
<path fill="#E4BA97" d="M248.079,281.336c0,0.677-0.113,1.343-0.307,1.999l-0.25,0.649l-0.015,0.035
c-0.757,1.787-2.192,3.053-3.87,3.68c-0.19,0.063-0.395,0.147-0.585,0.184c-1.305,0.345-2.708,0.32-4.054-0.166h-44.94
c-0.818,0.31-1.653,0.426-2.46,0.405c-0.274-0.024-0.543-0.031-0.803-0.078c-0.061-0.01-0.127-0.01-0.176-0.018
c-0.142-0.042-0.272-0.046-0.409-0.091c-2.009-0.473-3.778-1.869-4.656-3.917c-0.011-0.007-0.019-0.035-0.019-0.035l-0.247-0.649
c-0.204-0.656-0.299-1.322-0.299-1.999c0-2.326,1.202-4.558,3.253-5.798c0.278-0.183,0.578-0.334,0.888-0.451l0.215-0.105h0.004
l7.155-3.045l0.021-0.008l0.345-0.137l0.803-0.342c0.018,0,0.018,0,0.036-0.024l1.575-0.659l0.032-0.018l0.818-0.341l2.02-0.86
c0.299-0.184,0.588-0.357,0.892-0.55c0.116-0.081,0.246-0.162,0.367-0.247c0.817-0.529,1.621-1.113,2.375-1.706
c0.402-0.31,0.789-0.631,1.156-0.952c0.099-0.085,0.19-0.172,0.282-0.268c1.498-1.326,2.741-2.729,3.454-4.036
c0.061-0.103,0.113-0.215,0.176-0.328c0.487-0.913,0.927-1.734,1.301-2.527c1.068-2.196,1.709-4.001,2.069-5.774
c0.145-0.726,0.237-1.477,0.311-2.241c0.254-3.384,0.162-4.072,0.162-4.072h3.659c0,0-0.081,0.688,0.169,4.072
c0.134,1.766,0.487,3.384,1.156,5.224c0.303,0.817,0.677,1.685,1.121,2.615c0.395,0.821,0.867,1.734,1.403,2.704
c0.052,0.113,0.105,0.225,0.176,0.328c0.733,1.35,2.052,2.816,3.63,4.219c0.205,0.17,0.409,0.342,0.627,0.536
c1.128,0.931,2.355,1.84,3.599,2.602c0.137,0.077,0.257,0.158,0.384,0.236c0.091,0.06,0.179,0.113,0.274,0.166l2.023,0.86
l3.426,1.438l1.484,0.635l1.738,0.747h0.028l4.329,1.861c0.571,0.226,1.1,0.558,1.565,0.923
C247.128,277.297,248.079,279.277,248.079,281.336z"/>
<path opacity="0.2" fill="#231F20" d="M219.684,256.142c-1.734-0.715-3.595-1.597-4.86-2.531c-0.208-0.144-0.413-0.3-0.596-0.452
c0.145-0.726,0.237-1.477,0.311-2.241c0.254-3.384,0.162-4.072,0.162-4.072h3.659c0,0-0.081,0.688,0.169,4.072
C218.662,252.684,219.015,254.302,219.684,256.142z"/>
<path fill="#9FC1BD" d="M197.947,546.743l-5.319-137.611c0,0-2.692-19.672,5.319-21.416c8.025-1.717,14.021,1.744,12.58,15.548
c-1.449,13.802-5.245,143.479-5.245,143.479H197.947z"/>
<path fill="#9FC1BD" d="M226.761,546.743l-4.137-145.204c0,0,0-11.396,10.349-12.435c10.362-1.033,6.217,19.682,5.872,26.929
c-0.341,7.264-4.835,130.71-4.835,130.71H226.761z"/>
<path fill="#5C8BAA" d="M267.811,406.101l-5.302,0.641l-2.439-18.265l-0.395-3.009l-0.159-1.22l-0.406-3.003l-13.422-100.645
c-0.049-0.208-0.099-0.409-0.119-0.627c-0.346-2.883,1.717-5.526,4.596-5.862c2.904-0.359,5.534,1.707,5.879,4.601
c0.036,0.274,0.036,0.567,0.029,0.838l9.446,101.893l0.286,3.024l0.102,1.191l0.289,3.017L267.811,406.101z"/>
<path fill="#E4BA97" d="M266.055,407.411c0,0,1.784,1.309,2.535-3.425c0.747-4.745,1.149-12.403-3.648-13.433
c-4.794-1.046-7.5,2.922-7.924,5.034c-0.416,2.136-1.015,5.079,0.007,5.343c1.025,0.268,1.53-0.863,1.53-0.863
c-0.423,2.556-0.321,2.404-0.67,5.051c-0.261,2.002,0.205,3.754,0.898,4.015c0.469,0.176,1.093-0.335,1.093-0.335
s-0.271,4.342,1.279,4.399c1.543,0.049,2.059-2.095,2.059-2.095s0.655,0.624,1.353,0.173
C265.414,410.725,266.055,407.411,266.055,407.411z"/>
<path fill="#5C8BAA" d="M168.984,406.619l5.301,0.5l1.978-18.322l0.321-3.027l0.133-1.205l0.321-3.027l10.874-100.938
c0.046-0.208,0.078-0.409,0.099-0.634c0.282-2.89-1.854-5.467-4.745-5.742c-2.911-0.292-5.484,1.851-5.76,4.755
c-0.021,0.282-0.021,0.557,0,0.832l-6.866,102.103l-0.208,3.011l-0.078,1.219l-0.204,3.021L168.984,406.619z"/>
<path fill="#E4BA97" d="M170.605,408.444c0,0-1.783,1.3-2.53-3.447c-0.747-4.734-1.149-12.372,3.645-13.415
c4.794-1.055,7.5,2.915,7.924,5.036c0.416,2.111,1.015,5.073-0.007,5.351c-1.022,0.271-1.523-0.874-1.523-0.874
c0.409,2.556,0.318,2.407,0.659,5.041c0.269,1.998-0.208,3.771-0.899,4.024c-0.465,0.176-1.1-0.328-1.1-0.328
s0.269,4.343-1.265,4.402c-1.547,0.049-2.069-2.114-2.069-2.114s-0.642,0.641-1.351,0.19
C171.247,411.769,170.605,408.444,170.605,408.444z"/>
<path opacity="0.54" fill="#A87C4F" d="M223.575,226.767c-1.375-0.558-2.679-1.255-3.747-2.055
c-0.412-0.332-0.807-0.642-1.173-0.974c0.007-0.049,0.007-0.105,0.014-0.165c0.247-3.359,0.172-4.043,0.172-4.043h4.072
C222.913,219.53,222.68,222.793,223.575,226.767z"/>
<path fill="#E7C1A5" d="M196.259,229.244v12.76c0,0,0.353,4.663,7.247,7.433c6.908,2.76,18.649,2.936,24.518,0.166
c5.523-2.608,8.283-4.653,8.452-11.395c0.176-6.733,0-31.399,0-31.399s-1.826-12.95-20.062-12.95
c-18.248,0-20.154,13.817-20.154,20.183C196.259,220.439,196.259,229.244,196.259,229.244z"/>
<path fill="#E7C1A5" d="M239.74,226.245c0,2.234-1.494,4.082-3.335,4.082c-1.843,0-3.333-1.848-3.333-4.082
c0-2.263,1.491-4.092,3.333-4.092C238.246,222.153,239.74,223.982,239.74,226.245z"/>
<path fill="#E7C1A5" d="M199.378,226.245c0,2.234-1.501,4.082-3.341,4.082c-1.844,0-3.331-1.848-3.331-4.082
c0-2.263,1.487-4.092,3.331-4.092C197.876,222.153,199.378,223.982,199.378,226.245z"/>
<path fill="#9B8579" d="M229.44,213.372c-0.733-2.055-3.37-2.985-5.875-2.083l-0.204-0.578c2.815-0.987,5.791,0.099,6.644,2.453
L229.44,213.372z"/>
<path fill="#9B8579" d="M209.554,212.495l0.571,0.198c-0.416,1.17-1.347,2.051-2.612,2.516c-1.244,0.452-2.682,0.441-4.036-0.052
l0.205-0.579c1.212,0.441,2.51,0.469,3.623,0.06C208.405,214.222,209.202,213.472,209.554,212.495z"/>
<path fill="#F1F2F2" d="M209.554,221.24c0,1.279-1.033,2.319-2.309,2.319c-1.279,0-2.309-1.041-2.309-2.319
c0-1.251,1.03-2.298,2.309-2.298C208.521,218.941,209.554,219.988,209.554,221.24z"/>
<path fill="#F1F2F2" d="M226.98,220.993c0,1.301-1.043,2.327-2.341,2.327c-1.286,0-2.333-1.026-2.333-2.327
c0-1.3,1.047-2.326,2.333-2.326C225.937,218.667,226.98,219.692,226.98,220.993z"/>
<path fill="#58595B" d="M208.556,221.24c0,0.737-0.584,1.322-1.311,1.322c-0.733,0-1.322-0.585-1.322-1.322
c0-0.712,0.589-1.301,1.322-1.301C207.972,219.939,208.556,220.527,208.556,221.24z"/>
<path fill="#58595B" d="M226.057,220.993c0,0.737-0.592,1.336-1.333,1.336c-0.733,0-1.326-0.6-1.326-1.336
c0-0.733,0.592-1.321,1.326-1.321C225.465,219.671,226.057,220.26,226.057,220.993z"/>
<path fill="#A5826A" d="M236.448,222.029c-0.021-0.884-0.733-1.589-1.615-1.589c-0.874,0-1.585,0.705-1.593,1.589l0,0v4.882
c0,2.27-1.854,4.12-4.121,4.12H203.4c-2.267,0-4.109-1.85-4.109-4.12v-4.882h-0.004c-0.035-0.853-0.737-1.533-1.594-1.533
c-0.849,0-1.54,0.681-1.582,1.533h-0.028v17.483c0,11.138,9.03,20.168,20.182,20.168c11.152,0,20.183-9.031,20.183-20.168V222.029
L236.448,222.029z"/>
<path fill="#FFFFFF" d="M207.686,232.84h17.024c0,0,0.353,9.777-8.509,9.89C207.341,242.839,207.686,232.84,207.686,232.84z"/>
<path opacity="0.2" fill="#231F20" d="M219.483,232.089c0,2.059-1.667,3.726-3.729,3.726l0,0c-2.062,0-3.726-1.667-3.726-3.726
c0,0-0.303-15.041,2.954-15.086c3.264-0.046,1.932-0.046,1.932-0.046C218.965,216.957,219.483,232.089,219.483,232.089z"/>
<path fill="#E7C1A5" d="M219.103,230.168c0,1.847-1.501,3.341-3.348,3.341l0,0c-1.84,0-3.342-1.495-3.342-3.341
c0,0-0.261-13.476,2.654-13.528c2.915-0.025,1.727-0.025,1.727-0.025C218.641,216.615,219.103,230.168,219.103,230.168z"/>
<path fill="#A5826A" d="M262.826,198.491c-0.317-1.255-1.607-2.005-2.855-1.678c-0.416,0.089-0.761,0.307-1.036,0.572
c-0.289-0.173-0.599-0.296-0.938-0.367c0.092-0.363,0.099-0.765,0-1.177c-0.303-1.131-1.36-1.847-2.489-1.749
c0-0.183-0.013-0.373-0.066-0.553c-0.184-0.723-0.681-1.293-1.311-1.561c0.61-0.567,0.892-1.442,0.672-2.306
c-0.324-1.254-1.607-2.012-2.869-1.691c-0.599,0.145-1.079,0.532-1.381,1.015c-0.36-0.733-1.065-1.223-1.854-1.315
c-0.014-0.042-0.014-0.099-0.032-0.133c-0.42-1.625-1.893-2.658-3.479-2.609c-0.176-1.451-1.244-2.679-2.731-3.002
c-0.709-0.134-1.396-0.074-2.017,0.169c0.286-0.395,0.504-0.846,0.604-1.354c0.415-1.889-0.783-3.761-2.679-4.169
c-1.89-0.412-3.765,0.786-4.18,2.661c-0.134,0.628-0.092,1.23,0.07,1.774c-0.437,0.257-0.817,0.605-1.107,1.018
c-0.437-0.387-0.973-0.669-1.585-0.792c-1.702-0.391-3.374,0.539-4.011,2.104c-0.247-0.106-0.508-0.205-0.775-0.265
c-1.093-0.243-2.165,0.06-2.968,0.705c-0.345-1.206-1.318-2.165-2.629-2.454c-1.893-0.416-3.761,0.79-4.174,2.679
c-0.197,0.898-0.031,1.793,0.403,2.524c-0.678,0-1.333,0.19-1.89,0.539c-0.071-0.007-0.142-0.032-0.219-0.007
c0.43-0.754,0.606-1.635,0.402-2.541c-0.402-1.893-2.284-3.091-4.184-2.687c-1.29,0.296-2.266,1.251-2.608,2.468
c-0.807-0.663-1.886-0.962-2.968-0.715c-0.278,0.052-0.542,0.162-0.786,0.282c-0.627-1.564-2.312-2.502-4.011-2.129
c-0.613,0.142-1.145,0.413-1.585,0.825c-0.088-0.497-0.388-0.923-0.825-1.178c-4-2.622-6.753,0.825-6.457,1.224
c-0.631-0.236-1.318-0.306-2.023-0.145c-1.607,0.349-2.721,1.734-2.763,3.334c-1.614-0.147-3.145,0.846-3.659,2.433
c-0.715,0.119-1.347,0.588-1.665,1.258c-0.313-0.472-0.796-0.832-1.389-0.997c-1.258-0.324-2.548,0.426-2.869,1.678
c-0.219,0.881,0.063,1.738,0.677,2.323c-0.638,0.279-1.135,0.821-1.318,1.554c-0.053,0.18-0.074,0.367-0.074,0.543
c-1.121-0.091-2.182,0.627-2.485,1.755c-0.103,0.409-0.088,0.814,0.007,1.205c-0.332,0.046-0.652,0.163-0.938,0.35
c-0.282-0.265-0.638-0.476-1.033-0.582c-1.266-0.328-2.542,0.434-2.869,1.699c-0.328,1.248,0.427,2.53,1.688,2.862
c0.027,0,0.049,0,0.066,0.01c-0.084,0.575-0.024,1.125,0.145,1.639c-0.07,1.1,0.656,2.136,1.763,2.418
c0.437,0.102,0.877,0.077,1.276-0.053c0.113,0.018,0.226,0.018,0.335,0.018c0.021,0.159,0.067,0.299,0.102,0.423
c-0.278,0.381-0.5,0.796-0.627,1.254c-0.5,1.878,0.614,3.821,2.488,4.304c0.063,0.024,0.109,0.024,0.166,0.039
c0.208,0.799,0.828,1.479,1.682,1.685c0.444,0.126,0.88,0.091,1.289-0.046c0.049,0.081,0.106,0.13,0.156,0.19
c-0.275,1.244,0.465,2.481,1.698,2.815c0.607,0.152,1.195,0.05,1.703-0.218c0.116,0.25,0.257,0.465,0.419,0.67
c-0.744,0.441-1.325,1.178-1.565,2.097c-0.501,1.882,0.62,3.789,2.491,4.29c0.783,0.211,1.583,0.127,2.274-0.169
c-0.036,0.091-0.071,0.211-0.085,0.307c-0.512,1.886,0.617,3.796,2.488,4.289c1.882,0.501,3.8-0.613,4.3-2.506
c0.021-0.081,0.049-0.19,0.063-0.296c0.184,0.088,0.374,0.166,0.578,0.215c1.883,0.49,3.8-0.62,4.304-2.492
c0.441-1.682-0.413-3.401-1.946-4.103c0.014-0.549-0.099-1.089-0.321-1.568c0.987-0.406,1.787-1.248,2.076-2.355
c0.285-1.068,0.039-2.157-0.568-2.988c0.142-0.244,0.254-0.526,0.332-0.79c0.113-0.444,0.141-0.867,0.091-1.293
c1.53-0.024,2.918-1.068,3.328-2.611c0.028-0.106,0.042-0.233,0.07-0.37c0.367,0.042,0.733,0.035,1.121-0.053
c0.796-0.162,1.474-0.606,1.949-1.191c0.811,0.994,2.147,1.516,3.497,1.219c1.822-0.387,2.989-2.122,2.718-3.951
c1.656-0.561,2.665-2.306,2.288-4.067c-0.092-0.385-0.229-0.73-0.434-1.043c1.575-0.476,2.608-1.953,2.53-3.55
c0.106-0.024,0.198-0.032,0.304-0.056c0.289-0.057,0.549-0.163,0.803-0.279c0.007,1.522,0.997,2.915,2.523,3.345
c-0.204,0.324-0.341,0.687-0.426,1.089c-0.391,1.737,0.617,3.474,2.274,4.063c-0.276,1.794,0.902,3.556,2.714,3.938
c1.354,0.31,2.686-0.223,3.497-1.251c0.479,0.61,1.156,1.05,1.959,1.212c0.311,0.074,0.614,0.084,0.923,0.074
c0.007,0.01,0.007,0.01,0.007,0.01c0.406,1.572,1.79,2.591,3.327,2.626c-0.042,0.412-0.021,0.821,0.092,1.272
c0.07,0.269,0.19,0.55,0.328,0.8c-0.603,0.821-0.856,1.911-0.563,2.975c0.289,1.121,1.081,1.977,2.083,2.358
c-0.222,0.479-0.338,1.021-0.331,1.579c-1.523,0.711-2.383,2.421-1.935,4.092c0.49,1.885,2.421,2.999,4.296,2.506
c0.197-0.061,0.395-0.113,0.585-0.205c0.014,0.092,0.029,0.188,0.056,0.296c0.494,1.868,2.418,2.992,4.3,2.485
c1.875-0.483,2.993-2.4,2.503-4.29c-0.035-0.096-0.067-0.183-0.106-0.282c0.698,0.282,1.487,0.356,2.28,0.148
c1.872-0.501,2.993-2.411,2.503-4.29c-0.25-0.923-0.832-1.649-1.579-2.104c0.138-0.169,0.25-0.331,0.363-0.519
c0.542,0.423,1.29,0.6,2.016,0.423c1.254-0.328,2.009-1.604,1.688-2.873c-0.018-0.074-0.032-0.134-0.067-0.198
c0.465,0.198,1.001,0.254,1.53,0.113c1.007-0.271,1.685-1.138,1.741-2.125c1.776-0.564,2.812-2.422,2.333-4.241
c-0.084-0.325-0.218-0.627-0.38-0.899c0.063-0.18,0.113-0.367,0.127-0.567c0.483,0.229,1.036,0.3,1.597,0.134
c1.259-0.311,2.016-1.608,1.695-2.845c-0.028-0.091-0.06-0.183-0.099-0.264c0.071-0.3,0.099-0.599,0.084-0.91
c0.099,0,0.198-0.007,0.289-0.035C262.404,201.039,263.165,199.739,262.826,198.491z M203.364,195.478
c0.021,0.052,0.021,0.12,0.029,0.169c0.021,0.067,0.042,0.12,0.06,0.194c-0.018,0.021-0.038,0.029-0.067,0.046
c-0.032-0.049-0.063-0.12-0.098-0.172C203.322,195.622,203.34,195.555,203.364,195.478z M199.015,187.19
c0.021,0.032,0.046,0.057,0.078,0.103c-0.113,0.029-0.222,0.039-0.325,0.091C198.853,187.322,198.938,187.265,199.015,187.19z
M177.408,199.256c-0.024,0.071-0.039,0.159-0.039,0.226c-0.018-0.066-0.031-0.141-0.053-0.201
C177.352,199.281,177.384,199.256,177.408,199.256z M233.691,186.659c0.081,0.077,0.166,0.148,0.25,0.208
c-0.109-0.024-0.214-0.074-0.328-0.103C233.642,186.736,233.67,186.718,233.691,186.659z M229.314,195.118
c0.01-0.042,0.014-0.098,0.028-0.151c0.028,0.07,0.056,0.151,0.085,0.243c-0.043,0.032-0.071,0.092-0.106,0.163
c-0.018-0.025-0.042-0.025-0.063-0.039C229.278,195.266,229.303,195.186,229.314,195.118z"/>
<path fill="#E6E7E8" d="M246.641,273.381v97.775h-59.652v-97.775l17.99-7.617c1.77,4.177,6.458,7.155,11.981,7.155
c5.484,0,10.154-2.936,11.949-7.046L246.641,273.381z"/>
<polygon fill="#5C8BAA" points="211.517,281.653 202.843,266.606 184.395,274.403 184.395,391.522 211.517,391.522 "/>
<polygon fill="#5C8BAA" points="231.112,266.733 222.43,281.77 222.43,391.649 249.553,391.649 249.553,274.523 "/>
<polygon fill="#517B93" points="211.503,281.664 197.281,267.541 204.443,262.764 213.516,276.179 "/>
<polygon opacity="0.2" fill="#231F20" points="206.491,282.086 197.323,267.523 203.957,263.339 213.562,276.165 "/>
<polygon fill="#5C8BAA" points="206.389,280.949 197.323,267.523 204.479,262.758 213.562,276.165 "/>
<polygon fill="#517B93" points="222.462,281.664 236.694,267.541 229.532,262.764 220.467,276.179 "/>
<polygon opacity="0.2" fill="#231F20" points="227.481,282.086 236.652,267.523 230.018,263.339 220.42,276.165 "/>
<polygon fill="#5C8BAA" points="227.579,280.949 236.652,267.523 229.494,262.758 220.42,276.165 "/>
</g>
</svg>
</div>
SVG not working within Firefox
We're currently developing our new website and we've decided to use some new SVG features. On one of our project pages we have a SVG animation that follows the paths and draws the outline then fades into the final finished image. (see images below) Our current problem is the SVG animation that draws the outlines don't display within Firefox, The final image fades in as planned and we have tested in other browsers such as Chrome, Safari and everything works how we envisioned it. If anyone could point us in the right direction we'd greatly appreciate it. Thank you. URL - http://labs.madebyanalogue.co.uk/analogue/work/lucky-voice-app.php <figure> <div class="drawings ipad"> <img class="illustration" src="../images/work/lucky-voice-app/lucky-voice-app_01.jpg" alt="App Icon" /> <svg class="line-drawing" id="ipad" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" > <g> <path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1283.635,402.858 c143.279,0,259.429,116.15,259.429,259.429s-116.15,259.429-259.429,259.429c-27.602,0-53.474-3.967-78.427-11.951 c-0.422-0.135-1.563-0.615-1.983-0.751c-103.918-33.845-179.019-131.515-179.019-246.727 C1024.206,519.008,1140.356,402.858,1283.635,402.858z"/> </g> <g> <path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1282.706,506.785 c86.061,0,155.826,69.766,155.826,155.826s-69.766,155.826-155.826,155.826c-16.579,0-32.119-2.383-47.107-7.178 c-0.253-0.081-0.939-0.369-1.191-0.451c-62.418-20.329-107.528-78.995-107.528-148.197 C1126.88,576.551,1196.646,506.785,1282.706,506.785z"/> </g> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1542.178,921.53l-518.028-0.139V402.91h518.34v468.332 c0,0,0.13,51.667,0.13,51.96C1542.622,923.495,1542.178,921.53,1542.178,921.53z"/> <path display="none" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1577.545,728.638 c0.599-1.922,1.098-24.892,1.098-28.13c0-3.238,0.339-44.827,0.339-44.827H979.276c0,0-0.247,62.331-0.247,64.659 c0,2.328,0.247,9.552,0.247,9.552l68.194-1h529.676L1577.545,728.638z"/> <g id="_x31_024_1_"> <g> <path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1448.534,362.935h-76.694h-253.605 c-74.395,0-134.703,60.312-134.703,134.705v330.295c0,74.394,60.309,134.705,134.703,134.705h330.299 c74.395,0,134.703-60.312,134.703-134.705V496.64C1583.237,422.247,1522.929,362.935,1448.534,362.935L1448.534,362.935z"/> </g> </g> <path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1246.419,844.098v-71.26h-73.208v-74.207h-72.561 V479.5h146.582v72.708h74.399V479.5h144.605v219.131h-71.689h-0.221c0,0-0.019,0.74-0.019,1.245s0.019,1.304,0.019,1.304v70.658 h-72.695v72.26H1246.419z"/> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1542.49,402.91l-519.979,519.979c0,0-39.178-36.889-39.178-97.555 V490c0,0,1.229-52.125,40.948-88.062c0,0,0.438,0.359,0.531,0.515c0.094,0.156,1.025,0.994,1.025,0.994l518.303,518.303"/> <path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1467.281,963.015V363.309h-73.211h-294.337 v597.87l0.238,0.399C1101.867,962.177,1467.281,963.015,1467.281,963.015z"/> <path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M1320.359,962.015V362.309h-13.681h-58.024v597.87 l-0.952,0.399C1248.083,961.177,1320.359,962.015,1320.359,962.015z"/> <path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M984.654,700.014h599.706v-14.681V625.31H983.333 L984.654,700.014z"/> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M984.142,845.448h599.706l-0.488-72.723V478.388H985.49l-0.399,0.238 C984.493,480.522,984.142,845.448,984.142,845.448z"/> </svg> </div> </figure>