Looking for svg editing software that supports the animate function

Question

I am currently doing some simple svg files by hand. They contain simple graphics. Think of a circle representing a planet and a smaller circle passing in front of it representing a moon. I use the animate command to successfully do that.

I am looking for a graphics editor which will aid me. Inskscape does not support animate. BoxySVG does not support animate either. I would hate to step up to a tool for more complicated vector graphics only to have to come back and add code by hand at the end.

Can someone recommend a solid, robust, open-source svg editor program that is is aware of animate out-of-the box?

Edit

Thanks for the answers thus far. What I'm actually looking for is a program which will let me create some free-standing .svg files which I can give or distribute. Must be .svg format files, can be viewed with or without a web browser. The text-based vector format is important to me, because I may programmatically alter some attributes of the image, like size, color, speed of transit, etc.

Answer 1

I can recommend the snap.svg library with javascript to do simple svg animations. It is not too difficult and can be used for free. Plus, you can actually use svg paths from illustrator etc. and animate them.

Answer 2

I did some quick tests, and Enve https://maurycyliebner.github.io/index, does export the animation inside the SVG.

I think it is still an unpolished project, but see if it helps on what you do.

---

Old answer

I hope someone else answers this because I am also interested in finding some alternatives.

One option is NHC Express animate. The concept is similar to after effects timeline, where you can animate location using paths, scaling, and rotation.

It does not directly use SVG images. It is meant to animate raster images like PNG. But after finishing the animation you can easily change the source image with an SVG one. I have done simple tests and it works.

Besides the standard exporting to video, which we do not want, the program can export to Html5 exporting the animation to a couple of JS files and an HTML one. They are very small, but they use Canvas tags. (I would prefer one that either does not use it or exports it as CSS animations. But that is what it has) It is not open source, but has a free version and a paid one.

You need to tweak the scale of your imported SVG to fit the original PNG.

Another option is to google for "Greensock GUI" It seems that there are some web browser websites that use Greensock as an engine behind it. (Greenock is a JS framework for animating things) You can do that using "Tween JS GUI".

Again, it would be a great one that generates CSS paths.

Option 3 Is Google Web designer, that actually exports CSS animations. For some reason, it says it is only intended for business.

The main focus of it is to produce animated ads, but I think you can adapt it to work for your project. Also, it is not open source, but it is free.

---

For animations using SMIL inside an SVG, google this: https://www.google.com/search?client=firefox-b-d&q=smil+animation+software it seems there are some websites that offer the service.

---

And you can test some of the options mentioned on Inkscape page: https://inkscape.org/es/learn/animation/

Answer 3

It seems that all your boxes can be checked by taking a look at Pencil2D. It's an open source, multi-platform sketch animating program.

The site features tutorial videos as well. The first video on the list is an overview of the basics. At first glance of the placement bar at the bottom of the working window, the program supports bitmaps, vectors as well as a sound track.

My "installation" is just a folder, which implies portability and a not-really-installed program.

Screen shot from linked site.