SVG-SMIL animation tutorial

<pageby nominor="false" comments="false"/> WARNING' text of this page is garbled (output of automatic translation). To be fixed in the next 1-2 days - 15:24, 2 April 2012 (CEST)

Template:Incomplet

Introduction

This short tutorial provides an introduction to dynamic SVG, ie. animations. We introduce some elements of SMIL ("Synchronized Multimedia Integration Language") embedded in the SVG specification.

Aims:

SMIL animation type
SMIL interactivity type

Basics of animation

The elements of this section on the principles of animation has been widely copied Translation SMIL Animation W3C Recommendation 4 September 2001 . I just simplified some passages - Daniel K. Schneider March 27th, 2012 at 18:23 (EST).

We define animation as manipulation versus time of an attribute of a target element.

The animations define a beginning and a simple duration that can be repeated. Each animation defines an animation function that produces a value of the target attribute at any time in the simple duration. The author can specify how long and how often the animation function should repeat itself. The simple duration combined with a repeat behavior defines the active duration.

The target attribute is the name of a characteristic of a target element or an XML attribute contained in the element or a CSS property applied to the element. By default, the target element of an animation will be the parent of the animation element.

As a simple example, here is the definition of a rectangular SVG animation. The rectange vary from thin elongated wide a flattened shape. The rectangle begins with a width of 10 pixels increasing to 100 pixels for 10 seconds. During the same ten seconds, the height of the rectangle varies from 100 pixels to 10 pixels.

<Animate attributeName = "width" from = "10px" to = "100px" 
begin = "0s" dur = "10s" />
<Animate attributeName = "height" from = "100px" to = "10px"
begin = "0s" dur = "10s" />

</ Rect> (Source....)

http://tecfa.unige.ch/guides/svg/ex/anim-trans/animate-size.svg

The target of an animation can be any element in the document identified with a reference locator en:XLink .

<Rect id = "TAG" .....>
<Animate xlink: href = "# TAG"

The following example shows the principle:

<source lang="XML"> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "- / / W3C / / DTD SVG 1.1 / / EN"

"Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<Svg xmlns = "http://www.w3.org/2000/svg"

xmlns: xlink = "http://www.w3.org/1999/xlink">
<title> animate Simple example with reference XLink </ title>
Rectangle shape <desc> Will Change </ desc>
<rect id="monRect" x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099"/>
<Animate xlink: href = "# monRect" attributeName = "width" 
from = "10px" to = "100px" begin = "0s" dur = "10s" />
<Animate xlink: href = "# monRect" attributeName = "height"
from = "100px" to = "10px" begin = "0s" dur = "10s" />
<text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
Hello. Admire the dynamic rectangle. Animation Defined with targetElement. </ Text>

</ Svg> (Source....)

http://tecfa.unige.ch/guides/svg/ex/anim-trans/animate-size2.svg

This example also shows that one can define a DocType. This makes editing a XML editor. Note also that we must define a namespace ("namespace") for the href part of the language xlink.

When the animation runs, it should not really change the values of attributes in the object model DOM or CSS Object Model. Therefore only animations manipulate the presentation value and should not affect what is called the base value defined by the DOM or CSS OM.

When an animation completes, the effect of the animation ceases to apply and the presentation value defaults to the base value. That said, we can can "extend" the animation effect and freeze the last value for the rest of the document duration.

In an animation can either replace or add value to the base value of the attribute. In this context, the base value may be the value of the DOM or the result of other activities aimed as the same attribute. This broader concept of value is called the basic underlying value. The animations that add to the underlying value are called additive. Animations that override the underlying value are called non-additive.

Overview of SMIL animation markup to

There are five tags (XML elements) for animation.

animate: used to animate in time a single attribute or a single property
Set: provides a simple way for setting a single attribute value for a specified duration.
animateMotion: causes the displacement of an element along a path of movement.
animateColor: specifies a color transformation over time.
animateTransform: animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and / or inclination.

For each of its tags you can use certain types of attributes / values we first introduce, with examples. For those who can read a DTD we have included a formal definition parielle and mainly from the [SMIL Animation http://www.w3.org/TR/smil-animation/ W3C Recommendation 04-September-2001]

A more systematic discussion of the attributes commons is the end.

Such awareness with animate

<Rect x = "50" y = "50" width = "200" height = "100"
style = "fill: # CCCCFF; stroke: # 000099">
<Animate attributeName = "x" attributeType = "XML" 
begin = "0s" dur = "5s" from = "50" to = "300" fill = "freeze" />
</ Rect>
<text x="55" y="90" style="stroke:#000099;fill:#000099;fontsize:24;">
Hello. Let's show was crawling rectangle! Text

</ Svg> (Source....)

The element <animate /> is simply placed inside the element you want to animate
It animates the horizontal position ("x" of rect)
- attributeName = "x" indicates that animates the element "x" of parent
- begin = "0s" indicates that the animation starts after 0 seconds
- dur = "5s" indicates that the duration is 5 seconds
- from = "50" starting point X
- to = "300" end point of X
- fill = "freeze" the animation freezes (ie the rectangle stays where it is)

Animation of an attribute with the animate element

The animate element can animate a single attribute.

The following example shows how to create first a definition for a gradient circle: yellow on the inside (255,255,0) and green on the outside (0,256,0). This gradient is then used in the fill of the ellipse.

Then we create an animation to enlarge / shrink of an ellipse. For this, anime attributes rx and ry (x and y radius) with a set of values that express: min, max, min.

attributeName = "rx" values = "0% 50% 0%" dur = "2s" 
attributeName = "ry" values = "0% 50% 0%" dur = "2s"

<source lang="XML"> <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(255, 255, 0)" />
<stop offset="100%" stop-color="rgb( 0, 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> (Source....)

Original: SVG or Canvas?Сhoosing Between the Two (Feb 2010).

Partial formal definition

The animate element (SMIL Animation, W3C Recommendation 04-September-2001)

<source lang="XML"> <!Animate ELEMENT EMPTY> <!ATTLIST animate

calcMode (discrete | linear | paced | spline) "linear"
values CDATA # IMPLIED
keyTimes CDATA # IMPLIED
keySplines CDATA # IMPLIED
from CDATA # IMPLIED
to CDATA # IMPLIED
by CDATA # IMPLIED

begin CDATA # IMPLIED 
Hard CDATA # IMPLIED
end CDATA # IMPLIED
restart (always | never | whenNotActive) "always"
repeatCount CDATA # IMPLIED 
repeatDur CDATA # IMPLIED
fill (remove | freeze) "remove"

attributeName CDATA # REQUIRED
attributeType CDATA (CSS | XML | auto) "auto"
additive (replace | sum) "replace"
accumulate (none | sum) "none"

onbegin CDATA # IMPLIED 
onend CDATA # IMPLIED 
onrepeat CDATA # IMPLIED

> (Source....)

Transform a drawing with the set element

Specification: The 'set' element provides a simple means for setting a single attribute value for a specified duration. It manages all types of attributes, including those that can not reasonably be interpolated as strings and Boolean values.

The 'set' element is not additive. So the attributes that control the sequence of events "will not work.

Example: Simple animation and animation set

The first rectangle (blue) below appears after 4 seconds. Bisibility his property is first hidden and then visible.

<Rect x = "50" y = "50" width = "200" height = "100" style = "fill: # CCCCFF; stroke: # 000099"

visibility = "hidden">
<Set attributeName = "visibility" attributeType = "XML" 
begin = "4s" dur = "5s" to = "visible" />
</ Rect>

<Animate attributeName = "opacity" attributeType = "XML" 
begin = "1s" dur = "5s" from = "0" to = "1" fill = "freeze" />
</ Rect>

(Source....)

Partial formal definition

<source lang="XML"> <!ELEMENT set EMPTY> <!ATTLIST set

attributeName CDATA # REQUIRED
attributeType CDATA (CSS | XML | auto) "auto"
to CDATA # IMPLIED

begin CDATA # IMPLIED 
Hard CDATA # IMPLIED
end CDATA # IMPLIED
restart (always | never | whenNotActive) "always"
repeatCount CDATA # IMPLIED 
repeatDur CDATA # IMPLIED
fill (remove | freeze) "remove"

> (Source....)

Color animation with AnimateColor

Example: Animating a color

http://tecfa.unige.ch/guides/svg/ex/anim-colors/anim-color1.svg

<Animate fill = "freeze" dur = "5s" begin = "0.1s" 
to = "# FFFFFF" from = "# 000000" calMode = "linear" attributeName = "fill" />

</ Rect>

<Rect style = "fill: # CC9933; stroke: # CC9933" width = "20" height = "500"

ry = "5" rx = "5" y = "100" x = "400">
<Animate hard = "5s" begin = "1s" to = "# 000000" 
from = "# CC9933" calMode = "linear" attributeName = "fill" />
<Animate hard = "5s" begin = "6s" from = "# 000000" 
to = "# CC9933" calMode = "linear" attributeName = "fill" />

</ Rect> (Source....)

The principle is quite simple: you move from one color to another. Here we have two events:

background ranges from white to black (from = "# 000000") to (to = "# FFFFFF")
the rod will first of from = "# CC9933" to to = "# 000000" (after 1s and pendan 4sec)
# 000000 and then "to" # CC9933 ".

Partial formal definition

<source lang="XML"> <!AnimateColor ELEMENT EMPTY> <!ATTLIST animateColor

begin CDATA # IMPLIED 
Hard CDATA # IMPLIED
end CDATA # IMPLIED
restart (always | never | whenNotActive) "always"
repeatCount CDATA # IMPLIED 
repeatDur CDATA # IMPLIED
fill (remove | freeze) "remove"

attributeName CDATA # REQUIRED
attributeType CDATA (CSS | XML | auto) "auto"
additive (replace | sum) "replace"
accumulate (none | sum) "none"

calcMode (discrete | linear | paced | spline) "linear"
values CDATA # IMPLIED
from CDATA # IMPLIED
to CDATA # IMPLIED
by CDATA # IMPLIED
keyTimes CDATA # IMPLIED
keySplines CDATA # IMPLIED

> (Source....)

Shape tweening with AnimateTransform

Example: Simple rotation

http://tecfa.unige.ch/guides/svg/ex/anim-trans/rotation.svg

Simple rotation <title> example </ title>
<desc> rotation with a grouping node </ desc>
g
<Rect x = "50" y = "50" rx = "5" ry = "5" width = "200" height = "100"
style = "fill: # CCCCFF; stroke: # 000099" />
<text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:18;">
Hello. Let's rotate </ text>
<AnimateTransform attributeName = "transform" type = "rotate"
values = "0150100; 360 150 100"
begin = "0s" dur = "5s" />
g

</ Svg> (Source....)

This example rotates ugly

it animates the attribute "rotate" the <g> (which initially is the default, ie no rotation)
we tell just two degrees for the rotation (0 and 360 departing at the end). The rest is interpolated by the machine.

Partial formal definition

<source lang="XML"> <!AnimateTransform ELEMENT EMPTY> <!ATTLIST animateTransform

type (translate | scale | rotate | skewX | skewY)

values CDATA # IMPLIED
from CDATA # IMPLIED
to CDATA # IMPLIED
by CDATA # IMPLIED
begin CDATA # IMPLIED 
Hard CDATA # IMPLIED
end CDATA # IMPLIED

> (Source....)

Interpolation of movement with animateMotion

Example: Animating a movement along a path

http://www.yoyodesign.org/doc/w3c/svg1/animate.html (original)
http://tecfa.unige.ch/guides/svg/ex/svg-w3c/animMotion01.svg (copy)
http://tecfa.unige.ch/guides/svg/ex/svg-w3c/
The 'animateMotion' causes the displacement of an element called along a motion path.
Not to be confused with simple translations, rotations etc.. we do with animate or animateTransform.

The definition of a triangle and its animation along a path

<source lang="xml"> <?xml version = "1.0" standalone = "no"?> <!DOCTYPE svg PUBLIC "- / / W3C / / DTD SVG 20010904 / / EN"

"Http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<Svg width = "5cm" height = "3cm" viewBox = "0 0 500 300"

xmlns = "http://www.w3.org/2000/svg">
Example <desc> animMotion01 - illustrates the calculations of the movement animation </ desc>
<Rect x = "1" y = "1" width = "498" height = "298"
fill = "none" stroke = "blue" stroke-width = "2" />

<Path d = "M100, 250 C 100.50 400.50 400.250"
fill = "none" stroke = "blue" stroke-width = "7.6" />
<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, L25 -12.5, -12.5 L 0, z -87.5"
fill = "yellow" stroke = "red" stroke-width = "6.7">

<AnimateMotion hard = "6s" repeatCount = "indefinite"
path = "M100, 250 C 100.50 400.50 400.250" rotate = "auto" />
</ Path>

</ Svg> (Source....)

Note: The definition of drawing the line follows exactly the same path. Also note that if you wanted to move an object that had an initial position, such as the first blue circle: <source lang="xml">

<circle cx="100" cy="250" r="17.64" fill="blue" />

(Source....) Then define all points of the path depending on the initial position of the object! Here the circle is x = y = 100 and 250. If you want to move the circle to the right of 100 and 100 upwards, you must enter as a point of road 100.100, that is to say, just moving, it should not be added together! For the following, it is always the same: it is in relation to the initial position (and not in relation to the previous position)!

Representation of a path

The notion of Path or path is special in SVG: it serves to produce complex figures with a set of coordinates and commands that specify the relations between the points (lines, curves ...). Here are the available commands:

M: move (Move);
L: creation of a line (Line);
H: creating a horizontal line (horizontal line);
V: Creating a vertical line (vertical line);
C: Creating a curve (Curve);
S: creation of a smooth curve (Smooth);
Q: Creating a bezier curve;
T: Creating a bezier curve smoothed;
A: creation of an arc;
Z: termination of the road or path.

Partial formal definition

<source lang="XML"> <!AnimateMotion ELEMENT EMPTY> <!ATTLIST animateMotion

begin CDATA # IMPLIED 
Hard CDATA # IMPLIED
end CDATA # IMPLIED
restart (always | never | whenNotActive) "always"
repeatCount CDATA # IMPLIED 
repeatDur CDATA # IMPLIED
fill (remove | freeze) "remove"

additive (replace | sum) "replace"
accumulate (none | sum) "none"
calcMode (discrete | linear | paced | spline) "paced"
values CDATA # IMPLIED
from CDATA # IMPLIED
to CDATA # IMPLIED
by CDATA # IMPLIED
keyTimes CDATA # IMPLIED
keySplines CDATA # IMPLIED
path CDATA # IMPLIED
origin (default) "default"

/> (Source....)

Animations combined

It is quite difficult to synchronize a complicated script. By cons, create sequences of animations or animations in parrallel is quite simple.

Example: animation combined

Instead of defining the animation according to the time in seconds, it is possible to define sequences of events, an event by starting at the end of the previous event with the following construction.

<source lang="xml"> begin = "événementprécédent.end" </ source>

The following example uses the second (not very useful for creating complicated suites) <source lang="xml"> <rect id="carre" height="67" width="67" stroke-width="5" stroke="#000000" fill="#ffffff">

<Animate attributeName = "x" attributeType = "XML" begin = "0s" dur = "6s" 
fill = "freeze" from = "300" to = "0" /> 
<Animate attributeName = "y" attributeType = "XML" begin = "0s" dur = "6s" 
fill = "freeze" from = "100" to = "0" />
<AnimateColor attributeName = "fill" attributeType = "CSS" from = "# ffffff" to = "red"
begin = "2s" dur = "4s" fill = "freeze" />

</ Rect> (Source....)

The sample implements a true second row where the animation starts when the first has finished. <source lang="xml"> <rect id="carre" height="67" width="67" stroke-width="5" stroke="#000000" fill="#ffffff">

<Animate attributeName = "x" attributeType = "XML" begin = "0s" dur = "6s" 
fill = "freeze" from = "300" to = "0" />

</ Rect>

<Animate attributeName = "x" attributeType = "XML" begin = "carre.end" 
dur = "6s" fill = "freeze" from = "300" to = "0" />

</ Rect> (Source....)

This way you can make loops of complex events.

Example: animation combined

This example is taken from the French translation of SVG 1.0 specification

It contains several animations:

width / height of the yellow rectangle
displacement of the origin of the yellow rectangle (up left)
animation color for text
movement along a path of the text
rotation of the text
expansion of the text

<source lang="xml"> <?xml version = "1.0" encoding = "ISO-8859-1" standalone = "no"?> <!DOCTYPE svg PUBLIC "- / / W3C / / DTD SVG 1.0 / / EN"

"Http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<Svg width = "8cm" height = "3cm" viewBox = "0 0 800 300"

xmlns = "http://www.w3.org/2000/svg">
Example <desc> anim01 - illustrates the elements of animation. I stabbed it in the French translation of specifications DKS March 2005 </ desc>
<Rect x = "1" y = "1" width = "798" height = "298" 
fill = "none" stroke = "blue" stroke-width = "2" />

<Rect id = "RectElement" x = "300" y = "100" width = "300" height = "100"
fill = "rgb (255,255,0) '>
<Animate attributeName = "x" attributeType = "XML"
begin = "0s" dur = "9s" fill = "freeze" from = "300" to = "0" />
<Animate attributeName = "y" attributeType = "XML"
begin = "0s" dur = "9s" fill = "freeze" from = "100" to = "0" />
<Animate attributeName = "width" attributeType = "XML"
begin = "0s" dur = "9s" fill = "freeze" from = "300" to = "800" />
<Animate attributeName = "height" attributeType = "XML"
begin = "0s" dur = "9s" fill = "freeze" from = "100" to = "300" />
</ Rect>

<g transform="translate(100,100)">

<Text id = "TextElement" x = "0" y = "0"
font-family = "Verdana" font-size = "35.27" visibility = "hidden"> 
Move!
<Set attributeName = "visibility" attributeType = "CSS" to = "visible"
begin = "3s" dur = "6s" fill = "freeze" />
<AnimateMotion path = "M 0 0 L 100 100" 
begin = "3s" dur = "6s" fill = "freeze" />
<AnimateColor attributeName = "fill" attributeType = "CSS"
from = "rgb (0,0,255)" to = "rgb (128,0,0)"
begin = "3s" dur = "6s" fill = "freeze" />
<AnimateTransform attributeName = "transform" attributeType = "XML"
type = "rotate" from = "-30" to = "0"
begin = "3s" dur = "6s" fill = "freeze" />
<AnimateTransform attributeName = "transform" attributeType = "XML"
type = "scale" from = "1" to = "3" additive = "sum"
begin = "3s" dur = "6s" fill = "freeze" />
Text
g

</ Svg> (Source....)

Online example:

The common attributes for tags animation

Here's a quick summary of the most common attributes, without going into details, to use as a guide and then look at a manual if necessary

SVG-SMIL animation tutorial

Introduction

Basics of animation

Overview of SMIL animation markup to

Animation of an attribute with the animate element

Transform a drawing with the set element

Color animation with AnimateColor

Shape tweening with AnimateTransform

Interpolation of movement with animateMotion

Animations combined

The common attributes for tags animation

Attributes for animation values ​​interpolated

Attributes that control the sequence of events

Resources

Acknowledgments

Navigation menu

Slow Search

Attributes for animation values interpolated