 |
|
|
Abstract
Scalable Vector Graphics, SVG, is an XML syntax for rich, scripted and animated 2D graphics. Web Services use XML for exchanging data. This paper shows how SVG can be used not only to exchange graphical data between Web Services but also to give them a compelling user interface.
In a first part, this paper gives an introduction to Scalable Vector Graphics, its origins and its features, as well as a code example.
In a second part, the paper shows how SVG can be used to exchange and manipulate rich graphical content between Web Services. SVG is an XML grammar. Therefore Web Services can easily generate and manipulate SVG content using XSL transformations, the Document Object Model API (DOM) or Java Server Pages. Concrete examples illustrate the use of these technologies.
In a final part, this paper shows how Web Services can use SVG to deliver compelling user interfaces. This part will focus on two examples: a directory service user interface and an on-line workflow application.
Keywords
Table of Contents
Scalable Vector Graphics, SVG, is an XML grammar for rich 2D graphics. It is a specification from the World Wide Web Consortium, W3C (see http://www.w3.org) the industry consortium that created HTML and XML. SVG 1.0 became a final recommendation in September 2001.
The SVG 1.1 effort consisted in modularizing the SVG specification and combining the modules into profiles. SVG 1.1 defines three profiles: SVG Full which includes all modules, SVG Basic and SVG Tiny which are both targeted at mobile devices, PDAs and cellular phone type devices respectively. SVG Basic and SVG Tiny are collectively referenced as SVG Mobile. SVG 1.1 reached the final recommendation status on January 14th 2003.
SVG is widely supported by the industry: over twenty companies have been involved in its definition and the number of implementations supporting SVG is increasing rapidly, from authoring tools to converters and viewers.
The broad support behind SVG comes from its many advantages. SVG has sophisticated graphic features, which is naturally important for a graphic format, but it also benefits from being an XML grammar. SVG has all the advantages XML brings such as internationalization (Unicode support), wide tool support, easy manipulation through standard APIs (e.g., the Document Object Model, DOM API), and easy transformation (e.g., through XML style sheet Language Transformations, XSLT).
In the graphical arena, and especially compared to raster graphics formats (such as GIF, JPEG or PNG images), SVG has the advantage of being:
Lightweight. For many types of graphics, an SVG graphic will be more compact than its raster equivalent
Zoomable. SVG content can be viewed at different resolutions, e.g., enlarged or shrunk without losing quality.
Searchable. Because SVG content is XML, it becomes possible to search the content of an SVG image for text elements, comments or any kind of meta-data.
Structured and Accessible. Graphic objects can be grouped and organized hierarchically. In addition, all graphical elements can be described with textual information and meta-data. This means that SVG graphics retain a lot of semantic which can be used by software agent and in particular accessibility software.
SVG provides a rich syntax for describing images in terms of graphic objects (such as text to be rendered, circles or rectangles) and rendering properties (such as strokes or colors). It can express the following types of graphics:
Rich static 2D graphics. SVG supports generic shapes, transforms, rich text, transparency and filter effects, to name some of the most important static features.
Interactive and dynamic 2D graphics. It is possible to interact with SVG documents: graphical elements can be the target of events such as mouse clicks. In reaction of events, the graphic can be manipulated by scripts through the Document Object Model (DOM) AP (e.g., it is possible to change the color of a circle when the mouse moves over it). The DOM API is described using IDL (Interface Description Language). There are different language bindings. The specification contains two language bindings: ECMAScript and Java language. In addition, any graphical elements in an SVG graphic can be link. For example, you can have a map of a city and make each district of a city link to a detailed map of that district.
Animated graphics. Many SVG elements (such as rectangles, circles, or images) may contain animation declarations. For example, it is possible to express, with an animation declaration, how the x-coordinate of a rectangle should change over time, when the animation should begin or how long it should last.
Figure 1 shows a simple graphic specified in SVG format. It illustrates some of SVG's static capabilities and will give the reader a flavor of the SVG syntax. Refer to the SVG specification (see [SVG Specification]) for details on the various tags and their parameters. The example shows some of the features we mentioned earlier: sophisticated graphics (with gradient paints for the background, nose and eyes, simple or arbitrary geometry for the various graphical elements, rich text formatting and filter effects for the drop shadow).
<svg width="700" height="700" viewBox="0 0 300 300">
<defs>
<!-- Nose Paint -->
<radialGradient id="nosePaint"
gradientUnits="userSpaceOnUse"
cx="5" cy="5" fx="4" fy="4" r="2">
<stop offset="0%" stop-color="white" />
<stop offset="20%" stop-color="#ccccff" />
<stop offset="100%" stop-color="#222255" />
</radialGradient>
<!-- Eye Paint -->
<radialGradient id="eyeBallPaint" gradientUnits="userSpaceOnUse"
cx="3" cy="3" fx="2.6" fy="2.6" r="1">
<stop offset="0%" stop-color="white" />
<stop offset="20%" stop-color="#ccccff" />
<stop offset="100%" stop-color="#222255" />
</radialGradient>
<radialGradient id="backgroundPaint" r="1.1">
<stop offset="0%" stop-color="white" />
<stop offset="30%" stop-color="#ccccff" />
<stop offset="65%" stop-color="#222255" />
<stop offset="100%" stop-color="black" />
</radialGradient>
<filter id="dropShadow" width="1.3" height="1.3" >
<feGaussianBlur in="SourceAlpha" stdDeviation="0.1 0.1"/>
<feOffset dx="0.1" dy="0.1" />
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0
0 0 1 0 0 0 0 0 .5 0" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<rect x="0" y="0" width="300" height="330"
fill="url(#backgroundPaint)" stroke="none" />
<g id="happyFace" transform="scale(30, 30)"
filter="url(#dropShadow)" >
<!-- Left eye -->
<circle cx="3" cy="3" r="1" fill="url(#eyeBallPaint)"/>
<circle cx="3.5" cy="3.5" r=".5" fill="black" stroke="none" />
<!-- Right eye -->
<circle transform="translate(4, 0)" cx="3" cy="3" r="1"
fill="url(#eyeBallPaint)"/>
<circle cx="6.5" cy="3.5" r=".5" fill="black" stroke="none" />
<!-- Nose -->
<circle cx="5" cy="5" r="2" fill="url(#nosePaint)" />
<!-- Smile -->
<path d="M 2,6 C 2,9.5 8,9.5 8, 6" fill="none" stroke="#222255"
stroke-width="1" stroke-linecap="round"/>
<!-- Text -->
<g text-anchor="middle" font-family="SunSans-Heavy" font-size="1"
font-weight="bold" fill="white"> <text x="5" y="5">
<tspan>Java</tspan>
<tspan x="5" dy="1" font-style="italic"
fill="#ff0000">SVG</tspan>
</text>
</g>
</g>
</svg>
The two main strengths of SVG are that it is both an open format and an XML syntax. Because it is an open format, SVG is appropriate for exchange between software components. Because it is an XML grammar, SVG is easy to generate and manipulate in software components which use XML markup.
Because Web Services are in large part about interoperability and because they make heavy use of XML markup, it is natural that SVG be the format of choice services use for representing rich graphical content.
In addition to being open and XML, SVG has a rich structure and preserves semantic because of its descriptive element and metadata. This richness provides an opportunity to Web Services to generate, modify or search rich graphical content. For example, a web service could search SVG maps that contains a specific city name.
In this first example, a service dynamically generates a graphical representation of a web site's usage log as XML data. The figure below shows how, to implement an SVG web log service which delivers the log information as an SVG animation following a user request (step 1), we retrieve the log information as an XML document (step 2), convert it to SVG content using an XSL transformation (step 3) and serve the result of that transformation to the requester (step 4). The requestor might be a human operator or another web service.
The following figure illustrates various steps in the animation created from the XML log data and show how the animation is used to progressively present the statistical data to the user.
For more examples and details on how to combine SVG and XSL, refer to [JSP and SVG].
In this second example, an on-line site lets employees of a company create and customize their business cards. Step 1 in the following figure illustrates how business card templates are created in SVG format using an authoring tool that can generate SVG (see [SVG Implementations]). Some elements in the templates are marked with special identifiers (step 2) before they can used by our business card service. By doing so, the generated SVG content will contains elements with identifiers as in the following snippet:
<text id="firstName">First Name Here</text>
In step 3, the business card service receives a query to create a business card for a specific user. The service then retrieves the user information (step 4) and modifies the business card template with the user's name, title and other specific information using the Document Object Model API (step 5). For example, using Java code, you can access the above text element as follows:
import org.w3c.dom.*;
Document doc = ...; // Depends on the method used to load the SVG document
// Access the <text> element
Element t = doc.getElementById("firstName");
// Create the text node with the user name.
String userName = ....; // userName has been retrieved from a data base
Text firstName = doc.createTextNode(userName);
// Replace the template's "First Name Here" with the firstName node
t.removeChild(t.getFirstChild());
t.appendChild(firstName);
The result can be sent back to the requestor through Java Server Pages (step 6). Refer to [JSP and SVG] for more details on how to use Java Server Pages (JSP) and SVG.
With the above examples, we have seen how SVG can be used to either generate rich graphical content using standard XML technology (XSL transformations) or to manipulate and transform template graphics using common technologies like the DOM API and Java Server Pages.
This illustrates the flexibility that having an XML format for graphics brings to Web Services: they can easily generate and manipulate graphics and they can interoperate with authoring tools. In the business card example, the business card templates can come from one of the many authoring tools that generate graphics in the SVG format.
In the previous section, we have shown how using server side technologies helps generating and manipulating graphical content. In this section, we focus on the client side, i.e., on the types of features that a Web Service serving SVG content can deliver.
In this example, a directory service serves directory information as XML data over HTTP. The service can be simply queried with a parametrized HTTP GET request which returns an XML document that contains the result of the query.
That service can be used by other services which need to access directory information. But it is also very useful to human operators looking for a phone number or an email address. This is where SVG can be used to deliver a highly graphical user interface.
The following figure shows how the directory service offers an SVG front-end to its service (step 1). That SVG font-end lets the user enter query information (step 2) and submit a request (step 3). The SVG scripting capabilities and the DOM API are then used to analyze the result of the query and transform it into visual feedback in the SVG front end (step 4).
The following screen shots show the various steps from the client perspective.
The key aspects of this example are that the user interface is graphically rich (it uses animation and graphical features such as transparency to improve the user experience), that it is scalable and can adapt to various screen resolutions and that it is quite responsive as it off-loads the server of the user-interface specific tasks.
In this final example, a workflow service returns an XML description of a specific application involved in a workflow. That is, when asked about a specific application, the service returns an XML document that describes all the applications that interact with the one of interest and the type of data that flows between the applications.
This application works on the exact same model as the previous example except that instead of building a user interface made of buttons, tables and tex fields, it builds an interactive graph. This is illustrated by the following screen shots.
In this paper we have seen that the W3C's Scalable Vector Graphics' format is an XML markup for rich, dynamic and animated 2D vector graphics. We have seen how, being an XML grammar, SVG fits naturally with XML technolgoies (such as the DOM API) for client-side or server side manipulation. Finally, we have seen that SVG's compelling graphical features, scripting and animation capabilities make it a attractive solution to build visually rich user interface to Web Services.
SVG is now a mature technology: two version of the recommendation have been finalized and there are multiple implementations of the technology for all kinds of applications like authoring, converting or viewing. SVG is especially interesting when combined with other XML technologies and particularly in the context of Web Services where being able to easily generate graphics easily, either from templates or from scratch, opens the door for a new range of powerful, graphical user interfaces.
[SVG Specification] W3C http://www.w3.org/TR/SVG11/
[SVG Implementations] W3C http://www.w3.org/Graphics/SVG/SVG-Implementations.htm8
[JSP and SVG] Sun Microsystems http://wwws.sun.com/software/xml/developers/svg/jsp/
[XSLT and SVG] Max Froumentin, Vincent Hardy http://www.svgopen.org/papers/2002/froumentin_hardy__xslt/
  |
Design & Development by deepX Ltd. |
