How to replace svg fill on hover?

Question

css

I can't find a solution to this problem! Svg is set via background-image, you need to change the fill color on hover.
There are 2 conditions:
1) the path to the svg must be only through background-image, the variant with through html, unfortunately, is not suitable.
2) There is an option - to change on hover to another image, with the desired fill color, but there is a link on the block, and when you click, instead of replacing the image, an empty space appears. This is especially noticeable on tablets.
I ask everyone who knows the solution to help. Thanks in advance!

Answer 1

how to embed svg https://www.youtube.com/watch?v=S0OnkpIoEyQ

Answer 2

.svg:hover {
   fill: red;
}

Answer 3

1) It won't work. Through background-image - definitely nothing. It doesn't even have animations.
2) Here you can think.

.svg {
  background-image: url(svg1.svg);
}
.svg:hover {
  background-image: url(svg1_hover.svg);
}

Answer 4

so that there is no call to the server with :hover, you can do this

.svg {
background-image: url('data:image/svg+xml;utf8,<svg ...><path fill="#FFFBBB" ... /></path></svg>');
}
.svg:hover {
background-image: url('data:image/svg+xml;utf8,<svg ...><path fill="#DDDAAA" ... /></path></svg>');
}