This works for most use cases, sometimes your design may deliver 2 different variations of image between desktop & mobile where things may get a little tricky, but not impossible. I prefer to use
tags in this scenario and you should be able to do a similar thing (setting a placeholder and swapping out with lazy loading).
Of course, it is still the w3c standard to have width & height attributes in your img tags, so I guess you could still do that, but maybe setting your inline styles to "width:auto; height:auto;" to ignore the inline width & height, meet the standards and allow your inline SVG to do all the work. A lot of bloat to your HTML, but sometimes it's just necessary for a nicer end result