SVG - SMIL

SVG - SMIL
Prev	Chapter 35. SVG - Scalable Vector Graphics II	Next

SMIL, Synchronized Multimedia Integration Language

In order to animate SVG the World Wide Web Consortium created Synchronized Multimedia Integration Language. This was done in 2008. Chrome V45 tried to deprecate it, but this deprecation has since been withdrawn. Besides Chrome doesn't govern the web, the World Wide Web Consortium does. SMIL can

animate the numeric attributes of elements (x, y, ...)
animate transform attributes (translation or rotation)
follow a motion path

The animation is done by adding an SVG element like <animate> inside the SVG element to be animated. Examples will follow.

The reason Chrome tried to deprecate SMIL animations was that CSS offers possibilities for animating just about everything. Those animations are static, so to speak, and will not be covered here.

Example 35.1. Animate Attributes

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100'>
    <rect x='0' y='0' width='300' height='100' 
          stroke='black' stroke-width='1' />
    <circle cx='0' cy='50' r='15'
            fill='blue' stroke='black' stroke-width='1'>
        <animate attributeName='cx' from='0' to='300' dur='5s'
                 repeatCount='indefinite'/>
    </circle>
</svg>

Demo this.

Example 35.2. Animate Transform

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'>
    <rect x='0' y='0' width='300' height='300'
          stroke='black' stroke-width='1'/>
    <circle cx='100' cy='100' r='50' stroke-width='1' stroke='yellow' fill='none'/>
    <rect x='146' y='100' width='8' height='16'
          fill='blue' stroke='black' stroke-width='1'>
        <animateTransform
            attributeName='transform'
            begin='0s'
            dur='20s'
            type='rotate'
            from='0 100 100'
            to='360 100 100'
            repeatCount='indefinite'/>
    </rect>
</svg>

Demo that.

Example 35.3. Animate Along Path

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100'>
    <rect x='0' y='0' width='300' height='100'
          stroke='black' stroke-width='1' />
    <circle cx='0' cy='50' r='15'
            fill='blue' stroke='black' stroke-width='1'>
        <animateMotion path='M 0 0 H 300 Z' dur='3s' 
                       repeatCount='indefinite' />
    </circle>
</svg>

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100'>
    <rect x='0' y='0' width='300' height='100' 
          stroke='black' stroke-width='1' />
    <rect x='0' y='0' width='20' height='20' 
          fill='blue' stroke='black' stroke-width='1'>
        <animateMotion path='M 250,80 
                             H 50 
                             Q 30,80 30,50 
                             Q 30,20 50,20 
                             H 250 
                             Q 280,20,280,50 
                             Q 280,80,250,80
                             Z'
                       dur='4s' repeatCount='indefinite' rotate='auto'/>
    </rect>
</svg>

Demo this and that.

Example 35.4. Animate Along Other Path

<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>

    <circle cx='10' cy='10' r='.25' fill='black'/>
    <circle cx='10' cy='10' r='5' 
            fill='transparent' stroke='silver' stroke-width='.25'/>
    <circle cx='10' cy='15' r='.25' fill='blue'/>

    <circle cx='0' cy='0' r='.5' fill='green'>
        <animateMotion
            path='M 10,15
                  A 5 5 0 1 1  10.001,15' dur='4s' repeatCount='indefinite' rotate='auto'/>
<!--                | | | | |    |_ end coords
                    | | | | |______ counterclockwize (clockwize = false)
                    | | | |________ large circle = true  
                    | | |__________ rotation angle of ellipse
                    | |____________ ry
                    |______________ rx
-->
    </circle>
</svg>

Demo this and that.

Prev	Up	Next
Most Recent Lesson's Assignments	Home	JavaScript - SVG - Programmed Animation