SVG Animations

Appearance

Animating with SMIL ​

Introduction ​

SMIL (Synchronized Multimedia Integration Language) is an XML-based language that allows you to create animations directly within SVG files. SMIL provides a rich set of features for animating SVG elements without the need for external libraries or JavaScript.

Basic SMIL Elements ​

<animate> ​

The <animate> element allows you to animate attributes of an SVG element over time.

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue">
    <animate attributeName="fill" from="blue" to="red" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

<animateTransform> ​

The <animateTransform> element is used to animate transformations like rotation, scaling, and translation.

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="green">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="360 100 100" dur="4s" repeatCount="indefinite" />
  </rect>
</svg>

<animateMotion> ​

The <animateMotion> element animates an element along a predefined path.

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="5" fill="purple">
    <animateMotion path="M10 10 H 190 V 190 H 10 Z" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

<set> ​

The <set> element is used to set an attribute to a specific value at a given time.

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" fill="orange">
    <set attributeName="fill" to="red" begin="2s" dur="1s" />
  </rect>
</svg>

Combining SMIL Animations ​

You can combine multiple SMIL animations to create more complex effects.

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue">
    <animate attributeName="r" from="50" to="20" dur="2s" repeatCount="indefinite" />
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 100" to="360 100 100" dur="4s" repeatCount="indefinite" />
  </circle>
</svg>

Advantages and Disadvantages of SMIL ​

Advantages ​

  • Declarative Syntax: SMIL animations are written directly in the SVG file, making them easy to understand and maintain.
  • No External Dependencies: SMIL does not require any external libraries or scripts to function, reducing load times and complexity.
  • Browser Support: SMIL is supported in most modern browsers.

Disadvantages ​

  • Limited Control: SMIL animations offer less control and flexibility compared to JavaScript-based animations.
  • Performance: Complex SMIL animations can impact performance, especially on older devices or browsers.
  • Deprecation: Some browser vendors have announced plans to deprecate SMIL support in favor of CSS and JavaScript animations.

Conclusion ​

SMIL provides a powerful way to animate SVG elements directly within the SVG file. While it has some limitations and potential issues with future browser support, SMIL remains a useful tool for creating simple to moderately complex animations without external dependencies.