LINEAMENTA technical paper

Using SVG to analyze architectural drawings

SVG (scalable vector graphic) is a new, standardized data format to put two-dimensional scalable images (as opposed to bitmap graphics) on the Web by describing them in a specialized XML dialect. SVG is promoted by the W3C and is currently being developed as a standard for web-based display of vector data such as lines and polygons as well as images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects and extensibility. The Document Object Model (DOM) for SVG, which includes the full XML DOM, allows for straightforward and efficient vector graphics animation via scripting with event handlers for any SVG graphical object. Because of its compatibility and leveraging of other Web standards, features like scripting can be done on SVG elements and other XML elements from different namespaces simultaneously within the same Web page.

For these reasons, SVG lends itself especially well to the interactive study of architectural drawings. Annotations, measurements and proportional anlyses can be done by the scholar on the fly, without consulting a professional architect and with the aid of specialized database material served through the web. In LINEAMENTA this is done by displaying the original graphic from a high-resolution scan by means of the graphic server DIGILIB, developed by the ECHO partners in Berlin and Bern. Over this image is laid out a transparent layer on which vector graphics can be drawn in a size corresponding to the dimensions of the original sheet.

A demonstration page shows in very simplified way how it is possible to measure a sheet on-screen by moving the yellow line by dragging the end points to appropriate positions. When pressing the button labeled "show length" the distance between the two points (in pixel) is calculated and displayed on the screen.

Currently there is only one way to combine interactive SVG graphics with standard bitmap images in a Web browser. The SVG image has to be embedded inside the HTML code (it is not possible to reference it), and in turn the SVG image has to contain a reference to the bitmap image (JPEG or PNG format) using the non-standard "foreingObject" tag. This non-standard requirement is due to the fact that SVG background canvasses can not yet me made transparent. In this case, an additional XML file (coded in XBL = XUL binding language) contains some SVG extensions, bindings and JavaScripts. The resulting structure is shown in the following code sample.

<svg:svg 
	xmlns:svg="http://www.w3.org/2000/svg" 
	style="fill:none; background:transparent" 
	height="200"
	width="400">	>
<canvas id="container" >
<svg:foreignObject>
	<img 
		id="image" 
		name="pic" 
		border="0"
		src="http://colosseum.biblhertz.it:8383/docuserver/digitallibrary/
	servlet/Scaler/?fn=/&pn=6&dw=400&dh=600&wx=0.0&	amp;wy=0.0&ww=1.0&wh=1.0&ws=1.0&mo=&mk=	0/0&pt=242" />
 </svg:foreignObject>
 <svg:text id="text1" x="25" y="25">length</svg:text>
 <shape x1="100" y1="100" x2="200" y2="100">
	<cline id="line" 
		x1var="x1" 
		y1var="y1" 
		x2var="x2" 
		y2var="y2" 
		style="stroke:yellow; 
		fill:none; 
		stroke-width:1;"/>
	<controlpoint xvar="x1" yvar="y1" style="fill: #FFFF80;"/>
	<controlpoint xvar="x2" yvar="y2" style="fill: #FFFF80;"/>
</shape>
</canvas> 
</svg:svg> 

The embedding HTML page must be written conform to the XHTML standard and saved as a XML file. Currently the only internet browser that is capable of rendering such a hybrid page is Mozilla (starting from version 1.3). To make it work in Mozilla it is necessary to have the SVG-enabled version, which is at the moment only available in dedicated builds for the Microsoft Windows platform. One may hope that SVG support will soon be incorporated in all Mozilla versions. SVG viewer plugins as the one by Adobe are only capable of rendering the SVG graphic, but do not include interactive event processing.

To sum up, the current situation offers many promising perspectives, but at the moment continues to have several drawbacks:

• The tag does not belong to the standard W3C recommendation
• The web page itself has to be in XML format; it is currently not possible to embed SVG graphics in a normal HTML page or to reference it from another location.
• The page can be rendered only in specific versions of the Mozilla browser.

All the same, it seems rewarding pursue this line of development, since Mozilla is an open source project and will remain so in the future; for the time being, we can live with this situation. The SVG feature is not meant for a general public, but for specialized users that are prepared to meet the requirement of a specialized browser.

Test it here (Mozilla needed).