SVG in the Real World™
Eugene Lazutkin, DojoToolkit.org
SVG Open 2009, Mountain View, CA
What Dojo GFX is
• Cross-browser graphics package.
• Supported backends: SVG,VML, Canvas, Silverlight.
• Working on SVGWeb support.
• 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
Dojo GFX goals
• Designed for client-side software development.
• Emphasis on interactive graphics.
• Support for easy picture regeneration (even on Canvas!).
• Support for events.
SVG in Dojo GFX
• SVG and VML were the ﬁrst renderers shipped.
• SVG is used as a benchmark baseline for other renderers.
• SVG is used as the ﬁrst choice for debugging graphic algorithms.
• SVG is what I recommend as the ﬁrst serious choice for our users.
Dojo GFX code analysis
Renderer Arc Decompose
Common code is not included
• Canvas renderer does not
support text and events. 37.5
• Arc is a helper to approximate 25
arcs with Bezier curves.
• Decompose splits matrix to
rotations, scaling and translation. 0
SVG VML Canvas Silverlight
Dojo GFX SVG renderer
• The most feature-rich.
• It runs on wide variety of browsers.
• ...yet it is the smallest one!
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.
Dojo GFX support study
• Vast majority of browser-speciﬁc tickets are for IE.
• Vast majority of renderer-speciﬁc tickets are for VML.
• Tickets for browser-speciﬁc differences for SVG are rare nowadays.
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.
• SVG renderer has exactly one browser-speciﬁc fragment:
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
• We can combine existing SVG pictures with dynamically generated
XML in IE? You betcha!
• It means we can generate SVG (as XML) in IE and other lame
• 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.