Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Dojo GFX
    SVG in the Real World™
 Eugene Lazutkin, DojoToolkit.org
SVG Open 2009, Mountain View, CA




               ...
What Dojo GFX is

•   Cross-browser graphics package.

•   Written in JavaScript.

•   Supported backends: SVG,VML, Canvas...
Underlying concepts

•   Loosely based on SVG concepts:

    •   Geometry represented by shapes and transformation matrice...
Dojo GFX goals

•   Designed for client-side software development.

•   Emphasis on interactive graphics.

    •   Support...
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 rende...
Dojo GFX code analysis
•
                                                     Renderer         Arc        Decompose
    Co...
Dojo GFX SVG renderer


•   The most feature-rich.

•   It runs on wide variety of browsers.

•   ...yet it is the smalles...
Dojo GFX use study

•   VML is still big, especially on public-facing and corporate web sites.

    •   It looks like IE6 ...
Dojo GFX support study


•   Vast majority of browser-specific tickets are for IE.

•   Vast majority of renderer-specific t...
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...
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 tran...
XML in IE? You betcha!

•   It means we can generate SVG (as XML) in IE and other lame
    browsers!

    •   We can gener...
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)...
Dojo GFX (and SVG) in the wild

•   Mapping.

    •   Example: ESRI ArcGIS JavaScript API.

•   DEMO (geoprocessor: servic...
Dojo GFX (and SVG) in the wild

•   User interface.

    •   Example: balloon tooltips, rounded corner backgrounds.

    •...
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 (inclu...
Dojo Charting

•   Supports shared axes, and multiple plots per chart.

•   Supports themes, legends.

•   Supports action...
Upcoming SlideShare
Loading in …5
×

Dojo GFX: SVG in the real world

11,538 views

Published on

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

Published in: Technology, Art & Photos
  • Be the first to comment

Dojo GFX: SVG in the real world

  1. 1. Dojo GFX SVG in the Real World™ Eugene Lazutkin, DojoToolkit.org SVG Open 2009, Mountain View, CA 1
  2. 2. What Dojo GFX is • Cross-browser graphics package. • Written in JavaScript. • Supported backends: SVG,VML, Canvas, Silverlight. • Working on SVGWeb support. 2
  3. 3. 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
  4. 4. 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
  5. 5. Code tour SVG in Dojo GFX 5
  6. 6. 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
  7. 7. 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
  8. 8. Dojo GFX SVG renderer • The most feature-rich. • It runs on wide variety of browsers. • ...yet it is the smallest one! 8
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. SVG? XML! Softer side of SVG 12
  13. 13. 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
  14. 14. 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
  15. 15. In the wild Take a walk on the wild side 15
  16. 16. Dojo GFX (and SVG) in the wild • Various vector-based engineering drawings. • Example: dojox.sketch (Tom Trenka). • Example: dojox.drawing (Mike Wilcox). • DEMO. 16
  17. 17. 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
  18. 18. Dojo GFX (and SVG) in the wild • User interface. • Example: balloon tooltips, rounded corner backgrounds. • Example: analog gauge, bar gauge. • DEMO. 18
  19. 19. Dojo GFX (and SVG) in the wild • Charts. • Example: dojox.charting 19
  20. 20. Charting results Making things pretty 20
  21. 21. Dojo Charting • Supports most common plots: • Lines, areas (including stacked). • Bars and columns (including stacked and clustered). • Scatter, bubble, candle sticks, pies. 21
  22. 22. Dojo Charting • Supports shared axes, and multiple plots per chart. • Supports themes, legends. • Supports actions to make charts interactive. • DEMO. 22

×