Internet Archaeol. 20. Wright. Cricklade: A Practical Archaeological Application of SVG

4.3.1 Creating the SVG images

The layered drawings created by Guy Hopkinson for Internet Archaeology were prepared specifically for electronic publication. Having already gone through the editorial process, they were ideal candidates for demonstrating how SVG might be used to produce results that are comparable to, or better than, Volo View Express. In order to achieve this, a structure in the form of a website was created to house the drawings and provide a framework for interaction to occur.

View Cricklade SVG Website (ensure you have installed the SVG viewer)

The website created for this purpose was based on W3C design standards and validation, so that SVG elements would work in partnership with other open-source W3C technologies. It was created in XHTML 1.0 (Anon. 2006e), with all formatting controlled using external Level Two Cascading Style Sheets (Anon. 2006f). The site was also designed to conform to the W3C Web Content Accessibility Guidelines 1.0 at the AA level (Anon. 2006g) and the index page includes the relevant Dublin Core metadata (Anon. 2006h). Some concessions were made, owing to browser limitations and lack of access to specialised technologies, but they are minimal.

The tool used to create the SVG images was Adobe Illustrator 10.0.3 for the Apple OSX operating system, but other programs are available to create SVG files. Some CAD programs include export functions to save files into SVG. For example, CADStd Pro by CAD Standard is a low-cost product that writes SVG directly (Anon. nd). If large batches of CAD to SVG file conversions are necessary, the dedicated CAD2SVG Converter by AfterCAD Software (formerly Savage Software) provides high-quality output (Watt et al. 2003, 922). CAD2SVG converts files in .dwg or .dxf format (Anon. 2006i). The choice of Illustrator for this project was an attempt to work within current industry standards in archaeology (Middleton 1998, 6). Because Adobe has chosen to invest substantial resources into incorporating SVG into their technology, the result is a powerful SVG authoring tool at a reasonable price (Anon. 2006b).

Illustrator can be used to create original artwork that is saved in SVG or SVGZ (SVG with file compression) format. Documents created in a wide variety of outside formats can be opened, manipulated and saved in SVG as well. Layers created in drawing programs like AutoCAD can be preserved when brought into Illustrator, and subsequently saved into the SVG file. Layers are designated using the 'group' element, and the original layer name becomes the group identifier. So a layer in Illustrator converted to SVG creates markup tags that look like:

<g id="layer_name"></g>

It is important to note, however, that files saved as SVG from Illustrator do not retain SVG 'primitives'. This is to say, while a circle may be created as a circle in AutoCAD or Illustrator, when it is saved in SVG, rather than using the <circle></circle> tags, it becomes a series of parameters in a path (Anon. 2005a). So a layer in an SVG file will consist of a group identity and series of paths holding the specific information for each set of points, lines or polygons for that layer. SVG code can be edited and optimised in many ways after it has been saved from Illustrator, so path tags could be replaced with SVG primitives if necessary.

Image of an example of group code in SVG.
Figure 5: Example of the code for a very simple layer in SVG, as exported from Adobe Illustrator.

The group tag allows human readers to recognise layers, so these can be easily identified and manipulated. The group designation can be used to work with any feature within a layer as well. The SVG code can be edited at any time to combine layers, isolate elements within layers or change layer order. SVG groups are read from the bottom of the file to the top, so the layer that is meant to display uppermost will be the last layer in the SVG file. Informal testing revealed that layer order was very important to those users of the Cricklade SVG website with archaeological experience, and that the uppermost layer to be displayed should always be the excavation layer. This is easily achieved by moving the excavation layer group to the end of the appropriate code in the SVG file.

Use of the group tag is not limited to layers. It can make any part of an image available for a wide variety of manipulations either within the SVG file, or by using an external scripting language like JavaScript. For example, a particular polygon can be isolated for use in an animation, and the animation will run automatically when the image loads because the code to control this behaviour is part of the SVG file. In contrast, an external action written in JavaScript can be used to bring up an alert message when clicking on part of the SVG image. In either case, the reason is the same, because SVG is text that is human readable, information can be isolated and made interactive in a wide variety of ways.