Creating a Graphical User Interface in SVG

The SVG Programmers Application Resource Kit (SPARK) is an open source project to create a GUI component framework for Web applications using the Scalable Vector Graphics language and associated standards such as EMCAScript, CSS and XSLT. Like JavaBeans or ActiveX controls, SPARK components are designed to be interoperable. Generally, component reuse depends on standardizing APIs and conventions through which a component communicates with an application. The SPARK framework is a set of APIs and conventions through which an SVG component communicates with an SVG application.

A design goal of the SPARK project is to create a Model-View-Controller architecture within each component. The Model is analogous to an XForms or XUL description, the view is the GUI “skin”, and the controller is the logic that handles events and acts on the DOM tree. Each of these can be altered separately – for example re-skinning an application should be essentially just a change of a style sheet.

A unique feature of SPARK is the complete abstraction of user interface elements to schema data types. The difference between a radio button group and a menu is merely appearance; their data type is identical. The appearance is determined by style sheets, and state changes can be achieved by modifications to the SVG DOM, including modifications that change which CSS selector matches the element being changed.

Our paper reports significant new progress on a SPARK specification and a sample implementation that qualifies. Previous work using SVG for graphical user interfaces has been concerned primarily with creating the widgets themselves and not the widget interactions, declarative forms, descriptions, and more. The current work starts with goals and design, describes how the newly created framework follows that design, and describes the specific classes that one must implement in order to create a qualifying SPARK widget to be added to the open source repository. It describes SVG structure, class inheritance, widget-widget interaction and application-widget interactions. It finishes with a number of examples that employ the framework and a discussion of the future of this framework.

The SPARK Web site is located at

Mr. Alastair Fettes
Faculty of Engineering
University of Victoria
PO Box 3055, EOW 248
Victoria, British Columbia
Canada V8W 3P6
tel:   250-480-8424
Dr. Philip A. Mansfield
#350 - 1190 Homer Street
Vancouver, BC  V6B 2X6
tel:   604-682-3404 x142