![]() |
Strategies for effective use of intelligent graphics in Web applications | Table of contents | Indexes | SVG support in ILOG JViews Component Suite | ![]() |
|||
SVG: putting XML in the picture |
| McKeown, John |
| John McKeown |
| Research Student |
Dublin ![]() Ireland ![]() Trinity College Dublin ![]() | Trinity College Dublin,
Knowledge and Data Engineering Group Department of Computer Science Dublin 2 Ireland Phone: +353 1 608 2158 Fax: +353 1 677 2204 email: john.mckeown@cs.tcd.ie web site: www.cs.tcd.ie/John.McKeown |
| Biography |
Grimson, Jane ![]() |
| Jane Grimson |
| Associate Professor |
Dublin ![]() Ireland ![]() Trinity College Dublin ![]() | Trinity College Dublin,
Centre for Health Informatics Department of Computer Science Dublin 2 Ireland Phone: +353 1 608 1594 Fax: +353 1 677 2204 email: jane.grimson@cs.tcd.ie web site: www.cs.tcd.ie/Jane.Grimson |
| Biography |
| Abstract |
XML ![]() | The emergence ofXML has lead to the development of powerful new technologies to overcome the limitations that exist withHTML , but it has also provided the framework for developing open document/data formats. TheSVG Specification describes one such data format for providing 2-dimensional vector graphics on the Web. AlthoughSVG is not yet a standard, it has already attracted considerable attention from the Web design community and support from software vendors. A well-supported vector graphics standard would provide Web designers with a format for creating more flexible graphics to include in their Web pages. The fact that this vector graphics standard will also be anXML format makes it even more powerful. Apart from the obvious advantages of being non-proprietary and platform independent, it may be styled using style sheets, processed by anyXML parser, and just likeXML, it can be generated dynamically in a number of different ways. |
| Dynamic Generator Graphics ![]() HTML, Hypertext Markup Language ![]() SVG ![]() Scalable Vector XML ![]() XML, | Introduction |
W3C ![]() XML ![]() | Vector Graphics have been around since before the Web, however, they have not succeeded in gaining the widespread acceptance and usage on the Web enjoyed by the raster formats. A number of well-defined formats are available with Web capabilities, but these formats tend to be proprietary and require specific authoring and rendering tools.XML can be used to create text-based file formats that are platform independent and non-proprietary.XML has already been used to define a number of Vector Graphics formats submitted as notes to theW3C . These include Vector Markup Language , and Precision Graphics Markup Language . As a result of these and other submissions, theW3C chartered a Scalable Vector Graphics working group that produced the Scalable Vector Graphics (SVG ) 1.0 Specification . |
DOM, Document Object Model ![]() SVG ![]() W3C ![]() XML ![]() | SVG is powerful language for describing two-dimensional vector and mixed vector/raster graphics inXML .SVG was designed to integrate with other Web standards efforts like XLink,XML Namespaces,DOM ,CSS andXSL .SVG images can use Stylesheets to control the look and feel of the image, and scripting to provide interactivity and animation. The specification also describes more complex functionality such as Filters Effects, Gradients, and Patterns.SVG has the potential to become thede facto standard for vector graphics. |
CSS, Cascading Style Sheets ![]() SVG ![]() XML ![]() XSL ![]() XSLT ![]() | Given that it is anXML format,SVG is platform independent and non-proprietary . It is also a text based format, and can therefore be edited by hand using a simple text editor rather than a special authoring tool, although this may not be acceptable for more complicated images.SVG graphics can be parsed using anyXML compliant parser and may be transformed usingXSLT stylesheets.SVG is used to markup up graphical data in the same way thatXML andHTML are used to markup text. ThereforeSVG can be generated dynamically using the same techniques for generatingXML andHTML (CGI Scripts, Java Servlets, Server Pages). |
CGI, Common Gateway Interface ![]() HTML, Hypertext Markup Language ![]() SVG ![]() XML ![]() | The ability to generate anSVG image dynamically enables Web designers to create customised graphics for their Web sites, thus enhancing the look and feel of their site. It also introduces the possibility of including external information into the image. This paper will present work carried out on a template-basedXML Generator, which can be used to integrateSVG image templates with external information sources to produce anSVG image. The template approach will be examined as a means of providing dynamic graphics within a Web site. TheSVG graphics produced by this Generator may be customised in different ways i.e. appearance, and content. Applications of this approach will be described to illustrate its usefulness. |
Motivation |
Dynamic Web Content |
HTML, Hypertext Markup Language ![]() | Dynamic content has become a very important aspect in Web publishing. A Web site used to consist of a collection of staticHTML pages. As the online service aspect of the Web emerged, the ability to generateHTML pages dynamically became very important, allowing a business to integrate up-to-the-minute data into their Web pages. Dynamic features added to Web sites can customise the content, layout, and simple formatting offered byHTML . However these features do not apply to the graphical content of the Web site. |
SVG ![]() XML ![]() | The raster graphics formats most commonly used on the Web are static in both size and content. Vector graphics on the other hand are more dynamic, as the contents of an image are specified as a sequence of geometrical instructions that produce the image when evaluated. An open vector graphics format likeSVG has the potential to deliver customised graphics to visitors of a Web site. Producing customised vector graphics withSVG involves the integration of external information with these geometrical statements to produce an image. WithSVG this integration step is simply a matter of producingXML dynamically, something which is possible to do in a variety of ways. However, these techniques for producingXML dynamically may not suit the production of SVG. |
SVG ![]() XML ![]() | To illustrate the shortcomings of some of the popular approaches to producing Dynamic Web content (includingXML ), consider a simple example that usesSVG to produce the graph in . The graph illustrates the grades for four students in a class. Some of the current techniques for producing dynamicXML are examined below to show how they could be used to produce this graph. |
|
Java Servlets and CGI scripts |
CGI, Common Gateway Interface ![]() HTTP, Hypertext Transfer Protocol ![]() | Both Java Servlets andCGI scripts are invoked by aHTTP request, and perform some processing to produce a suitable response. These technologies can be used to createHTML orXML on the fly. Both of these approaches are essentially a programmatic way of producing dynamic content. To change some aspect of the processing or modify the HTML/XML output in some way involves changing the program code directly. |
HTML, Hypertext Markup Language ![]() HTTP, Hypertext Transfer Protocol ![]() SVG ![]() XML ![]() | Using either of these methods to produceSVG images dynamically makes the task of changing the image more difficult. For instance given a Java Servlet that produces the graph above, the task of modifying some part of the image involves modifying the Java code. In the example above this may seem trivial, but for a more complex image the task of editing the image is usually performed with the aid of a suitable graphics editing tool, instead of editing a text file, or program code. It is also a task more likely to be performed by a graphic designer than a programmer. The sample Java code below shows part of the doGet method of a Java servlet that produces anSVG image in response to aHTTP GET command. This code shows the principle problem with this approach that is the XML/SVG tags are contained within the program code and cannot be edited separately. |
// Get Method of a Java Servlet that produces an SVG image containing
// a graph of student grades
public void doGet (HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException
{
res.setContentType("image/svg");
PrintWriter w = res.getWriter();
/* Print Prolog, Doctype, and Styles.......*/
w.println("<g>");
w.println("<g>");
w.println("<text x='40' y='87' class='text'>48%</text>");
w.println("<rect class='bar1' x='40' y='140' width='20' height='-48'/>");
w.println("</g>");
w.println("<g>");
w.println("<text x='70' y='71' class='text'>64%</text>");
w.println("<rect class='bar2' x='70' y='140' width='20' height='-64'/>");
w.println("</g>");
w.println("<g>");
w.println("<text x='100' y='79' class='text'>56%</text>");
w.println("<rect class='bar3' x='100' y='140' width='20' height='-56'/>");
w.println("</g>");
w.println("<g>");
w.println("<text x='130' y='101' class='text'>34%</text>");
w.println("<rect class='bar4' x='130' y='140' width='20' height='-34'/>");
w.println("</g>");
w.println("</g>");
/* Print the other objects contained in the image...... */
} // end doGet
|
Server pages |
ASP, Active Server Pages ![]() | The term Server Pages refers toASP , andJSP . The server pages approach to dynamic Web pages embeds programming code within the actual Web page to produce a server page. When the server page is requested (i.e. by a Web browser), the code within the page is evaluated which provides the dynamic content. The finished page is then returned to the requesting clients. |
JSP ![]() SVG ![]() XML ![]() XSP | Generating the graph above using this approach would also work, however, the server page file is not a well-formedSVG document and therefore cannot be edited usingSVG software. The Java Server Pages specification has tried to address this issue by setting out a well-formedXML representation of aJSP file, however the use of this representation is not required. The sample code below is an excerpt of a Java Server Page showing how Java code is embedded in the page. The way in which the code is embedded in the Server Page is notXML 1.0 compliant and therefore the server page is not well-formed XML. There are other Server Pages initiatives attempting to make anXML compliant server page syntax, most notable is the Apache Cocoon Project'sXSP . |
<?xml version="1.0" standalone="yes"?> <svg width="4in" height="3in" xmlns = 'http://www.w3.org/2000/svg-20000303-stylable'> <rect class='bar1' x='40' y='40' width='80' height='60'/>"); <text x='70' y='71' class='text'> <% System.out.println(coursename + "Grades"); %> </text> </svg> |
XML and XSL transformations |
XML ![]() XSL ![]() | A more recent approach to generating dynamic Web content involves the use ofXSL Transformations , a part of the eXtensible Stylesheet Language (XSL ). XSLT is a language for transformingXML documents into otherXML documents. The transformation is defined by a collection of rules/templates which indicate how the source document should be processed to produce the output document. |
SVG ![]() XML ![]() XSLT ![]() | Given theXML source document below, anXSLT stylesheet could be developed to produce anSVG graph using the infromation in this source document. An example of this is given in the XSLT 1.0 Specification .XSLT may also be used to transform the content and structure of anSVG image to produce a newSVG image. It can also handle multipleXML source documents, however there is no defined way of using data from other sources like a database or text file. AlthoughXSLT is a powerful transformation language, it is not intended to be a general purposeXML transformation mechanism. |
<grades> <student> <name>John</name> <cs01>45</cs01> <cs02>48</cs02> <cs03>57</cs03> </student> <student> <name>Paul</name> <cs01>67</cs01> <cs02>64</cs02> <cs03>75</cs03> </student> <student> <name>Mike</name> <cs01>74</cs01> <cs02>56</cs02> <cs03>64</cs03> </student> <student> <name>Dave</name> <cs01>54</cs01> <cs02>34</cs02> <cs03>69</cs03> </student> </grades> |
System design |
SVG ![]() XML ![]() | The approaches mentioned above are all suitable for producing dynamic web content, however they all possess limitations, or impose retrictions on the production of dynamicSVG .SVG images are examples of Data-centricXML , as opposed to Document-centric . The distiniction between the two can be summarised as fairly regular structure, fine-grained data, with very little or no mixed content. TheXML contained in anSVG file determines the visual appearance of the image.SVG possesses some powerful graphics features, making the creation and editing of complexSVG images very difficult without the aid of suitable graphics software. Using the approaches mentioned earlier to generateSVG would change the image fromXML into something else e.g. program code, making it illegible to any graphics software which understandsSVG . |
DOM, Document Object Model ![]() SVG ![]() XML ![]() | SVG is compatible with both theXML 1.0 Recommendation , and the Namespaces inXML Recommendations . The latter allows elements from foreign namespaces to appear within anSVG image. TheSVG specification states that foreign namespace elements should be included in theSVG DOM by user agents but can be otherwise ignored. This allows commands to be embedded in an SVG image using elements for a foreign namspace without affecting the integrity of theSVG image. The sampleSVG document below shows thebarchart andbar elements from thegraph namespace included in anSVG image using a namespace declaration. |
<?xml version="1.0" standalone="yes"?> <svg width="4in" height="3in" xmlns = 'http://www.w3.org/2000/svg-20000303-stylable'> <defs> <graph:barchart xmlns:graph="http://mycompany/graphapp" title="CS02 Grades"> <graph:bar label="John" value="48"/> <graph:bar label="Paul" value="64"/> <graph:bar label="Mike" value="56"/> <graph:bar label="Dave" value="34"/> </graph:barchart> </defs> <desc>This chart includes private data in another namespace </desc> <!-- In here would be the actual graphics elements which draw the bar chart --> </svg> |
XML ![]() | To address the limitations of the methods mentioned earlier, a new approach was devised using template files as the basis for producing dynamic content. The templates contain references to external information sources and instructions that indicate how these information sources should be processed for inclusion in the document. The templates themselves are well formedXML documents, and the additional instructions are embedded in the template by means of foreign namespace elements. These templates are processed by aGenerator application that retrieves data from the referenced information sources, and processes it according to the instructions in the template. The result of this processing is another well formed XML document similar to the template but with dynamic content. |
SVG ![]() | For example, the graph in shows a templateSVG image for the graph example earlier. This template contains all the elements of the final image but lacks the actual data that determines how the graph will look. Data is required for the key names, the value for each grade, and title of the graph.The template contains references to the data required, and instructions to the Generator on how the data should be included. After the Generator has processed the template below, a graph similar to that in will be produced. This Generator processing could be carried out by some server-side process, producing dynamic graphics in response to requests from clients. |
|
Design goals |
SVG ![]() XML ![]() | The following goals were identified for the design of an application to generate dynamicXML which also suits the generation ofSVG images. |
SVG ![]() W3C ![]() XML ![]() | Types of information sources |
Database |
| JDBC | The template file may reference data stored in a Database. The reference can include a particular query to execute on the database, or some predefined view of the database. Database access is provided by theJDBC API . |
API, Application Programming Interface ![]() | Java class |
| To allow more flexible information sources, a Java classes may be used. This class requires a static method that the generator calls to retrieve data. |
URL |
HTTP, Hypertext Transfer Protocol ![]() | A URL can be specified as the information source. The protocol for the URL could be eitherHTTP , FTP, or FILE. Therefore the information could come from a text file, or in the case ofHTTP , it could be returned by a servlet or cgi script. |
Information source formats |
| The data retrieved from an information source needs to be in a format understood by the Generator. The following formats are accepted: |
Java properties format |
| Data returned in the attribute/value pair format used in a Java properties file. |
firstname=John secondname=Doe age=42 |
Comma delimited text |
firstname, secondname, age John, Doe, 42 |
XML fragment |
XML ![]() | The information source may be anXML document fragment which can either be included in the generated document or further processed to extract certain data. |
<data> <firstname>John</firstname> <secondname>Doe</secondname> <age>42</age> <data> |
Template instructions |
DOM, Document Object Model ![]() XML ![]() | The set of instructions which can be embedded in the templates files should include instructions to insert or replace content within the document. Ideally the template should contain all theXML elements required, therefore the instructions in the template only change the attributes and content of these elements. Instructions to create new elements are not required important, but replicating elements of theDOM tree may be useful. The following set of instructions are supported within the template files. |
Importing information sources (processing instruction) |
URI ![]() | Information sources are imported into the template files using a Processing Instruction at the begining of the file. The information source is referenced using thesrc attribute whose value is aURI . As mentioned earlier there are three types of infromation source supported by the Generator (Database, Java Class, and URL). The URIs to reference a Database or Java class use two special schemes (xjdbc:/// and xjava:///), which adhere to the URI guidelines . The code below shows the Processing Instructions required to import data from a Database and from a Java class. The other two attributes of the Processing Instruction specify the type of the information source (table, props, xml), and the prefix used to refer to this information source. |
<!-- Import a database --> <?dxml src="xjdbc:JDBCDriver?query=Select name, CS02 From Grades#JDBCDataSource" type="table" prefix="is1" ?> <!-- Import from a Java Class --> <?dxml src="xjava:MyJavaClass?course=CS02#getCourseData type="table" prefix="is2" ?> |
Replace content (attribute) |
<text x="195" y="70" class="text" is1:replace-content="Text(Name, 1)"> Key 1</text> |
Insert content (element) |
<text x="60" y="20" class="text" style="fill-rule:nonzero;"> <is1:insert-content value="Text(2,0)"/> Grades </text> |
Insert attribute (attribute) |
<text x="40" y="35" is1:insert-attribute="y,Value(35+(Num(2,1)/2))"> Some Text</text> |
Applications |
SVG ![]() | A number of interesting applications of this dynamicSVG Generator are outlined and discussed below. |
Graphical templates |
SVG ![]() | The use ofSVG templates described here allows graphics to be created which present information in a particular way e.g. a graph. Once created, this template can be used to display other sets of information by just modifying the information sources referenced. |
Dynamic images |
SVG ![]() XML ![]() | Dynamic images are not eassily achieved with the existing technologies for Web presentation. WhenSVG becomes a full web standard it will provide Web page designers with an open format for inserting graphical content in their web-pages. As already mentioned in this paper these graphics can be generated dynamically becauseSVG is anXML format. Using the Generator application descirbed here will allow information to be integrated into the image when it is requested, resulting in customised graphics. |
Web applications |
CSS, Cascading Style Sheets ![]() SVG ![]() | Web applications are an alterntaive to the traditional Web presentation of formatted text and simple graphics. Web applications are generally graphically rich Web sites created with proprietary graphics software. An open vector graphics format such asSVG would support this type of web presentation, allowing a Web site to be created using onlySVG images. Text can be included in theseSVG images and formatted usingCSS rules.SVG has the additional advantage of being scalable and can be viewed on different screen sizes without a loss in quality. |
Conclusions |
SVG ![]() XML ![]() | This paper presented an alternative approach to generating dynamicXML content for the Web, one which is better suited to producing data centricXML then the existing approaches. The suitability of this approach was illustrated with examples of generating dynamicSVG images. Although theSVG examples presented were very simple they do help to highlight the limitations of current approaches, and illustrate the usefulness of this approach when applied to more complexSVG images. The templates used in this approach make it easier to present rapidly changing data. They also allow the same presentation to be applied to different data by simply changing the information source. The structure of the templates is such that they remain well-formedXML documents and can be interpreted byXML software. The Generator application described here is a prototype to demonstrate this approach and assess its effectiveness. |
| Acknowledgements |
| Bibliography |
|
|
|
|
|
|
|
|
|
|
|
|
![]() |
Strategies for effective use of intelligent graphics in Web applications | Table of contents | Indexes | SVG support in ILOG JViews Component Suite | ![]() | |||