Introducing SVG Tiny, a new getting started tutorial

Adding to our collection of mobile development tutorials is the new "Introduction to SVG Tiny" tutorial authored by Andrew Girow, an expert in mobile vector graphics and most notably Mobile SVG. A Mobile SVG enthusiast for many years, Andrew has spoken at several SVG Open conferences, is an Expert Group Member for JSR 226 Scalable 2D Vector Graphics API for J2ME and leads the TinyLine project called "Mobile SVG and J2ME software".

Download tutorial here>>

This tutorial starts by introducing SVG Tiny and its component graphical objects, continues by explaining document structure, data types, coordinate systems and how to handle shapes, text and images, and concludes with an example to try. Here's an outline:

SVG Tiny overview
Scalable Vector Graphics (SVG) is an XML language defined by the W3C for describing 2D graphics. It has been established by industry demand for a subset of SVG suited to displaying vector graphics on small devices. In order to meet these demands, the SVG Working Group (of W3C) created SVG Tiny 1.1 specification [Mobile SVG 1.1] that addresses mobile devices.

As SVG Tiny was defined as a subset of full SVG and came later in time, there is a need for developers who don't have SVG experience to catch up with SVG Tiny. Andrew Girow attempts to answer these needs with this tutorial, concentrating on the basic features of SVG Tiny and its most adopted standard, SVG Tiny 1.1.

SVG Tiny components
In SVG Tiny, the image displayed on the screen is described as a set of graphical objects. Rather than receiving and sending to the screen a "frozen" set of pixels as a PNG viewer does, an SVG Tiny viewer receives set of graphical objects. Graphical objects and their properties tell an SVG Tiny viewer "how" to draw shapes at specified sets of coordinates.

SVG Tiny differs from raster images:

- SVG Tiny content can adapt to any screen size and display properties
- SVG Tiny content can be zoomed without loss of quality

The SVG Tiny content is stored in XML format. It means that many XML tools could be used for SVG Tiny content traversing, accessing and modifying the values before delivering it to mobile phone.

SVG Tiny allows for three types of graphic objects and Andrew Girow guides you through vector graphic shapes, images, text and grouping objects (graphical objects can be grouped). He explains the XML tree structure of an SVG Tiny document, the most common data types needed to read and write SVG Tiny content and the coordinate system used for transformations. He then goes into more detail about the SVG elements of graphics, shapes, texts and JPEG or PNG images.

RSS feed example
To demonstrate how SVG Tiny can be used to present up-to-date information on a mobile phone, Andrew Girow sets out an example using weather forecast data from an RSS feed. As an RSS feed is an XML document containing the feed itself (root), several metadata elements and one or more individual item elements, it is perfect for this simple example.