SVG hovers with fallbacks - svg

Question

What is the bestpractice, when I need to have SVG images with SVG hovers with fallbacks?
I mean SVG images with PNG fallbacks (normal, reaponsive 2x, 3x), and change them on hover to other SVG images with PNG fallbacks?
Is it better to use <img /> or <picture> + <source /> + <img /> tag with jQuery (or vanilla, but I already use jQuery), or to have it all in CSS as backgrounds? If jQuery, does it mean swapping srcsets? If CSS, how do I best include #2x and #3x image versions?
Also, how does the used method affect preloading of the hovers? It would surely be much better without blinking.
So far I have this, I need to change them on hover to 1hov.svg, 1hov.png, 1hov#2x.png, 1hov#3x.png
<a href="#">
<picture>
<source type="image/svg+xml" srcset="logos/1.svg">
<img src="logos/1.png" srcset="logos/1#2x.png 2x, logos/1#3x.png 3x" alt="logo">
</picture>
</a>

Answer 1

Here is a HTML + jQuery solution I found. It swaps the src and sourcesets to their hover alternatives. Includes the hovers preloading.
HTML
<a href="#" target="_blank">
<picture>
<source type="image/svg+xml" srcset="logos/1.svg" data-swap-srcset="logos/1hov.svg">
<img src="logos/1.png" data-swap-src="logos/1hov.png"
srcset="logos/1#2x.png 2x, logos/1#3x.png 3x" data-swap-srcset="logos/1hov#2x.png 2x, logos/1hov#3x.png 3x" alt="logo">
</picture>
</a>
jQuery
//preload hovers
$("source[data-swap-src]").each(function(){
$('<img/>')[0].src = $(this).attr("data-swap-src");
});
$("img[data-swap-src]").each(function(){
$('<img/>')[0].src = $(this).attr("data-swap-src");
$('<img/>')[0].srcset = $(this).attr("data-swap-srcset");
});
$("a").hover(function(){
var newone = $(this).find("img").attr("data-swap-src");
$(this).find("img").attr("data-swap-src", $(this).find("img").attr("src"));
$(this).find("img").attr("src", newone);
newone = $(this).find("img").attr("data-swap-srcset");
$(this).find("img").attr("data-swap-srcset", $(this).find("img").attr("srcset"));
$(this).find("img").attr("srcset", newone);
newone = $(this).find("source").attr("data-swap-srcset");
$(this).find("source").attr("data-swap-srcset", $(this).find("source").attr("srcset"));
$(this).find("source").attr("srcset", newone);
}
);