#svg
#svg
Вопрос:
Мой логотип SVG отлично отображается в Chrome и Safari. Это сделано в Illustrator (не мной, я не знаю версию). Но в FF это выглядит странно. Не могу выяснить причину. Я не использую никаких фильтров, только SVG-изображение. Я заметил, что если я реализую его с тегом ‘img’, он выглядит нормально, но становится слишком маленьким. Вот код:
<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> Наконец, я реализовал это с помощью <img> тега, подобного этому:
<img src="app/svg-icons/logo.svg" alt="logo" height="87px" width="200px" />
Но было бы интересно, почему это не работает со встроенной реализацией.
Комментарии:
1. В Firefox: joxi.ru/Q2KYKe1u9D1pOr В Chrome: joxi.ru/8AnoPzbiqLeEnr
2. для меня отлично работает в Firefox.
Ответ №1:
У вас есть другие встроенные SVG на странице? Если да, то читайте дальше.
Возможно, наиболее распространенной причиной подобных проблем является то, что вы включаете на страницу несколько изображений SVG, которые имеют конфликтующие id атрибуты. Это может легко произойти, если вы создали SVG в редакторе, подобном Illustrator, который повторно использует одни и те же идентификаторы для каждого создаваемого изображения.
Если вы посмотрите на содержимое SVG, вы увидите, что идентификаторы там «SVGID_1_», «SVGID_2_», «SVGID_3_» и т.д.
id атрибуты в HTML должны быть уникальными. Способ обработки повторяющихся идентификаторов может варьироваться от браузера к браузеру, поэтому вы получаете разные результаты в FF и Chrome.
Исправление заключается в том, чтобы (вручную) редактировать каждое id значение, чтобы сделать их уникальными. Не забудьте также отредактировать любые ссылки на них (например, записи, которые вам нравятся xlink:href="#SVGID_1_" ).