Dojo GFX: SVG in the real world

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 ﬁlls. • 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 uniﬁcation 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-speciﬁc 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 ﬁle 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: ﬁnd 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

Dojo GFX: SVG in the real world

by Eugene Lazutkin on Oct 02, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 42

Statistics

Dojo GFX: SVG in the real world — Presentation Transcript