Svghtml5 Meetup
-
Upload
oswald-campesato -
Category
Documents
-
view
1.654 -
download
2
description
Transcript of Svghtml5 Meetup
![Page 1: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/1.jpg)
SVG and Vector Technologies
June 22, 2010
![Page 2: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/2.jpg)
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
![Page 3: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/3.jpg)
People to Know
• Doug Schepers (W3C/SVG)• Patrick Dengler (Microsoft/SVG)• Brad Neuberg (Google/SVG)• Stephen Chin (JavaFX)• Chet Haase (Adobe/Flex)
![Page 4: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/4.jpg)
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
![Page 5: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/5.jpg)
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
![Page 6: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/6.jpg)
SVG Versions
• SVG Full (600+ pages):• - 1.0 (2000)• - 1.1 (2003)• - 2.0 (future)
![Page 7: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/7.jpg)
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)
![Page 8: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/8.jpg)
Simple SVG Code Samples
• SVG ‘rect’ example (svgrect.svg)• SVG+CSS code sample (svgcss.svg)• SVG+CSS external stylesheet (svgext.svg)
![Page 9: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/9.jpg)
SVG Animation
• Declarative:• - animateTransform (and others)• ECMAScript:• - inside a CDATA element• CSS Animations (2008)
![Page 10: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/10.jpg)
More Short Examples
• Native Animation (svganim-native.svg):• - “animateTransform” child element
• JS Animation (animSineDottedEllipse1.svg):• - “setTimeout()” method
![Page 11: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/11.jpg)
SVG Slide Show
• Code samples from 2003 SVG book
![Page 12: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/12.jpg)
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)
![Page 13: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/13.jpg)
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
![Page 14: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/14.jpg)
Native Support for SVG in Browsers
• Firefox• Opera• Chrome• Internet Explorer (version 9)
![Page 15: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/15.jpg)
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
![Page 16: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/16.jpg)
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)
![Page 17: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/17.jpg)
SVG in Firefox
• Set attributes individually:• Ele.setAttribute(“fill”, fillColor);• Ele.setAttribute(“stroke”, “yellow”);• Ele.setAttribute(“stroke-width”, 4);
![Page 18: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/18.jpg)
SVG in IE (before v9)
• Set attributes in a string:• - style = “fill:”+fillColor;• - style += “;stroke:yellow”;• - style += “;stroke-width:4”;• Ele.setAttribute(“style”, style);
![Page 19: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/19.jpg)
SVG and XQuery
• Transform XML to SVG
• Saxon (Michael Kay):• - http://saxon.sourceforge.net
• Code Sample (archimedesEllipses1.xq)
![Page 20: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/20.jpg)
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)
![Page 21: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/21.jpg)
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
![Page 22: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/22.jpg)
SVG Mobile (Tools)
• Flash Lite (SVG Tiny)• TinyLine SVG (SVG Tiny):• - http://www.tinyline.com/svgt• Opera Mobile• iPhone Safari• Ikivo• BitFlash
![Page 23: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/23.jpg)
SVG Mobile (Devices)
• Nokia N60• Sony Ericson• Motorola• Samsung• Siemens
![Page 24: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/24.jpg)
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
![Page 25: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/25.jpg)
Mobile Initiatives
• Google Android• Apple iPhone• Adobe Flash/Flex• Microsoft Mobile 7• Ansca Corona (Android/iPhone)• PhoneGap (HTML5)
![Page 26: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/26.jpg)
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
![Page 27: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/27.jpg)
Good Uses For SVG
• CAD-based systems (AutoDesk)
• Size and performance
• Maintains sharp rendering
• GIS/CAD->SVG converter (Mappetizer)
![Page 28: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/28.jpg)
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?)
![Page 29: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/29.jpg)
The Future of SVG
• Doug Scheper’s Blog:
![Page 30: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/30.jpg)
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
![Page 31: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/31.jpg)
Silverlight Slide Show
• Sample images for Silverlight book cover
![Page 32: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/32.jpg)
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
![Page 33: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/33.jpg)
HTML5 Canvas Graphics
• Uses “direct” mode
• “write and forget”
• Code sample (ArchRect1RotateFP1.html)
![Page 34: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/34.jpg)
Converting Flash to HTML5
• Flash->HTML5 converter:• - http://smokescreen.us• Adobe CS5 exports Flash to HTML5:• http://www.neowin.net/news/flash-cs5-will-e
xport-to-HTML5-canvas• No Flex->SVG converter
![Page 35: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/35.jpg)
What about JavaFX?
• Declarative scripting• “hybrid” of Java and JSON• Scene-based paradigm• SVG->JavaFX converter• No JavaFX->SVG converter
![Page 36: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/36.jpg)
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)
![Page 37: Svghtml5 Meetup](https://reader036.fdocuments.net/reader036/viewer/2022062617/54b7a8d44a79594b258b45f9/html5/thumbnails/37.jpg)
Marakana (Organization)• Cutting-Edge Open Source Training (San Francisco, New York,
Toronto, and on Demand)Kaazing (Pizza)• Enterprise-Ready HTML5 WebSocket Gateway that allows you to
build massively scalable, real-time web applications• HTML5 and WebSocket TrainingTwilio (Venue)• Allows web application to easily make and receive phone calls
and SMS text messages using a simple web service APITwitter: ocampesato (http://code.google.com/u/ocampesato)
Copyright © 2010 - Kaazing Corporation. All rights reserved.
Thanks to our Sponsors