Starting with version 2, SnipSVG can animate any object that you can insert. The animations have very low overheads because everything is handled with CSS3, which is just a couple of lines of code compared to animations with complex viewer programs. Combined with the fact that SVG files are also tiny compared to graphics, this means you can create the most compact and efficient animated images on the Web.

Accessing the animation features

The animation features are accessed with the Animation tool in the SnipSVG toolbar, which opens the Animation panel on the right:

This replaces the Quick Format panel, which returns automatically when you close the Animation pane.

How SnipSVG animation works

All animations are CSS3, sometimes with a very small amount of JavaScript for reliable addressing of elements within the SVG image. Because of this, animated SVG files are usually only a tiny bit larger than static SVGs. No other animated icon format can compete with this, because they usually rely either on an additional player app or the use of actual video files.

Animation triggers

Animations must always be started by a user action: A mouseover over the entire SVG image, a mouseover over an element in the image or a click on an element. Animations cannot start automatically.

Animations from start to finish

Animations are started by their trigger, that is clear. But what happens next?

You can animate both elements and groups

Animations can be applied both to individual elements and groups of elements.

Animations are always user-triggered

All SnipSVG animations will only start with a user action, specifically a mouseover or a click. They cannot start automatically.

Animations with targets

SnipSVG animations don't just work for the element they are attached to! You can also make one element animate another element. Clicking on one icon in your image can trigger an animation for another element in the image. For example, clicking on a switch icon could make an image appear, or move an element to illustrate an action you are explaining.

Where the animations don't work

The simple answer to this question is Internet Explorer, and that also means CHM help files, because the CHM viewer is basically an older version of Internet Explorer with a different user interface. Animated SVGs in Internet Explorer or CHM help files just won't animate. Any links attached to them will still work, however. This may also apply to other old browsers, but since those can almost always be updated on any operating system this is not normally an issue.