A Graph Library Extension of SVG

Kurt NÝrmark, Department of Computer Science, Aalborg University, normark@cs.aau.dk

This paper describes an application of SVG for drawing of graphs (sets of nodes and edges), and for doing simple animations of graphs. We use the SVG graph application for production of illustrations in web-based, technical teaching materials. It is our experience that a large subset of illustrations in such materials can be represented as graphs - maybe in some loose or extended meaning. On equal standing, the paper is about a technique for extending SVG in the direction of a particular application area (in our case graph drawing). As a side benefit, the technique empowers SVG authors with means to control the complexity of SVG source documents.

SVG is a powerful language for description of two-dimensional graphics, but relative to most areas of application, SVG is at low level of abstraction. It is certainly possible to draw and animate graphs in SVG, but it is desirable to make use of drawing primitives at a higher abstraction level than the elements of the SVG language. In the first part of the paper we develop and describe graph drawing primitives on top of SVG. The proposed graph drawing primitives can be considered as custom tags that are oriented towards a specific application of SVG. Two new elements, svg-node and svg-edge, allow us to describe properties of nodes and edges, including node labels and edge labels. These elements support a variety of different node shapes, edge shapes, and edge connection points. The svg-graph element aggregates a list of svg-nodes and a list of svg-edges to a graph. The svg-composite-node element allows us to encapsulate an exiting graph in an svg-node, hereby nesting an entire graph inside a single node. This turns out to be a useful way to modularize a complex graph illustration. Using the with-animation element around an svg-graph it is possible to provide for a fixed number of simple, declarative kinds of graph animations. This includes stepwise revelation of nodes and edges, and stepwise traversal of the graphs.

There are many possible ways to extend SVG in the direction of a given application area. The approach described in this paper is based on a one-to-one mapping of SVG elements to functions in the functional programming language Scheme (which is a language in the Lisp family). The Scheme functions are called SVG mirror functions. The SVG mirror functions are generated automatically from an SVG document type definition (DTD), such as the DTD of SVG 1.1. The generation is done by means of LAML tools. For each element e in SVG there exists an SVG mirror function fe in Scheme. There are only lexical differences between use of native SVG fragments and application of SVG mirror functions. As an example, the SVG fragment <circle cx="100" cy="200" r="50" /> corresponds to the symbolic Scheme expression (circle 'cx 100 'cy 200 'r 50), also known as an S-expression. The Scheme expression generates an internal representation in terms of an abstract syntax tree (AST). The internal AST representation can be rendered as native SVG, or it can be used as a convenient basis for other interpretations or transformations. The graph extension of SVG is implemented as a Scheme library on top of the SVG mirror functions.

The SVG mirror function library makes the full SVG 1.1 language available as individual functions in Scheme. The Scheme functions, which represent the elements of SVG, possess detailed knowledge of SVG in terms of attributes and SVG document composition. If an attribute is used in an invalid way, or if an SVG document is composed illegally, an error or a warning will be issued upon the evaluation of the expression. The SVG mirror function library makes it possible to write and author an SVG document as a Scheme expression. This is useful, because the full power of the programming language can in a seamless way, be mixed with SVG fragments written in Scheme. We have used this as the basis for the implementation of the graph library extension of SVG.

SVG can be used together with many different programming languages. Typically, SVG contents is embedded in imperative print statements, and typically the programming language dominates and shadows SVG. As such it is difficult to recognize the SVG contents in between the fragments of the programming language. The approach described in this paper is more gentle - and less intrusive - because of the functional approach and due to the similarities between XML notation and S-expressions written in Scheme.

The seamless injection of SVG in Scheme can also be used to empower SVG authors in other ways. First of all, the ability to define SVG abstractions in a uniform way is extremely useful. The SVG defs element is also oriented in this direction, but it is a rather primitive and limited. The possibility of doing arbitrary computations at any point in an SVG source document is also very attractive. In some sense, this adds Turing completeness to SVG, and it complements several existing means of expression in SVG (defs/use, sharing by means of href, stylesheets). In our concrete work we have benefited from having local name bindings for improved clarity, and for sharing of subexpressions that are used multiple times in an SVG document. All taken together, the use of a functional programming language for SVG authoring makes it much easier to control the complexity of non-trivial SVG source documents.

Selected links with additional information:

  1. A preliminary version of the full paper
  2. All examples from the preliminary paper as SVG and Scheme files
  3. Web Programming in Scheme with LAML, Journal of Functional Programming, 15 (1): 53-65, January 2005.
  4. Reference Manual of the SVG 1.1 Mirror Library
  5. The reference manual of the SVG Graph Extension Library
  6. The LAML home page