This document provides an overview of SVG (Scalable Vector Graphics) and compares it to other vector graphics technologies such as Flash, Silverlight, and HTML5 Canvas. It discusses SVG's capabilities, versions, mobile support, and tools. It also covers related topics like animation, JavaScript integration, and browser support. The future of SVG and how it compares to other technologies is explored.

1. SVG and Vector Technologies June 22, 2010

2. Meetup Overview Brief introduction about SVG Short code samples SVG slide show Using SVG with Java Silverlight slide show HTML5 Canvas example JavaFX sample Flex sample Questions/Answer

3. People to Know Doug Schepers (W3C/SVG) Patrick Dengler (Microsoft/SVG) Brad Neuberg(Google/SVG) Stephen Chin (JavaFX) Chet Haase (Adobe/Flex)

4. What is SVG? XML-based representation of 2D shapes Graphics-oriented capability Built-in support for many shapes Most browsers support SVG ECMAScript embedded as a CDATA section IE (before v9) supports Adobe SVG plugin IE v9 provides native SVG support

5. The SVG Specification Began in 1999 An open standard Under development by W3C SVG “arrived” after: - PGML (Adobe) and VML (Microsoft) - PGML and VML submitted in 1998

6. SVG Versions SVG Full (600+ pages): - 1.0 (2000) - 1.1 (2003) - 2.0 (future)

7. SVG Graphics Capabilities Lines, rectangles, polygons Circles, ellipses, arcs Quadratic/cubic Bezier curves Animation (built-in and ECMAScript) Color (RGB or 6-digit hexadecimal) Linear/radial gradients and filters Patterns (inside “defs” element)

8. Simple SVG Code Samples SVG ‘rect’ example (svgrect.svg) SVG+CSS code sample (svgcss.svg) SVG+CSS external stylesheet (svgext.svg)

9. SVG Animation Declarative: - animateTransform (and others) ECMAScript: - inside a CDATA element CSS Animations (2008)

10. More Short Examples Native Animation (svganim-native.svg): - “animateTransform” child element JS Animation (animSineDottedEllipse1.svg): - “setTimeout()” method

11. SVG Slide Show Code samples from 2003 SVG book

12. SVG uses Other Technologies SVG uses an internal DOM structure: - ‘deferred’ mode Differs from HTML5 Canvas: - ‘direct’ mode XPointer (reference XML fragments) XLink (create links in XML documents)

13. SMIL (“smile”) Acronym for Synchronized MultiMedia Integration Language SVG animation W3C recommendation for describing multi-media presentations SMIL 1.0 (1998) Latest version is SMIL 3.0 (2008) Wikipedia article contains more details

14. Native Support for SVG in Browsers Firefox Opera Chrome Internet Explorer (version 9)

15. SVG plug-ins for Browsers Adobe plug-in for IE: - v3.01 and v6 - EOL: 01/01/2009 - available “in perpetuity” Opera SVG Viewer (image viewer): - an Opera widget Examotion for Windows

16. IE Support for SVG IE before version 9: - Adobe plug-in - SVG Kit (Brad Neuberg) - SVG/HTML communication IE version 9: - native SVG support (work-in-progress)

17. SVG in Firefox Set attributes individually: Ele.setAttribute(“fill”, fillColor); Ele.setAttribute(“stroke”, “yellow”); Ele.setAttribute(“stroke-width”, 4);

18. SVG in IE (before v9) Set attributes in a string: - style = “fill:”+fillColor; - style += “;stroke:yellow”; - style += “;stroke-width:4”; Ele.setAttribute(“style”, style);

19. SVG and XQuery Transform XML to SVG Saxon (Michael Kay): - http://saxon.sourceforge.net Code Sample (archimedesEllipses1.xq)

20. SVG and XSLT Transform XML to SVG Saxon (Michael Key) Xalan: - http://xalan.apache.org Xerces: - http://xerces.apache.org/xerces-j Code sample (sineEllipses1.xsl)

21. SVG and JAXB JAXB generates Java/XML Bindings Based on elements in an XML schema ‘xjc’ generates Java code Layer of abstraction above XML/SVG No need to ‘walk the DOM’ JAXB home page: -http://jaxb.dev.java.net

22. SVG Mobile (Tools) Flash Lite (SVG Tiny) TinyLine SVG (SVG Tiny): - http://www.tinyline.com/svgt Opera Mobile iPhone Safari Ikivo BitFlash

23. SVG Mobile (Devices) Nokia N60 Sony Ericson Motorola Samsung Siemens

24. SVG JSR JSR 226 (final release in 2005) Developed by the JCP APIs are “on top of” SVG Tiny Standard for Java ME API for SVG

25. Mobile Initiatives Google Android Apple iPhone Adobe Flash/Flex Microsoft Mobile 7 Ansca Corona (Android/iPhone) PhoneGap (HTML5)

26. Some SVG Tools Inkscape: http://www.inkscape.org Batik (Java-based toolkit for SVG): http://xmlgraphics.apache.org/batik SPARK: http://spark.sourceforge.net Amaya: http://www.w3.org/Amaya

27. Good Uses For SVG CAD-based systems (AutoDesk) Size and performance Maintains sharp rendering GIS/CAD->SVG converter (Mappetizer)

28. What’s Missing in SVG? Native audio/video tags “Native” HTML-like widgets Built-in support for 3D Built-in support for widgets ADA compliance (SVG 2.0?)

29. The Future of SVG Doug Scheper’s Blog:

30. What about Silverlight? XAML (similar to SVG) XAML conforms to an XML Schema Expression Blend + VS 2010 Extensive set of widgets SVG -> Silverlight to converter

31. Silverlight Slide Show Sample images for Silverlight book cover

32. What about Flash/Flex? Spark components: - successor to MX components - declarative scripting - similar to SVG syntax ActionScript3: - resembles ECMAScript FXG (similar to SVG): - export/import file format

33. HTML5 Canvas Graphics Uses “direct” mode “write and forget” Code sample (ArchRect1RotateFP1.html)

34. Converting Flash to HTML5 Flash->HTML5 converter: - http://smokescreen.us Adobe CS5 exports Flash to HTML5: http://www.neowin.net/news/flash-cs5-will-export-to-HTML5-canvas No Flex->SVG converter

35. What about JavaFX? Declarative scripting “hybrid” of Java and JSON Scene-based paradigm SVG->JavaFX converter No JavaFX->SVG converter

36. Additional SVG Resources W3C: - http://www.w3.org/Graphics/SVG Yahoo SVG mailing list: http://www.svg-developers.com - open source graphics projects: http://code.google.com/u/campesato W3C events (from W3C home page) SVG books (2001 – 2009)