SVGT Animation Authoring

Keywords: SVGT, Mobile, Authoring, Animation

Ola Andersson
ZOOMON Mobile Solutions
Stockholm
Sweden
ola.andersson@zoomon.com
http://www.zoomon.com

Biography

Ola Andersson is a Senior Software Engineer at ZOOMON Mobile Solutions and an active member of the W3C SVG Working Group. He is co-editor of the SVG Mobile 1.2 specification. Ola has extensive knowledge of Mobile SVG and has had key roles in the development of both the ZOOMON SVG Player and ZOOMON's authoring solutions. He graduated with a Master of Science in System Engineering from the University of Uppsala.


Abstract


With the recommendation of the SVG Mobile profiles SVG is rapidly gaining traction in the mobile space. SVG Tiny is included in more and more handsets and the SVGT format is a part of various specifications within the mobile industry. Although the number of mobile handsets with SVGT support is rapidly increasing there is still a gap to fill when it comes to SVG content and services. One of the first use cases you can foresee for mobile SVG is the inclusion of SVGT in mobile messaging (as a part of MMS) in the form of small animations. For that use case there is a need for a lot of animated content. Currently the content creators doing SVGT content for mobile devices are forced to hand-edit their SVG content in some parts of their work-flow. Typically they are using Adobe Illustrator or some other vector graphics authoring tool for creating the SVG content but then they have to hand code the content to make it SVG Tiny compliant and to add animations. This is not acceptable since it makes SVG content way too expensive. Future versions of Adobe Illustrator will probably include the option of saving the content for SVG Tiny but the issue with the animation authoring is still to be filled.

ZOOMON are currently working on defining a mobile authoring workflow and to find solutions to the existing gaps in the creation chain. This presentation will present a mobile authoring workflow and which tools that would exist to cover that workflow. The presentation will discuss functionality for those tools and it will also discuss certain issues with animations in SVG and how they can be addressed.


Table of Contents


1. Introduction
    1.1 The SVGT Authoring Workflow
2. ZOOMON SVGT Animator
    2.1 Object Browser
    2.2 Stage
    2.3 Animatable Attributes
        2.3.1 Visibility Animation
        2.3.2 Fill and Stroke Animations
        2.3.3 Position Animation
        2.3.4 Scale and Rotate Animations
    2.4 Tree View
    2.5 Timeline
    2.6 Proviewing
    2.7 Non-SVGT Content

1. Introduction

During 2004 we've seen mobile SVG taking the step from merely being a standards specification to become a common media type used in a huge number of mobile phones around the world. Early this summer both Sony Ericsson and Siemens launched mobile phones with SVGT capabilities. Included in the phone when you buy it are a number of SVGT animations ready to be used as screen savers, background images, and included in MMS messages.

Besides the use cases already available on mobile phones (the already mentioned used of SVGT in screen savers, background images, welcome screens, and MMS messages), we see a number of other use cases that will be deployed in the near future. These are (among others), location based services, weather services, document viewing (already commercially available in Japan) and Infotainment services. The common denominator for allowing these use cases to pick up speed and be generally available is the availability of SVGT content. Without a way of easily generate content SVGT will not become the success we want it to be on mobile devices. That is why ZOOMON is focusing just as much on the authoring side of the SVGT value chain as it is on the viewing side. A result of this focus is the release of the ZOOMON SVGT Animator.

1.1 The SVGT Authoring Workflow

Instead of just being a stand-alone tool for creating SVGT content, the SVGT Animator is created to fit into a well-defined workflow together with the Adobe Creative Suite. Adobe Illustrator is the most used tool for creating 2D vector graphics, including SVG. ZOOMON is enhancing the existing SVG creation workflow with the SVGT Animator since it takes the static SVG content from Adobe Illustrator and allows the creator to add animations to it in a convenient way. After the content has been created in Illustrator and animated in the SVGT Animator it can be published in different ways. Either it is just used 'as is' straight from the SVGT Animator or Adobe GoLive can be used to embed the created SVGT in xhtml or MMS messages. ZOOMON SVGT Animator can be launched directly from Adobe GoLive in order to allow back and forth editing capabilities.

workflow.png

Figure 1: The SVGT Authoring Workflow

2. ZOOMON SVGT Animator

This section is describing the main components of ZOOMON SVGT Animator. It is not an in depth description of all the features but an intention to give the reader a high level understanding of the tool, focusing on the parts of the tool that has solutions and features that may not be obvious at a first glance.

2.1 Object Browser

The Object Browser is where all the static content is located. It's here you select the content that will make up the foundation of your animation. The object browser is also the connecting point between ZOOMON SVGT Animator and Adobe Illustrator. Press the new button in the Object Browser and Adobe Illustrator is launched with a new SVG document, draw your object, save it, and it shows up in the Object Browser ready to use.

objectbrowser.png

Figure 2: The Object Browser

2.2 Stage

The Stage Window contains the document you are working with. One thing worth mentioning with the stage is the way that you select objects. A general design decision for the ZOOMON SVGT Animator has been to keep the number of user-selectable tools (i.e. selection tools, transformation tools, path edit tools, etc.) as low as possible. This has affected the way the selection (or pick) functionality works. Since SVG content to a great extent is structured into groups and you often want to add animations to a particular object inside a group, there must be a convenient way of selecting both groups and objects inside groups. Here is how it works in The SVGT Animator: Clicking on an object in the stage selects the top-most group the object belongs to (not counting the root SVG group), clicking again on the object selects the child group that the object belongs to, etc. all the way down that dom-tree branch until the leaf node (i.e. the actual element) is reached. So, the selection moves down the dom-tree branch for each click. There is no way of moving up the dom-tree branch by clicking, you reset to the root level by clicking on the stage background. The selection box changes color to indicate where you are in the dom-tree. A green selection box indicates that you have selected a group and a blue box indicates that a leaf node is selected (the bottom of the dom-tree branch).

tree.png

Figure 3: Example of two different Selection boxes

The selection box has transformation handles on the corners, three for scaling and one for rotation. Both scaling and rotation are around its own centers. The scale and rotation centers are always displayed in the selection box and can be moved around without constraints. Any transformation you perform on the selection box results in an animation key-point in the timeline. You never change the underlying (static) transform values of an object.

2.3 Animatable Attributes

Although SVG allows for animating almost everyone of its many attributes, the ZOOMON SVGT Animator only allows for animation of 6 attribute types. In the future more attributes will be animatable through the tool but the goal is not to allow manipulation of all the attributes of SVG. Instead of being a complete SVG tool that allows the user to do everything possible with the format, the goal when designing the SVGT Animator has been to create an easy to use and powerful animation tool. We believe that it is not easy to do both at the same time, either you build an animation tool that uses the parts of SVG that are suitable/necessary for animations or you build a tool that is intended for complete SVG editing. I don't think those tools should be combined into one.

The 6 animatable attributes are:

2.3.1 Visibility Animation

A visibility animation results in an SVG animation on the 'display' attribute. This is because 'display' is what the user want to animate most of the time but the most logical name in the tool for that is visibility. This may confuse an SVG savvy user but is more logical to content creators with a background from Macromedia Flash or other animation tools.

2.3.2 Fill and Stroke Animations

Fill and stroke animations behave as expected and generate <animateColor> animations.

2.3.3 Position Animation

Animating the position of an object can be done in a number of ways and this is an area where there is no standardized solution. Different tools have often quite different solutions when it comes to position animations. Most often though is the default position animation a linear translation and if the user wants the object to move along a path instead he has to explicitly say so. The solution chosen in the ZOOMON SVGT Animator is the other way around. The only position animation available is along a path. There is no specific linear translation. The linear translation is just the special case when the motion path happens to be a straight line. To get this constrained, straight-line path the user presses the <shift> key while moving the object. We believe that this is a more intuitive and user friendly way of creating position animations. The motion path for the animation is displayed and editable in the stage. It is defined by a set of bezier segments. The bezier control points are either white or red. White ones indicate that the control point is a timed control point. Every timed control point has a corresponding key-point in the timeline. By changing the key-point times the speed of the object can be controlled along the path.

mpath.png

Figure 4: Motion Path and Position animation in the Timeline

2.3.4 Scale and Rotate Animations

Scale and rotation animations results in <animateTransform> elements. Although the user adds multiple scale or rotate animations on an element, the output will just contain one rotate and one scale animation. This is because in the Smil animation model (the sandwich model), animations on the same element are applied in the order of their begin time, i.e. an animation with an earlier begin time is applied before an animation with a later begin time. In a tool with a traditional animation timeline this causes a problem since the user don't expect behavior to be radically changed when altering start times for animations. In ZOOMON SVGT Animator this problem is solved by letting all animations start at the same time, e.g. both scale and rotate is starting in time 0 and values and keyTimes attributes are used for defining the animation in detail.

2.4 Tree View

The tree view contains all the graphical objects in the animation. The tree view is not a view of the dom-tree, you cannot see animation elements listed in the tree view in the way that you would if it had been a true dom-tree view. Neither can you see the types of the different objects, if an object is a <path> or a <rect> element for example. The reason of not allowing a full dom view of the model is the same as stated in the last section, this tool is mainly targeted content creators, not xml-coders.

A thing to mention about the tree view is the trap functionality. Trapping is a state that can be set on each object and that is kind of a traditional lock functionality but slightly different. A trapped object can be selected and animated but it's children are inaccessible and cannot be selected neither in the tree view nor in the stage. A trapped object is indicated in the stage by having a red selection box. The purpose with trapping is two folded. First it is very common to have a number of SVG objects in the stage that you want to animate but you have no interest of accessing elements inside the objects. By trapping you can select and animate an object but you will not risk to select any sub-part of the object. Secondly it is possible to open SVG files in the SVGT Animator (or using objects from the Object Browser) that contains animations created elsewhere. The SVGT Animator has restrictions on the way the SVG animations have to look in order to be viewable in the tool. Animations not matching these rules can't be displayed. When using content that contains these kind of animations, the objects are trapped and its children's animations cannot be displayed. Like this, the object can be animated on the top-level and exported from the SVGT Animator while the unsupported animations are preserved. If the user want's to untrap the object he will be warned about these animations and can choose to let the tool remove them.

treeview.png

Figure 5: Tree View with trapped and untrapped objects.

2.5 Timeline

The timeline is an important part of the ZOOMON SVGT Animator and it works similar to most other timeline based tools. One thing worth noting is that since each animatable attribute just have one line in the timeline you cannot add multiple animations on the same object at the same time. The Smile animation model allows for this so in SVG it is perfectly fine to have e.g. two fill color animations on a rectangle at the same time, one animating it to blue and the other one to red. The resulting color of the rectangle in the given time will then be a combination of the two colors. Although the Smile animation model is indeed very powerful and flexible, we have chosen not to enable all of it in the SVGT Animator. Users would have a hard time figuring out the behavior of these added animations (especially when it comes to multiple transformation animations) and the result can most of the time be expressed as a single animation anyway. As a result the SVGT Animator only creates animations that are consecutive (not overlapping) in time for each attribute.

2.6 Proviewing

For previewing purposes, ZOOMON SVGT Animator includes the ZOOMON SVG Player which is available on a variety of mobile handsets today. Through a combination of the actual viewer software and handset specifications, the user can accurately preview (Proviewing) an animations performance on a target device. New preview devices can easily be added to the SVGT Animator giving the user the advantage of viewing the content on a number of devices without having to buy the actual handsets. It is also possible to use other SVG viewers besides the ZOOMON SVG Player in the preview.

preview.png

Figure 6: The Preview Window

2.7 Non-SVGT Content

ZOOMON SVGT Animator imports all flavors of SVG, not just SVGT. In the general case it will warn the user that the content contains non-SVGT compliant content and strip out those elements and attributes. In some cases the SVGT Animator will however convert the non-tiny SVG content to the corresponding SVGT. An example of this is the <tspan> element which is not part of SVGT. The SVGT Animator takes the <tspan> elements and converts it into legal <text> elements instead, visually comparable with the original input.

XHTML rendition created by gcapaper Web Publisher v2.1, © 2001-3 Schema Software Inc.