A SMIL animation editor for SVG images

I've left a short tutorial here to get you started with this tool. The tool is very simple. Essentially, the animation editor simply copies the written markup and pastes it into the page, which (depending on whether it's written correctly) starts the animation.

All animation code is written to the end of the edited fileand wrapped in a separate group with id="smil_svg-animation-editor-layer"

No need to search for apply buttons; the editor automatically saves and applies written animations. Since the editor saves all animations at the end of each edited image, your approach to writing animations should also match it. That is, animations nested within elements are not supported. animations can only be applied to elements that have a corresponding selector or ID specified in the href attribute.

For this purpose, I wrote a small extension for this tool, which highlights paths to the desired elements to animate, plus the ability to copy any of them. This is done as follows.

As a result, the selected item will remain highlighted.

You hover over the desired element and click until the desired element is selected. After the last element is selected, the next click will circle and select the topmost element.

Once you've created the desired SVG animation, image, simply click the download button below it. Also, if you need to refine the animations later, you can simply import this file back. Because all animations are stored in a separate location, they are easy to play in the editor.