Image optimization for different devices: work with one image of a fixed size or with several images?

Question

css

Good afternoon!

Until recently, it seemed to me a good idea to use just one image for all devices. And with the help of css (object-fit, background), manipulate its size, and smoothly change it on any screens.
Apparently I was not quite right, right?
It looks like a good solution in this situation would be to use the picture tag and the srcset attribute. And load images of different sizes, for different devices, using the break points of the srcset attribute. Is it so?

In the past, I've used picture just for the sake of outputting webp there, and if the browser can't webp, load everything else...

How will the decision to use the picture tag affect inline svg? Can I inline svg in srcset? Or is it better to just link to the svg file?

Well, as a bonus ...
How to change the color of svg if it is loaded through background css?) For example, when the hover state? fill properties will work? Or throw a new background into the hover and already change its color in the svg code?