SVG - SPLessons
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

SVG SMIL

SVG SMIL

shape Introduction

This chapter demonstrates about the SVG SMIL which is a language used to animate attribute or properties of elements. Animations are intended to be a quick overview of a common elements following are the concepts covered in this chapter.
  • Animating SVG with SMIL
  • SMIL Elements

Animating SVG with SMIL

shape Description

Graphics are defined by the animation elements which are initially defined in the SMIL. SMIL is known as the Synchronised Multimedia Integration Language is the markup language used to animate the SVGs without using the CSS by using CSS user can do the more complex animations. Following are the elements included in SMIL.

Animate

shape Description

The Animate element is used to animate a single attribute or property of another element. The code below demonstrates the Animate from starting point to the ending point element as shown. [html] <!DOCTYPE html> <html> <head> <title>SVG SMIL Animate</title> <h1>SPLessons</h1> </head> <body> <svg version="1.1" width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="circleGrad"> <stop offset="0%" stop-color="rgb(300, 300, 0)" /> <stop offset="100%" stop-color="rgb( 0, 255, 0)" /> <stop offset="100%" stop-color="rgb(200, 255, 0)" /> </radialGradient> </defs> <ellipse fill="url(#circleGrad)" stroke="#000" cx="50%" cy="50%" rx="50%" ry="50%"> <animate attributeName="rx" values="0%;50%;0%" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="0%;50%;0%" dur="2s" repeatCount="indefinite" /> </ellipse> </svg> </body> </html> [/html] Result By running the above code in a preferred browser then user will get the output as shown below.

Animate Motion

shape Description

AnimateMotion Element uses the path data from a given path element to create a motion path for an object to move along the path. The code below demonstrates the moving the circle along the path as shown. [html] <!DOCTYPE html> <html> <head> <title>SVG SMIL Animate with motion</title> <h1>SPLessons</h1> </head> <body> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="5cm" height="3cm" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example animMotion01 - demonstrate motion animation computations</desc> <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2"/> <path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06"/> <circle cx="100" cy="250" r="17.64" fill="blue"/> <circle cx="250" cy="100" r="17.64" fill="blue"/> <circle cx="400" cy="250" r="17.64" fill="blue"/> <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="red" stroke="black" stroke-width="7.06"> <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"> <mpath xlink:href="#path1"/> </animateMotion> </path> </svg> </body> </html> [/html] Result By running the above code in a preferred browser then user will get the output as shown below.

Animate Transform

shape Description

The animateTransform element animates the translation, scaling, rotation, or skewing of the another element. The code below demonstrates the transforming the rectangle as shown. [html] <!DOCTYPE html> <html> <head> <title>SVG SMIL Animate with transform</title> <h1>SPLessons</h1> </head> <body> <svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="300" height="200" fill="purple" stroke="black" stroke-width="1" /> <circle cx="100" cy="100" r="1" fill="red"/> <rect x="0" y="100" width="10" height="30" fill="yellow" stroke="black" stroke-width="1" transform="rotation"> <animateTransform attributeName="transform" begin="2s" dur="5s" type="rotate" from="0 100 100" to="360 100 100" repeatCount="indefinite" /> <animate attributeName="x" attributeType="XML" begin="2s" dur="20s" from="0" to="95" fill="freeze"/> <animate attributeName="y" attributeType="XML" begin="2s" dur="20s" from="100" to="85" fill="freeze"/> </rect> </svg> </body> </html> [/html] Result By running the above code in a preferred browser then user will get the output as shown below.

Set

shape Description

Set element is used to set a value for the attribute to animate to over a duration of time. The code below demonstrates to set the value to the attribute as shown below. [html] <!DOCTYPE html> <html> <head> <title>SVG SMIL Animate with Path</title> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> </head> <body> <h1>SPLessons SVG</h1> <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <desc>Author: The Mozilla foundation, https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL</desc> <desc> License: Creative Commons (BY-SA) http://creativecommons.org/licenses/by-sa/2.5/ </desc> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="red" stroke="black" stroke-width="1"> <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" /> </circle> </svg> </body> </html> [/html] Result By running the above code in a preferred browser then user will get the output as shown below.

Summary

shape Key Points

  • SMIL is used to animate the property.
  • In animate Transform object move along the given path.
  • Set is used by setting the attribute value.