Interactive 3D Viewer Written in SVG

In order to represent the real world on our computer screens, we must make use of three-dimensional modelling techniques. Even though SVG has been defined as a language for describing two-dimensional graphics, this paper will show that SVG is powerful enough to be used in a 3D application. In particular, we will present Aquila, a 3D interactive viewer prototype implemented in SVG and ECMAScript. Aquila constructs and modifies SVG DOM nodes on the fly in response to user feedback. The presentation will cover software design, technology choices, and functionality. It will be supported with demonstrations and illustrative examples.

3D Viewer Requirements

In order to claim to have a 3D viewer, one must meet these basic requirements:

  1. Store a 3D representation of the scene being modelled, including objects and lighting conditions
  2. Store a 2D view of the 3D model under specified viewing conditions
  3. Provide UI for altering the viewing conditions
  4. Change the 2D view in response to changing viewing conditions

Here is how the requirements can be met using only SVG and its associated standards:

Store a 3D Representation

3D model data can be included in the SVG file as metadata in a different namespace. We introduce the world3D XML grammar for 3D data, which is similar to the X3D standard but much simpler and therefore more appropriate for illustrative purposes. world3D can encode a scene of multiple polyhedra illuminated by a light source of any colour and position viewed from any viewpoint and orientation.

Store 2D Views

2D views of the 3D scene are constructed as SVG, and stored in memory as DOM nodes.

Provide UI

The user interface for controlling viewing conditions can also be created as SVG, with user feedback taking the form of DOM events on SVG elements.

Change 2D View

The 2D view is computed and altered using ECMAScript. In particular, ECMAScript handlers of DOM events modify DOM nodes in order to create the effect of a shifting view in response to user input on the view UI. Since SVG supports external script files, it is possible to separate the code completely from the world3D content, allowing the viewer code to be easily re-used on arbitrary world3D content.


SVG has a number of features that can be used to add to the realism of the 2D views. We will show how:

Further Work

3D graphics is a rich topic in which many technological advances have been made. While Aquila demonstrates the principle of using SVG for a 3D application, there remain many opportunities to extend the 3D model, add to the features, specialize to specific use-cases and optimize the performance. The nature and feasibility of these opportunities will be discussed.

Ms. Cemile Buke Otkunc and Dr. Philip A. Mansfield
#350 - 1190 Homer Street
Vancouver, BC  V6B 2X6
tel:   604-682-3404
fax:   604-682-3432