Greetings, cartoons, MMS

Content creation tools for SVG are becoming more prevalent. These tools allow content creators to easily create animated cartoons. Since the resulting SVG content will be small, compact, standardized, and simple XML text, it is easy to transmit that information over networks as an MMS. Operators could also use SVG for pushing animated SVG messages to the user.

Weather, traffic updates, driving directions, restaurant guides, tourist information

SVG based maps being vector based can be easily zoomed, panned, and rotated without losing quality. SVG is also an XML based language so it is easily searchable for text. SVG supports user events such as click, mouseover, etc. in the content and thus the maps may have clickable objects or hyperlinks. This might be used to provide more information about a location on the map. SVG is a standard format that both small mobile devices and large desktops can view in the same way, the XML representation is efficiently small, the XML text can be binary encoded easily, and the XML can be compressed with standard gzip tools, which makes it a very plausible solution for map creators to use.

2D side-scroller games, game menus

SVG contains graphical elements that can be used to construct any 2D object for gaming. In addition the internal animation engine makes it easy for game developers to use short XML tags to move their game pieces around the screen. Vector based graphics would also allow for much less development time required for a game to support multiple screen resolutions. With many SVG implementations now being built on top of 2D hardware acceleration the animation frame rate for SVG is now very applicable for game development. Even 3D games might utilize SVG in building transparent menus that scale on top of their 3D layer.

Interactive Rich Media content (Graphics, Audio, Video, Text, Raster Images), TV, Set Top Box Program Guides, Menus, On-Demand and Interactive UIs

The rich media properties of SVG 1.2 in cooperation with application level handling of updates allows for advanced content creation. SVG Tiny 1.2 containing all of the different forms of media (images, audio, text, and video) makes it a very powerful interface for rich media applications. The user event handling provided by SVG makes it easy to create an interactive XML based UI that can be modified quickly and efficiently. This lends itself to building dynamic user interfaces that are updated frequently like TV program guides, favorites channel menus, channel scan menus, wait bars, etc.

Simple menus, transition effects, scalable icons, scalable windows, transparent layering.

SVG can take graphical path data along with opacity information and render that information into a buffer for a client to draw their UI with. Things like layering, transparent menus, icon placement, animating positioning of objects, animating the shapes of objects, animating text for marquees, animating opacity for focus highlighting effects, switching from landscape to portrait mode, changing screen resolution, etc., can all be done with SVG. Utilizing SVG for these types of operations can very easily save the client development time and simplify their code.

Simple day-to-day office applications, mobile email services with possible back-end infrastructure

SVG can be used as a single standard format to represent almost any digital document. There are many conversion tools that allow other document formats to be converted into SVG format. Since SVG is an efficient representation of these documents and can be compressed, it makes it a good choice for a common document format for transmission over networks. Many enterprise applications and even desktop sharing utilities could be built with this concept. The other advantage is that SVG, being scalable, can easily display the same document on both a desktop and on a mobile device.

Play SVG content, store SVG content, forward SVG content

Being able to serialize SVG content allows users to create editable, modifiable SVG on the fly. It also gives the developer the ability to take a “snapshot” of the current DOM. That “snapshot” could then be saved to a file, streamed over a network, or used for debugging their application. This use case has features in itself and in all of the other use cases as well. Another example would be giving a developer of an SVG based game the ability to save the state of the game by serializing the DOM and saving it.

This mode is typically recommended for applications rendering static SVG content. It can also be used to render animations, however, the implementation of the timer needs to be provided by the application. It is particularly important to note that in this mode, embedded media playback such as embedded audio, and video, is prohibited. This is done to prevent runtime synchronization artifacts and system-level dependencies that can lead to unpredictable results.

The following example illustrates rendering of an animated SVG Image using an application/timer loop:

import javax.microedition.midlet.MIDlet;
import javax.microedition.lcdui.Canvas;
import javax.microedition.m2d.*;

class MyAnimation extends MIDlet {

    private SVGImage cartoon;
    private MyCanvas myCanvas = null;
    private Timer myRefreshTimer = new Timer();
    private TimerTask myRefreshView = null;
    private ScalableGraphics gc;

    ...
    ...


    /**
    * MIDlet paint() method
    */
    public void paint(Graphics g) {

        long currentTime = System.currentTimeMillis();
        cartoon.incrementTime((currentTime - startTime)/1000.0f); //startTime must be initialized in the code.
        startTime = currentTime;

        gc.bindTarget(g);
        gc.render(0, 0, cartoon);
        gc.releaseTarget();

        // Schedule an update to refresh, when necessary
        myRefreshTimer.schedule(myRefreshView, 100);

    }

    /**
    * Inner class for refreshing the view.
    */
    private class RefreshView extends TimerTask {
        public void run() {
           // Get the canvas to repaint itself.
           myCanvas.repaint();
        }
    }

    /**
    * Inner class for handling the canvas.
    */
    private class MyCanvas extends Canvas {
        MyAnimation myAnimation;

        /**
        * Construct a new canvas
        */
        MyCanvas(MyAnimation animation) {
            myAnimation = animation;
        }

        /**
        * Ask MyAnimation to paint itself
        */
        protected void paint(Graphics g) {
            myAnimation.paint(g);
        }
}

		

This mode is recommended for applications or developers who wish to rely on the underlying implementations to handle timing and synchronization aspects. This mode is ideal for media playback and synchronization including graphics, animations, video, and audio.

This example shows rendering of SVG content using a "player" type API, also called the SVGAnimator. The SVGAnimator class handles automatic rendering of updates and animations in an SVGImage to a target user interface component:

  // Create an SVGAnimator
  SVGImage map = ...; // See the SVGImage documentation.
  SVGAnimator svgAnimator = SVGAnimator.createAnimator(map);

  // Create an SVGEventListener and set it on the animator.
  MIDPSVGEventListener listener = new MIDPSVGEventListener(map, animator);
  svgAnimator.setSVGEventListener(listener);

  //
  // SVGEventListener sample implementation. Adds a new
  // circle every time a key is pressed.
  //
  class MIDPSVGEventListener implements SVGEventListener, Runnable {
       protected SVGDocument svgDocument;
       protected SVGAnimator svgAnimator;
       protected Vector addToTree = new Vector();

       public MIDPSVGEventListener(SVGImage svgImage, SVGAnimator animator) {
           this.svgDocument = svgImage.getDocument();
           this.svgAnimator = svgAnimator;
       }

       public void keyPressed(int keyCode) {
           SVGElement circle = svgDocument.createElementNS(svgNS, "circle");
           circle.setFloatTrait("cx", ...);
           circle.setFloatTrait("cy", ...);
           // ....

           // We synchronized access to the addToTree vector because
           // it is accessed from different threads. Because we do
           // no know how fast this runnable is going to be scheduled
           // by the animator, it is possible that multiple circles
           // be created before the run() method is invoked. This explain
           // why we put all the newly created circles in a Vector and why
           // the run method inserts the current content of the vector
           // into the SVG document.
           synchronized (addToTree) {
              addToTree.addElement(circle);
           }

           svgAnimator.invokeLater(this);
       }

       public run() {
           synchronized (addToTree) {
               for (int i = 0; i < addToTree.size(); i++) {
                   svgDocument.getDocumentElement().appendChild(
                      (SVGElement) addToTree.elementAt(i));
               }
               addToTree.clear();
           }
       }
  }