Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Dojo GFX: SVG in the real world
1. Dojo GFX
SVG in the Real World™
Eugene Lazutkin, DojoToolkit.org
SVG Open 2009, Mountain View, CA
1
2. What Dojo GFX is
• Cross-browser graphics package.
• Written in JavaScript.
• Supported backends: SVG,VML, Canvas, Silverlight.
• Working on SVGWeb support.
2
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. 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
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. 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. Dojo GFX SVG renderer
• The most feature-rich.
• It runs on wide variety of browsers.
• ...yet it is the smallest one!
8
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. 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. 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
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. 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