SMIL Animation

• declarative

• no scripting

• CSS-like (?)

• works with <img> and background-image

SMIL elements

• <animate>

• <set>

• <animateMotion>

• <animateColor>

Animated elements

• parent or xlink:href

• see the list

<rect x="0" y="0" width="10px" height="10px">
    <animate attributeName="x"
        from="0px"
        to="5px"
        begin="0s"
        dur="2s"
    />
</rect>

<rect id="r1" x="0" y="0" width="10px" height="10px"></rect>
<animate attributeName="x"
    from="0px"
    to="5px"
    begin="0s"
    dur="2s"
    xlink:href="#r1"
/>

Animated attributes

• attributeName

• attributeType (CSS | XML)

Animation result

fill = "(freeze | remove)"

Temporary animation

<rect width="50" height="50" x="10" y="10" fill="red" id="last">
    <set xlink:href="#last" attributeName="fill" to="pink" begin="click" dur="3s" />
</rect>

More resources

• Sara Soueidan's presentations

• A Guide to SVG Animations (SMIL)