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
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
- Animate Motion
- Animate Transform
- Set
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.
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.
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.
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.
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.