Thats Not Flash?
•Download as KEY, PDF•
0 likes•563 views
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.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Thats Not Flash?
Similar to Thats Not Flash? (20)
More from Mike Wilcox
More from Mike Wilcox (20)
Recently uploaded
Recently uploaded (20)
Thats Not Flash?
- 1. That’s Not Flash? Native Browser Vector Graphics Mike Wilcox mwilcox@sitepen.com Twitter: #clubajax http://clubajax.org
- 2. Welcome
- 3. Mike
- 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>
- 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 };
- 17. DojoX Drawing
- 18. Q&A
- 19. Thanks!
Editor's Notes
- 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
- Mention Uploader woes
- Mention Uploader woes