Plazmic

• Company
• Products
• Support
• Downloads
• Community

Hand Coding Content in SVG - How To's

1. How can I change the background color?
2. How do I create the effect of multiple layers of animation?
3. How do I animate the visibility of images?
4. How do I trigger one animation after another?
5. How do I loop a string of animations?
6. How do I start an animation when there is no animation to begin after?
7. How do I move a single element around on the screen?
8. How do I move a group of visual elements around on the screen together?
9. What values can be used for the keyTime and values attributes for animate?
10. What values can fill and stroke assume?
11. What is calcMode and how do I use it?

1. How can I change the background color?

I've hand coded my SVG and the background color of my scene appears as black on the BlackBerry handheld. How can I change this to make it another color?

In SVG there is no way to specify the background color of a scene. By default, we set the background to black. A method to specify the background color of a scene is to specify the color with the -bgcolor option while transcoding the SVG file with the SVG transcoding utility.

Examples:

The following examples set the background color to white:

svgc -bgcolor "rgb(255,255,255)" my file.svg
svgc -bgcolor "white" myfile.svg

svgc -bgcolor "FFFFFF" myfile.svg

2. How do I create the effect of multiple layers of animation?

In SVG, the order of the visual elements in the text file from top to bottom corresponds with the layers order on the screen. Thus, visual elements at the top of the text file are rendered first and therefore appear at the back of the scene.

3. How do I animate the visibility of images?

To animate the visibility of images, hide one image and set another image to visible. Alternatively you can use switchGroup and animate the currentChild. This takes up less space in the .pme file.

4. How do I trigger one animation after another?

Use the following syntax:

begin="id.end"

Where <id> is the identifier of the animate element that you want to start when the current animation finishes. Remember that you must declare an <id> before using it, and that all <id>’s must have unique names in an SVG file.

5. How do I loop a string of animations?

Use the repeatCount attribute for each animation. However, this attribute only enables you to repeat a single animate. To loop a sequence of animate elements, you must synchronize the begin and dur attributes of all the animate elements in the sequence. Use the values and keyTime attributes to hold the value constant when the element is not supposed to be active.

6. How do I start an animation when there is no animation to begin after?

Depending on what you want to do, you can use begin="0" (which means begin when the scene loads) and then sync your animation based on that. You can also specify a number (in seconds) when you want an animation to start in relation to when the scene first loads. For example, begin="2" will start the animation 2 seconds after the scene loads. You can also create offscreen visual elements that can be used to synchronize with other animate elements.

7. How do I move a single element around on the screen?

You can animate all of the visual elements (image, line, path, polygon, polyline, and rect ) by using a nested animate tag.

For example:

<rect x="0" y="0" width="10" height="10" fill="rgb(0,0,50)">
<animate attribute="x" begin="0" dur="5"
 keyTimes="0;1" values="0;50"/>
</rect>

In this example, the nested animate tag animates the x attribute for the rectangle.

8. How do I move a group of visual elements around on the screen together?

1. Group the visual elements:

<g transform="translate(x,y)">

2. Use the animateTransform element to alter the transform attribute.

For example:

<g transform="translate(x,y)">
<animateTransform attributeName="transform"
 type="translate" dur="1" begin="0"
 repeatCount="indefinite" keyTimes="0; 1"
 values="40,38; 40,38" fill="freeze"/>
<image .../>
<rect .../>
<rect ../>
<polygon .../>
</g>

9. What values can be used for the keyTime and values attributes for animate?

keyTime must always start with 0 and end with 1. The keyTime is a fraction of the duration. This attribute enables you to adjust duration independently of when the keyTimes occur.

For example:

<animate attributeName="x" begin dur="15"
 keyTimes="0;0.5;1" values="10;-20;20"/>

In this examples, the keyTime 0.5 will occur 0.5 * 15 = 7.5 seconds into the animation.

10. What values can fill and stroke assume?

The following are acceptable color definitions:

fill="rgb(255,255,255)"

The cyan, magenta, yellow, black color space, which is often used for printers:

fill="cmyk(255,255,255,0)"

Textual color names:

fill="yellow" fill="blue"

11. What is calcMode and how do I use it?

calcMode is the way in which an animation plays between keytimes. The default calcMode is set to linear. You may want to set it to discrete if you are trying to create an effect that requires the values in an animation to change discretely at each keytime.