Svg image on top of another svg image on hover?

Question

css

Hello. I am adding an svg image to the site. The task is to make, when hovering over, a change to another svg image. On the Internet I found how to change the fill color. This is not it.

<a href="{vk_url}" target="_blank" class="soc_vk"><svg class="icon icon-vk"><use xlink:href="#icon-vk"></use></svg></a>

I tried using css, but the image appears below the image

.soc_vk:hover {
    background-image: url(/templates/Default/images/hover_svg/vk_hover.svg);
  
    }

Answer 1

If you do it via <use>, then 2 are required.

<svg class="icon icon-vk">
  <use class='svg1' xlink:href="#icon-vk"></use>
  <use class='svg2' xlink:href="#icon-hover"></use>
</svg>

and styles

.soc_vk:hover .svg1{ display: none; }
.soc_vk:hover .svg2{ display: inline; }

.soc_vk:not(:hover) .svg1{ display: inline; }
.soc_vk:not(:hover) .svg2{ display: none; }