How to start learning svg animation?

Question

css

You need to learn animation using svg in a very short time. tell me, please, where to start?
Maybe there are some ready-made libraries that make it easier to work with svg animation?

Answer 1

Basically, SVG is almost HTML (ok, it's not nice to say that, but still). A tree of tags, attributes, everything. We select the necessary elements, change the attributes - that's the whole animation. As with any other element on the page. This is not some separate and unlike anything type of animation.
There are three options for animating SVG within the frontend, two identical to normal HTML, and one additional one brought in from outside:

1. CSS. An image inserted into a page can be animated with CSS to some extent. Not everything can be done this way, but some simple movements, color changes are quite possible. If you know CSS, you can say that you already know everything that can be done here.
   
2. js. Everything as usual. We get the elements through querySelector, getElementBy... etc., and through setAttribute we set the necessary attributes to the SVG elements. It is usually convenient to add some tool to interpolate values ​​over time. From the popular - GSAP and Anime.js . If you wish, you can write something of your own, if the tasks are very simple, in the basic version, all such tools are built approximately according to this principle . Some tools add some other additional features of their own, or there are ready-made cool examples made using them, such as d3.js, but whether you personally need them - you can’t say without knowing the tasks. And the tools should be chosen based on these very tasks, and not out of fashion. Here it is only important to understand that no libraries extend the SVG format itself, do not bring any fundamentally new features to it, they are more about organizing scripts.
   
3. There is also SMIL. This is an ancient evil from worlds far from the frontend. There is a good tutorial on CSS-tricks. It's all "fancy-native", but sometimes it's hard to sync with the rest of the events on the page, and hard to debug, because there is no adequate binding to developer tools in browsers.
   

It is also useful to get acquainted with this article here , some jambs related to cross-browser compatibility are noted there. Yes, SVG is a thing that seems to have been with us forever, but in the context of animating wtf moments, there are still enough of them.
And there are two popular features that everyone often uses in animations - these are masks and dotted lines . The animation method is not important, but it is useful to know about them.
Well, it's useful to get acquainted with some vector graphics editor in order to be able to structure SVG before animating, remove garbage, adapt contours for morphing (the designer will not always provide a complete set of necessary contours).