Vector graphics allow shapes to be mathematically represented and scaled smoothly, while raster graphics use a grid of pixels. SVG is an XML format for describing vector shapes and is supported natively by modern browsers. DojoX GFX provides a normalized API for creating vector graphics across browsers using SVG, VML, Canvas, or Silverlight depending on browser support. It implements a procedural subset of SVG for creating shapes and text programmatically similar to the canvas API.

1. That’s Not Flash?
Native Browser Vector Graphics
Mike Wilcox
mwilcox@sitepen.com
Twitter: #clubajax
http://clubajax.org

2. Welcome

3. Mike

4. http://www.dojotoolkit.org

5. Vector Graphics

6. Vector vs. Raster
• Raster: Rectangular grid of pixels
- Pre-rendered before runtime
• Vector: Mathematical representation of a shape
- Rendered at runtime

7. SVG
Scalar Vector Graphics
XML-based format for escribing lines and shapes
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50">
<ellipse cx="50" cy="25" rx="50" ry="25" fill="blue" stroke="none" />
</svg>

8. SVG vs Flash
• Open Source
- Free, no IDE, no proprietary player
• W3C standard to work with CSS, DOM and SMIL
- Can be used inline with HTML
- Fires events
- Clear Text - View Source, SEO
- XSL Transforms
• Familiar Language

9. Browser Support

10. VML
Vector Markup Language
Microsoft’s competing XML-based vector standard
Used in Internet Explorer and MS Office
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50">
<ellipse cx="50" cy="25" rx="50" ry="25" fill="blue" stroke="none" />
</svg>

11. DojoX GFX
DojoX Drawing
dojox.gfx
Normalized API
SVG VML
Render
Canvas Silverlight

12. A Brief History
• In the beginning, there
was ASCII art
• <img />
• Microsoft and VML
• Adobe, the W3C and
SVG
• Firefox and Opera get
native SVG
• Firefox, Opera and
Safari get canvas

13. Approaches
• Emulate canvas with ExplorerCanvas
• Macromedia Flash
• Java applets / Processing

14. dojox.gfx: procedural subset of SVG
• Procedural in nature, similar to canvas commands
• Based on a subset of SVG
• Implements VML shims for Internet Explorer
• Now includes Silverlight rendering!

15. GFX Example
// add a text label
var textShape0 = group.createTextPath({text: "introduction"})
.moveTo(125, 70)
.lineTo(285,20)
.setFont({family: "Verdana", size: "1em"})
.setFill("black");
// create a rectangle
var rect= { x: 360, y: 180, width: 200, height: 100,
r: 15 };

16. Demo: a Clock
http://test.local/dojotoolkit/dojox/gfx/demos/clock.html

17. DojoX Drawing

18. Q&A

19. Thanks!