Как поменять цвет SVG иконки

190

30 марта 2019, 22:30

Имеется иконка в с расширение .svg, прописал её в теге <img src="">.

Я не смог поменять её цвет, но вставив этот код в html смог через fill: color;:

<?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="M376,76h-60c-24.507,0-46.305,11.814-60,30.047C242.305,87.814,220.507,76,196,76h-60c-8.284,0-15,6.716-15,15v180 
			c0,8.284,6.716,15,15,15h90c8.271,0,15,6.729,15,15c0,8.284,6.716,15,15,15s15-6.716,15-15c0-8.271,6.729-15,15-15h90 
			c8.284,0,15-6.716,15-15V91C391,82.716,384.284,76,376,76z M241,258.57c-4.693-1.664-9.743-2.57-15-2.57h-75V106h45 
			c24.813,0,45,20.187,45,45V258.57z M361,256h-75c-5.257,0-10.307,0.906-15,2.57V151c0-24.813,20.187-45,45-45h45V256z"/> 
	</g> 
</g> 
<g> 
	<g> 
		<path d="M467,16H45C20.187,16,0,36.187,0,61v330c0,24.813,20.187,45,45,45h156.729l-15,30H166c-8.284,0-15,6.716-15,15 
			s6.716,15,15,15c26.839,0,160.055,0,180,0c8.284,0,15-6.716,15-15s-6.716-15-15-15h-20.73l-15-30H467c24.813,0,45-20.187,45-45V61 
			C512,36.187,491.813,16,467,16z M220.271,466l15-30h41.459l15,30H220.271z M482,391c0,8.271-6.729,15-15,15H45 
			c-8.271,0-15-6.729-15-15v-15h452V391z M482,346H30V61c0-8.271,6.729-15,15-15h422c8.271,0,15,6.729,15,15V346z"/> 
	</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>

Вопрос: как мне добавить картинку в html без этого огромного svg кода и поменять её цвет?

Answer 1

Рекомендую сгенерировать svg спрайт (сборщиком или icomoon ) и вставлять в html через use:

.icon { 
  display: inline-block; 
  width: 1em; 
  height: 1em; 
  stroke-width: 0; 
  stroke: currentColor; 
  fill: currentColor; 
} 
 
 
.icon-ico { 
  width: 150px; 
  height: 150px; 
   
  fill: orangered; 
}

<div class="wrap"> 
 
 
<svg class="icon icon-ico"><use xlink:href="#icon-ico"></use></svg> 
 
 
</div> 
 
<div style="height: 0; width: 0; position: absolute; visibility: hidden"> 
  <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
      <symbol id="icon-ico" viewBox="0 0 32 32"> 
        <title>ico</title> 
        <path d="M23.5 4.75h-3.75c-1.532 0-2.894 0.738-3.75 1.878-0.856-1.14-2.218-1.878-3.75-1.878h-3.75c-0.518 0-0.938 0.42-0.938 0.938v11.25c0 0.518 0.42 0.938 0.938 0.938h5.625c0.517 0 0.938 0.421 0.938 0.938s0.42 0.938 0.938 0.938 0.938-0.42 0.938-0.938c0-0.517 0.421-0.938 0.938-0.938h5.625c0.518 0 0.938-0.42 0.938-0.938v-11.25c0-0.518-0.42-0.938-0.938-0.938zM15.063 16.161c-0.293-0.104-0.609-0.161-0.938-0.161h-4.688v-9.375h2.813c1.551 0 2.813 1.262 2.813 2.813v6.723zM22.563 16h-4.688c-0.329 0-0.644 0.057-0.938 0.161v-6.723c0-1.551 1.262-2.813 2.813-2.813h2.813v9.375z"></path> 
        <path d="M29.188 1h-26.375c-1.551 0-2.813 1.262-2.813 2.813v20.625c0 1.551 1.262 2.813 2.813 2.813h9.796l-0.938 1.875h-1.296c-0.518 0-0.938 0.42-0.938 0.938s0.42 0.938 0.938 0.938c1.677 0 10.003 0 11.25 0 0.518 0 0.938-0.42 0.938-0.938s-0.42-0.938-0.938-0.938h-1.296l-0.938-1.875h9.796c1.551 0 2.813-1.262 2.813-2.813v-20.625c0-1.551-1.262-2.813-2.813-2.813zM13.767 29.125l0.938-1.875h2.591l0.938 1.875h-4.466zM30.125 24.438c0 0.517-0.421 0.938-0.938 0.938h-26.375c-0.517 0-0.938-0.421-0.938-0.938v-0.938h28.25v0.938zM30.125 21.625h-28.25v-17.813c0-0.517 0.421-0.938 0.938-0.938h26.375c0.517 0 0.938 0.421 0.938 0.938v17.813z"></path> 
      </symbol> 
    </defs> 
  </svg> 
</div>

Если же именно картинкой и img, то вручную в файле .svg прописываете необходимым path ваш fill: color;.