SVG Slide Presentation Editor

Keywords: SVG, animation, slide, editor

Raul Casado, Mr.
Universidad de Granada


Casado is currently a Ph. D. student. He is researching in graphics issues and working for the Grupo de Graficos de Granada.

Juan Carlos Torres, Ph.D.
Universidad de Granada


Torres is the lead of the Grupo de Graficos de Granada


There are several applications that can be used to create slide presentations, but all of them have several disadvantages that would be interesting to avoid, like using registered formats, producing large size documents, or needing a special viewer. Therefore, the presentations produced by using these tools have a limited portability. The utilization of standard and open format documents can solve this problem. SVG, that allows representing vector graphics and animation, can be used to represent this kind of documents, with the additional advantage of using ASCII text files. The main difficulty for using them is to structure a complex presentation, composed of a probably large sequence of slides on a unique SVG document. This paper proposes a possible structure for the SVG document, and presents an interactive tool to create and edit the SVG slide presentation document. This tool has been written in Java to make it independent from the platform.

Table of Contents

1. Introduction
2. Representing the presentation using SVG
3. Animation
4. The tool
5. Conclusions

1. Introduction

The aim of this project is the development of presentations through the SVG format [SVG] . SVG (Scalable Vector Graphics) is a XML implementation for representing 2D scalable vector graphics. This format allows us representing 2D shapes, text and images. There is a special element called "group" and, as we might infer from its name, it is intended to group both graphic elements and other groups. It has also other functionalities like interaction or animation. The animation can be done through the tags provided by the specification, or by using a script. The interaction is done through some events like onClick or onLoad documents. All these elements make possible to design a presentation. This work pretends to show how these elements can be used to design a SVG document with the behaviour of slide presentations.

There are several applications that can be used to create slide presentations. Some of them are very well known and popular, like Macromedia Flash or Microsoft PowerPoint. But the main problem of those is the fact that they generate a registered document. This kind of documents can only be edited with the same program and its structure changes from one version to another, which implies possible incompatibility problems.

In the other hand, there are a lot of SVG implementations, but very few are used with this idea. The animation use to be a plus in the software and, normally, it is limited. A SVG editor can be used to generate a slide in its final view. But if we desire to add effects in order to show the elements, we will need to edit the final document. And if we want to change between slides we will need to add a link. This is not an important problem but is a limitation to the aesthetics of the presentation, and it could be critical for a slow client connection if we want to publish it on Internet.

There are some tools that can translate an XML file to a SVG presentation file, via XSLT [ST] [JACK] [CH03] . None of them allows us creating and editing a self contained slide presentation. A self contained SVG file allows us editing it without any other information than the given file. Besides this, the animation capabilities are usually very poor and no customizable. The exception would be JackSVG [JACK] which allows adding animations and nice transition between slides, but not the edition of the output file in order to change it. In order to do that, you would need the XML input.

Another problem could be the portability. Some applications have been designed just for a particular operating system, so the document edition can only be done with this tool.

To view a SVG document we just need to look for a viewer. The most common viewers are Adobe SVGViewer and Batik. Currently, Batik can not show animations, and for the moment, Batik has no intention of doing it in the future. The Adobe SVGViewer is a plug-in which is installed in the browser. When we want to view a SVG document we just need to open it with the browser and it automatically delegates on the plug-in.

Summarizing, the main ideas of this work are:

2. Representing the presentation using SVG

A presentation is a document composed of a set of sheets called slides. A slide is a rectangular area where some elements are placed and others can subsequently be placed. The dimensions of the slides are always the same, and they are equal to those of the presentation. Every slide is composed of two main elements: the background and the foreground. The background has, in turn, two elements. There is a fixed background, which is usually a rectangular shape or an image with the slide dimensions. And there is a group of basic elements to content all the desired elements. The foreground is a set of elements that define the content of the slide. The basic structure of the presentation can be seen in Figure 1 .


Figure 1: SVG presentation structure

There are different ways to get a SVG file with this structure. A first way could be using XSLT. It could be possible to define a special XML document with the desired structure and this document could be defined using a specific DTD, so all the generated documents should be validated against it. In the other hand, we would have a XSLT schema, which allows us generating the SVG document by applying the XSLT to the special XML document.

This idea looks very attractive because it implies that the format of the document can be defined with the system necessities. For each element it can be defined, through the XSLT schema, the SVG equivalent. Therefore, in order to get a presentation, we would have to implement two steps: the edition and the generation.

There is one important disadvantage to this approach. In order to do the edition we would need the special XML file. That means that we have to distribute two files: one for the edition and another one for the viewing. This is a limitation because if we loose the specific file for the edition, we will not be able to do the edition. This is due to the fact that we have one file for the edition, which not necessarily has to be a univocal correspondence with the visualization file. To avoid that, specific tags to identify the items in the presentations could be used. These tags would be meaningful for the editing software but would mean nothing for the viewer. It would be possible to add, in some way, these elements to the SVG file but then, the question would be what the reason for having two files is.

Therefore, we have decided to generate the SVG structure in a direct way. The structure used can be seen in Figure 1 . We have chosen the most suitable elements in order to represent the proposed structure. There are specific tags in the SVG specification to add non-graphical information to the SVG file. We use the "metadata" tag to identify the structure in the SVG document. This allows us having just one file with enough information to edit it. The size of this document would be larger than the first one but everything would be packed in the same file. Furthermore, the SVG specification allows generating a document compressed with a gzip algorithm, so the file size would be smaller and equally easy to use.

We have not mentioned the styles yet. We are using them but they are embedded in the SVG document to avoid being redistributing several files, which is one of the aims of this work.

3. Animation

One of the most interesting things of SVG are the animations. SVG specification allows defining several tags which can change some properties of the object. Also, we can use scripts to access to some object properties via the Document Object Model (DOM) and change some properties in order to get the animation.

The tags that can be used for getting the animation are: animation, animateTransform, animateColor, animateMotion. Animation tags are inside the object which is going to be animated. The animation tag is the most general and allows you changing any animatable property of the desired object. The animateTransform is used to apply some geometric transformations to the object like translation, scaling, rotation, or skewing (both in x and y directions). The animateColor let us change dynamically the colour properties of the object. And finally, the animateMotion tags allow us defining the movement of an object along a given path.

Currently, we are using just the animateTransform element in order to get the animation effect. This element is really powerful and if we combined it in the correct way we can get nice effects. For our purposes, we need to do two basic animations: appearing and disappearing.

All the objects that are going to be shown are initially drawn on the screen and then, translated to an off screen position from where they will be relocated on the screen at the desired moment. The reason for that is obvious: they can not be shown till an event occurs. The code below shows an animation effect for making an object appear.

<animateTransform id="t2r2a0" attributeName="transform" begin="t2r1a5.end" dur="0.01s" fill="freeze" calcMode="linear" from="0 0" to="0 0" type="translate" additive="sum" />
<animateTransform id="t2r2a1" attributeName="transform" begin="t2r2a0.end" dur="0s" fill="freeze" calcMode="linear" from="0 0" to="0 0" type="translate" />
<animateTransform id="t2r2a2" attributeName="transform" begin="t2r2a1.end" dur="2s" fill="freeze" calcMode="linear" from="125 150" to="125 150" type="translate" additive="sum"/>
<animateTransform id="t2r2a3" attributeName="transform" begin="t2r2a1.end" dur="2s" fill="freeze" calcMode="linear" from="0 0" to="1 1" type="scale" additive="sum"/>
<animateTransform id="t2r2a5" attributeName="transform" begin="t2r2a1.end" dur="2s" fill="freeze" calcMode="linear" from="-125 -150" to="-125 -150" type="translate" additive="sum"/>
<animateTransform id="t2r2a4" attributeName="transform" begin="t2r2a1.end" dur="2s" fill="freeze" calcMode="linear" from="0 125 150" to="720 125 150" type="rotate" additive="sum"/>
<animateTransform id="t2r2a6" attributeName="transform" begin="t2r2a1.end" dur="2s" fill="freeze" calcMode="linear" from="45 125 150" to="45 125 150" type="rotate" additive="sum"/>

The meaning of this code can be understood looking at Figure 2 which shows the effect of each animation. The first animation is necessary since there is a problem with the Adobe viewer that we call the "crazy click". When you click on an object, it does not seem to work fine, but if you add this first animation it works. Probably the problem is that we try to do too many things in just one step: start other animations, clear the transformation matrix and locate the object in its place. So we have divided the problem into two steps which seems to work fine. Even when this solution has been designed to avoid a problem with the Adobe viewer, there is no reason to think that it does not work with other viewers.


Figure 2: Animation timing

The second animation clears the transformation matrix omitting the attribute "additive". Actually, what it does is clearing the transformation matrix and adding an identity transformation. This is a trick to locate the object in its final position because, as we said before, it was translated.

The others animations are the transformations that define the animation behaviour. We have defined several kinds of animations combining the different operations: translation, scaling and rotation. In order to control the behaviour, we apply the animations always in the same order: first rotation, second scaling and finally translation. Two additional translations are needed for the scaling effect. These translations surround the scaling and allow us making nice growing effects from different points.

If the objects are initially rotated, it is necessary to apply another animation: a fixed rotation. The reason for this is that the transformation matrix is cleared at the beginning of the animation. So it is necessary to restore this final state of the object. We could avoid this last step if we do not clear the transformation matrix, but this would add complexity to the other animations forcing us to calculate rotation points and adding other transformations. Therefore, we have chosen an easy and clear way although it makes the resulting document bigger.

For the disappearing effect, we have the same schema with opposite operations but adding a final animation to move the object to the off-screen position where it was initially drawn.

Apart from the animation of each object, we need another kind of animations: the transitions. A transition is the effect of showing, or not, a slide. We can extend the described method in order to use it with slides. If the effect is a simple translation, we will only need one animation. Currently, we are using only translations in our slides.

The off-screen position can be a specific position or a relative one. We have chosen to translate all the non shown slides (and elements) towards the up left corner of the screen to a distance equal to double of the width and height of the presentation size.

There is a last thing to say about the animation process. In order to activate or deactivate an animation we can use several events. We can add a time to begin or stop; we can wait for the user interaction through the mouse click (onClick event); we can wait till the document is loaded (onLoad); and finally, we can wait till and animation has started or finished. As we can see in Figure 2 , the animation process is composed of several animations which are chained through animation events and are triggered by user interaction.

4. The tool

As we want to have a self contained presentation which can be edited in an easy way we have developed a specific tool. We have chosen Java as the programming language because, like the SVG format, it is independent from the platform. Furthermore, Java has a specific API, called Java2D, for 2D drawing purposes. The correspondence between the SVG objects and the Java2D objects is almost direct and most of the attributes supported by SVG specification are also supported by the Java2D API. Moreover, there are several APIs to access to the DOM of an XML document and interact with it.

5. Conclusions

In this document we show a new tool written in Java which allows us creating and editing a SVG presentation. Unlike other tools, we use a single SVG file which is self contained. The structure and the visualization are mixed in the document in order to make easier the edition process. We have explained the structure of our SVG presentation and we have shown a way to make animations effects with the elements given in the SVG specification. We show how to connect different animations in order to have a transitional effect between slides or to add animation to the objects.

We could choose a scripting approach by using a javascript function to simulate the animations. The SVG specification allows adding scripts to our documents which can interact with it through the DOM. This is a point that would be necessary to explore and think about the way in which it can be applied.

Moreover, we are working in optimizing the SVG final structure in order to reduce the size of the document and trying to make it understandable enough to be edited manually through a text editor.


This work has been partially supported by Ministerio de Ciencia y Tecnologia and FEDER under the grant TIC 2001-2099-C03-02.


Scalable Vector Graphics (SVG) 1.1 Specification.
SVG Slide Toolkit.
H. ChristopH, M. Runge: Generating Slides from Enhanced Media Content.. SVG Open 2003

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