A Customizable SVG Graph Visualization Engine

This paper describes our experience of creating an interactive and customizable graph visualization engine implemented entirely in SVG and ECMAScript, which is referred to as SVG graph visualization engine, or SVG Editor for short. Typical operations of this visualization engine include filtering, searching, collapsing, expanding of graph elements, and hierarchical as well as historical viewing of graphs and subgraphs. To the best of our knowledge, there are no other customizable graph editors implemented in SVG available at this point in time. This visualization engine has great potential because it runs on many platforms and in many applications due to the availability of SVG plug-ins.

Structure and Functionality of SVG Editor

The SVG Editor has four main components: the main visualization window, menus, history views, and hierarchical views. The main window is a canvas located in the center of the view. Its main responsibility is to open and display directed graph (i.e., nodes and arcs) information. There are two types of menus: on-screen menus and pop-up menus. The history view provides a mechanism for saving different states in a sequence of graph manipulations. Theses saved states can easily be returned to by left-clicking on the snapshot of the state in the history view. The hierarchical views provide drilled-down snapshots for subsystems at different levels.


We used the MVC design pattern as a cornerstone for the implementation of the graph editor. The Model contains nodes and arcs information about the application domain; the View obtains data from the model and displays it; and the Controller receives and interprets user input and requests changes to the model or the view. Because of this separation of concerns, we can easily maintain multiple views with the same model. The graph component of the SVG Editor can be specialized for particular domains.

Sample Applications

The SVG Editor can be customized to fit various domains. To illustrate the editor's customizability, we discuss three sample applications of the SVG Editor. The first example is the instantiation of the SVG Editor for the visualization of software structures. This kind of visualization is used by reverse engineering tools to support program comprehension. The second example is the instantiation of the SVG Editor for information modeling with the Eclipse Modeling Framework (EMF). Another example is to use the SVG Editor to show three distinct viewpoints of a subject Web site: developer-view, server-view, and client-view in a web site reverse engineering tool, and for reverse engineer to explore and navigate mappings between them.

Future Work

Finally the paper discusses the future work of developing a customization framework to simplify the instantiation of the SVG Editor for a particular domain.


Tony Yingyun Lin
University of Victoria, Canada
email: gaoyun@cs.uvic.ca
Feng Zou
University of Victoria, Canada
email: fzou@cs.uvic.ca
Dr. Holger M. Kienle
University of Victoria, Canada
email: kienle@cs.uvic.ca
Dr. Hausi A. Muller
University of Victoria, Canada
email: hausi@cs.uvic.ca