July 20, 2018
Hot Topics:

Using Location-Enabled MIDlets for Mobile Navigation

  • June 17, 2009
  • By Jayasurya Venugopalan
  • Send Email »
  • More Articles »

Implementing the SVG API

SVG is an XML grammar for rich, dynamic 2D graphics. It boasts the following attributes:
  • Lightweight: SVG graphics are typically more compact than their raster equivalents.
  • Zoomable: SVG content can be viewed at different resolutions (e.g., enlarged or shrunk) without losing quality. This is the reason for including "Scalable" in the name Scalable Vector Graphics.
  • Searchable: Because SVG content is XML, the content of an SVG image is searchable for text elements, comments, or any meta-data.
  • Structured: SVG's structure makes it suitable to the requirements of user accessibility.

Table 2 provides the various classes and interfaces available in JSR 226: Scalable 2D Vector Graphics API for J2ME, which are used to implement SVG functionality.

Class or InterfaceDescription
Scalable GraphicsFundamental class for 2D rendering
SVGAnimatorClass handles automatic rendering of updates and animations in an SVGImage to a target user interface component
SVGEventListenerInterface used to forward platform-specific events to an application
SVGImageClass represents an image conforming to W3C SVG Tiny 1.1 (1.2) Profile
External Resource HandlerInterface is used to load synchronously any external resources needed for loading SVG content
SVGAnimationElementInterface represents an animation element and includes methods to control timing of animations
SVGElementInterface represents an SVG element in the document tree
SVGLocatableElementInterface represents a drawable SVG element (typically a shape, image, or text)
SVGMAtrixInterface represents an SVG matrix data type identified by an affine transformation equivalent to a linear transformation followed by a translation
SVGPathInterface represents a SVG path data type used to define path geometry
SVGPointInterface represents a SVG point data type identified by its X and Y components
SVGRectInterface represents a SVG rectangle data type consisting of mimimum X, minimum Y, width and height values
SVGRGBColorInterface represents a SVG RGB color data type composed of red, green, and blue componets
SVGSVGElementInterface represents an element in SVG document tree (Whereas SVGElement represents a SVG element in the document tree.)
Table 2. Classes and Interfaces in JSR 226

In the sample NetBeans project for this article, the Canvas used for displaying the SVGImage of the campus layout is a class derived from Canvas called GameCanvas. This is used because the Game Keys can be utilized for positioning the image. The zoom in and zoom out functions in the image displayed in the GameCanvas are achieved with the JSR 226 SVG classes shown in Table 2.

The following gets the root SVG element in the SVG document tree into myEl. From the getBBox() function (BBox stands for bounding Box), you can get the height and width of the SVG root object.

SVGSVGElement myEl = (SVGSVGElement)(
svgImage.getDocument().getDocumentElement());SVGRect myRect = myEl.getBBox();
You can get the current scaling factor by using the getCurrentScale() method of the root SVGElement. Similarly, you can get the current translate position using the getCurrentTranslate() method.
float fa =  myEl.getCurrentScale();SVGPoint   p1= myEl.getCurrentTranslate();
To zoom in, you can multiply the current scale by a factor. This example uses 1.2. The setCurrentScale() method is used for setting the scale. For zoom out, you multiply current scale by a factor of 1/1.2.

This scaling is carried out with respect to the top-left corner, whose coordinates are (0,0). In order to zoom in and out with respect to the center of the display, a translation has to be applied after scaling (as the code will show shortly). To achieve this translation, the SVGPoint p1 obtained from the getCurrentTranslate() method shown above is used to get the X and Y coordinates of the current translated position, as shown below.

float xf = p1.getX();float yf  = p1.getY();
Then the setX() and setY() methods are used to change the translation coordinates, where delta_x and delta_y are the X and Y coordinates by which the current position must be translated.
p1.setX(xf + delta_x);p1.setY(yf + deltay);
Listing 2 shows the code for the complete functionality in SVGStaticCanvas.java. The code is for the Canvas UI, the display of the campus map on the screen, and the zoom in, zoom out, and translation functions.

Page 3 of 4

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

By submitting your information, you agree that developer.com may send you developer offers via email, phone and text message, as well as email offers about other products and services that developer believes may be of interest to you. developer will process your information in accordance with the Quinstreet Privacy Policy.


Thanks for your registration, follow us on our social networks to keep up-to-date