DRAWSVG user's guide

9.1. Introduction

After some debate, standard SMIL animations are now fully supported by common browsers (Chrome, Edge, FireFox, Safari, Opera).

SMIL animations have the advantage of being able to cover SVG DOM attributes like style properties whereas CSS animations are limited to style properties.

The sample below animates the circle radius and its stroke-dashoffset style property.

See the online sample (for the pdf version of the document that don't show the animation in action).

SVG SMIL animations are available as 4 common elements:

The animate element used to animate a single attribute or property over time.
The animateMotion element to move a referenced element along a motion path.
The animateTransform element to transform a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing.
The set element provides a simple means of just setting the value of an attribute for a specified duration. It is useful to fix the state of an element during animations.

SMIL animations are integrated within drawsvg editor since release 10.3 (2022 november).

Next: 9.2. The animations menu

Contents: DrawSVG user's guide

Previous: Chapter 9. Animations