9 July 2003

1 Introduction


Contents


1.1 About dSVG

This specification defines the features and syntax for Dynamic Scalable Vector Graphics (dSVG).

dSVG is a language for describing UI controls and behaviors in XML [XML10]. It contains eleven types of UI controls ('button', 'checkBox', 'radioButton', 'contextMenu', 'comboBox', 'listBox', 'listView', 'slider', 'spinBox', 'textBox' and 'window'), six categories of behaviors (DOM manipulation, viewer manipulation, coordinate conversion, constraints, flow control and selection ability), and two container elements ('action' and 'share').

dSVG UI controls have instrinsic states (up, down, hover, focus and disabled), which change according to mouse and keyboard events. Their appearances are defined in skins that are completely customizable. These skins can also contain dSVG constraints, which allow the UI controls to be "intelligently" resized.

SVG files with dSVG elements are interactive and dynamic. Behaviors can be directly or indirectly associated to SVG elements or to dSVG UI controls and triggered by specified events.

Sophisticated applications of SVG are possible by use of a supplemental scripting language which accesses the SVG Document Object Model (DOM), which provides complete access to all elements, attributes and properties. A rich set of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object. However, scripting has many downsides, as described in the next section.

1.2 The Limitations of Script

1.3 The Advantages of dSVG

1.4 UI Controls

HTML has been, for quite some time, the platform (markup language) with which to build Web applications. It has always been limiting, though, in its poor graphics support (only bitmaps, no vectors), its lack of absolute positioning, its small set of UI controls and its inability to describe the appearance of those UI controls (it's up to the HTML browser to decide on the appearance). SVG (Scalable Vector Graphics) is a powerful new XML markup language which promises to soon become the platform of choice with which to build Web applications. Although it provides the author with a rich set of vector graphics features (as well as bitmaps) and absolute control over their positioning, it suffers from the absolute lack of any markup for UI controls.

In lieu of UI markup, SVG-based Web applications are forced to create their own UI controls using script. This means, however, that non-developers cannot author the content, a fair amount of script for the UI controls must be transferred to the client (a real problem for wireless devices) and the UI controls are not as responsive as natively-implemented UI controls, unless being run on very fast processors.

What is needed is an XML markup language for UI controls, which:

  1. encompasses all the UI controls most commonly needed to build applications
  2. allows for absolute control of the positioning of the UI controls
  3. allows for absolute control of the appearance of the UI controls
  4. can be easily hooked up to actions, defined via markup or script functions
  5. can be easily used for forms
  6. is not tied to a model specifically intended for forms (i.e. does not force the author to jump through hoops to create an application which does not use forms)

XUL is an XML markup language for UI controls created by The Mozilla Organization, specifically for use in their Mozilla HTML Web browser. While it does offer an extensive list of UI controls, offers limited skin-ability (control of the appearance) and is not tied to a forms creation/processing/submission model, it is intended for use in HTML browsers and thus does not allow for absolute positioning nor absolute control of the appearance, cannot be easily hooked up to actions and cannot be easily used for forms. XUL has not been proposed to the W3C or any other standards body. It is not supported in the Corel or Adobe SVG Viewers.

XForms is another XML markup language which includes UI controls. As the name implies, it was designed for forms, plus its first intended host platform was HTML. So, of the six requirements listed above, it only meets #5. It only supports those UI controls needed for forms, does not allow absolute control over their positioning and their appearance, cannot be easily hooked up to actions (except those that affect just its own UI controls and its "instance", or forms, data) and is very tightly tied to its forms model. XForms is an official working draft at the W3C. It is not supported in the Corel or Adobe SVG Viewers.

The dSVG markup for UI controls meets all of the above six requirements.

1.5 Behaviors

Using SVG as the markup language for creating rich Web applications requires scripting to provide the dynamic and interactive features. There are many downsides to scripting, however.

What is needed is an XML markup language for behaviors, which encompasses all the actions most commonly needed to build applications. This includes:

  1. viewer manipulation (e.g. zooming and panning)
  2. DOM manipulation
  3. mouse position tracking
  4. coordinate conversion
  5. constraints
  6. flow control
  7. selection ability

SMIL is an XML markup language designed for multimedia purposes, whose animation features are partially supported by the SVG specification. While it does offer the 'set' element, which allows attribute values to be modified, it does not actually change the attribute values in the core DOM, but rather in the animated DOM. Thus using SMIL to modify attributes does not create mutation events, which might be useful. There is also no way to access the animated DOM to determine what the current value of an attribute is, which is essential to building applications. Regardless, SMIL does not offer markup analogies for the rest of the DOM methods that allow the DOM to be fully manipulated.

The dSVG markup for behaviors meets all of the above seven requirements.