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... :-)

use [inline svg](https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction) — zb', May 22 '16 at 08:57
Sorry, but that example was to complex for me (don't understand which parts I need to use) and also, I have an image and not build the svg up using html/css. But thanks for the reply. — Matt, May 22 '16 at 09:07

Roy · Accepted Answer · 2023-03-01T18:27:51.803

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>

Hi, everything worked (a lot of code for the image though) except for the colouring!? I got it perfectly where I wanted it using your example. I used the SVG Editor you proposed and copied that to replace your — Matt, May 22 '16 at 09:20
@Matt Any chance that you still have a color value inside the SVG code? — Roy, May 22 '16 at 09:30
WOW :-) Up in the first few lines it ended with something like: .st0(fill: #0000 etc) Now I got it to work! Many Thanks Roy! :-) — Matt, May 22 '16 at 09:34
Another question @Roy This is what changed the color within the — Matt, May 22 '16 at 09:51

Easy way of changing the color for a svg image?

1 Answers1