previous next

Appendix C: SMIL Tag Reference

Intended for advanced users, this appendix provides a reference to SMIL tags and attributes. Be sure to familiarize yourself with "Conventions Used in this Guide", which explains the typographical conventions used in this appendix.

<smil>...</smil>

The <smil> and </smil> tags must start and end the SMIL markup. The SMIL 2.0 namespace declaration is required. You must declare the RealNetworks extension namespace if your SMIL file includes a customized attribute that uses the rn: prefix.

<smil> Tag Namespaces
Namespace Features Defined Reference
xmlns="http://www.w3.org/2001/SMIL20/Language" SMIL 2 Language Profile click here
xmlns:rn="http://features.real.com/2001/SMIL20/Extensions" RealNetworks extensions click here

Header Tags

The SMIL file header, created between <head> and </head> tags, contains tags that let you define the presentation's layout, information, transitions, and other features. For basic information about defining the SMIL file header, see "Header and Body Sections".

<meta/>

The header region's <meta/> tags provide presentation information. A <meta/> tag can also set a base URL for source clips in the SMIL file. The content and name attributes are required for each <meta> tag. For basic information about the <meta/> tag, see "Defining Information for the SMIL Presentation".

<meta/> Attributes
Attribute Value Function Reference
content text|URL Provides the content for the name attribute. click here
name abstract Gives the presentation abstract. click here
author Lists the presentation author's name. click here
base Sets the base URL for the source clips. click here
copyright Supplies the presentation copyright. click here
title Gives the presentation title. click here

Examples 

<meta name="author" content="Jane Morales"/>
<meta name="title" content="Multimedia My Way"/>
<meta name="copyright" content="(c)2001 Jane Morales"/>
<meta name="base" content="rtsp://realserver.example.com/"/>

<layout>...</layout>

The <layout> and </layout> tags within the SMIL header contain other tags that define the layout of visual clips. Within the layout section, you define a root-layout area and separate regions for clips. You can also define secondary media windows.

<root-layout/>

Within the layout section, a single <root-layout/> tag sets the overall size of the main media window. Clips play in regions created within the root-layout area. They do not play in the root- layout area directly. The height and width attributes are required for the <root-layout/> tag. For basic information about the <root-layout/> tag, see "Defining the Main Media Window".

<root-layout/> Attributes
Attribute Value Default Function Reference
backgroundColor color_value black Sets the window background color. click here
height pixels (none) Sets the main media window height. click here
rn:resizeBehavior percentOnly|zoom zoom Controls whether regions resize. click here
width pixels (none) Sets the main media window width. click here

Example 

<layout>
  <root-layout backgroundColor="maroon" width="320" height="240"/>
  <region ...playback region defined.../>
  <region ...playback region defined.../>
</layout>

<topLayout>...</topLayout>

Following <root-layout/>, <topLayout>...</topLayout> tags can define the overall size of secondary media windows that are detached from the main media window. You assign clips to play in regions within this window. You cannot assign clips directly to a <topLayout> window. The height and width attributes are required for the <topLayout> tag. For basic information about the <topLayout> tag, see "Creating Secondary Media Windows".

<topLayout/> Attributes
Attribute Value Default Function Reference
backgroundColor color_value black Sets the background color. click here
close onRequest|whenNotActive onRequest Determines when the window closes. click here
height pixels (none) Sets the window height. click here
open onStart|whenActive onStart Controls when the window opens. click here
rn:resizeBehavior percentOnly|zoom zoom Controls whether regions resize. click here
width pixels (none) Sets the window width. click here

Example 

<layout>
  <root-layout.../>
  ...main media window regions defined...
  <topLayout width="180" height="120" open="whenActive" close="whenNotActive">
    ...secondary media window regions defined...
  </topLayout>
</layout>

<region/>

Following <root-layout/>, or between <topLayout> and </topLayout>, <region/> tags define the size, placement (relative to the window), and properties of each region used to play clips. The id attribute is required for the <region/> tag. For basic information about the <region/> tag, see "Defining Playback Regions".

<region/> Attributes
Attribute Value Default Function Reference
backgroundColor inherit|transparent|
color_value		 transparent Sets the region background color. click here
bottom auto|pixels|
percentage		 auto Sets the region offset from the bottom of the window. click here
fit fill|hidden|meet|
scroll|slice		 hidden Controls how clips fit the region. click here
height auto|pixels|
percentage		 auto Sets the region height. click here
id name (none) Creates a target ID for assigning clips to the region. click here
left auto|pixels|
percentage		 auto Sets the offset from the window's left side. click here
rn:opacity percentage 100% Reduces background opacity. click here
regionName name (none) Provides a name for certain features. click here
right auto|pixels|
percentage		 auto Sets the offset from the window's right side. click here
showBackground always|whenActive always Determines when the background color appears. click here
soundLevel percentage 100% Cuts or boosts a clip's audio volume. click here
top auto|pixels|
percentage		 auto Sets the offset from the top of the window. click here
width auto|pixels|
percentage		 auto Defines the region width. click here
z-index number 0 Sets the stacking order when the region overlaps another region. click here

Example

The following example defines both a region and a subregion: 

<layout>
  <root-layout .../>
  <region id="video" top="5" left="5" width="240" height="180"z-index="3" backgroundColor="blue" showBackground="whenActive"/>
    <region id="logo" bottom="10%" right="15%" fit="fill"/>
  </region>
</layout>

<regPoint/>

Between the <layout> and </layout> tags, <regPoint/> tags define registration points that determine where and how clips are placed in regions. The id attribute is required for the <regPoint/> tag. For basic information about the <regPoint/> tag, see "Creating Registration Points".

<regPoint/> Attributes
Attribute Value Default Function Reference
bottom auto|pixels|
percentage		 auto Sets the point's offset from the region's bottom border. click here
id name (none) Creates an ID for assigning the point to clips. click here
left auto|pixels|
percentage		 auto Sets the point's offset from the region's left side. click here
right auto|pixels|
percentage		 auto Sets the point's offset from the region's right side. click here
top auto|pixels|
percentage		 auto Sets the point's offset from the region's top border. click here
regAlign topLeft|topMid|
topRight|midLeft|
center|midRight|
bottomLeft|bottomMid|
bottomRight		 topLeft Specifies how clips align to the point. click here

Example 

<layout>
  ...windows and regions defined... 
  <regPoint id="middle" left="50%" top="50%" regAlign="center"/>
</layout>

<transition/>

Following the layout section, <transition/> tags define transition effects that occur when clips start or stop. The id and type attributes are required for the <transition/> tag. For basic information about the <transition/> tag, see "Defining Transition Types".

<transition/> Attributes
Attribute Value Default Function Reference
borderColor blend|color_value black Specifies a border color or a blended border. click here
borderWidth pixels 0 Specifies a border width. click here
fadeColor color_value black Sets a color for fades. click here
direction forward|reverse forward Specifies the transition direction. click here
dur time_value 1s Defines the length of the transition effect. click here
endProgress 0.0-1.0 1.0 Ends the effect before it completes fully. click here
horzRepeat integer 1 Sets a number of horizontal repetitions. click here
id name (none) Creates an ID for assigning the effect. click here
startProgress 0.0-1.0 0.0 Starts the effect at a midway point. click here
subtype subtype_name (varies) Defines an optional subtype for each type. click here
type type_name (none) Specifies the main transition type. click here
vertRepeat integer 1 Sets a number of vertical repetitions. click here

Example 

<layout>
  ...windows, regions, and registration points defined... 
</layout>
<transition id="sixteenBoxes" type="fourBoxWipe" subtype="cornersOut" horzRepeat="2" 
  vertRepeat="2" dur="2s"/>

Clip Source Tags

You add clips to a presentation with one of the following source tags:

<animation/> animation clip such as Macromedia Flash
<audio/> audio clip such as RealAudio
<brush/> color block used in place of a media clip
<img/> image file in GIF, JPEG, or PNG format
<ref/> any type of clip not covered by the other tags
<text/> static text file
<textstream/> streaming text clip such as RealText
<video/> video clip such as RealVideo

Except for <brush/>, the choice of tag does not affect playback. All clip source tags can use <ref/>, for example. The src attribute is required for all clip source tags except <brush/>. For basic information about the clip souce tags, see "Creating Clip Source Tags".

Clip Tag Attributes
Attribute Value Default Function Reference
abstract text (none) Provides a clip abstract. click here
alt text (none) Provides alternate text. click here
author text (none) Lists the clip's author. click here
rn:backgroundOpacity percentage 100% Adjusts background opacity. click here
begin time_value 0s Delays normal playback time. click here
bgcolor color_value (none) Substitutes color for transparency. Use in a <param/> tag. click here
bitrate bits_per_second 12288 Sets a static clip's streaming speed. Use in a <param/> tag. click here
rn:chromaKey color_value (none) Turns selected color transparent. click here
rn:chromaKeyOpacity percentage 0% Adds opacity to rn:chromaKey. click here
rn:chromaKeyTolerance #nnnnnn (none) Widens range of rn:chromaKey. click here
color color_value black Sets color in a <brush/> tag. click here
clipBegin time_value (none) Specifies the clip's internal timing mark where playback begins. click here
clipEnd time_value (none) Specifies the clip's internal timing mark where playback ends. click here
copyright text (none) Lists the copyright for the clip. click here
dur time_value|media|
indefinite		 media Sets the total time the clip or one of its repeating cycles plays. click here
end time_value (none) Sets the end time for the clip. click here
erase never|whenDone whenDone Specifies if the clip remains when its fill period expires. click here
fill auto|default|freeze|
hold|remove|transition		 auto|
default		 Determines the fill state when the clip is no longer active. click here
fillDefault auto|freeze|hold|
inherit|remove|
transition		 inherit Sets a default fill for contained elements, such as animations. click here
id name (none) Names clip for reference by other elements, such as animations. click here
longdesc text (none) Provides a long description. click here
rn:mediaOpacity percentage 100% Adjusts overall transparency. click here
mediaRepeat strip|preserve preserve Strips out native repetitions. click here
readIndex integer 0 Determines how assistive devices read clip information. click here
regAlign topLeft|topMid|
topRight|midLeft|
center|midRight|
bottomLeft|bottomMid|
bottomRight		 topLeft Specifies which part of the clip aligns to the registration point. click here
region region_ID (none) Assigns the clip to a region. click here
regPoint regPont_ID|
topLeft|topMid|
topRight|midLeft|
center|midRight|
bottomLeft|bottomMid|
bottomRight		 (none) Assigns the clip to a predefined registration point, or specifies a point on the region. click here
reliable true|false false Ensures reliable transmission. click here
repeatCount integer|indefinite|
fractional_value		 0 Repeats the clip the specified number of times, or indefinitely. click here
repeatDur time_value|indefinite 0s Repeats the clip the specified amount of time. click here
restart always|default|never|
whenNotActive		 always Determines if the clip can replay. click here
src URL (none) Provides a full or relative URL for the clip. Not used with <brush/>. click here
syncBehavior canSlip|default|
independent|locked		 default Sets how the clip synchronizes to its group. click here
title text (none) Provides a title for the clip. click here
transIn <transition/> ID (none) Assigns a starting transition effect. click here
transOut <transition/> ID (none) Assigns an ending transition effect. click here

Examples 

<video id="video1" src="rtsp://realserver.example.com/media/video2.rm" region="video"
  begin="40s" clipBegin="5100ms"clipEnd="4.5min" fill="freeze"/>

<audio id="audio1" src="rtsp://realserver.example.com/media/music.rm"
  dur="10.5s" repeatCount="5"/>

<img id="image1" src="http://www.example.com/poster.jpg" region="image_region" dur="15s">
  <param name="bitrate" value="5000"/>
</img>

<brush color="blue" region="region_1" dur="5s"/>

<prefetch/>

Chapter 18 describes the <prefetch/> tag, which lets you download clip data before the clip plays. The <prefetch/> tag can use many SMIL timing attributes to set limits on prefetching. It also has its own attributes that control the data download. The id attribute is required.

<prefetch> Attributes
Attribute Value Default Function Reference
bandwidth bits_per_second|
percentage		 100% Sets the bandwidth used to get data. click here
begin time_value 0s Delays the prefetch start. click here
clipBegin time_value 0s Specifies the clip's internal timing mark where prefetching begins. click here
clipEnd time_value (none) Specifies the clip's internal timing mark where prefetching ends. click here
dur time_value|media|
indefinite		 media Sets the duration for prefetching. click here
end time_value (none) Sets the end time for prefetching. click here
id name (none) Names prefetching element for reference by other SMIL elements. click here
mediaSize bytes|percentage 100% Sets how much data to fetch based on clip size. Overrides mediaTime. click here
mediaTime time_value|percentage 100% Specifies the amount of data to fetch based on the clip's duration. click here
restart always|default|never|
whenNotActive		 always Determines if prefetching can restart. click here
src URL (none) Gives the URL to the prefetched clip. click here
syncBehavior canSlip|default|
independent|locked		 default Sets how <prefetch/> synchronizes to its group. click here

Group Tags

Chapter 10 explains the group tags that you can use to create the superstructure for your presentation's timeline.

<seq>...</seq>

The <seq> and </seq> tags play the enclosed clips in sequence. No attributes are required for a <seq> tag, which is described in "Playing Clips in Sequence".

<seq> Attributes
Attribute Value Default Function Reference
begin time_value 0s Delays the normal group playback. click here
dur time_value|media|
indefinite		 media Sets the total time the group plays. click here
end time_value (none) Sets an end time for the group. click here
fill freeze|hold|remove remove Determines the fill state when the group is no longer active. click here
fillDefault auto|freeze|hold|
inherit|remove|
transition		 inherit Sets a default fill for contained clips. click here
id name (none) Names the group for reference by other elements. click here
repeatCount integer|indefinite|
fractional_value		 0 Repeats the group the specified number of times, or indefinitely. click here
repeatDur time_value|indefinite 0s Repeats the group the specified amount of time. click here
restart always|default|never|
whenNotActive		 always Determines if the group can restart. click here
restartDefault always|inherit|never|
whenNotActive		 inherit Specifies a restart value the group passes to its elements. click here
syncBehavior canSlip|default|
independent|locked		 default Determines how the group synchronizes to its containing group. click here
syncBehaviorDefault canSlip|independent|
inherit|locked		 inherit Sets the default syncBehavior value for the elements the group contains. click here
syncTolerance time_value|
inherit		 inherit Creates a tolerance value for locked elements in the group. click here
syncToleranceDefault time_value (none) Sets a tolerance value inherited by other groups the group contains. click here

Example 

<seq repeatDur="30min">
  <audio src="rtsp://realserver.example.com/one.rm"/>
  <audio src="rtsp://realserver.example.com/two.rm"/>
</seq>

<par>...</par>

The <par> and </par> tags make enclosed clips play at the same time. No attributes are required for a <par> tag, which is described in "Playing Clips in Parallel".

<par> Attributes
Attribute Value Default Function Reference
abstract text (none) Provides an abstract for the group. click here
author text (none) Lists an author for the group. click here
begin time_value 0s Delays the normal playback time. click here
copyright text (none) Lists the copyright for the group. click here
dur time_value|media|
indefinite		 media Sets the total time the group plays. click here
end time_value (none) Sets an end time for the group. click here
endsync all|first|id(clip id)|
last|media		 last Determines when the group ends. click here
fill freeze|hold|remove remove Determines the fill state when the group is no longer active. click here
fillDefault auto|freeze|hold|
inherit|remove|
transition		 inherit Sets a default fill for contained clips. click here
id name (none) Names the group for reference by other elements. click here
repeatCount integer|indefinite|
fractional_value		 0 Repeats the group the specified number of times, or indefinitely. click here
repeatDur time_value|indefinite 0s Repeats the group the specified amount of time. click here
restart always|default|never|
whenNotActive		 always Determines if the group can restart. click here
restartDefault always|inherit|never|
whenNotActive		 inherit Specifies a restart value the group passes to its elements. click here
syncBehavior canSlip|default|
independent|locked		 default Determines how the group synchronizes to its containing group. click here
syncBehaviorDefault canSlip|independent|
inherit|locked		 inherit Sets the default syncBehavior value for the elements the group contains. click here
syncTolerance time_value|
inherit		 inherit Creates a tolerance value for locked elements in the group. click here
syncToleranceDefault time_value (none) Sets a tolerance value inherited by other groups the group contains. click here
title text (none) Lists a title for the group. click here

Examples 

<par>
  <video src="newsong.rm"/>
  <textstream src="newsong.rt"/>
</par>

<par endsync="id(text)" repeatCount="2" begin="4s">
  <video src="newsong.rm"/>
  <textstream id="text" src="newsong.rt"/>
</par>

<excl>...</excl>

The <excl> and </excl> tags create an exclusive group in which only one clip can play at a time. A duration is required for the <excl> tag if all elements in the group use interactive timing. For basic information on this tag, see "Creating an Exclusive Group".

<excl> Attributes
Attribute Value Default Function Reference
begin time_value 0s Delays the normal playback time. click here
dur time_value|media|
indefinite		 media Sets the total time the group plays. click here
end time_value (none) Sets an end time for the group. click here
endsync all|first|id(clip id)|
last|media		 last Determines when the group ends. click here
fill freeze|hold|remove remove Determines the fill state when the group is no longer active. click here
fillDefault auto|freeze|hold|
inherit|remove|
transition		 inherit Sets a default fill for contained clips. click here
id name (none) Names the group for reference by other elements. click here
repeatCount integer|indefinite|
fractional_value		 0 Repeats the group the specified number of times, or indefinitely. click here
repeatDur time_value|indefinite 0s Repeats the group the specified amount of time. click here
restart always|default|never|
whenNotActive		 always Determines if the group can restart. click here
restartDefault always|inherit|never|
whenNotActive		 inherit Specifies a restart value the group passes to its elements. click here
syncBehavior canSlip|default|
independent|locked		 default Determines how the group synchronizes to its containing group. click here
syncBehaviorDefault canSlip|independent|
inherit|locked		 inherit Sets the default syncBehavior value for the elements the group contains. click here
syncTolerance time_value|
inherit		 inherit Creates a tolerance value for locked elements in the group. click here
syncToleranceDefault time_value (none) Sets a tolerance value inherited by other groups the group contains. click here

Example 

<excl dur="indefinite">
  <video src="video1.rm" begin="button1.activateEvent" region="video_region"/>
  <video src="video2.rm" begin="button2.activateEvent" region="video_region"/>
  <video src="video3.rm" begin="button3.activateEvent" region="video_region"/>
</excl>

<priorityClass>...</priorityClass>

These tags create a priority class within an exclusive group. Each priority class, which is described in "Modifying Clip Interruption Behavior", defines the interruption behavior of clips within the exclusive group. No attributes are required for a <priorityClass> tag.

<priorityClass> Attributes
Attribute Value Default Function Reference
higher pause|stop pause Sets class behavior on interruption by clips with higher priority. click here
id name (none) Names the group for reference by other elements. click here
lower defer|never defer Specifies how interrupting clips with lower priority behave. click here
pauseDisplay disable|hide|
show		 show Sets a clip's appearance if the clip is paused. click here
peers defer|never|
pause|stop		 stop Controls how clips in the same class interrupt each other. click here

Example 

<excl>
  <priorityClass peers="pause">
    <video src="video1.rm" begin="button1.activateEvent" region="video_region"/>
    <video src="video2.rm" begin="button2.activateEvent" region="video_region"/>
    <video src="video3.rm" begin="button3.activateEvent" region="video_region"/>
  </priorityClass>
</excl>

<switch>...</switch>

The <switch> and </switch> tags, described in "Understanding Switching", specify elements that RealONE Player chooses between based on certain criteria. No attributes are required for the <switch> tag.

<switch> Attributes
Attribute Value Function Reference
id name Names the group as a link target for other SMIL files. click here

Test Attributes

Elements within a <switch> group must include a test attribute, such as systemBitrate or systemLanguage. You can add a test attribute to any clip source tag, as well as <a/>, <area/>, <layout>, <region/>, <prefetch/>, <excl>, <par>, <seq>, <animate/>, <animateColor/>, <animateMotion/>, and <set/> tags.

Test Attributes for Switching
Attribute Value Default Function Reference
systemAudioDesc on|off off Tests for an audio descriptions preference. click here
systemBitrate bits_per_second (none) Tests for the bit rate. click here
systemCaptions on|off off Tests for a captions preference. click here
systemCPU CPU_type (none) Tests for a CPU type. click here
systemLanguage language_code (none) Tests for a language preference. click here
systemOperatingSystem OS_name (none) Tests for the operating system. click here
systemOverdubOrSubtitle overdub|subtitle (none) Tests for an overdub or subtitle preference. click here
systemScreenDepth 1|4|8|24|32 (none) Tests for the monitor color depth. click here
systemScreenSize pixel_heightX
pixel_width		 (none) Tests for the monitor size. click here

Examples 

<switch>
  <audio src="seattle_french.rm" systemLanguage="fr"/>
  <audio src="seattle_german.rm" systemLanguage="de"/>
  <audio src="seattle_english.rm"/>
</switch>

<switch>
  <ref src="slides1.rp" systemBitrate="80000"/>
  <ref src="slides2.rp" systemBitrate="20000"/>
</switch>

Hyperlink Tags

<a>...</a>

The <a>...</a> tags turn the enclosed clip source tag into a hyperlink. For basic information about these tags, see "Creating a Simple Link". The href attribute is required for the <a> tag.

<a/> Attributes
Attribute Value Default Function Reference
accesskey key (none) Sets a keystroke that opens the link. click here
actuate onLoad|onRequest onRequest Determines whether or not the link requires user activation. click here
alt text (none) Supplies alternate text for the link. click here
destinationLevel percentage 100% Specifies the audio level of the target. click here
destinationPlaystate pause|play 
play
Sets the play state of the target when the link opens. click here
external true|false false Sends the link to the browser if true. click here
href URL (none) Gives the link URL. click here
show new|replace replace Sets the current or a new media window as the target. click here
sourceLevel percentage 100% Sets the audio level of the source. click here
sourcePlaystate pause|play|stop pause|play Sets the play state of the source. click here
tabindex integer 0 Sets the tabbing order for links. click here
target name (current window) Identifies a window or a SMIL region. click here
click here

Example 

<a href="http://www.real.com" external="true" sourcePlaystate="pause"> 
  <video src="video.rm" region="videoregion"/>
</a>

<area/>

An <area/> tag can define a hot spot hyperlink that can be temporal as well as spatial. It fits within a binary media source tag: 

<video ...>
  <area .../>
</video>

The following table lists possible <area/> tag attributes. No attributes are required for this tag, but href is typically included. For basic information about the <area/> tag, see "Using the <area/> Tag".

<area/> Attributes
Attribute Value Default Function Reference
accesskey key (none) Sets a keystroke that opens the link. click here
actuate onLoad|onRequest onRequest Determines whether or not the link requires user activation. click here
alt text (none) Supplies alternate text for the link. click here
begin time_value (none) Sets when the link becomes active. click here
coords pixels|percentage (none) Defines the hot spot size and location. click here
destinationLevel percentage 100% Specifies the audio level of the target. click here
destinationPlaystate pause|play 
play
Sets the play state of the target when the link opens. click here
end time_value (none) Sets when the link deactivates. click here
external true|false false Sends the link to the browser if true. click here
height pixels media height Sets context window size in <param>. click here
href URL (none) Gives the link URL. click here
id name (none) Defines the element ID. click here
nohref (none) (none) Indicates that the link has no URL. click here
rn:sendTo _osdefaultbrowser|
_rpbrowser|
_rpcontextwin		 (none) Specifies a browser window that opens the HTML page. click here
click here		 
shape
rect|circle|poly rect Sets the hotspot shape. click here
show new|replace replace Sets the current or a new media window as the target. click here
sourceLevel percentage 100% Sets the audio level of the source. click here
sourcePlaystate pause|play|stop pause|play Sets the play state of the source. click here
tabindex integer 0 Sets the tabbing order for links. click here
target name current window Identifies a window or a SMIL region. click here
click here
width pixels 330 Sets context window size in <param>. click here

Examples 

<video src="video.rm" region="video_region">
  <area href="http://www.example.com/context.html" external="true" rn:sendTo="_rpcontextwin"
    sourcePlaystate="play">
      <rn:param name="width" value="320"/>
      <rn:param name="height" value="240"/>
  </area>
</video>

<video src="video.rm" region="video_region">
  <area href="rtsp://realserver.example.com/video2.rm" shape="circle" coords="80,60,30"
    begin="5s" end="45s" show="new" sourcePlaystate="play" destinationPlaystate="play"/>
</video>

Animation Tags

<animate/>

The <animate/> tag is the basic animation tag. Other animation tags are variations of <animate/>. The targetElement and attributeName attributes are generally required, as well as one of the to, by, or values attributes. For more on this tag, see "Creating Basic Animations".

<animate/> Tag Attributes
Attribute Value Default Function Reference
accumulate none|sum none Makes a repeating animation build with each iteration when set to sum. click here
additive replace|sum replace Adds the animation value to the existing attribute value if set to sum. click here
attributeName attribute_name (none) Selects the attribute to animate. click here
begin time_value 0s Delays normal playback time. click here
by pixels|percentage|
color_value		 (none) Animates the element by a certain amount. Do not use with to. click here
calcMode discrete|linear|
paced		 linear Controls the flow of an animation. click here
dur time_value|indefinite media Sets the total time the animation or one of its repeating cycles plays. click here
end time_value (none) Sets the end time for the animation. click here
fill auto|default|freeze|
hold|remove		 auto|
default		 Determines the fill state when the animation is no longer active. click here
from pixels|percentage|
color_value		 (none) Sets a starting point for the animation. Use with to or by. click here
id name (none) Names the animation for reference by other elements. click here
repeatCount integer|indefinite|
fractional_value		 0 Repeats the animation the specified number of times, or indefinitely. click here
repeatDur time_value|indefinite 0s Repeats the animation the specified amount of time. click here
restart always|default|never|
whenNotActive		 always Determines if the animation can restart. click here
targetElement ID (none) Identifies the tag that contains the animated attribute. click here
to pixels|percentage|
color_value		 (none) Sets an end point for the animation. Do not use with by. click here
values pixels|percentage|
color_value		 (none) Defines a list of values applied to the animated attribute. click here

Examples 

<animate targetElement="video_region" attributeName="width" to="380" dur="3s"/>

<animate targetElement="image_region" attributeName="width" dur="2s" by="16" accumulate="sum" 
repeatCount="4" calcMode="discrete"/>

<animateColor/>

The <animateColor/> tag is similar to <animate/>, but it works for color animations only. The targetElement and attributeName attributes are generally required, as well as one of the to, by, or values atttributes. For more on this tag, see "Animating Colors".

<animateColor/> Tag Attributes
Attribute Value Default Function Reference
attributeName attribute_name (none) Selects the attribute to animate. click here
begin time_value 0s Delays normal playback time. click here
by pixels|percentage|
color_value		 (none) Animates the element by a certain amount. Do not use with to. click here
calcMode discrete|linear|
paced		 linear Controls the flow of an animation. click here
dur time_value|indefinite media Sets the total time the animation or one of its repeating cycles plays. click here
end time_value (none) Sets the end time for the animation. click here
fill auto|default|freeze|
hold|remove		 auto|
default		 Determines the fill state when the animation is no longer active. click here
from pixels|percentage|
color_value		 (none) Sets a starting point for the animation. Use with to or by. click here
id name (none) Names the animation for reference by other elements. click here
restart always|default|never|
whenNotActive		 always Determines if the animation can restart. click here
targetElement ID (none) Identifies the tag that contains the animated attribute. click here
to pixels|percentage|
color_value		 (none) Sets an end point for the animation. Do not use with by. click here
values pixels|percentage|
color_value		 (none) Defines a list of values applied to the animated attribute. click here

Example 

<animateColor targetElement="image_region" attributeName="backgroundColor" 
values="red;blue;yellow" calcMode="discrete" begin="1s" dur="12s" fill="freeze"/>

<animateMotion/>

The <animateMotion/> tag can move an element both horizontally and vertically. The targetElement attribute is generally required, as well as one of the to, by, or values atttributes. For more on this tag, see "Creating Horizontal and Vertical Motion".

<animateMotion/> Tag Attributes
Attribute Value Default Function Reference
accumulate none|sum none Makes a repeating animation build with each iteration when set to sum. click here
additive replace|sum replace Adds the animation value to the existing attribute value when set to sum. click here
begin time_value 0s Delays normal playback time. click here
by pixels|percentage|
color_value		 (none) Animates the element by a certain amount. Do not use with to. click here
calcMode discrete|linear|
paced		 paced Controls the flow of an animation. click here
dur time_value|indefinite media Sets the total time the animation or one of its repeating cycles plays. click here
end time_value (none) Sets the end time for the animation. click here
fill auto|default|freeze|
hold|remove		 auto|
default		 Determines the fill state when the animation is no longer active. click here
from pixels|percentage|
color_value		 (none) Sets a starting point for the animation. Use with to or by. click here
id name (none) Names the animation for reference by other elements. click here
repeatCount integer|indefinite|
fractional_value		 0 Repeats the animation the specified number of times, or indefinitely. click here
repeatDur time_value|indefinite 0s Repeats the animation the specified amount of time. click here
restart always|default|never|
whenNotActive		 always Determines if the animation can restart. click here
targetElement ID (none) Identifies the tag that contains the animated attribute. click here
to pixels|percentage|
color_value		 (none) Sets an end point for the animation. Do not use with by. click here
values pixels|percentage|
color_value		 (none) Defines a list of values applied to the animated attribute. click here

Example 

<animateMotion targetElement="image_region" values="180,180;60,340;125,95" 
calcMode="discrete" begin="7s" dur="5s" fill="freeze"/>

<set/>

The <set/> tag sets an attribute to a specified value. The targetElement, attributeName, and to attributes are required. For more on this tag, see "Setting an Attribute Value".

<set/> Tag Attributes
Attribute Value Default Function Reference
attributeName attribute_name (none) Selects the attribute to animate. click here
begin time_value 0s Delays normal playback time. click here
dur time_value|indefinite media Sets the total time the animation