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-e

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

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