@nikolay_akhmetyanov
Front-end developer

Почему некорректно отображается svg иконка?

Есть две иконки, одна скаченная с интернета, другую прислал дизайнер.
С интернета
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
	<g>
		<path d="M467.76,88.1c-1.87-1.87-4.44-2.931-7.071-2.931c-2.64,0-5.21,1.061-7.081,2.931c-1.859,1.859-2.92,4.43-2.92,7.07
			c0,2.63,1.061,5.211,2.92,7.071c1.87,1.86,4.44,2.93,7.081,2.93c2.63,0,5.201-1.069,7.071-2.93c1.86-1.86,2.92-4.44,2.92-7.071
			C470.68,92.53,469.62,89.959,467.76,88.1z"/>
	</g>
</g>
<g>
	<g>
		<path d="M238.071,323.626c-1.869-1.87-4.44-2.931-7.071-2.931c-2.64,0-5.211,1.061-7.081,2.931c-1.859,1.859-2.92,4.43-2.92,7.07
			c0,2.63,1.061,5.21,2.92,7.071c1.87,1.86,4.44,2.93,7.081,2.93c2.63,0,5.201-1.069,7.071-2.93c1.86-1.86,2.92-4.44,2.92-7.071
			C240.992,328.056,239.932,325.485,238.071,323.626z"/>
	</g>
</g>
<g>
	<g>
		<path d="M491.983,121.313c-2.73-4.802-8.838-6.48-13.637-3.75c-4.801,2.73-6.48,8.836-3.749,13.637
			c29.706,52.238,20.738,118.438-21.81,160.985l-7.583,7.583c-1.832-4.807-4.67-9.316-8.537-13.182L333.911,183.831
			c6.72-3.306,12.929-7.717,18.38-13.168l19.708-19.709c3.905-3.905,3.905-10.238,0-14.143c-3.906-3.905-10.237-3.905-14.144,0
			l-19.708,19.709c-9.259,9.258-21.568,14.357-34.661,14.357h-39.397c-2.652,0-5.195,1.054-7.072,2.929l-30.16,30.16
			c-8.956,8.957-23.529,8.957-32.485,0c-8.957-8.956-8.957-23.529,0-32.485l68.856-68.855C305.307,60.546,371,51.292,422.975,80.122
			c4.83,2.677,10.918,0.936,13.597-3.895c2.679-4.83,0.935-10.918-3.895-13.597c-28.668-15.899-62.444-22.262-95.112-17.911
			c-30.572,4.071-58.555,16.872-81.493,37.184C227.893,56.922,192.02,43.261,154.04,43.261c-41.146,0-79.828,16.023-108.923,45.117
			S0,156.157,0,197.302c0,41.146,16.023,79.828,45.117,108.923l3.769,3.769c0.656,0.655,1.384,1.191,2.153,1.626
			c0.669,8.652,4.294,17.116,10.897,23.718c7.349,7.348,16.997,11.02,26.648,11.02c0.501,0,1.003-0.016,1.504-0.036
			c-0.02,0.506-0.037,1.012-0.037,1.521c0,10.066,3.92,19.53,11.038,26.648c7.349,7.348,16.997,11.021,26.648,11.02
			c0.501,0,1.003-0.016,1.504-0.036c-0.02,0.506-0.037,1.012-0.037,1.521c0,10.066,3.92,19.53,11.039,26.648
			c7.348,7.347,16.998,11.02,26.648,11.02c0.507,0,1.014-0.016,1.521-0.036c-0.406,10.151,3.251,20.437,10.984,28.171
			c7.119,7.118,16.583,11.038,26.648,11.038c10.067,0,19.531-3.92,26.648-11.038l13.977-13.978l18.879,18.877
			c7.118,7.119,16.582,11.039,26.648,11.039c10.066,0,19.53-3.92,26.648-11.038c7.826-7.826,11.482-18.267,10.972-28.537
			c0.628,0.031,1.258,0.049,1.887,0.049c9.651,0,19.303-3.673,26.65-11.021c7.729-7.729,11.386-18.007,10.984-28.153
			c0.506,0.02,1.012,0.037,1.521,0.037c10.066,0,19.53-3.92,26.648-11.038c7.729-7.729,11.386-18.007,10.984-28.153
			c0.506,0.02,1.012,0.037,1.521,0.037c10.066,0,19.53-3.92,26.648-11.038c3.615-3.615,6.337-7.791,8.173-12.248
			c0.973-0.474,1.888-1.105,2.697-1.913l19.394-19.394C515.824,257.436,526.126,181.354,491.983,121.313z M88.585,326.374
			c-4.724,0-9.165-1.839-12.506-5.18c-3.34-3.34-5.18-7.781-5.18-12.505c0-4.723,1.839-9.165,5.18-12.505l17.234-17.234
			c3.34-3.341,7.782-5.18,12.506-5.18c4.723,0,9.165,1.839,12.505,5.18c6.896,6.896,6.896,18.115,0,25.01l-17.234,17.235
			C97.75,324.534,93.31,326.374,88.585,326.374z M115.235,360.349c-3.341-3.34-5.18-7.782-5.18-12.505
			c0-4.724,1.839-9.165,5.18-12.505l17.235-17.235c0,0,0,0,0-0.001c3.34-3.34,7.781-5.18,12.505-5.18
			c4.723,0,9.165,1.839,12.505,5.18c6.896,6.896,6.896,18.115,0,25.01l-17.234,17.235
			C133.349,367.243,122.127,367.243,115.235,360.349z M154.388,399.502c-3.341-3.34-5.18-7.782-5.18-12.505
			c0-4.724,1.839-9.165,5.18-12.505l17.235-17.235c0,0,0,0,0-0.001c3.34-3.34,7.781-5.18,12.505-5.18
			c4.724,0,9.165,1.839,12.505,5.18c6.896,6.897,6.896,18.116,0,25.011l-17.235,17.235
			C172.503,406.398,161.284,406.398,154.388,399.502z M235.787,421.422l-17.235,17.236c-3.34,3.34-7.781,5.18-12.505,5.18
			c-4.723,0-9.165-1.839-12.505-5.18c-6.896-6.897-6.896-18.116,0-25.011l17.235-17.235c0,0,0,0,0-0.001
			c3.34-3.34,7.781-5.18,12.505-5.18c4.723,0,9.165,1.839,12.505,5.18c3.341,3.34,5.18,7.782,5.18,12.505
			C240.968,413.642,239.128,418.082,235.787,421.422z M422.523,325.739c-3.34,3.341-7.782,5.18-12.505,5.18
			c-4.724,0-9.165-1.839-12.505-5.18l-41.627-41.627c-0.002-0.002-0.003-0.003-0.005-0.005l-39.15-39.15
			c-3.906-3.905-10.237-3.905-14.144,0c-3.905,3.905-3.905,10.238,0,14.143l80.782,80.78c6.896,6.897,6.896,18.116,0,25.011
			c-3.34,3.341-7.782,5.18-12.505,5.18c-4.724,0-9.165-1.839-12.505-5.18l-80.782-80.781c-3.906-3.904-10.237-3.904-14.144,0
			c-3.905,3.905-3.905,10.238,0,14.144l39.146,39.145c0.003,0.003,0.006,0.007,0.009,0.01l41.628,41.626
			c6.896,6.897,6.896,18.117,0.001,25.012c-6.897,6.896-18.118,6.896-25.011,0l-41.628-41.628c-0.77-0.769-1.635-1.381-2.556-1.847
			l-11.873-11.873c-3.906-3.904-10.237-3.904-14.144,0c-3.905,3.905-3.905,10.238,0,14.144l55.702,55.7
			c6.896,6.897,6.896,18.116,0,25.011c-3.34,3.341-7.782,5.18-12.505,5.18c-4.724,0-9.165-1.839-12.505-5.18l-21.196-21.195
			c1.615-4.237,2.469-8.774,2.469-13.444c0-10.066-3.92-19.53-11.038-26.648c-7.119-7.118-16.583-11.038-26.648-11.038
			c-0.509,0-1.015,0.017-1.521,0.037c0.401-10.146-3.255-20.424-10.984-28.153c-7.119-7.118-16.583-11.038-26.648-11.038
			c-0.509,0-1.015,0.017-1.521,0.037c0.402-10.146-3.255-20.424-10.984-28.153c-7.119-7.118-16.583-11.038-26.648-11.038
			c-0.509,0-1.015,0.017-1.521,0.037c0.402-10.146-3.255-20.424-10.984-28.153c-14.694-14.694-38.605-14.693-53.299,0
			l-17.234,17.234c-2.174,2.174-4.017,4.553-5.549,7.071c-23.491-24.951-36.385-57.388-36.385-91.81
			c0-35.803,13.942-69.464,39.26-94.78c25.316-25.316,58.978-39.259,94.78-39.259c32.536,0,63.302,11.516,87.644,32.618
			l-61.457,61.457c-8.116,8.117-12.586,18.908-12.586,30.386c0,11.479,4.47,22.27,12.586,30.387
			c8.378,8.377,19.383,12.566,30.387,12.566s22.009-4.188,30.387-12.566l27.232-27.232h35.253c2.911,0,5.79-0.199,8.634-0.552
			l110.403,110.401C429.418,307.625,429.418,318.845,422.523,325.739z"/>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>


Прислал дизайнер
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 404 321.3" style="enable-background:new 0 0 404 321.3;" xml:space="preserve">
<style type="text/css">
	.st0{opacity:0.7;}
	.st1{fill:#7ACCFF;}
	.st2{opacity:0.7;fill:#C7EAFF;}
</style>
<g class="st0">
	<path class="st1" d="M286,312.1H118c-15.5,0-28-12.5-28-28l0,0c0-15.5,12.5-28,28-28h168c15.5,0,28,12.5,28,28l0,0
		C314,299.6,301.5,312.1,286,312.1z"/>
	<path class="st1" d="M374,180.1h-40c-11,0-20,9-20,20l0,0c0,11,9,20,20,20h40c11,0,20-9,20-20l0,0C394,189.1,385,180.1,374,180.1z"
		/>
	<path class="st1" d="M70,180.1H30c-11,0-20,9-20,20l0,0c0,11,9,20,20,20h40c11,0,20-9,20-20l0,0C90,189.1,81,180.1,70,180.1z"/>
</g>
<path class="st2" d="M202,10L202,10C140.1,10,90,60.1,90,122v92.7c0,22.8,18.5,41.3,41.3,41.3h141.3c22.8,0,41.3-18.5,41.3-41.3V122
	C314,60.1,263.9,10,202,10z"/>
<path class="st0" d="M270.3,46.2c1.9,1.8,4.3,2.6,6.7,2.6c2.7,0,5.4-1.1,7.4-3.2c3.7-4.1,3.5-10.4-0.6-14.1l-0.2-0.2
	c-4.1-3.7-10.4-3.3-14.1,0.8C265.8,36.2,266.2,42.6,270.3,46.2z"/>
<path class="st0" d="M30,230.1h10v14c0,24.5,17.8,45,41.1,49.2c4.1,16.5,19.1,28.8,36.9,28.8h168c17.8,0,32.7-12.3,36.9-28.8
	c23.4-4.2,41.1-24.7,41.1-49.2v-14h10c16.5,0,30-13.5,30-30s-13.5-30-30-30h-40c-3.5,0-6.9,0.6-10,1.7V122
	c0-21.4-5.6-42.4-16.3-60.9c-2.8-4.8-8.9-6.4-13.7-3.7c-4.8,2.8-6.4,8.9-3.7,13.7c8.9,15.4,13.6,33,13.6,50.9v92.7
	c0,17.3-14.1,31.3-31.3,31.3H131.3c-17.3,0-31.3-14.1-31.3-31.3V122c0-56.2,45.8-102,102-102c14,0,27.5,2.8,40.2,8.2
	c5.1,2.2,11-0.2,13.1-5.2c2.2-5.1-0.2-11-5.2-13.1C234.9,3.3,218.7,0,202,0C134.7,0,80,54.7,80,122v49.8c-3.1-1.1-6.5-1.7-10-1.7H30
	c-16.5,0-30,13.5-30,30S13.5,230.1,30,230.1z M334,190.1h40c5.5,0,10,4.5,10,10s-4.5,10-10,10h-40c-5.5,0-10-4.5-10-10
	S328.5,190.1,334,190.1z M322.3,227.8c3.6,1.5,7.5,2.4,11.7,2.4h10v14c0,13.7-9.2,25.2-21.7,28.8c-2.6-8.4-8-15.5-15.1-20.3
	C314.4,246,319.7,237.5,322.3,227.8z M118,266.1h168c9.9,0,18,8.1,18,18s-8.1,18-18,18H118c-9.9,0-18-8.1-18-18
	S108.1,266.1,118,266.1z M81.7,227.8c2.6,9.7,7.9,18.3,15.1,24.9c-7.1,4.8-12.5,12-15.1,20.3C69.2,269.3,60,257.8,60,244.1v-14h10
	C74.1,230.1,78.1,229.3,81.7,227.8z M30,190.1h40c5.5,0,10,4.5,10,10s-4.5,10-10,10H30c-5.5,0-10-4.5-10-10S24.5,190.1,30,190.1z"/>
</svg>


Есть таск который собирает в спрайт.

gulp.task('svgSpriteBuild', function () {
	return gulp.src('app/img/icon-svg/*.svg')
	// minify svg
		.pipe(svgmin({
			js2svg: {
				pretty: true
			}
		}))
		// remove all fill, style and stroke declarations in out shapes
		.pipe(cheerio({
			run: function ($) {
				$('[fill]').removeAttr('fill');
				$('[stroke]').removeAttr('stroke');
				$('[style]').removeAttr('style');
			},
			parserOptions: {xmlMode: true}
		}))
		// cheerio plugin create unnecessary string '&gt;', so replace it.
		.pipe(replace('&gt;', '>'))
		// build svg sprite
		.pipe(svgSprite({
			mode: {
				symbol: {
					sprite: "../sprite.svg",
					render: {
						scss: {
							dest:'../../../../dev/sass/_sprite-svg.scss',
							template: 'dev/sass/templates/_sprite_template.scss'
						}
					}
				}
			}
		}))
		.pipe(gulp.dest('app/img/sprite/'));
});


Результат:

5bc5cf6ad0435679589342.png
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ответы на вопрос 1
@vardoLP
Ват ю сэй эбаут май мама?!
сморите сам svg код, там должен быть цвет заливки. Или может быть из за этого? 5bc5d031898bb770591876.png
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы