September 2004
CONTENTS OF THIS NEWSLETTER
INTRODUCTION
USING SVG IN ARCHAEOLOGICAL WEB APPLICATIONS
TOOLS FOR XML
INTRODUCTION
Mark Bell
Welcome to newsletter number 4. This newsletter is a bit later and a bit shorter than I expected because of a few last minute hitches.
The new newsletter software seems to be working correctly - though a few of you seem to have disappeared and no longer have a valid email address, despite my best efforts to contact everyone on the old list.
I hope to get the next newsletter out by the end of the year. As ever I am dependent on your feedback and contributions.
Mark
Using SVG in Archaeological Web Applications
Michael Rains
York Archaeological Trust
SVG stands for Scaleable Vector Graphics. The aim of this short paper is to encourage web application developers to explore the use of SVG in their own web projects. After a brief description and history of SVG, the bulk of the paper will describe a number of increasingly sophisticated examples of SVG projects within an archaeological context.
To view and use the examples presented below, readers will need the free Adobe SVG Viewer plugin which is available from http://www.adobe.com/svg. This works well with Internet Explorer under Windows, but there are problems and limitations when using it with Netscape/Mozilla or under MacOS. The Mozilla native SVG project is still under development. At the time of writing, only the combination of Windows, Internet Explorer and the Adobe SVG Viewer supports the full functionality of the examples discussed below.
What is SVG?
Scalable Vector Graphics (or SVG for short) is a new graphics file format and Web development language based on XML. SVG enables Web developers and designers to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control.
SVG is a platform for two-dimensional graphics. It consists of an XML-based file format and a programming API for graphical applications. Key features include shapes, text and embedded raster graphics, with many different painting styles.
SVG drawings can be both dynamic and interactive. SVG supports scripting through languages such as ECMAScript and Javascript. Event handlers such as onmouseover and onclick can be assigned to any SVG graphical object. The SVG Document Object Model (DOM), which includes the full XML DOM, provides an embedded or external script with full control over the structure and content of an SVG document.
SVG is a royalty-free vendor-neutral open standard developed under the W3C Process. It has strong industry support from, amongst others, Adobe, Apple, Corel, HP, IBM, Macromedia, Microsoft, and Sun Microsystems. SVG first appeared as a W3C working draft recommendation in February 1999 and this became a full recommendation in September 2001. Adobe also previewed their SVG Viewer in spring 1999 but it was November 2001 before a stable version 3 was released for Windows, Mac and other platforms.
SVG viewers (mainly the Adobe Viewer) are deployed to over 100 million desktops, and there is a broad and increasing range of support in many authoring tools. For example, recent versions of Adobe Illustrator and Corel Draw are able to export to SVG format.
Some Examples
The first example, at http://www.yorkarchaeology.co.uk/svg/simple_svg.htm, shows SVG at it’s simplest. The code for this SVG document is also very simple:
<?xml version="1.0"?> <SVG height="480" width="640"> <CIRCLE style="stroke-width:3;fill:red;stroke:black" r="80" cy="160" cx="160" /> <RECT style="stroke-width:3;fill:blue;stroke:black" height="200" width="320" y="180" x="180" /> <LINE style="stroke-width:10;stroke:green" y2="40" x2="600" y1="420" x1="40" /> </SVG>
SVG documents are plain ASCII text and so can be created with any text editor, even Notepad. In the above code, the three graphic elements (circle, rect and line) can be see contained within the svgdocument element. Each element has various positioning attributes such as cx, cyand rwhich define the centre and radius of the circle, and a styleattribute which defines the visible appearance of the element.
The second example, at http://www.yorkarchaeology.co.uk/svg/dccook.htm, is a graphic exported in SVG format from Adobe Illustrator. This SVG document contains no scripting but still benefits from the built-in interactivity of the Adobe viewer, which allows the user to zoom and pan the document.
The third example takes the same SVG document exported from Adobe Illustrator and embeds it in an HTML page using the OBJECTtag. This example forms part of a recent web publication by York Archaeological Trust and can be found at http://www.yorkarchaeology.co.uk/dccook/main.htm. onclickevent handlers have been added to some elements of the the SVG document and JavaScript code within the HTML page accesses and manipulates the SVG DOM via the getSVGDocument()method of the OBJECTelement to introduce simple interactivity within the SVG document.
In the next example the SVG document forms the main element of the web page. This page is part of another recent YAT web publication and can be viewed at http://www.yorkarchaeology.co.uk/waterstones/showmatrix.php. Scripting is used both to control the appearance of hidden layers within the SVG document (defined using the SVG gelement to group other elements together), and to display other HTML pages in new windows.
The next example, at http://www.yorkarchaeology.co.uk/wgate/main/timeline.php, contains two embedded SVG documents. The site plan in the top centre of the page contains a series of initially invisible groups or layers each representing a phase in the development of the site. Scripting of the other SVG document, the timeline at the right of the page, enables it to control the visibility of the layers in the site plan (as well as absolutely positioned chunks of HTML in the main document) in response to mouse clicks.
All of the preceeding examples have used static SVG documents, that is documents which have been prepared in advance, for example in Adobe Illustrator, and then uploaded to the server. In this example, at http://www.yorkarchaeology.co.uk/iadb4/matrix_plan.php?SC=1048&ConList=P2&MatID=311, the SVG document, an excavation Phase plan, is generated in real time by a PHP script running on the server. The SVG document does not exist as a file on the server. The PHP script retrieves vector data and stratigraphic information for the individual Contexts which make up the Phase from a MySQL database, and then outputs the ASCII text of the SVG document along with the appropriate MIME type back to the web server. Because it is an open source specification and is coded in plain ASCII text, SVG is particularly suitable for server-side scripting in this way.
The final example, at http://www.yorkarchaeology.co.uk/iadb4/ex_aegis.php?SC=1900.1&C=13&OX=102&OY=101&EX=8, shows the use of client-side scripting to directly manipulate the document object model (DOM) by adding or removing elements, and by altering their position and display attributes (this example is best viewed in fullscreen mode - F11 in Internet Explorer). This page is the plan digitizing section of the YAT Integrated Archaeological Database (IADB) and would normally be used with a graphics tablet. To add, for example, a hachure to the plan, click on Hachure in the Element menu and then click at the head and tail of the hachure. To move the hachure, click on Selectin the Element menu, then click on the hachure and drag either of the handles to a new position. All this is achieved through client-side scripting - there is no interaction with the server once the page, including the initial plan view generated by a PHP script, has loaded. It shows how close integration of HTML, Javascript and SVG can produce a truly interactive web page.
Where to go next…
Two essential websites for anyone wanting to get to grips with SVG are the W3C SVG site at http://www.w3.org/Graphics/SVG/ which includes the latest SVG specification (which can be hard work) as well as a host of links, and the Adobe SVG site at http://www.adobe.com/svg, the Demo section of which contains many excellent (non-archaeological) examples of the use of SVG.
For those who prefer something they can read in the bath, an excellent introduction to SVG can be found in SVG Essentials by J D Eisenberg published by O’Reilly in 2002.
More information on PHP can be found at http://www.php.net and on MySQL at http://www.mysql.com.
And finally, many of the examples used above are taken from recent publications in the Archaeology of York Web Series which can be accessed through the York Archaeological Trust web site at http://www.yorkarchaeology.co.uk/ayw.
TOOLS FOR XML
The Saxon XSLT and XQuery Processor.
Saxon is an XQuery, XLST and XPath processor for processing XML files. It can be used from the command line, or from a Java application. Saxon is available from http://saxon.sourceforge.net/ and Saxon 8.0 (the latest version) requires the Java JDK 1.4.
Saxon 8.0 comes in two versions. Saxon-B 8.0 is a non-schema-aware processor, and is available as an open-source product, free of charge. Saxon-SA 8.0 is the schema-aware version of the package, and is available as a commercially supported product.
Saxon contains:
XPath 2.0 processor
XQuery 1.0 processor
XML Schema 1.0 processor.
Saxon can be used to process XML with XSLT stylesheets, or with XQuery queries.
Installation of Saxon is simple - by unzipping the download file into a suitable directory.
Running Saxon
From the command line Saxon is run like this:
> java saxon8.jar net.sf.saxon.Transform sourcefile.xml stylesheet.xsl > result.xml
If output were not directed to the result file, then output would appear on the standard output – the screen. Saxon can also be embedded into a java program.
Saxon is a vital tool for checking out XQuery and XSLT scripts – definitely everyone should have it installed.
END OF NEWSLETTER 4
This newsletter is copyright © Mark Bell and the individual authors, 2004.
Please contact the editor before reproducing material from this
newsletter.