Svghtml5 Meetup

SVG and Vector Technologies
June 22, 2010

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

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

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

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

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

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)

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

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

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

SVG Slide Show
Code samples from 2003 SVG book

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)

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

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

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

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)

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

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

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

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)

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

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

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

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

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

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

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

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?)

The Future of SVG
Doug Scheper’s Blog:

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

Silverlight Slide Show
Sample images for Silverlight book cover

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

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

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

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

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)

Thanks to our Sponsors
Marakana (Organization)
Cutting-Edge Open Source Training (San Francisco, New York, Toronto, and on Demand)
Kaazing (Pizza)
Enterprise-Ready HTML5 WebSocket Gateway thatallowsyou to buildmassivelyscalable, real-time web applications
HTML5 and WebSocket Training
Twilio (Venue)
Allows web application to easily make and receive phone calls and SMS text messages using a simple web service API
Twitter: ocampesato (http://code.google.com/u/ocampesato)
Copyright © 2010 - Kaazing Corporation. All rights reserved.

Svghtml5 Meetup

by ocampesato on Jun 29, 2010

Accessibility

Upload Details

Usage Rights

2 Embeds 43

Statistics

Svghtml5 Meetup — Presentation Transcript

http://ontwik.com	42
http://www.slideshare.net	1