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.
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
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>
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
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 };
Software engineer at SitePen, and one of the founder of the DFW user group Club AJAX. I&#x2019;m an AJAX expert with a lot of experience in HTML, CSS, and Flash as well as a lot of video. I&#x2019;m a dojo committer and have written and maintain several dojo components including the DEFT project that integrates Flash into Dojo AJAX components