How to efficiently switch images in SVG?

Question

css

Good day to you, colleagues!
I'm just getting started with SVG, so maybe I'm asking the rudimentary...
I have the following task, abstracted from SVG for now:
There are several "graphical components", each of which is a set of named states. Each state is a set of named vector primitives. For the entire component as a whole, for the state and for a separate primitive, the style of its display (including animation) is set. The display area contains objects created on the basis of these components. For each object, you can redefine / redefine the style of its display and select the displayed state. At runtime, you need to dynamically be able to change the state.
At first glance, it all fits nicely into SVG. Components and objects are very much like a bunch of symbol and use tags. Display styles are quite well implemented through CSS.
Two things are incomprehensible to me:
1. How to deal with switching states in this case? For good it would be: "set the state class-> magic-> the displayed state has changed." Is there such magic in SVG or will you have to sharpen the JS ax and manually change one state to another while editing the svg-DOM?
2. After a series of experiments, I realized that in use I do not have access to the internal structure specified in the symbol (and without this I cannot redefine the styles for individual object primitives). Is this really the case or am I doing something wrong? If that's the case, then symbol use doesn't work for me, and again I'll have to manually build the final SVG document by inserting "state" like g?
UPD: So far it seems that the CSS file with all the styles will be static, and the SVG will be (re)generated on the fly, when the state of the objects changes.

Answer 1

I did not quite understand phrases like "that I do not have access to the internal structure specified in"
SVG consists of objects, each of which has its own PATH. We set properties for it...
For convenient work with SVG DOM:
keith-wood.name/svg.html
Although I use simple animations via window.requestAnimationFrame();

Answer 2

Check out this solution (there is a solution description code and step-by-step usage): https://bundlespace.com/intro/lessons/lesson-group... Change state on hover (primitive for example).