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,088 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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,088
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 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

    ×