SlideShare a Scribd company logo
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) ,[object Object],Kaazing (Pizza) ,[object Object]

More Related Content

What's hot

Raphael.js
Raphael.jsRaphael.js
Raphael.js
Mohd Saeed
 
Svg: The return (Lightning talk)
Svg: The return (Lightning talk)Svg: The return (Lightning talk)
Svg: The return (Lightning talk)
David Corbacho Román
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
Akila Iroshan
 
Choosing your animation adventure - Generate NYC 2018
Choosing your animation adventure  - Generate NYC 2018Choosing your animation adventure  - Generate NYC 2018
Choosing your animation adventure - Generate NYC 2018
Val Head
 
Scalable vector graphics(svg)
Scalable vector graphics(svg)Scalable vector graphics(svg)
Scalable vector graphics(svg)
Pradip Mudi
 
Svg
SvgSvg
Learn svg
Learn svgLearn svg
Learn svg
FitBlar Mit
 
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
Val Head
 

What's hot (8)

Raphael.js
Raphael.jsRaphael.js
Raphael.js
 
Svg: The return (Lightning talk)
Svg: The return (Lightning talk)Svg: The return (Lightning talk)
Svg: The return (Lightning talk)
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
 
Choosing your animation adventure - Generate NYC 2018
Choosing your animation adventure  - Generate NYC 2018Choosing your animation adventure  - Generate NYC 2018
Choosing your animation adventure - Generate NYC 2018
 
Scalable vector graphics(svg)
Scalable vector graphics(svg)Scalable vector graphics(svg)
Scalable vector graphics(svg)
 
Svg
SvgSvg
Svg
 
Learn svg
Learn svgLearn svg
Learn svg
 
Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017Choosing your animation adventure - Ffronteers Conf 2017
Choosing your animation adventure - Ffronteers Conf 2017
 

Viewers also liked

Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
Oswald Campesato
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
Oswald Campesato
 
Pres valor real-opendata -aag_120412_v01
Pres valor real-opendata -aag_120412_v01Pres valor real-opendata -aag_120412_v01
Pres valor real-opendata -aag_120412_v01
Alberto Abella
 
How are we working to improve life in our cities?
How are we working to improve life in our cities?How are we working to improve life in our cities?
How are we working to improve life in our cities?
Alberto Abella
 
Pres valor real-opendata -aag_120412_v01
Pres valor real-opendata -aag_120412_v01Pres valor real-opendata -aag_120412_v01
Pres valor real-opendata -aag_120412_v01
Alberto Abella
 
OWC 2012 (Open Web Camp)
OWC 2012 (Open Web Camp)OWC 2012 (Open Web Camp)
OWC 2012 (Open Web Camp)
Oswald Campesato
 
Data Binding: Is It the Next Big Thing?
Data Binding: Is It the Next Big Thing?Data Binding: Is It the Next Big Thing?
Data Binding: Is It the Next Big Thing?
GlobalLogic Ukraine
 
Data binding
Data bindingData binding
Data binding
Yonatan Levin
 
Android Data Binding Support Library
Android Data Binding Support LibraryAndroid Data Binding Support Library
Android Data Binding Support Library
ersin ertan
 
SVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for BeginnersSVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for Beginners
Oswald Campesato
 
Infinum Android Talks #14 - Data binding to the rescue... or not (?) by Krist...
Infinum Android Talks #14 - Data binding to the rescue... or not (?) by Krist...Infinum Android Talks #14 - Data binding to the rescue... or not (?) by Krist...
Infinum Android Talks #14 - Data binding to the rescue... or not (?) by Krist...
Infinum
 
SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
Oswald Campesato
 
React nativebeginner1
React nativebeginner1React nativebeginner1
React nativebeginner1
Oswald Campesato
 
How to develop an Android Weather app using Weatherlib
How to develop an Android Weather app using WeatherlibHow to develop an Android Weather app using Weatherlib
How to develop an Android Weather app using Weatherlib
Francesco Azzola
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
Oswald Campesato
 
Android NFC
Android NFCAndroid NFC
Android NFC
Francesco Azzola
 
TypeScript
TypeScriptTypeScript
TypeScript
Oswald Campesato
 
ECMA5 and ES6 Promises
ECMA5 and ES6 PromisesECMA5 and ES6 Promises
ECMA5 and ES6 Promises
Oswald Campesato
 
5 angularjs features
5 angularjs features5 angularjs features
5 angularjs features
Alexey (Mr_Mig) Migutsky
 
Testable Android Apps using data binding and MVVM
Testable Android Apps using data binding and MVVMTestable Android Apps using data binding and MVVM
Testable Android Apps using data binding and MVVM
Fabio Collini
 

Viewers also liked (20)

Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 
Pres valor real-opendata -aag_120412_v01
Pres valor real-opendata -aag_120412_v01Pres valor real-opendata -aag_120412_v01
Pres valor real-opendata -aag_120412_v01
 
How are we working to improve life in our cities?
How are we working to improve life in our cities?How are we working to improve life in our cities?
How are we working to improve life in our cities?
 
Pres valor real-opendata -aag_120412_v01
Pres valor real-opendata -aag_120412_v01Pres valor real-opendata -aag_120412_v01
Pres valor real-opendata -aag_120412_v01
 
OWC 2012 (Open Web Camp)
OWC 2012 (Open Web Camp)OWC 2012 (Open Web Camp)
OWC 2012 (Open Web Camp)
 
Data Binding: Is It the Next Big Thing?
Data Binding: Is It the Next Big Thing?Data Binding: Is It the Next Big Thing?
Data Binding: Is It the Next Big Thing?
 
Data binding
Data bindingData binding
Data binding
 
Android Data Binding Support Library
Android Data Binding Support LibraryAndroid Data Binding Support Library
Android Data Binding Support Library
 
SVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for BeginnersSVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for Beginners
 
Infinum Android Talks #14 - Data binding to the rescue... or not (?) by Krist...
Infinum Android Talks #14 - Data binding to the rescue... or not (?) by Krist...Infinum Android Talks #14 - Data binding to the rescue... or not (?) by Krist...
Infinum Android Talks #14 - Data binding to the rescue... or not (?) by Krist...
 
SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
 
React nativebeginner1
React nativebeginner1React nativebeginner1
React nativebeginner1
 
How to develop an Android Weather app using Weatherlib
How to develop an Android Weather app using WeatherlibHow to develop an Android Weather app using Weatherlib
How to develop an Android Weather app using Weatherlib
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
 
Android NFC
Android NFCAndroid NFC
Android NFC
 
TypeScript
TypeScriptTypeScript
TypeScript
 
ECMA5 and ES6 Promises
ECMA5 and ES6 PromisesECMA5 and ES6 Promises
ECMA5 and ES6 Promises
 
5 angularjs features
5 angularjs features5 angularjs features
5 angularjs features
 
Testable Android Apps using data binding and MVVM
Testable Android Apps using data binding and MVVMTestable Android Apps using data binding and MVVM
Testable Android Apps using data binding and MVVM
 

Similar to Svghtml5 Meetup

Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScript
Gjokica Zafirovski
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
Helder da Rocha
 
Html 5 svg
Html 5 svgHtml 5 svg
Html 5 svg
AbhishekMondal42
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
Pascal Rettig
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
Lohith Goudagere Nagaraj
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
SpeedPartner GmbH
 
SVG Strikes Back
SVG Strikes BackSVG Strikes Back
SVG Strikes Back
Matt Baxter
 
Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?
Mike Wilcox
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
Doris Chen
 
Introduction to Canvas and Native Web Vector Graphics
Introduction to Canvas and Native Web Vector GraphicsIntroduction to Canvas and Native Web Vector Graphics
Introduction to Canvas and Native Web Vector Graphics
dylanks
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
Panagiotis Grigoropoulos
 
Word camp nextweb
Word camp nextwebWord camp nextweb
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
Tilak Joshi
 
pastel
pastelpastel
pastel
pastelpastel
SVG
SVG SVG
SVG
home
 
svg Scalable Vector Graphics (SVG)
 svg Scalable Vector Graphics  (SVG) svg Scalable Vector Graphics  (SVG)
svg Scalable Vector Graphics (SVG)
home
 
The Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesThe Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG Files
Mario Heiderich
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The Nextweb
George Kanellopoulos
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
George Kanellopoulos
 

Similar to Svghtml5 Meetup (20)

Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScript
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
 
Html 5 svg
Html 5 svgHtml 5 svg
Html 5 svg
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
 
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourHTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
 
SVG Strikes Back
SVG Strikes BackSVG Strikes Back
SVG Strikes Back
 
Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
 
Introduction to Canvas and Native Web Vector Graphics
Introduction to Canvas and Native Web Vector GraphicsIntroduction to Canvas and Native Web Vector Graphics
Introduction to Canvas and Native Web Vector Graphics
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
pastel
pastelpastel
pastel
 
pastel
pastelpastel
pastel
 
SVG
SVG SVG
SVG
 
svg Scalable Vector Graphics (SVG)
 svg Scalable Vector Graphics  (SVG) svg Scalable Vector Graphics  (SVG)
svg Scalable Vector Graphics (SVG)
 
The Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesThe Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG Files
 
Wordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The NextwebWordcamp Thessaloniki 2011 The Nextweb
Wordcamp Thessaloniki 2011 The Nextweb
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 

More from Oswald Campesato

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
Oswald Campesato
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
Oswald Campesato
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
Oswald Campesato
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
Oswald Campesato
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
Oswald Campesato
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
Oswald Campesato
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
Oswald Campesato
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
Oswald Campesato
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
Oswald Campesato
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
Oswald Campesato
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
Oswald Campesato
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
Oswald Campesato
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
Oswald Campesato
 

More from Oswald Campesato (20)

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
 

Svghtml5 Meetup

  • 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)
  • 37.
  • 38.