Compiling SVG: How and Why

Michael Levy, Quetzalcoatl Bradley and Calin Somosan

NewHeights Software Corporation

The Natural History of UI-1

The Natural History of UI-2

The Natural History of UI - 3

The Natural History of UI - 4

Convergence

• Human Interface Guidelines– Are metaphors still appropriate?– Do they reflect converged offerings?– Can they project a brand?

• Mitel Design Center– Unify the device (phone on desk) and

application– Input vehicle should be irrelevant to user

What about Web Applications?

• Interim technology– Many advantages, but– Step backwards in responsiveness

• Human perception is continuous, not discreet

• Transaction based processing is as bad as Menu driven DOS-like processing

The Role of the Architect

• GUI Libraries– Simplify programming– Enforce “look-and-feel”– Biased towards Shell designers metaphor– Too complex for industrial designer

• Today’s design tools– Illustrator, Flash

New Design Paradigm

HelixRAD

• Graphical element has 4 major parts– Template

• VML/DHTML/CSS

– Parameters– Elements

• Attribute invariants for each element

– Semantics• Handlers for actions (Javascript)

Why use SVG?

• Elegance/ power of descriptive language

• Tools support– Xml compliant– Graphics editors

Why Compile?

• Interpreted code is not, and never will be, good enough to compete with compiled code

• Example - menu as SVG:1. Load the XML 2. Create the DOM 3. Change the text attribute for the Menu name4. Clone an item node for each menu item 5. Set the text attribute of each item 6. Traverse the resulting DOM tree, rendering it.

How to Compile SVG

• On Win32, GDI+ library provides most of what is needed

• Provide an abstract library for general elements

• Compiler subclasses or instantiates particular SVG files

• Scheme needed to automate attachment of semantic actions

Conclusions and Future Work

• Mismatches between GDI+ and Adobe reference implementation are problematic

• Better SVG tool support:– Grouping– Most meaningful element that fits

• EG: Square instead of four paths; circle instead of (closed) arc

• SVG lacks adequate alternative to DOM clone for class instantiation

• Standards for semantics?