The only way to practically interact with SVG content [...] you need to embed it directly
Right, and this is actually pretty common -- you can use <svg> tags directly in JSX, and you can set up a build pipeline that lets you import .svg files directly into your .jsx/.tsx.
It's useful because you can do things like animate your SVG using CSS, driven from the JS/JSX code.
Most of the time (and speaking from experience here), any “interaction” with inlined SVGs happens at compile time, setting the size or colors. Animating opacity, scale is done via CSS on the container element.
And for complex animations you resort to Lottie. So interacting with SVG via its DOM API is incredibly rare.
No I don't agree. Simple things like styling the inside of the SVG or animating the colors is pretty common and does not require reaching for Lottie. I don't think Lottie is all that commonplace outside of very large codebases in borderline enterprise environments.
You're probably right in general, but I had a need just the other day to animate something other than opacity and scale. I realised I would need to inline the SVG to make it work, and it was pleasantly straightforward.
Right, and this is actually pretty common -- you can use <svg> tags directly in JSX, and you can set up a build pipeline that lets you import .svg files directly into your .jsx/.tsx.
It's useful because you can do things like animate your SVG using CSS, driven from the JS/JSX code.