How to change the color of a svg image on active?

Question

I am importing the svg using the src attribute in img element.

For instance: <img src="/images/home.svg" />

I have two kinds of home image. The home.svg which is used in normal situation and homeActive.svg which is used when the home link is active. The two images are completely the same except the color.

Currently, I use an if statement to dynamically display one image over the other. Is there any way that I can just change the color without loading two kind of images.

You should be able to find your answer here - https://stackoverflow.com/questions/9872947/changing-svg-image-color-with-javascript — Kevin, Sep 06 '20 at 19:55
@Abhishek that is what I do now, but that is not good performance wise. — Petro Bianka, Sep 06 '20 at 22:14

Alexandr_TT · Answer 1 · 2020-09-07T11:30:03.760

Is there any way that I can just change the color without loading two kind of images.

You can use CSS filters to change the color on hover

I used 4 instances of the .key key icon and each of them is colored with different CSS filters on hover

.container {
display: -webkit-flex; 
display: flex; 
width:35%;
height:35%;
}
.key {
  height: 3em;
  width: 3em;
   padding: 1em;
   transition:  0.8s;
   }
:hover.key{
     -webkit-filter: hue-rotate(320deg);
     filter: hue-rotate(320deg);
   }
.grey-out {
  opacity: 0.4;
   -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);

  
}
.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

<div class="container">
<img class="key" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
  <img class="key grey-out" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
   <img class="key hue-rotate" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
    <img class="key invert" src="https://twemoji.maxcdn.com/svg/1f511.svg">
</div>

Update

You can use a utility that allows you to choose a combination of filters for the desired color

For example red:

.container {
display: -webkit-flex; 
display: flex; 
width:35%;
height:35%;
}
.key {
  height: 3em;
  width: 3em;
   padding: 1em;
    }
:hover.key{
     -webkit-filter: invert(27%) sepia(100%) saturate(7373%) hue-rotate(359deg) brightness(106%) contrast(109%);
     filter: invert(27%) sepia(100%) saturate(7373%) hue-rotate(359deg) brightness(106%) contrast(109%);
   }

<div class="container">
<img class="key" src="https://twemoji.maxcdn.com/svg/1f505.svg"> 
  
</div>

score 0 · Answer 2 · answered Sep 07 '20 at 00:57

Can you use CSS selectors on SVG rendered via CSS Data URI?

"Selectors in a host document cannot query an SVG document that is embedded as an external resource as opposed to being inlined with the host document markup."

You cannot change the fill or stroke colors of svg elements if they are called via the background or background-image properties. You need to have the svgs in html format, "inline" within your code to be able to target their individual pieces via css.

There may be other methods to solve this by calling a single image, however, they are dependant upon context. Please provide a minimum reproducible example of your code (using the snippet code tool provided by stackoverflow) or a link to codepen or a similar website.

I'll edit this reply if/when needed.

How to change the color of a svg image on active?

2 Answers2