Dojo GFX
SVG in the Real World™
Eugene Lazutkin, DojoToolkit.org
SVG Open 2009, Mountain View, CA
1

What Dojo GFX is
• Cross-browser graphics package.
• Written in JavaScript.
• Supported backends: SVG,VML, Canvas, Silverlight.
• Working on SVGWeb support.
2

Underlying concepts
• Loosely based on SVG concepts:
• Geometry represented by shapes and transformation matrices.
• Visuals are described by strokes, and fills.
• Special objects: fonts, groups to combine shapes, and a surface is a
graphics container.
3

Dojo GFX goals
• Designed for client-side software development.
• Emphasis on interactive graphics.
• Support for easy picture regeneration (even on Canvas!).
• Support for events.
4

Code tour
SVG in Dojo GFX
5

SVG in Dojo GFX
• SVG and VML were the first renderers shipped.
• SVG is used as a benchmark baseline for other renderers.
• SVG is used as the first choice for debugging graphic algorithms.
• SVG is what I recommend as the first serious choice for our users.
6

Dojo GFX code analysis
•
Renderer Arc Decompose
Common code is not included
50
• Canvas renderer does not
support text and events. 37.5
• Arc is a helper to approximate 25
arcs with Bezier curves.
12.5
• Decompose splits matrix to
rotations, scaling and translation. 0
SVG VML Canvas Silverlight
7

Dojo GFX SVG renderer
• The most feature-rich.
• It runs on wide variety of browsers.
• ...yet it is the smallest one!
8

Dojo GFX use study
• VML is still big, especially on public-facing and corporate web sites.
• It looks like IE6 started to die off slowly in the corporate world.
• SVG rules the desktop-oriented web applications.
• Typically both SVG and Canvas available and users go with SVG.
• Canvas is the king of mobile applications.
9

Dojo GFX support study
• Vast majority of browser-specific tickets are for IE.
• Vast majority of renderer-specific tickets are for VML.
• Tickets for browser-specific differences for SVG are rare nowadays.
10

SVG unification in browsers
• When I am in doubt I consult SVG 1.1 spec (http://www.w3.org/TR/
SVG/) and it works for me everywhere.
• Finally!
• SVG renderer has exactly one browser-specific fragment:
11

SVG? XML!
Softer side of SVG
12

SVG... It is just XML...
• By design any Dojo GFX object can be (de)serialized as JSON.
• It can be used to transport scenes.
• We have an experimental XSLT file to convert a subset of SVG to our
JSON format.
• We can combine existing SVG pictures with dynamically generated
content.
13

XML in IE? You betcha!
• It means we can generate SVG (as XML) in IE and other lame
browsers!
• We can generate XML DOM in a hidden iframe.
• Who cares that we cannot see it on IE?
• Jared Jurkiewicz needed to send client-generated graphics to servers,
and he implemented it.
14

In the wild
Take a walk on the wild side
15

Dojo GFX (and SVG) in the wild
• Various vector-based engineering drawings.
• Example: dojox.sketch (Tom Trenka).
• Example: dojox.drawing (Mike Wilcox).
• DEMO.
16

Dojo GFX (and SVG) in the wild
• Mapping.
• Example: ESRI ArcGIS JavaScript API.
• DEMO (geoprocessor: service area, population zonal stats; route: find
a route).
17

Dojo GFX (and SVG) in the wild
• User interface.
• Example: balloon tooltips, rounded corner backgrounds.
• Example: analog gauge, bar gauge.
• DEMO.
18

Dojo GFX (and SVG) in the wild
• Charts.
• Example: dojox.charting
19

Charting results
Making things pretty
20

Dojo Charting
• Supports most common plots:
• Lines, areas (including stacked).
• Bars and columns (including stacked and clustered).
• Scatter, bubble, candle sticks, pies.
21

Dojo Charting
• Supports shared axes, and multiple plots per chart.
• Supports themes, legends.
• Supports actions to make charts interactive.
• DEMO.
22