Effect of :Hover on an SVG inside the <img> tag

Question

I have a file .svg here and I’m using the tag <img> to display this SVG on the screen but wanted to know if it has how to apply a CSS effect on it as :hover, unused jquery preferably, I’ve tried using the conventional one trying to change the properties fill and color in CSS but I couldn’t get any changes. Someone can help me?

HTML:

<img src="assets/icons/diary.svg" class="img-svg mb-2" width="30" height="30">

CSS:

.img-svg {
    fill: red;
    color: green;
}
.img-svg:hover {
    fill: blue;
    color: white;
}

Answer 1

It is possible to do this, but it has some details.

First don’t use tag <img>, use the tag <svg>

You would have a file .svg like that (for being in a <symbol> it won’t appear on the screen if you open this .svg, but when you index in .html he appears)

<svg xmlns="http://www.w3.org/2000/svg" >

  <symbol fill="var(--azul)" id="fish" viewBox="0 26 100 48">
    <path fill="var(--azul)" d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
    c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
    c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
    C88,48.9,86.9,50,85.5,50z"/>  
  </symbol>

</svg>

See that in the <symbol> I’ve already put fill="var(--azul)" that I’m going to use to put the color on the element, and then on the :hover I will change the value of --azul

And in his .html you’ll get it.

<svg class="icon single"><use xlink:href="fish.svg#fish" /></svg>

Notice that here xlink:href="fish.svg#fish" i call ID so SYMBOL <symbol id="fish"...

Then set the color as a variable, and then do the override of color in the :hover. See below for an example.

:root {
    --azul: #0000ff;
}

svg:hover {
    --azul: #ffff00;
}

---

I couldn’t make it work here on the Snippet of the site.

But here’s the link working on Github: https://hugocsl.github.io/svg/

These are the files I used https://github.com/hugocsl/svg

---

EDIT

Using the tag <img>

If the SVG already has some color of fill you can use a filter of hue to change the color matrix on :hover by changing the rotation of hue. It sounds complicated, but see that the code is simple and can solve.

img {
  width: 100px;
}
.hov:hover {
  filter: hue-rotate(90deg);
  transition: all 500ms;
}

fazer hover aqui<br>
<img class="hov" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/adobe.svg" alt="">