Easy way of changing the color for a svg image?

Question

I'm doing my SVG images in AI and inserting them in my HTML like this:

<img class="animal_img" src="images/logos/bird.svg"/>

The class looks like this:

.animal_img {
margin-left: 0px;
margin-top: 0px;
width: 192px;
}

The class only "position" the image.

Currently I'm changing the color in AI and then upload it again. But is it an easier way to change it thru the CSS? Any way I can insert more code into the class and make it decide the color/fill of the sag image?

Thanks in advance, Matt

PS Fairly new to this forum so I hope I got the question correct etc... :-)

Answer 1

You can do it easily when you add the SVG inline. Just open the SVG in a code/text editor and copy paste the code into your code editor file. Then you can use fill: color; to address the color to the SVG.

You can optimize the SVG using for example this SVG Editor.

Using width: 100%; and height: auto; will let the SVG fill out the container it's in.

Example below.

.animal-svg {
  width: 192px;
}

.animal-svg svg {
  margin: 0;
  width: 100%;
  height: auto;
  fill: red;
}

<div class="animal-svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="450" height="450" viewBox="0 0 450 450" xml:space="preserve"><path d="M450 85.7c-17.7 7.6-35.4 12.4-53.1 14.3 20-12 33.5-28.9 40.5-50.8 -18.3 10.8-37.8 18.3-58.5 22.3 -18.3-19.4-40.7-29.1-67.4-29.1 -25.5 0-47.2 9-65.2 27 -18 18-27 39.7-27 65.2 0 6.9 0.8 13.9 2.3 21.1 -37.7-1.9-73-11.4-106.1-28.4C82.5 110.2 54.4 87.5 31.4 59.1c-8.4 14.3-12.6 29.8-12.6 46.5 0 15.8 3.7 30.5 11.1 44 7.4 13.5 17.4 24.5 30 32.8 -14.8-0.6-28.7-4.5-41.7-11.7v1.1c0 22.3 7 41.8 21 58.7 14 16.8 31.6 27.5 53 31.8 -8 2.1-16.1 3.1-24.3 3.1 -5.3 0-11.1-0.5-17.4-1.4 5.9 18.5 16.8 33.6 32.5 45.5 15.8 11.9 33.7 18 53.7 18.4 -33.5 26.3-71.7 39.4-114.5 39.4 -8.2 0-15.6-0.4-22.3-1.1 42.8 27.6 90 41.4 141.6 41.4 32.7 0 63.5-5.2 92.2-15.6 28.7-10.4 53.3-24.3 73.7-41.7 20.4-17.4 37.9-37.4 52.7-60.1 14.8-22.7 25.7-46.3 33-70.9 7.2-24.7 10.8-49.3 10.8-74.1 0-5.3-0.1-9.3-0.3-12C421.8 120.2 437.2 104.3 450 85.7z"/></svg>
  
  </div>

If you really want to not use the inline SVG, you can use this answer from another question: How to change color of SVG image using CSS (jQuery SVG image replacement)?

EDIT See the example below, the inline styling (like in your comment) is overruled by the CSS (.animal-svg svg .st0).

.animal-svg {
  width: 192px;
}

.animal-svg svg {
  margin: 0;
  width: 100%;
  height: auto;
  fill: red;
}

.animal-svg svg .st0 {
  fill: red;
}

<div class="animal-svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="450" height="450" viewBox="0 0 450 450" xml:space="preserve">
  <style type="text/css"> .st0{fill:blue;} </style>
  <path class="st0" d="M450 85.7c-17.7 7.6-35.4 12.4-53.1 14.3 20-12 33.5-28.9 40.5-50.8 -18.3 10.8-37.8 18.3-58.5 22.3 -18.3-19.4-40.7-29.1-67.4-29.1 -25.5 0-47.2 9-65.2 27 -18 18-27 39.7-27 65.2 0 6.9 0.8 13.9 2.3 21.1 -37.7-1.9-73-11.4-106.1-28.4C82.5 110.2 54.4 87.5 31.4 59.1c-8.4 14.3-12.6 29.8-12.6 46.5 0 15.8 3.7 30.5 11.1 44 7.4 13.5 17.4 24.5 30 32.8 -14.8-0.6-28.7-4.5-41.7-11.7v1.1c0 22.3 7 41.8 21 58.7 14 16.8 31.6 27.5 53 31.8 -8 2.1-16.1 3.1-24.3 3.1 -5.3 0-11.1-0.5-17.4-1.4 5.9 18.5 16.8 33.6 32.5 45.5 15.8 11.9 33.7 18 53.7 18.4 -33.5 26.3-71.7 39.4-114.5 39.4 -8.2 0-15.6-0.4-22.3-1.1 42.8 27.6 90 41.4 141.6 41.4 32.7 0 63.5-5.2 92.2-15.6 28.7-10.4 53.3-24.3 73.7-41.7 20.4-17.4 37.9-37.4 52.7-60.1 14.8-22.7 25.7-46.3 33-70.9 7.2-24.7 10.8-49.3 10.8-74.1 0-5.3-0.1-9.3-0.3-12C421.8 120.2 437.2 104.3 450 85.7z"/></svg>
  
  </div>