Svghtml5 Meetup


Published on

Examples of SVG graphics

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Svghtml5 Meetup

  1. 1. SVG and Vector Technologies<br />June 22, 2010<br />
  2. 2. Meetup Overview<br />Brief introduction about SVG<br />Short code samples<br />SVG slide show<br />Using SVG with Java<br />Silverlight slide show<br />HTML5 Canvas example<br />JavaFX sample<br />Flex sample<br />Questions/Answer<br />
  3. 3. People to Know<br />Doug Schepers (W3C/SVG)<br />Patrick Dengler (Microsoft/SVG)<br />Brad Neuberg(Google/SVG)<br />Stephen Chin (JavaFX)<br />Chet Haase (Adobe/Flex)<br />
  4. 4. What is SVG?<br />XML-based representation of 2D shapes<br />Graphics-oriented capability<br />Built-in support for many shapes<br />Most browsers support SVG<br />ECMAScript embedded as a CDATA section<br />IE (before v9) supports Adobe SVG plugin<br />IE v9 provides native SVG support<br />
  5. 5. The SVG Specification<br />Began in 1999<br />An open standard<br />Under development by W3C<br />SVG “arrived” after:<br />- PGML (Adobe) and VML (Microsoft)<br />- PGML and VML submitted in 1998<br />
  6. 6. SVG Versions<br />SVG Full (600+ pages):<br />- 1.0 (2000)<br />- 1.1 (2003)<br />- 2.0 (future)<br />
  7. 7. SVG Graphics Capabilities<br />Lines, rectangles, polygons<br />Circles, ellipses, arcs<br />Quadratic/cubic Bezier curves<br />Animation (built-in and ECMAScript)<br />Color (RGB or 6-digit hexadecimal)<br />Linear/radial gradients and filters<br />Patterns (inside “defs” element)<br />
  8. 8. Simple SVG Code Samples<br />SVG ‘rect’ example (svgrect.svg)<br />SVG+CSS code sample (svgcss.svg)<br />SVG+CSS external stylesheet (svgext.svg)<br />
  9. 9. SVG Animation<br />Declarative:<br />- animateTransform (and others)<br />ECMAScript:<br />- inside a CDATA element<br />CSS Animations (2008)<br />
  10. 10. More Short Examples<br />Native Animation (svganim-native.svg):<br />- “animateTransform” child element <br />JS Animation (animSineDottedEllipse1.svg):<br />- “setTimeout()” method<br />
  11. 11. SVG Slide Show<br />Code samples from 2003 SVG book<br />
  12. 12. SVG uses Other Technologies<br />SVG uses an internal DOM structure:<br />- ‘deferred’ mode<br />Differs from HTML5 Canvas:<br />- ‘direct’ mode<br />XPointer (reference XML fragments)<br />XLink (create links in XML documents)<br />
  13. 13. SMIL (“smile”)<br />Acronym for Synchronized MultiMedia Integration Language <br />SVG animation<br />W3C recommendation for describing multi-media presentations<br />SMIL 1.0 (1998)<br />Latest version is SMIL 3.0 (2008)<br />Wikipedia article contains more details<br />
  14. 14. Native Support for SVG in Browsers<br />Firefox<br />Opera<br />Chrome<br />Internet Explorer (version 9)<br />
  15. 15. SVG plug-ins for Browsers<br />Adobe plug-in for IE:<br />- v3.01 and v6<br />- EOL: 01/01/2009<br />- available “in perpetuity”<br />Opera SVG Viewer (image viewer):<br />- an Opera widget<br />Examotion for Windows<br />
  16. 16. IE Support for SVG<br />IE before version 9:<br />- Adobe plug-in<br />- SVG Kit (Brad Neuberg)<br />- SVG/HTML communication<br />IE version 9:<br />- native SVG support (work-in-progress)<br />
  17. 17. SVG in Firefox<br />Set attributes individually:<br />Ele.setAttribute(“fill”, fillColor);<br />Ele.setAttribute(“stroke”, “yellow”);<br />Ele.setAttribute(“stroke-width”, 4); <br />
  18. 18. SVG in IE (before v9)<br />Set attributes in a string:<br />- style = “fill:”+fillColor;<br />- style += “;stroke:yellow”;<br />- style += “;stroke-width:4”;<br />Ele.setAttribute(“style”, style);<br />
  19. 19. SVG and XQuery<br />Transform XML to SVG<br />Saxon (Michael Kay):<br />-<br />Code Sample (archimedesEllipses1.xq)<br />
  20. 20. SVG and XSLT<br />Transform XML to SVG<br />Saxon (Michael Key)<br />Xalan:<br />-<br />Xerces:<br />-<br />Code sample (sineEllipses1.xsl)<br />
  21. 21. SVG and JAXB<br />JAXB generates Java/XML Bindings<br />Based on elements in an XML schema<br />‘xjc’ generates Java code<br />Layer of abstraction above XML/SVG<br />No need to ‘walk the DOM’<br />JAXB home page:<br />- <br />
  22. 22. SVG Mobile (Tools)<br />Flash Lite (SVG Tiny)<br />TinyLine SVG (SVG Tiny):<br />-<br />Opera Mobile<br />iPhone Safari<br />Ikivo<br />BitFlash<br />
  23. 23. SVG Mobile (Devices)<br />Nokia N60<br />Sony Ericson<br />Motorola<br />Samsung<br />Siemens<br />
  24. 24. SVG JSR<br />JSR 226 (final release in 2005)<br />Developed by the JCP<br />APIs are “on top of” SVG Tiny<br />Standard for Java ME API for SVG<br />
  25. 25. Mobile Initiatives<br />Google Android<br />Apple iPhone<br />Adobe Flash/Flex<br />Microsoft Mobile 7<br />Ansca Corona (Android/iPhone)<br />PhoneGap (HTML5)<br />
  26. 26. Some SVG Tools<br />Inkscape:<br /><br />Batik (Java-based toolkit for SVG):<br /><br />SPARK:<br /><br />Amaya:<br /><br />
  27. 27. Good Uses For SVG<br />CAD-based systems (AutoDesk)<br />Size and performance<br />Maintains sharp rendering<br />GIS/CAD->SVG converter (Mappetizer)<br />
  28. 28. What’s Missing in SVG?<br />Native audio/video tags<br />“Native” HTML-like widgets<br />Built-in support for 3D<br />Built-in support for widgets<br />ADA compliance (SVG 2.0?)<br />
  29. 29. The Future of SVG<br />Doug Scheper’s Blog:<br />
  30. 30. What about Silverlight?<br />XAML (similar to SVG)<br />XAML conforms to an XML Schema<br />Expression Blend + VS 2010<br />Extensive set of widgets<br />SVG -> Silverlight to converter<br />
  31. 31. Silverlight Slide Show<br />Sample images for Silverlight book cover<br />
  32. 32. What about Flash/Flex?<br />Spark components:<br />- successor to MX components<br />- declarative scripting<br />- similar to SVG syntax<br />ActionScript3:<br />- resembles ECMAScript<br />FXG (similar to SVG):<br />- export/import file format<br />
  33. 33. HTML5 Canvas Graphics<br />Uses “direct” mode<br />“write and forget”<br />Code sample (ArchRect1RotateFP1.html)<br />
  34. 34. Converting Flash to HTML5<br />Flash->HTML5 converter:<br />-<br />Adobe CS5 exports Flash to HTML5:<br /><br />No Flex->SVG converter<br />
  35. 35. What about JavaFX?<br />Declarative scripting<br />“hybrid” of Java and JSON<br />Scene-based paradigm<br />SVG->JavaFX converter<br />No JavaFX->SVG converter<br />
  36. 36. Additional SVG Resources<br />W3C:<br />-<br />Yahoo SVG mailing list:<br /><br />- open source graphics projects:<br /><br />W3C events (from W3C home page)<br />SVG books (2001 – 2009)<br />
  37. 37. Thanks to our Sponsors<br />Marakana (Organization)<br /><ul><li>Cutting-Edge Open Source Training (San Francisco, New York, Toronto, and on Demand)</li></ul>Kaazing (Pizza)<br /><ul><li>Enterprise-Ready HTML5 WebSocket Gateway thatallowsyou to buildmassivelyscalable, real-time web applications
  38. 38. HTML5 and WebSocket Training</li></ul>Twilio (Venue)<br /><ul><li>Allows web application to easily make and receive phone calls and SMS text messages using a simple web service API</li></ul>Twitter: ocampesato (<br />Copyright © 2010 - Kaazing Corporation. All rights reserved.<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.