XML based user interaction through Rich Interfaces - SVG - MULTIMEDIA DOCUMENT Stéphane Sire (speaking)
PLAN <ul><li>Part 1 </li></ul><ul><ul><li>Rich User Interaction Style </li></ul></ul><ul><li>Part 2 </li></ul><ul><ul><li>...
PART 1 Rich User Interaction Style
EVOLUTION OF USER GRAPHICAL INTERACTION STYLES Desktop Web Mobile Command Line Direct (1983) Manipulation Point & Click (h...
CHARACTERISTICS OF RICH USER INTERACTION <ul><li>Better Graphics </li></ul><ul><li>Extensive use of Animations  </li></ul>...
BETTER GRAPHICS (1) <ul><li>Layers </li></ul><ul><ul><li>Painter's model of rendering </li></ul></ul><ul><ul><li>Compositi...
BETTER GRAPHICS (2) <ul><li>Color models </li></ul><ul><ul><li>Alpha channel (RGBA) </li></ul></ul><ul><ul><li>Gradient co...
BETTER GRAPHICS (3)  <ul><li>Shapes & lines </li></ul><ul><ul><li>Stroke styles </li></ul></ul><ul><ul><ul><li>Joints </li...
BETTER GRAPHICS (4) <ul><li>Pixel Effects </li></ul><ul><ul><li>Anti-aliasing </li></ul></ul><ul><ul><li>Filters (blur, bu...
EXTENSIVE USE OF ANIMATIONS User's guidance System state change Visual state transition Source  www.joehewitt.com/iui/samp...
ANIMATION TRICKS <ul><li>&quot;Exageration&quot; </li></ul><ul><li>Pace </li></ul><ul><li>Application: Kinetic Scrolling  ...
NEW LAYOUT MODELS (1) <ul><li>Layered information </li></ul>Source  www.laredoute.fr Source  www.natoora.com Source  maps....
NEW LAYOUT MODELS (2) <ul><li>Contraction/dilatation </li></ul><ul><ul><li>Accordion </li></ul></ul><ul><li>Continuous sur...
NEW LAYOUT MODELS (3) <ul><li>Fixed layout + Animation </li></ul><ul><ul><li>Scrolling Ribbon </li></ul></ul><ul><ul><ul><...
BORROWINGS FROM OTHER STYLES <ul><li>Direct manipulation </li></ul><ul><ul><li>Drag & drop but still marginal </li></ul></...
BETTER FEEDBACK TIMES WITH AJAX <ul><li>No more page reload and full page refresh </li></ul><ul><ul><li>Increase reactivit...
RICH USER INTERACTION (SUMMARY) <ul><li>Graphical design </li></ul><ul><ul><li>To increase intuitivity </li></ul></ul><ul>...
PART 2 Iterative Design and Supportive Technologies
PRODUCT DEVELOPMENT PROCESS Reprinted from &quot;Sketching User Experiences&quot; (Buxton, 2007)
ITERATIVE DESIGN
CLOSE TO AGILE SOFTWARE DEVELOPMENT <ul><li>Agile Manigesto  (source  agilemanifesto.org ) </li></ul><ul><ul><li>Individua...
EXAMPLES Source:  Nielsen Source:  Hiser Source:  Alex Poole
CLASSICAL DEVELOPMENT CYCLE Users Sketches Storyboard Wireframes IA diagrams Programmers Interaction, Visual, Motion, … De...
MODEL DRIVEN DEVELOPMENT CYCLE Users Sketches Storyboard Wireframes IA diagrams Programmers Interaction, Visual, Motion, …...
HOW TO EDIT A MODEL ? <ul><li>Specialized editors  </li></ul><ul><ul><li>Example for graphics: Adobe illustrator </li></ul...
A SHORT EXAMPLE  Interaction Designer Visual  Designer Programmer: + Javascript  Graphical Model File(s) Example from Adob...
ADDING MORE MODELS….  Interaction Designer Visual  Designer Graphical Model Behavior Modelling with State Machines Finite ...
MODEL DRIVEN SUMMARY <ul><li>Models </li></ul><ul><ul><li>Specialized editors </li></ul></ul><ul><ul><li>Easy to move from...
PART 3 Web Standards for Graphical Design: SVG and alike
W3C STANDARDS (1) <ul><li>Mainly &quot;Models&quot;  </li></ul><ul><ul><li>XML based languages </li></ul></ul><ul><ul><li>...
WEB STANDARDS AND MDA Markup  Only Code Behind  Markup  Behind Code Only XML XML Imperative Prog. Lang. Imperative Prog. L...
W3C AND RICH USER INTERACTION (*) simplified with specialized toolkits (scriptaculous, jQuery, etc)  Characteristics Stand...
SVG HISTORY <ul><li>S calable  V ector  G raphic </li></ul><ul><li>Started in 1998 </li></ul><ul><li>1st draft: February 1...
SVG VS. FLASH (*) see  http://www.w3.org/TR/SVG/minimize.html Property SWF SVG XML - Std W3C No Yes Metadata Yes, propieta...
AUTHORING TOOLS <ul><li>Graphical Editors </li></ul><ul><ul><li>Sodipodi, Illustrator, Corel Draw, OmniGraffle Pro, … </li...
PLAYERS <ul><li>Adobe to stop its plugin support in 2009… </li></ul><ul><ul><li>Adobe is switching to Flash/AIR </li></ul>...
DRAWING BASIC SHAPES <ul><li>Shapes </li></ul><ul><ul><li>Rectangles <rect>   </li></ul></ul><ul><ul><li>Cercles <circle> ...
DRAWING ARBITRARY SHAPES <ul><li>Path <path d=&quot;path data&quot; > </li></ul><ul><ul><li>outline of a shape which can b...
PATH DATA VOCABULARY <ul><li>Each command is named by a letter (M: moveto L: lineto, etc.) followed by a coordinate, eithe...
MORE PATH DATA VOCABULARY See details on  http://www.w3.org/TR/SVG/paths.html Command Args (can be repeated)+ Description ...
DEFINING REUSABLE GRAPHICAL COMPONENTS <ul><li>Definition of a component </li></ul><ul><ul><li>Group element: <g id=&quot;...
DECLARING GRAPHICAL COMPONENTS WITHOUT DRAWING THEM  <ul><li>Everything that appears in a <defs> section will not be drawn...
POSITIONING GRAPHICS <ul><li>Most elements can be positioned with x and y within their parent container </li></ul><ul><li>...
PAINTING AND COLORING <ul><li>Colors applies with different attributes to </li></ul><ul><ul><li>Strokes (attribute &quot;s...
CLIPPING <ul><li>clipPath element </li></ul><ul><ul><li>any path, text or basic shape </li></ul></ul><ul><ul><li>defines a...
MASKING <ul><li>Masking </li></ul><ul><ul><li>Attribute </li></ul></ul><ul><ul><ul><li>mask=&quot;url(#mask)&quot; </li></...
ANIMATING GRAPHICS (1) <ul><li>Each graphical attribute can be animated </li></ul><ul><ul><li>animate  element </li></ul><...
ANIMATING GRAPHICS (2) <ul><li>Other types of animation </li></ul><ul><ul><li>Animation along a path (motion tweening) </l...
METADATA <ul><li>Images can be describe with  </li></ul><ul><ul><li><desc> </li></ul></ul><ul><ul><ul><li>Can contain any ...
HOW TO USE SVG <ul><li>Within an SVG document (.svg :  image/svg+xml) </li></ul><ul><ul><li>You can nest several SVG fragm...
EXTRA FEATURES  <ul><li>Pixel filters  </li></ul><ul><li>Markers </li></ul><ul><li>Glyphs </li></ul><ul><li>Text along a p...
CONCLUSION: RIA STANDARDS AND TECHNOLOGIES X11 1987 1992 1994 2002 2004 Shockwave HTML HTML 4.0 Flash/SWF X-HTML SVG Javas...
CREDITS <ul><li>Web sources indicated directly on the slides, otherwise (many thanks to them): </li></ul><ul><li>Illustrat...
EXTRA SLIDES
COMPLETE SVG FILE EXAMPLE <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!DOCTYPE svg [  <!-- entities etc. h...
Upcoming SlideShare
Loading in …5
×

Rich User Interaction with SVG

2,453 views

Published on

Part of a course on multimedia document engineering, presented at EPFL during the Spring 2009 semester. Quick introduction to the W3C SVG specification and Model Driven User Interface Design.

Published in: Technology, Art & Photos
  • Be the first to comment

Rich User Interaction with SVG

  1. 1. XML based user interaction through Rich Interfaces - SVG - MULTIMEDIA DOCUMENT Stéphane Sire (speaking)
  2. 2. PLAN <ul><li>Part 1 </li></ul><ul><ul><li>Rich User Interaction Style </li></ul></ul><ul><li>Part 2 </li></ul><ul><ul><li>Iterative Design and supportive technologies </li></ul></ul><ul><li>Part 3 </li></ul><ul><ul><li>SVG and alike </li></ul></ul>
  3. 3. PART 1 Rich User Interaction Style
  4. 4. EVOLUTION OF USER GRAPHICAL INTERACTION STYLES Desktop Web Mobile Command Line Direct (1983) Manipulation Point & Click (hypertext) HTML Forms WAP Rich User Interaction WIMP Rich Desktop Application (RDA) Rich Internet Application (RIA) iPhone and alike (touch based)
  5. 5. CHARACTERISTICS OF RICH USER INTERACTION <ul><li>Better Graphics </li></ul><ul><li>Extensive use of Animations </li></ul><ul><li>Creative layout models </li></ul><ul><li>Borrowings from other interaction styles </li></ul><ul><li>Better feedback times (AJAX) </li></ul>A new vocabulary for design
  6. 6. BETTER GRAPHICS (1) <ul><li>Layers </li></ul><ul><ul><li>Painter's model of rendering </li></ul></ul><ul><ul><li>Compositing operators </li></ul></ul><ul><ul><ul><li>(Porter & Duff) </li></ul></ul></ul><ul><ul><li>Clipping and masking </li></ul></ul><ul><li>Applications </li></ul><ul><ul><li>Layout based on layers (see later) </li></ul></ul><ul><ul><li>Non rectangular windows </li></ul></ul><ul><ul><ul><li>Objects with holes </li></ul></ul></ul><ul><ul><li>Layer's effects </li></ul></ul>Source: Digistrip (CENA)
  7. 7. BETTER GRAPHICS (2) <ul><li>Color models </li></ul><ul><ul><li>Alpha channel (RGBA) </li></ul></ul><ul><ul><li>Gradient colors </li></ul></ul><ul><ul><li>Texture filling </li></ul></ul><ul><li>Applications </li></ul><ul><ul><li>Light and shadows effects </li></ul></ul><ul><ul><li>Glossy effect </li></ul></ul><ul><ul><li>Reflection ( cow.neondragon.net/stuff/reflection/ ) </li></ul></ul><ul><ul><li>etc </li></ul></ul>
  8. 8. BETTER GRAPHICS (3) <ul><li>Shapes & lines </li></ul><ul><ul><li>Stroke styles </li></ul></ul><ul><ul><ul><li>Joints </li></ul></ul></ul><ul><ul><ul><li>extremities </li></ul></ul></ul><ul><ul><li>B ézier paths </li></ul></ul><ul><ul><ul><li>Very efficient algorithm to draw it (De Casteljeau algorithm) </li></ul></ul></ul><ul><li>Applications </li></ul><ul><ul><li>Rounded shapes </li></ul></ul>
  9. 9. BETTER GRAPHICS (4) <ul><li>Pixel Effects </li></ul><ul><ul><li>Anti-aliasing </li></ul></ul><ul><ul><li>Filters (blur, bump mapping, etc.) </li></ul></ul>Source www.corzo.com Source www.treebuilder.de
  10. 10. EXTENSIVE USE OF ANIMATIONS User's guidance System state change Visual state transition Source www.joehewitt.com/iui/samples/music.html Source www.lemonde.fr (choose Journal Electronique) Source www.panic.com/goods/
  11. 11. ANIMATION TRICKS <ul><li>&quot;Exageration&quot; </li></ul><ul><li>Pace </li></ul><ul><li>Application: Kinetic Scrolling ( video on youTube) </li></ul>Author's made movie from www.laredoute.fr Author's made movie from www.youarethemodel.com
  12. 12. NEW LAYOUT MODELS (1) <ul><li>Layered information </li></ul>Source www.laredoute.fr Source www.natoora.com Source maps.google.com
  13. 13. NEW LAYOUT MODELS (2) <ul><li>Contraction/dilatation </li></ul><ul><ul><li>Accordion </li></ul></ul><ul><li>Continuous surfaces </li></ul><ul><ul><li>Linear (ribbon) : www.gucci.com or www.christofle.com </li></ul></ul><ul><ul><li>Two dimensions : www.goruneasy.com </li></ul></ul><ul><ul><li>Unconventional : www.etsy.com (cf. Explore) </li></ul></ul>Source www.goruneasy.com Source www.yomiuri.co.jp (site design has changed)
  14. 14. NEW LAYOUT MODELS (3) <ul><li>Fixed layout + Animation </li></ul><ul><ul><li>Scrolling Ribbon </li></ul></ul><ul><ul><ul><li>more information with constant space within the page </li></ul></ul></ul><ul><li>Layers + Animation </li></ul><ul><ul><li>Drawer windows </li></ul></ul><ul><ul><li>Docks </li></ul></ul>Source www.tf1.fr
  15. 15. BORROWINGS FROM OTHER STYLES <ul><li>Direct manipulation </li></ul><ul><ul><li>Drag & drop but still marginal </li></ul></ul><ul><li>Post-WIMP techniques </li></ul><ul><ul><li>Bifocal menus </li></ul></ul><ul><li>Video-games </li></ul><ul><ul><li>Rotative menus </li></ul></ul>Source www.amazon.com Source www.wat.tv
  16. 16. BETTER FEEDBACK TIMES WITH AJAX <ul><li>No more page reload and full page refresh </li></ul><ul><ul><li>Increase reactivity </li></ul></ul><ul><ul><li>Requires special tricks to get user's attention </li></ul></ul><ul><li>Applications </li></ul><ul><ul><li>Auto-suggestion input field (see Google Autosuggest ) </li></ul></ul><ul><ul><li>Dynamical queries </li></ul></ul><ul><ul><ul><li>allows some forms with no &quot;Submit&quot; button </li></ul></ul></ul><ul><ul><ul><li>or allows to pre-filter results before submitting </li></ul></ul></ul>Source www.trivop.com Source www.darty.com/nav/achat/telephonie/telephonie_mobile/telephone_portable/guide.html (site design has changed)
  17. 17. RICH USER INTERACTION (SUMMARY) <ul><li>Graphical design </li></ul><ul><ul><li>To increase intuitivity </li></ul></ul><ul><ul><li>To create emotions </li></ul></ul><ul><ul><li>Emotions increase perceived usability </li></ul></ul><ul><ul><ul><li>See Don Norman last book &quot;Emotional Design&quot; </li></ul></ul></ul><ul><li>Requires multi-disciplinary teams </li></ul><ul><ul><li>User experience (interaction) designer </li></ul></ul><ul><ul><li>Visual designer, Motion designer </li></ul></ul><ul><ul><li>Developers </li></ul></ul><ul><ul><li>etc </li></ul></ul>( video on youTube)
  18. 18. PART 2 Iterative Design and Supportive Technologies
  19. 19. PRODUCT DEVELOPMENT PROCESS Reprinted from &quot;Sketching User Experiences&quot; (Buxton, 2007)
  20. 20. ITERATIVE DESIGN
  21. 21. CLOSE TO AGILE SOFTWARE DEVELOPMENT <ul><li>Agile Manigesto (source agilemanifesto.org ) </li></ul><ul><ul><li>Individuals and interactions over processes and tools </li></ul></ul><ul><ul><li>Working software over comprehensive documentation </li></ul></ul><ul><ul><li>Customer collaboration over contract negotiation </li></ul></ul><ul><ul><li>Responding to change over following a plan </li></ul></ul><ul><li>See also Extreme Programming </li></ul><ul><li>Web version </li></ul><ul><ul><li>the permanent Beta </li></ul></ul>
  22. 22. EXAMPLES Source: Nielsen Source: Hiser Source: Alex Poole
  23. 23. CLASSICAL DEVELOPMENT CYCLE Users Sketches Storyboard Wireframes IA diagrams Programmers Interaction, Visual, Motion, … Designers Executable Code Browser Plugin Runtime Env. Feedback loop How to increase the number of iterations ?
  24. 24. MODEL DRIVEN DEVELOPMENT CYCLE Users Sketches Storyboard Wireframes IA diagrams Programmers Interaction, Visual, Motion, … Designers Graphical models Animation models Other models… XML Browser, Plugin Runtime Env. Executable code
  25. 25. HOW TO EDIT A MODEL ? <ul><li>Specialized editors </li></ul><ul><ul><li>Example for graphics: Adobe illustrator </li></ul></ul>SVG File
  26. 26. A SHORT EXAMPLE Interaction Designer Visual Designer Programmer: + Javascript Graphical Model File(s) Example from Adobe dev web site
  27. 27. ADDING MORE MODELS…. Interaction Designer Visual Designer Graphical Model Behavior Modelling with State Machines Finite State Machine Models
  28. 28. MODEL DRIVEN SUMMARY <ul><li>Models </li></ul><ul><ul><li>Specialized editors </li></ul></ul><ul><ul><li>Easy to move from one platform to another </li></ul></ul><ul><li>Code </li></ul><ul><ul><li>Programming skills </li></ul></ul><ul><ul><li>Hard to maintain </li></ul></ul><ul><ul><li>Less portable </li></ul></ul>Models Models (XML) Code Code
  29. 29. PART 3 Web Standards for Graphical Design: SVG and alike
  30. 30. W3C STANDARDS (1) <ul><li>Mainly &quot;Models&quot; </li></ul><ul><ul><li>XML based languages </li></ul></ul><ul><ul><li>From &quot;Draft&quot; to &quot;Recommendation&quot; status </li></ul></ul><ul><ul><li>Models both for output and input modalities </li></ul></ul><ul><ul><li>HTML, XHTML, XForms, SMIL, MathML, VoiceXML, SCXML, InkML, EMMA, …, and SVG </li></ul></ul><ul><li>Some &quot;Code&quot; too </li></ul><ul><ul><li>Application Programming Interfaces (APIs) </li></ul></ul><ul><ul><li>DOM (3 levels) </li></ul></ul><ul><ul><ul><li>API for manipulating models loaded into memory as trees </li></ul></ul></ul><ul><ul><ul><li>Many more APIs (events, load and save, progression, etc.) </li></ul></ul></ul><ul><ul><li>XMLHttpRequest </li></ul></ul><ul><ul><ul><li>Ajax programming </li></ul></ul></ul>
  31. 31. WEB STANDARDS AND MDA Markup Only Code Behind Markup Behind Code Only XML XML Imperative Prog. Lang. Imperative Prog. Lang. Definition of Interactive Components Instantiation of Interactive Components Today Web applications Future of applications Today Desktop applications
  32. 32. W3C AND RICH USER INTERACTION (*) simplified with specialized toolkits (scriptaculous, jQuery, etc) Characteristics Standard solution Better graphics SVG or CSS3 (with HTML) Animation SMIL/ SVG animation module DOM Manipulation with Javascript(*) Creative layout SVG or CSS (with HTML) DOM Manipulation with Javascript(*) Better feedback time XMLHttpRequest Cross domain XHR Borrowing from other styles All of the above
  33. 33. SVG HISTORY <ul><li>S calable V ector G raphic </li></ul><ul><li>Started in 1998 </li></ul><ul><li>1st draft: February 1999 </li></ul><ul><li>SVG 1.1 recommendation 2003 </li></ul><ul><ul><li>http://www.w3.org/TR/SVG11/ </li></ul></ul><ul><li>SVG 1.2 Tiny candidate recommendation 2006 </li></ul><ul><ul><li>http://www.w3.org/TR/SVGMobile12/ </li></ul></ul><ul><ul><li>SVG 1.2 Full to come later </li></ul></ul><ul><li>Working Group with main software editors </li></ul><ul><ul><li>Sun, Adobe, Apple, Microsoft, Corel, Ilog, HP, Canon, Autodesk, etc. </li></ul></ul>
  34. 34. SVG VS. FLASH (*) see http://www.w3.org/TR/SVG/minimize.html Property SWF SVG XML - Std W3C No Yes Metadata Yes, propietary Yes, RDF compatible Format Binary Text Size < SVG > SWF : but can be compressed with gzip by about 80% (*) Runtime Plugin (200K) Native (Opera, Safari , Firefox, … ) Source No Yes (text is searchable and selectable) Audio/Video Yes Yes (SVG 1.2 Tiny)
  35. 35. AUTHORING TOOLS <ul><li>Graphical Editors </li></ul><ul><ul><li>Sodipodi, Illustrator, Corel Draw, OmniGraffle Pro, … </li></ul></ul><ul><li>Specialized Editors </li></ul><ul><ul><li>Ikivo Animator : animations </li></ul></ul><ul><li>Automatic generation </li></ul><ul><ul><li>Client-side Javascript generation </li></ul></ul><ul><ul><ul><li>Example from http://www.destatis.de/ </li></ul></ul></ul><ul><ul><li>Client or server size XSLT generation </li></ul></ul><ul><ul><ul><li>demo from www.treebuilder.de/default.asp?file=250484.xml </li></ul></ul></ul><ul><li>Automatic conversion from/to other formats </li></ul><ul><ul><li>From MathML, AutoCAD, Visio, etc. </li></ul></ul><ul><ul><li>To PDF, PNG, etc. </li></ul></ul><ul><li>Manual authoring :) </li></ul>
  36. 36. PLAYERS <ul><li>Adobe to stop its plugin support in 2009… </li></ul><ul><ul><li>Adobe is switching to Flash/AIR </li></ul></ul><ul><li>… but becoming native in Web browsers </li></ul><ul><ul><li>Opera, Safari, Firefox, … </li></ul></ul><ul><ul><li>open source rendering libraries (Cairo) </li></ul></ul><ul><li>Not directly available in IE… </li></ul><ul><ul><li>Microsoft is switching to XAML/WVG with silverlight plugin </li></ul></ul><ul><li>Standalone players </li></ul><ul><ul><li>Batik (Java) - contains a useful utility to generate SVG fonts </li></ul></ul><ul><li>SVG Tiny 1.2 on mobile phones </li></ul><ul><ul><li>www.bitflash.com/mobile_primer.html </li></ul></ul><ul><ul><li>www.ikivo.com/02player_svg.html </li></ul></ul><ul><ul><li>And more… </li></ul></ul><ul><li>See list of implementations www.svgi.org/ </li></ul>
  37. 37. DRAWING BASIC SHAPES <ul><li>Shapes </li></ul><ul><ul><li>Rectangles <rect> </li></ul></ul><ul><ul><li>Cercles <circle> </li></ul></ul><ul><ul><li>Ellipses <ellipse> </li></ul></ul><ul><ul><li>Lines <line> </li></ul></ul><ul><ul><li>Polylines <polyline> </li></ul></ul><ul><ul><li>Polygons <polygon> </li></ul></ul><ul><ul><li>Text <text> </li></ul></ul><ul><li>Attributes </li></ul><ul><ul><li>x, y, width, height, rx, ry </li></ul></ul><ul><ul><li>fill, stroke, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, … </li></ul></ul><ul><ul><li>opacity, stroke-opacity, fill-opacity </li></ul></ul><ul><ul><li>... </li></ul></ul><rect x=&quot;200&quot; y=&quot;300&quot; width=&quot;90&quot; height=&quot;40” fill=&quot;lime&quot; stroke=&quot;blue&quot; stroke-linejoin=&quot;bevel&quot; stroke-width=&quot;3&quot;/>
  38. 38. DRAWING ARBITRARY SHAPES <ul><li>Path <path d=&quot;path data&quot; > </li></ul><ul><ul><li>outline of a shape which can be filled, stroked, used as a clipping path </li></ul></ul><ul><ul><li>defined by connected lignes, arcs and curves. </li></ul></ul><ul><li>Base attribute </li></ul><ul><ul><li>&quot;path data&quot; : complex vocabulary </li></ul></ul><ul><ul><li>&quot;,&quot; and EOL are allowed in &quot;path data&quot;, spaces are optional between a command and a number (to compress data) </li></ul></ul><path d=&quot;M 100 100 L 300 100 L 200 300 z&quot; fill=&quot;red&quot; stroke=&quot;blue&quot; stroke-width=&quot;1&quot; />
  39. 39. PATH DATA VOCABULARY <ul><li>Each command is named by a letter (M: moveto L: lineto, etc.) followed by a coordinate, either </li></ul><ul><ul><li>Absolute if capital (e.g. &quot;M&quot;) </li></ul></ul><ul><ul><li>Relative to the previous point if lowercase (e.g. &quot;m&quot;) </li></ul></ul><ul><li>M and m: </li></ul><ul><ul><li>Move the point to the given coordinate </li></ul></ul><ul><ul><li>Create a new sub-path starting at the origin </li></ul></ul><ul><ul><li>Syntax: M|m (x y) (x y)* </li></ul></ul><ul><ul><li>The second group (x y)* is interpreted as lineto commands </li></ul></ul><ul><ul><li>Ex: M100 100 200 200 </li></ul></ul><ul><li>L and l: </li></ul><ul><ul><li>Draw a line from the current point to the given coordinate and draw lines between subsequent given points </li></ul></ul><ul><ul><li>Syntax: L|l (x y) (x y)* </li></ul></ul><ul><li>H and h (V and v): </li></ul><ul><ul><li>Draw a horizontal line (vertical) from the current point to the current point incremented with the given number </li></ul></ul><ul><ul><li>Syntax: H|h (x) et V|v (y) </li></ul></ul><ul><li>Z and z: </li></ul><ul><ul><li>Close current subpath with the last point defined with M|m </li></ul></ul>M 100,100 L 200, 200 x Cur point
  40. 40. MORE PATH DATA VOCABULARY See details on http://www.w3.org/TR/SVG/paths.html Command Args (can be repeated)+ Description A, a rx ry x-axis-rotation direction sweep x y Elliptical arc C, c x1 y1 x2 y2 x y Cubic B ézier curve from current point to x y with control points x1 y2 and x2 y2 S, s x2 y2 x y Cubic B ézier curve with control point as the reflection of the reflection of second control point of a C, c command Q, q x1 y1 x y Quadratic B ézier curve from current point to x y with control point x1 y1 T, t x y Quadratic B ézier curve with control point as the reflection of previous control point of a Q, q command
  41. 41. DEFINING REUSABLE GRAPHICAL COMPONENTS <ul><li>Definition of a component </li></ul><ul><ul><li>Group element: <g id=&quot;name&quot;> </li></ul></ul><ul><ul><li>Container element for grouping graphics elements </li></ul></ul><ul><ul><li>Can be nested </li></ul></ul><ul><ul><li>Its attributes are inherited by its descendants </li></ul></ul><ul><li>Instantiation of a component </li></ul><ul><ul><li><use xlink:href=&quot;#name&quot;/> </li></ul></ul><g id=&quot;shape&quot; stroke=&quot;blue&quot;> <path width=&quot;1cm&quot; d=&quot;M 0 50 35 25 70 50 Z&quot; stroke-width=&quot;0.1cm&quot; fill=&quot;none&quot;/> <rect x=&quot;10&quot; y=&quot;50&quot; width=&quot;50&quot; height=&quot;1cm&quot; stroke-width=&quot;0.1cm&quot;/> </g> <use xlink:href=&quot;#shape&quot; x=&quot;140&quot; y=&quot;20&quot;/> <use xlink:href=&quot;#shape&quot; x=&quot;70&quot; y=&quot;60&quot;/>
  42. 42. DECLARING GRAPHICAL COMPONENTS WITHOUT DRAWING THEM <ul><li>Everything that appears in a <defs> section will not be drawn </li></ul><ul><ul><li>It will be available to be reused in other parts </li></ul></ul><ul><ul><li>This is a way to group resources (at the beginning of the file) </li></ul></ul><defs> <g id=&quot;shape&quot; stroke=&quot;blue&quot;> <path width=&quot;1cm&quot; d=&quot;M 0 50 35 25 70 50 Z&quot; stroke-width=&quot;0.1cm&quot; fill=&quot;none&quot;/> <rect x=&quot;10&quot; y=&quot;50&quot; width=&quot;50&quot; height=&quot;1cm&quot; stroke-width=&quot;0.1cm&quot;/> </g> </defs> <use xlink:href=&quot;#shape&quot; x=&quot;140&quot; y=&quot;20&quot;/> <use xlink:href=&quot;#shape&quot; x=&quot;70&quot; y=&quot;60&quot;/>
  43. 43. POSITIONING GRAPHICS <ul><li>Most elements can be positioned with x and y within their parent container </li></ul><ul><li>Groups <g> are also used to apply transformations </li></ul><ul><ul><li><g transform=&quot; translate (x,y)&quot;> </li></ul></ul><ul><ul><li>Other transformations include rotate , skewX | Y , scale and matrix </li></ul></ul><ul><ul><li>This is equivalent to associating a transformation matrix with each group <g> (and to redefine a new coordinate system for the descendants) </li></ul></ul><ul><li>Transformation are cumulative in nested groups </li></ul><ul><ul><li>Current transformation matrix at each <g> </li></ul></ul><ul><ul><li>Obtained as the product of all transformation matrices up to the parent <g> </li></ul></ul><g transform=&quot;rotate(20, 200, 300)&quot;> <rect x=&quot;200&quot; y=&quot;300&quot; width=&quot;90&quot; height=&quot;40&quot; fill=&quot;lime&quot; stroke=&quot;blue&quot; stroke-width=&quot;3&quot;/> </g>
  44. 44. PAINTING AND COLORING <ul><li>Colors applies with different attributes to </li></ul><ul><ul><li>Strokes (attribute &quot;stroke&quot;) </li></ul></ul><ul><ul><li>Shapes interior (attribute &quot;fill&quot;) </li></ul></ul><ul><li>Colors are rendered by a paint server </li></ul><ul><ul><li>The attribute URI reference selects a paint server </li></ul></ul><ul><ul><li>Solid colors (e.g. &quot;orange&quot; or &quot;#50A619&quot;) </li></ul></ul><ul><ul><li>Gradients or Patterns (e.g. &quot;url(#myGradient)&quot;) </li></ul></ul><defs> <linearGradient id=&quot;Gradient01&quot;> <stop offset=&quot;20%&quot; stop-color=&quot;#39F&quot; /> <stop offset=&quot;90%&quot; stop-color=&quot;#F3F&quot; /> </linearGradient> </defs> <rect x=&quot;200&quot; y=&quot;300&quot; width=&quot;90&quot; height=&quot;40” fill=&quot;url(#Gradient01)&quot; stroke=&quot;blue” stroke-width=&quot;3&quot;/>
  45. 45. CLIPPING <ul><li>clipPath element </li></ul><ul><ul><li>any path, text or basic shape </li></ul></ul><ul><ul><li>defines an outline with inside/outside </li></ul></ul><ul><li>clip-path attribute </li></ul><ul><ul><li>attach clipPath to an element </li></ul></ul>Clip layer Not visible Content layer Result <clipPath id=&quot;visContent&quot;> <text x=&quot;0&quot; y=&quot;80&quot; font-family=&quot;Verdana&quot; font-size=&quot;70&quot; fill=&quot;blue&quot; >Media</text> </clipPath> <g clip-path=&quot;url(#visContent)&quot;> <rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;200&quot; height=&quot;100&quot; fill=&quot;url(#grad)&quot;/> </g>
  46. 46. MASKING <ul><li>Masking </li></ul><ul><ul><li>Attribute </li></ul></ul><ul><ul><ul><li>mask=&quot;url(#mask)&quot; </li></ul></ul></ul><ul><ul><li>Draw #mask in an offscreen buffer </li></ul></ul><ul><ul><li>Convert it to gray level image </li></ul></ul><ul><ul><li>Composite with the masked layer </li></ul></ul>Layer1 Layer2 Masked by Layer3 Result Layer3 Mask Not visible <g mask=&quot;url(#Mask)&quot;> <use xlink:href=&quot;#logo&quot; transform=&quot;scale(1 -1&quot;/> </g>
  47. 47. ANIMATING GRAPHICS (1) <ul><li>Each graphical attribute can be animated </li></ul><ul><ul><li>animate element </li></ul></ul><ul><ul><li>Animation description based on SMIL2 (Synchronized Multimedia Integration Language level 2), W3C: http://www.w3.org/TR/smil20/ </li></ul></ul><ul><li>Animation describing </li></ul><ul><ul><li>Trajectory </li></ul></ul><ul><ul><ul><li>Attribute value variation </li></ul></ul></ul><ul><ul><li>Pace </li></ul></ul><ul><ul><ul><li>Time variation to produce effects such as slow-in </li></ul></ul></ul><rect x=&quot;10&quot; y=&quot;10&quot; width=&quot;200&quot; height=&quot;20&quot;> < animate attributeName =&quot;width&quot; attributeType =&quot;XML&quot; from =&quot;200&quot; to =&quot;20&quot; begin =&quot;0s&quot; dur =&quot;5s&quot; fill =&quot;freeze&quot; /> </rect>
  48. 48. ANIMATING GRAPHICS (2) <ul><li>Other types of animation </li></ul><ul><ul><li>Animation along a path (motion tweening) </li></ul></ul><ul><ul><ul><li>animateMotion </li></ul></ul></ul><ul><ul><li>Special instruction for color animation </li></ul></ul><ul><ul><ul><li>animateColor </li></ul></ul></ul><ul><li>More advanced animation can be built with more programming (e.g. Morphing) </li></ul><ul><ul><li>Exemple: Dragicevic, Artistic Resizing (UIST, 2005) </li></ul></ul>
  49. 49. METADATA <ul><li>Images can be describe with </li></ul><ul><ul><li><desc> </li></ul></ul><ul><ul><ul><li>Can contain any RDF data </li></ul></ul></ul><ul><ul><li><title> </li></ul></ul><ul><ul><ul><li>Standard element to give a title </li></ul></ul></ul><ul><li>This can be useful for </li></ul><ul><ul><li>Accessibility (screen readers, …) </li></ul></ul><ul><ul><li>Indexing image file (do not forget it's text files) </li></ul></ul><ul><li>SVG 1.2 also introduces attributes for RDFa & microformats </li></ul><g> < title > Company sales by region </ title > < desc > This is a bar chart which shows company sales by region. </ desc > <!-- Bar chart defined as vector data --> </g>
  50. 50. HOW TO USE SVG <ul><li>Within an SVG document (.svg : image/svg+xml) </li></ul><ul><ul><li>You can nest several SVG fragments / views inside an SVG document </li></ul></ul><ul><ul><li>This is a way to define &quot;elastic&quot; layouts </li></ul></ul><ul><ul><ul><li>Apply % values to x, y and width, height attributes </li></ul></ul></ul><ul><ul><li>Don't forget viewBox attribute to scale to fit </li></ul></ul><ul><li>Within an HTML document </li></ul><ul><ul><li>By reference with <embed>, <object>, <iframe> or <img> tags </li></ul></ul><ul><ul><li>See www.carto.net/papers/svg/samples/svg_html.shtml </li></ul></ul><ul><li>Within an XHTML document (.xhtml : text/xhtml+xml) </li></ul><ul><ul><li>Using the namespace inclusion mechanism </li></ul></ul><ul><ul><li>Must be parsed as XML by the browser </li></ul></ul><ul><ul><li>For a local file &quot;.xhtml&quot; is a way to force it </li></ul></ul>
  51. 51. EXTRA FEATURES <ul><li>Pixel filters </li></ul><ul><li>Markers </li></ul><ul><li>Glyphs </li></ul><ul><li>Text along a path </li></ul><ul><li>Adding Interactivity with Javascript Programming </li></ul><ul><ul><li>SVG APIs </li></ul></ul><ul><ul><ul><li>SVG DOM API: for scripted interactivity </li></ul></ul></ul><ul><ul><ul><li>SVG Micro DOM (for SVG 1.2 Tiny) </li></ul></ul></ul><ul><li>Much more … explore by yourself </li></ul><ul><ul><li>Mozilla SVG home: developer.mozilla.org/en/docs/SVG </li></ul></ul><ul><ul><li>Lot of fascinating examples: www.treebuilder.de/ </li></ul></ul><ul><ul><li>SVG-Wiki: wiki.svg.org/ </li></ul></ul><ul><ul><li>W3C SVG Home: www.w3.org/Graphics/SVG/ </li></ul></ul>
  52. 52. CONCLUSION: RIA STANDARDS AND TECHNOLOGIES X11 1987 1992 1994 2002 2004 Shockwave HTML HTML 4.0 Flash/SWF X-HTML SVG Javascript DOM XMLHttpRequest Ajax CSS IFrame 1990 1996 1998 2000 2006 OpenGL PDF Direct 3D OpenGL 2.0 Mosaic Netscape IE Firefox Konfabulator AIR Silverlight XAML Flex/MXML XUL WVG
  53. 53. CREDITS <ul><li>Web sources indicated directly on the slides, otherwise (many thanks to them): </li></ul><ul><li>Illustrations </li></ul><ul><li>p7 CENA Digistrip www.tls.cena.fr/divisions/PII/toccata/composants/digistrips.html </li></ul><ul><li>Demos </li></ul><ul><li>p10 SVG Slot Machine – www.treebuilder.de </li></ul><ul><li>p30 Adobe Airbus A321 Panel demo – www.adobe.com/svg/demos/main.html </li></ul><ul><li>Book </li></ul><ul><li>Sketching User Experience, Bill Buxton, Morgan Kaufman by Elsevier inc. 2007 – www.billbuxton.com </li></ul><ul><li>Article </li></ul><ul><li>Combining SVG and models of interaction to build highly interactive user interfaces, </li></ul><ul><li>S. Chatty, A. Lemort, S. Sire, J-L. Vinot, SVGOpen 2005 – www.svgopen.org/2005/papers/CombiningSVGModelsBuildInteractiveUserInterfaces/ </li></ul>
  54. 54. EXTRA SLIDES
  55. 55. COMPLETE SVG FILE EXAMPLE <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!DOCTYPE svg [ <!-- entities etc. here --> ]> <svg version=&quot;1.1&quot; baseProfile=&quot;full&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;8cm&quot; height=&quot;6cm&quot;> <defs> <!-- resources to be reused --> <linearGradient id=&quot;Gradient01&quot;> <stop offset=&quot;20%&quot; stop-color=&quot;#39F&quot; /> <stop offset=&quot;90%&quot; stop-color=&quot;#F3F&quot; /> </linearGradient> <rect id=&quot;shape&quot; width=&quot;1cm&quot; height=&quot;1cm&quot; stroke=&quot;blue&quot; stroke-width=&quot;0.1cm&quot;/> </defs> <!-- content --> <rect x=&quot;.1cm&quot; y=&quot;.1cm&quot; width=&quot;7.9cm&quot; height=&quot;5.9cm&quot; fill=&quot;none&quot; stroke=&quot;black&quot; stroke-width=&quot;1px&quot; /> <use x=&quot;1cm&quot; y=&quot;1cm&quot; xlink:href=&quot;#shape&quot; fill=&quot;#BBB&quot;/> <use x=&quot;4cm&quot; y=&quot;1cm&quot; xlink:href=&quot;#shape&quot; fill=&quot;url(#Gradient01)&quot;/> <use x=&quot;1cm&quot; y=&quot;4cm&quot; xlink:href=&quot;#shape&quot; fill=&quot;url(#Gradient01)&quot;/> <use x=&quot;4cm&quot; y=&quot;4cm&quot; xlink:href=&quot;#shape&quot; fill=&quot;blue&quot;/> </svg>

×