SMIL (The Synchronized Multimedia Integration Language) is markup language for creating interactive multimedia presentations, such as animations, visual transformations, creating slide shows for presentations, demonstrating video, audio and e.t.c.
SMIL recommended of the World Wide Web Consortium. This language is based on XML, which in turn allows you to include links to other SMIL presentations, as well as buttons and more.
In addition to the animation elements defined in the SMIL specification, SVG includes extensions that are compatible with this SMIL specification.
SVG graphics is available for animation using specification SMIL.
Elements of SVG were originally defined in the SMIL specification:
- <animate> - allows you to set animation for scalar attributes and properties for a specific period of time;
- <set> is a convenient abbreviation for animation that allows you to assign animation values to non-numeric attributes and properties, such as visibility properties;
- <animateMotion> - moves the element along the movement path;
- <animateColor> - changes the color value of specific attributes or properties over a specific period of time. Note that using the <animateColor> element is an outdated practice compared to using an animation element to define properties that can take color values. Even though it is still present in the SVG 1.1 specification, it was clearly stated in the same specification that it was deprecated; it was completely removed from the SVG 2 specification.
In addition to the animation elements defined in the SMIL specification, SVG includes extensions that are compatible with the SMIL animation specification; these extensions include attributes that extend the functionality of the <animateMotion> element and additional animation elements.
SVG extensions include:
✔ path (attribute) allows any function of the SVG path data syntax to be specified in the path attribute of the animateMotion element (SMIL animation allows you to use only a subordinate set of SVG path data syntax in the path attribute).
Animation of motion
AnimateMotion in the next section:
<mpath> used in conjunction with the animateMotion element to refer to the motion path that should be used, as well as the motion path.
The mpath element is included inside the animateMotion element, before the closing tag.
Keypoints (attribute) used as an attribute for animateMotion to provide precise control of the speed of moving an animated element along the path.
Rotate (attribute) used as an attribute for animateMotion to control whether an object rotates automatically so that its x-axis points rotate in the same (or reverse) direction as the direction of the tangent vector of the path.
This attribute is the key to creating traffic along the path that will work the way you need it. For more information, see animateMotion.
SVG animation can be similar to CSS animation and transitions due to its nature.
Use of SVG animation
For SVG, you can set styles and animations using CSS (slides). Basically, any transformation or transition animation that can be applied to an HTML element can also be applied to an SVG element.
However, there are some SVG properties that can't be animated via CSS, but this can be done directly via SVG.
An SVG trajectory, for example, is defined by a set of data (attribute d="") that defines the shape of this trajectory.
This data can be modified and animated via SMIL, but not via CSS.
This is because SVG elements are described using a set of attributes known as SVG view attributes.
Some of these attributes can be set, modified, and animated using CSS, while others can't.
Read more about the SMIL animation on next web sites and pages of web service: