Mobile Web Application Best Practices

W3C Recommendation 14 December 2010

 HTML / XHTML
 XML namespaces
 ASP .NET
 Javascript
 Ajax : only a part of it ..
 Xml http request …

3.7.1 Consider Use of Canvas Element or SVG For Dynamic Graphics

3.7.1.1 What it means

Canvas and SVG provide alternative options for incorporating graphics in a

Web application. Support for these technologies varies across devices so in
many cases the choice of which technology to use will depend on the target
devices for a given application.

The canvas element specifies a display region where JavaScript can be used
to draw simple graphics. In contrast, SVG is an XML language for defining
vector graphic elements that are added to a DOM which can be modified
using JavaScript.

SVG is well-suited for graphics that must be scalable and whose components
need to be modified (e.g. panning and zooming a map) whereas canvas is
better suited where a static bitmap is sufficient (e.g. drawing a scatter-chart or
creating visual effects).

If speed is important, canvas may be more effective. However since Canvas

generates a flat bitmap it is not inherently accessible and so should not be
used as the sole means of conveying information.

The Nature of SVG

SVG is a radical departure from traditional Web graphics, primarily because it is a text
based language used to describe how vector graphics should be rendered. This is in contrast
to GIF, JPG or even Macromedia Flash files, which are binary files. Because SVG uses XML,
you can readily generate SVG code from any programming language. For example, to create
the bar graph shown in Figure 2, you simply read data from your database file and write
SVG XML statements as output. Those statements are then passed back from the Web
server to the browser, where they are rendered using the SVG viewer. If you create the bar
graph as a GIF or JPG, you need to use a drawing program to create the file, save it, then
send it to the Web page. When the underlying data changes, you need to recreate the file
again.
Another difference is that GIF and JPG files are raster files, as opposed to SVG’s vector
format. Raster files use a binary format to describe how individual pixels should appear.
Raster files are set at creation time to be rendered at a certain size and using certain colors.
If you enlarge a raster file, you see “pixelation”; the graphic starts to look rougher.
SVG can be readily and proportionally enlarged or reduced. Because SVG uses vectors, all of
the elements are mathematically enlarged or reduced by the same amount. If you look
again at Figures 3 and 5, you can see that the detail view (Figure 5) looks as good as the
initial view (Figure 3).
Because an SVG is made up of a series of objects described with XML statements, you can
attach behaviors to any of the objects. For example, when you move the mouse over the
different bars in Figure 2, the customer detail data is displayed in the rectangle. You can
also attach HTTP links to an object, so that by clicking the object, you are taken to a
different Web page.
An SVG can also use scripting code such as JavaScript to control its behavior when
rendered. For example, you can animate an object, change its location or colors, or use a
number of other effects.
In addition to SVG, there are other vector based techniques available for rendering
graphics. For example, IBM has Graphical Data Display Manager (GDDM), Macromedia has
Flash, and there are other XML-based markup languages (VML, Vector Markup Language
and PGML, Precision Graphics Markup Language). SVG incorporates the features of VML and
PGML.
The main benefit of SVG as compared to proprietary techniques such as GDDM and Flash is
that SVG is an open W3C standard (see http://www.w3.org/Graphics/SVG/Overview.html).
That means that the specification for how SVG works is available to all interested parties.
Because SVG uses XML, you can use a variety of tools to create SVG, from Notepad to
WYSIWYG programs such as Adobe Illustrator. You can also choose from a number of SVG
viewers, some of which run as browser plug-ins, while others are stand-alone programs.
From my research into the available options for working with dynamic graphics, it seems
that the only other viable and similar approach to SVG is the Java 2D API. Both Java 2D and
SVG provide similar capabilities. Sun Microsystems, the creators of Java, are enthusiastic
supporters of SVG, and even provide Java classes to convert Java 2D code to SVG. If you
program in Java, you can use Java 2D or SVG; if you use another programming language,
you can use SVG.