There is an icon in with the extension .svg , I registered it in the <img src=""> .

I could not change its color, but by inserting this code into html I could fill: color; through 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>

Question: how can I add a picture in html without this huge svg code and change its color?

  • 2
    You cannot change the color of the icon in the svg-file. Such a possibility exists only for inline svg - KAGG Design
  • one
    can you please more? - Vadim Yanushik
  • jquery example ru.stackoverflow.com/a/843282/13968 - soledar10
  • you are not satisfied with the fill: color because you want to put it as a file? - Pavel Igorevich
  • look - so happy ? - MaximLensky

1 answer 1

I recommend to generate svg sprite (by the builder or icomoon ) and insert it into html via 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>

If it is a picture and img , then manually fill: color; your fill: color; in the .svg file with the necessary path fill: color; .