Leveraging SVG in the Rigi Reverse Engineering Tool
Holger M. Kienle, Anke Weber, and Hausi A. Müller
Computer Science Department
University of Victoria
Keywords: software reverse engineering, graph visualization,
documentation, experience report, Scalable Vector Graphics, ECMAScript
Reverse engineering of legacy software systems is a research area that
heavily relies on visualization techniques to facilitate program
understanding (e.g., for software maintenance activities), and to
communicate software architecture and design (e.g., with graphs and
diagrams). These visualizations constitute important system
information, which becomes part of the system documentation. Scalable
Vector Graphics (SVG) is well suited for reverse engineering
visualizations of 2-dimensional graphics. This paper explains our
approach to leverage SVG for reverse engineering and system
Chikofsky and Cross define reverse engineering as follows :
"Reverse engineering is the process of analyzing a subject system to
(1) identify the system's components and their interrelationships and
(2) create representations of the system in another form or at a
higher level of abstractions." The second part of the process often
involves visualization to communicate complex information about the
software system more effectively.
There are many different ways to visualize a subject system. However,
a graph model offers the most intuitive way. Components of the system
are represented as nodes, whereas interrelationships between
components are represented as (directed) arcs. A simple example is a
call graph for a program. Procedures in the program constitute
the nodes of the call graph. Calls between procedures are represented
with arcs. In a sense, software structure graphs, such as call graphs,
are aerial maps for software engineers.
Rigi is a reverse engineering tool developed over more than ten years
at the University of Victoria . It uses the graph model described
above. The core of Rigi is a graph editor/drawing tool enhanced with
additional functionality for reverse engineering tasks.
Figure 1: Software Structure Graph in Rigi
Figure 1 depicts a graph that visualizes parts of IBM's SQL/DS system,
which is over one million lines of PL/AS code . Red nodes are
variables, yellow nodes are modules, and purple nodes are types. All
arcs have been filtered out except for the yellow ones, which
represent calls between modules (i.e., Figure 1 shows the call
The graph visualization and manipulation is implemented with Tcl/Tk.
This implementation exhibits several drawbacks. The rendering speed is
rather slow and does not scale well for larger graphs. Furthermore,
the GUI's look and feel is perceived as rather crude compared to the
state of the art. Lastly, images cannot be exported (except for taking
screenshots). The last point is a severe drawback, because Rigi graphs
are the main result of the reverse engineering activity, which become
essential system documentation . Even if Rigi screenshots are
cumbersomely integrated into the system documentation, they are mere
static bitmaps that allow no interactive exploration.
SVG for Reverse Engineering
Intuitively, SVG seems a good candidate for reverse engineering
visualizations. However, a more formal approach to confirm this
hypothesis is needed. This section discusses in more detail how SVG
meets the requirements of reverse engineering tools.
R1: Address the practical issues underlying reverse engineering
R2: Provide interactive, consistent, and integrated views, with
the user in control.
R3: Provide consistent, continually updated, hypermedia
R4: Integrate graphical and textual software views, where
effective and appropriate.
R5: Use a simple, human-readable, lightweight format.
R6: Support introspection of schemas
R7: Support multiple, composable, modular, dynamically
Figure 2: Reverse Engineering Requirements (R1-R7)
Kenny Wong identified reverse engineering tool requirements in his
Ph.D. thesis . Figure 2 lists the relevant requirements in the
context of this paper. Rigi falls short in several of these
requirements. Leveraging SVG within Rigi helps to alleviate several of
The following list discusses the features of SVG that facilitate
reverse engineering. We also identify the requirements (R1-R7) that
are addressed by SVG. (The full version of the paper will contain more
detailed explanations on how these requirements are met by SVG.)
- XML-based (R5,R6,R7): Since SVG's encoding is XML-based, we
can leverage XML technology for storage, parsing, and document
transformation and querying.
- W3C Recommendation (R1): A mature, open standard such as
SVG is the foundation for tool support from several vendors in various
products, open-source implementations, and cross-platform availability.
- Interactivity (R3): SVG documents can be made interactive
with embedded scripting (e.g., ECMAScript). Thus, documents are no
longer necessarily static. Instead, they become live documents. For
example, graph manipulations (such as filtering and layouting) can be
performed interactively (e.g., during a PowerPoint presentation) to
facilitate comprehension of complex reverse engineering information.
- Portable (R4): The same SVG document can be visualized in
diverse host environments. SVG allows reverse engineering results,
such as Rigi graphs, to be accessible over the Web , to be used in
PowerPoint presentations for project meetings, and to be incorporated
into high-quality printed documentation.
- Multimedia/HTML integration (R3,R4): SVG is among the media
formats that the SMIL 2.0 multimedia standard integrates
SVG Integration in Rigi
Because of SVG's benefits outlined above, we decided to leverage it in
our Rigi tool to overcome Rigi's current limitations in visualization
and document generation. Figure 1 is a typical reverse engineering
result in Rigi. This graph is a document that we would like to easily
incorporate into other host environments for presentation and
documentation purposes (e.g., PowerPoint presentation, PDF document,
and Excel spreadsheet).
Figure 3: Exported Rigi Graph in PowerPoint (top right) and Internet
Explorer (bottom right)
This is accomplished by exporting a Rigi graph as an SVG document. The
user can either write the SVG document into a file or automatically
launch a Web browser to display the corresponding graph. Figure 3
shows the Rigi environment on the left side (workbench and sample
graph) and the exported SVG document in PowerPoint (top right) and
Internet Explorer (bottom right).
Export of the SVG graph is accomplished with Rigi's built-in Tcl
scripting capabilities. The contents of the SVG document is
straightforward. Rigi nodes are translated to SVG <circle>
elements, arcs are translated to <line> elements. Every element
has a unique id and contains several non-standard SVG attributes
(e.g., every arc knows its source and destination node). These are
used by the embedded ECMAScript code that implements the interactive
Figure 4 is an embedded SVG document (923 nodes and 4200 arcs) that
can be used to explore, for example, the following interactive
feature: Nodes and arcs can be filtered by clicking on the legend. For
example, to filter out red "data" and purple "struct" arcs in the SVG
graph, both labels (located in the upper right corner) can be
While developing the SVG Rigi graphs, we made, for example, the
- The size of the SVG document for the graph in Figure 1 is about 700
KB. In contrast, a high-resolution screen shot of this image takes
more than 9 MB.
- Loading and rendering of SVG documents in Internet Explorer and
PowerPoint scales well compared to Rigi. However, the browser freezes
up for several seconds while loading the SVG document in Figure 3.
- SVG file compression with gzip yields good results for our
documents. For example, the size of the compressed SVG document for
the graph in Figure 1 is about 100 KB.
- As mentioned before, Rigi's rendering of graphs is not visually
appealing. SVG on the other hand has powerful and versatile rendering
features that allow sophisticated visual effects (e.g., nodes with
opaque colors and arc arrows with <marker> elements).
Our experiences with SVG have been largely positive. We plan to
further enhance the SVG Rigi graphs. Especially, we want to make the
documents more interactive by incorporating additional graph
manipulation functionality (e.g., moving and deletion of nodes).
1. Elliot J. Chikofsky and James H. Cross, "Reverse Engineering and
Design Recovery: A Taxonomy", IEEE Software, pages 13-17, January
2. Kenny Wong et al., "Structural Redocumentation: A Case Study", IEEE
Software, pages 46-54, January 1995.
3. Christian Nentwich, Wolfgang Emmerich, Anthony Finkelstein, and
Andrea Zisman, "BOX: Browsing objects in XML", Software--Practice and
Experience, 30(15):1661-1676, December 2000.
4. Lloyd Rutledge, "Multimedia standards: Building blocks of the
web", IEEE MultiMedia, 8(3):13-15, July-September 2001.
5. Kenny Wong, "The Reverse Engineering Notebook", Ph.D. Thesis,
Department of Computer Science, University of Victoria, 1999.
6. Hausi Müller and Karl Klashinsky, "Rigi: A System for
Programming-in-the-large", 10th International Conference on Software
Engineering (ICSE '88)}, pages 80-86, 1988.
7. Scott R. Tilley, Hausi A. Müller, and Orgun A. Mehmet,
"Documenting Software Systems with Views", In Proceedings of the 10th
International Conference on Systems Documentation (SIGDOC '92),
Ottawa, Ontario, October 13-16, pages 211-219, 1992.
$Id: extended_abstract.html,v 1.3 2002/01/15 19:25:16 kienle Exp $