Dojo GFX: SVG in the real world
Upcoming SlideShare
Loading in...5

Dojo GFX: SVG in the real world



Dojo GFX and SVG --- lessons learned, and examples in the real world. Presented at SVG Open 2009.

Dojo GFX and SVG --- lessons learned, and examples in the real world. Presented at SVG Open 2009.



Total Views
Views on SlideShare
Embed Views



3 Embeds 44 42 1 1


Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Dojo GFX: SVG in the real world Dojo GFX: SVG in the real world Presentation Transcript

  • Dojo GFX SVG in the Real World™ Eugene Lazutkin, 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 ( 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