Modern animation for the web
A while back I needed an animated rolling cloud icon, to indicate an ongoing XMLHTTPRequest. Fifteen years ago a vector animation like that would have been trivial: with Flash you'd just motion tween some circles along a bezier-curve, create a symbol from that animation to duplicate and offset in time, et voilà.
Yet now, I could not figure out how to get the same result with SVG.
More recently I had to animate an infographic and add some interaction. A start was already made in Adobe Animate, but the export size was a whopping 2.5MB. So I decided to handcode everything in HTML/CSS for less than 10% of that. Plain HTML/CSS is also accessible as opposed to the canvas/JavaScript black box export from Adobe Animate.
For brevity I will not go into detail about HTML/CSS animations but there is a lot of overlap.
Coding animations might give better quality results, but a good gui, like Animate has, makes it so much easier to create and tweak movement.
So what are the current tools with which to create animated images for web?
Not Adobe Animate
Adobe Animate is what once was Flash. Somewhere end last century Macromedia brought vector graphics to the masses in the form of Flash (originally FutureSplash Animator). This was before SVG even existed. The Flash format was not only very small, the timeline keyframe editor was very easy to work with.
Adobe must have rebranded it because somebody gave it a bad name. But strangely it does not export to SVG. The result is a canvas element with a lot of JavaScript. A real disappointment, especially considering a major obstacle in the heydays of Flash was accessibility and SEO. One would think this issue would be solved for HTML5 exports.
SVGator
One option for creating web animations is SVGator; not as easy to use as Adobe Animate, but it is two dollars cheaper and exports SVG. It is an online web application. You can try it out, although the 14-day trial leaves to be desired because it doesn't unlock all the features.
You cannot draw things, so you have to start your SVG creation in something like Illustrator or Inkscape and import it.
The user interface really lacks in UX. This makes animating itself rather unintuitive. It has some bugs among which non-working keyboard shortcuts.
The resulting animations don't run without JavaScript. Each SVG export comes with a minimum of 30KB JavaScript (but there are examples that have as much as 80KB).
Strangely the resulting output is not optimised for web. My imported SVG had digits with an accuracy of one floating point (ie 231.3). But SVGator turns all those into six, and in most cases with five trailing zeroes (ie 231.300000). Which is really accurate, but when I ran my simple animation through an optimiser I got more than 50% reduction in filesize.
So SVGator isn't ideal, but I guess you could get used to these things.
Lottie
(dot)Lottie is an open-source JSON file format, not something to use directly.
It started with the AfterEffects plugin Bodymovin along with a JavaScript player for use in websites. This was in 2015 but the official dotLottie format was standardised in 2020.
Since Lottie is not officially recognized by the W3C you will need JavaScript to run it.
LottieFiles has several integrations among which plugins for: AfterEffects, Animate and Figma.
The people behind Lottiefiles are also developing a standalone editor called Lottie Creator. It currently allows animating pre-made vector images, but lacks drawing primitives
You may also want to try Lottielab. It is a well-designed, intuitive editor for simple animations.
It doesn't seem to be able to reuse elements though.
Rive
Rive is a stunning animation tool: the development environment is very impressive in terms of rigging, state machines and playback control. Rive is not open-source but a proprietary animation environment and runtime.
Implementation into HTML is a bit complex, the binary file format is not helping here.
The animations are vector based but converted to canvas. So a resize method has to be called when the animation changes size (in a responsive web page).
Rive is resource intensive; a test with a mere eleven animations has great impact on the framerate, slowing it down to a mere 16 frames per second.
Rive is awesome, but probably overkill for most animations.
GSAP
The GreenSock Animation Platform is another remnant of the Flash era. Ported in 2012 to JavaScript it allows for DOM animations, so not only SVG but also other elements and even canvas. Using the Timeline object you can create sequenced animations that can be paused, resumed and reversed.
Stale editors
Animator (by Haiku)
Haiku Animator is an open-source, Lottie based editor that looked promising in 2021. But development seems to have stopped at IOS.
The master on Github should work on Windows but fails.
Anigen
Anigen is an editor that outputs pure SVG (no JS). But it seems to be discontinued: no anigen.org and a stale Github repo.
It easily runs locally but the gui fails.
SnapSVG
SnapSVG is not an editor but a code abstraction. Their words: "makes working with your SVG assets as easy as jQuery". Unfortunately it looks to be a dead project, old code, old issues and wonky examples.
Small tools
There are a variety of small tools that might help a very specific use case but should not be categorized as complete animation software. I'll just list them without too much detail: Vivus JS for stroke animations, SVG Artista, for stroke and fill animations, SVG circus for loading spinners.
Do it by hand with SVG (and CSS)
The alternative is to code it yourself. You don't need JavaScript and browsers simply support it.
It might look complicated, especially SVG paths, but it really is not difficult when somebody like Nanda Syahrasyad explains it.
For the actual animation you can either use native SVG native animate or use CSS.
The simplest solution might be to use CSS because chances are you already know everything you need to know.
But SVG has capabilities that cannot be replicated with CSS: for instance animateMotion, to make an object follow a Bézier curve.
Here are three examples with the cloud animation mentioned earlier.
Flash export
When I found Adobe Animate could not export to SVG my initial solution was to create keyframes for the entire bezier animation. This meant all keyframes were exported in one go, I just had to toggle their visibility.
It looks somewhat choppy, but fine for a small icon.
The final size is 2.97 KB.
Animate SVG with CSS
The previous solution requires a lot of steps and if you want to tweak the end result you have to start over.
It might be easier to do this by hand with a CSS @keyframes animation. What is especially nice about this technique is that we can use CSS properties (or variables) inside the animation to overwrite specific properties per animation instance. In this example --t is used to calculate an offsetted delay.
The final size is 2.61 KB.
Animate SVG with SMIL
There is another way to animate SVG called SMIL. The specification stems from 1998 and covers more than just SVG animations (for reference: SVG is from 1999).
The possibilities of SMIL extend beyond what can be done with mere CSS. If you like to know more here is an extensive article by Sarah Soueidan, and here is a Stackoverflow answer with good examples.
For the clouds animation I made use of animateMotion[calcMode="spline"] which lets you move elements along a bezier-curve.
One downside of SMIL is that you cannot reuse an animation (as in defs) and only overwrite a property. As you can see here, all animations are exactly the same except for the begin attribute. So that results in a lot of repetitive code. But to be honest: for both the SMIL and the CSS example I generated the repetitive parts with JavaScript and used the output.
The final size is 2.67 KB.
TLDR
If you know some SVG and CSS I'd really recommend opening your favorite ASCII editor and type or copy/paste your animation. With the help of a vector editor, it is not that hard.
For more complex animations with longer timelines you could use SVGator. But it does require you to create the assets in another application, and you really should clean up the resulting SVG animation.
If you are free to use another file format and don't mind a JavaScript runtime dependency; I'd recommend you use Lottie. There are editors to choose from and the runtime is well optimised.