• Animating Position
• Animating Shape
• Animating Size
• Animating Appearance
• Chaining of Animations

SMIL, the Synchronized Multimedia Integration Language (SMIL, pronounced "smile"), enables simple authoring of interactive audiovisual presentations. SMIL is typically used for "rich media"/multimedia presentations which integrate streaming audio and video with images, text or any other media type.

DOM-based animation will be covered in tutorial 5.

Note that this tutorial requires version 1.0 or greater of SVG.pm

First, let's start with the code we generated in tutorial2. We will build on this by making the text pulsate and the left circle change color, size, and position.

#!/usr/bin/perl -w
use strict;
BEGIN {
  push @INC , '../';  
  push @INC , '../SVG';
}
use SVG;
# create an SVG object
my $svg= SVG->new(width=>200,height=>200);    
# draw a circle at position (100,100)  with ID 'this_circle'  
$svg->circle(id=>'this_circle',cx=>100,cy=>100,r=>50); 

# Define a style %group_style
my %group_style = (
      'opacity'=>1,fill=>'red',
      'stroke'=>'green','fill-opacity'=>0.4,
      'stroke-opacity'=>'1');

# create a group with style %style.
# Every drawn object within this group 
# will have the styles defined in %group_style unless
# otherwise specified.

# but first, let's draw an XML  comment
$svg->comment('Draw a group with two circles that have url links');
$svg->comment('Define a child of $svg called $gp1');
my $gp1 = $svg->group(id=>'group_1',style=>\%group_style);
my $a1 = $gp1->anchor(-href=>'http://www.w3c.org');
$a1->circle(id=>'this_circle',cx=>170,cy=>100,r=>20); 
$a1->circle(id=>'that_circle',cx=>100,cy=>170,r=>20); 

# define a third circle with a separate style (stroke colour), 
# overriding the group stroke colour definition.
$a1->circle(id=>'the_other_circle',cx=>180,cy=>160,r=>20,
            style=>{stroke=>'cyan'}); 

# add a second group, and give that group
# two text elements with cdata entries
$svg->comment('Draw a second group with two text entries One entry has an anchor');
my $gp2 = $svg->group(id=>'group_2');
$svg->comment('Here is 1 way to define text');
my $t1 = $gp2->text(x=>80,y=>20);
$t1->cdata('Tutorial');
$svg->comment('Here is 1 way to define text');
$gp2->text(x=>120,y=>20)->cdata('Three');
$gp2->anchor(-href=>'/SVG.html')
      ->text(x=>20,y=>40,fill=>'rgb(200,30,100)')
      ->cdata('Brought to you by the letters SVG and pm');
$svg->comment("Well, we're done here");
my $an_ellipse = $svg->ellipse(cx=>30,cy=>150,rx=>10,ry=>10,id=>'an_ellipse',stroke=>'rgb(130,220,70)',fill=>'rgb(30,20,50)'); 

Now, let's get started with the animations. The animate method is used to generate a SMIL animation tag. The general syntax of an animation method is:

$an_ellipse-> animate([-method => transform | motion | color | set | [attribute]], %hash of properties of the animation);

If -method is used, then it corresponds to a SMIL animation tag according to:

    transform=>'animateTransform',
    motion=>'animateMotion',
    color=>'animateColor',
    set=>'set',
    attribute=>'animate'

Change the x-position of an ellipse

$an_ellipse-> animate(
    attributeName
    =>"cx",values=>"20; 200; 20",dur=>"10s", repeatDur=>'indefinite');

Change the x and y radii of an ellipse

$an_ellipse-> animate(
    attributeName=>"rx",values=>"10;30;20;100;50;10",dur=>"10s", repeatDur=>'indefinite');

$an_ellipse-> animate(
    attributeName=>"ry",values=>"30;50;10;20;70;150;30",dur=>"15s", repeatDur=>'indefinite');
$an_ellipse-> animate(
    attributeName=>"rx",values=>"30;75;10;100;80;20;120;30",dur=>"20s", repeatDur=>'indefinite');

Animation may also be defined for appearance:

$an_ellipse-> animate(
    attributeName=>"fill",values=>"red;green;blue;cyan;yellow",dur=>"15s", repeatDur=>'indefinite');
$an_ellipse-> animate(
    attributeName=>"fill-opacity",values=>"0;1;0.5;0.75;1",
    dur=>"7s",repeatDur=>'indefinite');
$an_ellipse-> animate(
    attributeName=>"stroke-width",values=>"1;3;2;10;5;1",
    dur=>"20s",repeatDur=>'indefinite');
$gp2-> animate(
    attributeName=>"font-size",values=>"8;12;13;10;8",
    dur=>"5s",repeatDur=>'indefinite');
$gp2->comment('Notice that we can also add comments to nodes');
$gp2->comment('And define their properties');
$gp2-> animate(
    attributeName=>"opacity",values=>"1;0.3;0.2;1",
    dur=>"8s",repeatDur=>'indefinite');
my $out = $svg->xmlify;
print "Content-type: image/svg+xml\n\n";
print $out;

Here is what this program returns:

<?xml
version="1.0" encoding="UTF-8" standalone="yes"?>
 <!DOCTYPE
svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg
height="200" width="200">
<circle id="this_circle" cx="100" cy="100" r="50" />

For more information, please send the author an email: Ronan Oger

Click here for the source code, and Click here to see the result.

Previous Tutorial | Tutorial Home | Next Tutorial

Take part in the Annual Global SVG Conference! SVG Open 2005.

August 15-18, Enschede, the Netherlands

At the SVG Open 2005 Conference you will have the opportunity to learn about the SVG standard, how to use it to create effective and compelling Web content, techniques for developing SVG software solutions, and the latest developments from the W3C. You will meet the authors of the SVG specifications and the creators of SVG applications in person, and you will have the opportunity to provide your own input for future development.

You will get a chance to see the newest SVG applications and tools, and you will hear early announcements of upcoming SVG product releases. SVG Open 2005 courses will enlighten you on SVG, XML and related standards, graphic design and Web application design. Courses will be available at both introductory and advanced levels, in order to serve the needs of all conference attendees.

Click on the image below to proceed to the SVG Open website