Your second example fiddle (kiwi) is very much like the first. It's svg shapes that when hovered change their characteristics. There are technically no images involved, those are drawings - shapes. The 'svg' image you linked to is still a png image. It is simply a base 64 encoded png image:
<image width="985" height="703" xlink:href="data:image/png;base64,iVBORw0KGgoAAA . . .
Now, you could (assuming the actual image were in the same folder as the svg page) get the same thing using the image url. Svg is just text, like HTML, it just has a different syntax and different capabilities (in supporting browsers, svg can be part of an HTML page in fact):
<image width="985" height="703" xlink:href="vacation_26-512.png" x="50" y="50" />
I've added x and y positioning coordinates (svg image tags support them, and possibly other stuff). Now here's an example of HTML and svg combined, run it (make sure the image is available in the same folder):
<!DOCTYPE html>
<html>
<head>
<title>Bob</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {stroke: black; fill: white}
.A:hover * {fill: orange}
.B:hover {fill: blue}
</style>
</head>
<body>
<p>Hello world</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="100%">
<g class="A">
<circle cx="100" cy="100" r="50" />
<circle cx="250" cy="100" r="50" />
<image xlink:href="vacation_26-512.png" x="50" y="50" height="100" width="100" />
</g>
<circle class="B" cx="400" cy="100" r="50" />
</svg>
</body>
</html>
It acts just like HTML until the svg tag, then it acts like svg. In fact, you can put HTML tags inside the svg tags and they will act like HTML tags, but they will also force the end of the svg tag. That's sort of like what happens if you put a block level element inside a <p> tag (in case you didn't know, that forces the closure of the <p> tag).
OK, so in any case, regardless of whether it's base 64 encoded or represented by its url in the folder, we have an 'ordinary' png image in an svg image tag. You could change its x and/or y in css or javascript. But what you were talking about sounded more like a sprite. You can use a base 64 encoded image as background, then you could use it just like a sprite:
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUh . . .");
Here it's important to encode it at the size that you want or to control its size as background using other css properties. But it can only be used this way on an HTML element. Svg shapes do not accept background in css, at least not when I tried it.
There are however a plethora of svg tags, so some might accept background, or there might be a way to assign an image to them in other ways.
There's also a stacking effect in svg. Things that come later cover things that come earlier, so you could possibly use that to crop the image and use movement of the image to get a sprite like effect. In my HTML/svg example, try moving the image tag before the two shapes, it gets covered.
One other thing I discovered is that one can convert an image to an svg drawing. But when I did this using a free online tool* it came out as black and white only, the first part (the rose with a fox tail I think it was) became a solid black silhouette. Perhaps a better conversion tool could render it more exactly. Once rendered like that (as svg shapes), it could be filled though and have other svg things done with it, but it was a series of svg element shapes at that point, so that would be tricky, though I'm sure possible to work out.
I'll look into this further. Hopefully this is giving you some ideas.
* http://image.online-convert.com/convert-to-svg
Oh nice. Thanks for your sharing. Anyway, I have one more tips for that https://www.manticonvert.com/webp-to-png.html