Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

A simple SVG frame animation

From Wiki
Jump to: navigation, search

This article provides simple instructions on how to create frame animations from existing pictures on your mobile phone. Basically we just create an SVG wrapper to show a sequence of photos and loop it indefinitely.

Article Metadata
Created: Risalmin (06 Jul 2007)
Last edited: hamishwillee (09 Sep 2011)


What do you need

First take some pictures

To start with we assume, that you have two pictures in your phone's gallery. Take two pictures, where you, for example smile and frown, or use some images you took previously and rename them to: Frame1.JPG and Frame2.JPG.

The important thing is, that if you are creating an animation the two pictures need to be like two consecutive animation frames

Then create the wrapper

Open a text editor and copy the following code into it:

<?xml version='1.0' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN'
<svg width='100%' height='100%' xmlns=''
<image width="320" height="240" xlink:href="Frame1.JPG">
<animate id='frame_0' attributeName='display' values='inline;none'
dur='0.5s' fill='freeze' begin="0s" repeatCount="indefinite"/>
<image width="320" height="240" xlink:href="Frame2.JPG">
<animate id='frame_1' attributeName='display' values='none;inline'
dur='0.5s' fill='freeze' begin="0.5s" repeatCount="indefinite" />

And save it as e.g. My_Show.svg, only the extension .svg is important. If you use a text editor in your phone, make sure you save the file in the same folder where your Frame1.JPG and Frame2.JPG are.

Copy the file(s) to your phone and play!

If you used a text editor in your PC, transfer My_Show.svg to your phone and make sure it gets saved into the same folder where the files Frame1.JPG and "Frame2.JPG" are.

Now you can use your phone's File manager to launch the file. If you have named all the files correctly you should now see a two frame looping animation!

More details

The key to understanding what was done lies in two features of SVG: Links and Animations. First of all the following line simply links the file Frame1.JPG to be displayed in size 320x240 pixels. No path is needed, since the file is in the same folder that the file referring it.

<image width="320" height="240" xlink:href="Frame1.JPG">

The next line gives instructions on what to do with the linked image.

<animate id='frame_0' attributeName='display' values='inline;none'
dur='0.5s' fill='freeze' begin="0s" repeatCount="indefinite"/>

Please keep in mind that the end tag for <image> must be after the end tag of <animate>

Let's break the animate tag apart:

animate id='frame_0'

This is an Identifier that allows referring to this animation elsewhere. For example the next frame could be made to start at frame_0.end


This is the SVG attribute that we wish to animate. Other options would be for example to use the opacity attribute, when we would achieve a fade effect instead of the one we get with display. The values for opacity would be 0 and 1 instead of the inline and none used with display More information can be found at: W3C


These are specific values to the display animation attribute. inline stands for "show me" and none means "hide me". Please see here for more detailed information about specific values used with different animation attributes.


The dur attribute is simply short for "duration" in this case it is set to a half a second, but it can be alot shorter. It means, that image will show for that amount of time until it blinks out There are restrictions to the drawing speed of the device, but 30fps would be 0.03. Feel free to experiment :)


Animation timing attribute, more information at W3C


This sets the start time of the animation. In this case the very beginning. When you look at the animation code of Frame2.JPG, you'll notice, that it is set to start at the exact same time Frame1.JPG is hidden (0.5s). If you have more than one two images in your animation (as you usually would) you have to grow this number as much as your duration is for the previous image. So if you were to add Frame3.JPG it should start at 1s, Frame4.jpg at 1.5s etc.


The repeatcount attribute sets the animation to loop. If a number is used, the amount of cycles can be set exactly.

Tell me what you think

I have used this method for creating a stop motion animation that can be viewed on my s60 3rd edition phone. Please let me know if you succeed (or, indeed, fail ;) in doing the same.

--Risalmin 00:33, 6 July 2007 (UTC)

This page was last modified on 9 September 2011, at 02:04.
123 page views in the last 30 days.