Plazmic

Skip to Content

Global Navigation

Local Navigation

FAQ's | Tutorials | Programs

Hand Coding Content in SVG - Tips

  1. Animating colors and visibility
  2. Targets
  3. Timing
  4. Key Frames
  5. The begin attribute
    1. The begin attribute restriction
  6. RepeatCount
  7. Creating a flipbook of images

1. Animating colors and visibility

To animate colors, use code similar to the following:

To animate visibility, use code similar to the following:

Category Top

2. Targets

To specify the target of an animate element:

Use either the xlink:href attribute OR target the parent.

To target the parent, add the animate node as a child of the node you wish to animate.Remember when using the xlink:href attribute, preface the target id with a "#" (number sign). You can target the following attributeName's: width, height, x, visibility, fill, stroke (although fill and stroke are treated the same).

Category Top

3. Timing

Timing is critical for animations to work correctly. You must specify the dur attribute, which indicates how long the animation runs. If you do not specify the units, the default is seconds. You can also use the suffix "ms" to indicate milliseconds. You can also specify keyTimes, which is important when you use about key frames.

Category Top

4. Key Frames

Specify the values that you're animating over. You can use any of the following options:

Explicit values:

Note: the values list has the same number of items as the keyTimes list. (there should be the same number of values as there are keyTimes). As well, please note the keyTimes attribute lists values from 0 to 1 (inclusive).

The keyTimes array in conjunction with the duration attribute indicates when to hit each value.

Example: From/To/By:

In the previous example, the from and to attributes are equivalent to values="20;25;30;35;40".Note also that the number of values is still equal to the number of keyTimes.

Example: From/To:

In the previous example, the from and to attributes are equivalent to values="20,40". Note also that the keyTimes array is optional (if it were present, it would be keyTimes="0;1").

For non-integral attributes (for example, visibility, fill or stroke) only explicit values are supported. For example:

Category Top

5. The begin attribute

The begin attribute is a very powerful attribute. It enables animations to be synchronized based on time, or based on each other. The following are acceptable values for the begin attribute: a number (indicating a number of seconds to wait); the word "indefinite" (indicating that the animation will be queued by a user action); or "<foo>.end" where <foo> is the name of some other animation.

Category Top

5a. The begin attribute restriction

The SVG Transcoding Utility places a restriction on the way the "begin" attribute of <animate> is used. The restriction is that if the attribute refers to another animation (by id), that animation must occur earlier in the file.

Category Top

6. RepeatCount

Any animation can repeat itself one or more times. It can also repeat forever, if you specify repeatCount="indefinite"

Category Top

7. Creating a flipbook of images

One method for creating a flipbook is to use sprites. Sprites are created by first creating a group of images. If the visibility of the images is changed from hidden to visible to hidden again in quick succession, the images will appear to be animating.

For example:

Alternatively, you can use the switchGroup element.

Category Top