4

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.

Improve this question
1
  • Then you have a contradiction because if you are not using a browser, you can not ensure the animation will run. Animations inside an SVG as far as I know are using SMIL, which will limit you even more.
    – Rafael
    Commented Sep 14, 2022 at 15:44

3 Answers 3

Reset to default
0

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.

Improve this answer
0

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.

I have not tested this, but looks promising and it seems it will be open source. haikuanimator.com

And the examples of this website have the animation side the SVG file. It has a free plan. www.svgator.com It is a web-based software with a timeline interface, similar to After Effects.

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.

enter image description here

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/

Improve this answer
-1

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.

sample screen shot

Screen shot from linked site.

Improve this answer
3
  • No. Pencil 2D is a cell animation program, where you draw each frame. SVG animation is done using programing and defining paths, as a set of instructions.
    – Rafael
    Commented Sep 11, 2022 at 18:27
  • If the OP requires such a program as you describe, he can edit his question to represent the restriction.
    – fred_dot_u
    Commented Sep 11, 2022 at 21:32
  • 1
    It is not a restriction. It is the way SVG animation works.
    – Rafael
    Commented Sep 12, 2022 at 18:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.