1 / 50

Introducing the new features of SVGT 1.2

Introducing the new features of SVGT 1.2. Andrew T. Emmons Open Text, BitFlash Division . Introduction. 14 years experience in software development Over 6 years developing SVG Member of the SVG W3C Working Group Developing a reference implementation for SVGT 1.2 BitFlash

erwin
Download Presentation

Introducing the new features of SVGT 1.2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division

  2. Introduction • 14 years experience in software development • Over 6 years developing SVG • Member of the SVG W3C Working Group • Developing a reference implementation for SVGT 1.2 • BitFlash • leaders in Mobile SVG • W3C membership since 1999 • co-authored Mobile SVG profiles (SVGT and SVGB) with Nokia

  3. What is SVGT 1.2? • W3C Candidate Recommendation • Upgrade from SVG 1.1 • Minor version number is misleading • Many differences between 1.1 and 1.2 • Not just for Tiny – will be used as the core for SVG 1.2 Full

  4. Features new to SVG • Multimedia – audio, video and animation elements, runtime synchronization • Interactivity – element focus, focus navigation, XML Events • Text – textArea element, editable text • Rendering and document structure enhancements • uDOM – trait access, SVGGlobal

  5. Existing 1.1 features added to Tiny • Object opacity • Linear and radial gradients • Pointer-events attribute • External resources – fonts, use • Script element

  6. Multimedia

  7. Multimedia • New video, audio and animation elements • Elements start, stop and repeat based on SMIL timing attributes • Elements are SMIL timeline containers – independent of top-level SVG timeline • SVGT 1.2 does not specify a particular audio and video media type

  8. Audio Element Examples • Begin based on time File: media-audio-205-t.svg <audio id="welcome" xlink:href="../images/welcome.wav" begin="3s"/> • Begin based on event File: media-audio-208-t.svg <audio id="sound1" xlink:href="../images/welcome.wav"/> <audio id="sound2" begin="sound1.end" xlink:href="../images/excuse_me.wav"/>

  9. Audio Element Examples • repeatCount File: media-audio-202-t.svg <audio id="mondays“ repeatCount="2” xlink:href="../images/excuse_me.wav"/> • Indefinite repeatCount File: media-audio-203-t.svg <audio id="mondays“ repeatCount=“indefinite” xlink:href="../images/excuse_me.wav"/> • simultaneous audio elements File: media-audio-201-t.svg <audio id="mondays" xlink:href="../images/excuse_me.wav" repeatCount="5"/> <audio id="problem" xlink:href="../images/welcome.wav" repeatCount="5" />

  10. Audio Element Examples • audio-level property File: media-alevel-203-t.svg <audio id="mondays" begin="0" end="100" repeatCount="100" xlink:href="../images/welcome.wav"> <animate attributeName="audio-level" dur="15" values="0;0.25;0.25;1;1;0.50;1;0" fill="freeze"/> </audio> • Audio is muted if it is not in the rendering tree File: media-audio-211-t.svg <defs audio-level="1"> <audio id="mondays1" xlink:href="../images/excuse_me.wav" begin="1s" end="3s"/> </defs>

  11. Video Element Examples • preserveAspectRatio attribute Video element establishes a new viewport and thus has the preserveAspectRatio attribute File: media-video-205-t.svg <video x="15" y="65" type="video/3gp" width="450“ height="220" xlink:href="../images/skier.3gp" preserveAspectRatio="xMinYMin meet" /> • viewport-fill property Video element supports the new viewport-fill attribute File: media-audio-205-t-vf.svg <video x="15" y="65" type="video/3gp" width="450“ height="220" xlink:href="../images/skier.3gp" preserveAspectRatio="xMinYMin meet“ viewport-fill=“red”/>

  12. Video Element Examples • transformBehavoir=“geometric” Treated like any other geometric element with regards to transformations File: media-video-214-t.svg <g> <video id="v1" width="185" height="105" xlink:href="../images/skier.3gp" type="video/3gp" repeatCount="indefinite" /> <animateTransform id="translate1" attributeName="transform" type="translate" from="15,55" to="280,195" begin="0s; translate2.end" dur="2s" fill="freeze"/> </g>

  13. Video Element Examples • transformBehavoir=“pinnedX” Video is rendered untransformed centered on x and y coordinate – width and height attributes have no effect File: media-video-203-t.svg <g transform="translate(240,167.5),rotate(15)"> <video width="100" height="67" transformBehavior="pinned" xlink:href="../images/skier.3gp" type="video/3gp" fill="freeze"/> </g> pinned90, pinned180, pinned270 apply rotation angle File: media-audio-216-t-vf.svg <video xlink:href="../images/video.3gp" transformBehavior="pinned90" x="-50" y="-50"/>

  14. Video Element Examples • Changing xlink:href attribute Changing the xlink:href attribute will restart the media, if the media type is capable of controlling the time File: media-video-215-t.svg document.getElementById("video1").setAttributeNS("http://www.w3.org/1999/xlink", "href", "../images/heroesLanding.3gp"); • display=“none” File: media-audio-217-t-vf.svg Audio is muted and not displayed if it is not in the rendering tree <video id="video1" xlink:href="../images/skier.3gp" x="100" y="100" width="100" height="100" begin="0s" dur="8s”> <set id="anim1" attributeName="display" to="none" begin="4s" end="6s"></set> </video>

  15. The animation element • Specifies an external SVG file • Has a timeline separate from the top-level SVG timeline • SVG file becomes a distinct document with individual scripting contexts, IDs, SVGLoad events, etc • Establishes a new viewport

  16. Animation Element Examples • Begin based on time with repeatCount File: media-anim-201-t.svg <animation width="50" height="50" begin="0" dur="10" x="35" xlink:href="../images/animationresource-anim1.svg" repeatCount="indefinite"/> • Begin based on event File: media-anim-203-t.svg <animation width="50" height="50" id="animation3" begin="animation2.end" dur="2" xlink:href="../images/animation2.svg"/>

  17. Animation Element Examples • preserveAspectRatio attribute File: media-anim-205-t.svg <animation x="0" y="0" width="100" height="60" xlink:href="../images/animation3none.svg" begin="0" dur="5s" repeatCount="indefinite" fill="freeze" preserveAspectRatio="xMidYMid meet“/> • Transformations File: media-anim-207-t.svg <g transform="rotate(10,75,50)"> <animation x="0" y="0" width="150" height="100" xlink:href="../images/animation3none.svg" begin="0" dur="5s" repeatCount="indefinite" fill="freeze“/> </g>

  18. Animation Element Examples • Separate documents Scripting context is different for each referenced document File: media-anim-210-t.svg • initialVisibility=“always” By default the animation element is not visible until its timeline has started but this can be controlled by the initialVisibility attribute File: media-anim-203-t-iv.svg <animation initialVisibility="always" width="50" height="50" id="animation1" begin="animation4.end;0" dur="2" xlink:href="../images/animation2.svg"/>

  19. runtime synchronization • New multimedia elements mean that SVG can have multiple timelines in one document • SVG 1.2 supports five attributes from SMIL 2.1 to control runtime synchronization of timed elements • Attributes control which timeline is used as a master which to synchronize all other timelines

  20. runtime synchronization example • Consider a SVG document with three tinelines: • top-level SVG timeline • video element timeline • animation element timeline • Animation element displays lyrics synchronized to the video element • Desire animation element to synchronize with the video element

  21. runtime synchronization example • syncMaster attribute Forces other time containers to synchronize their timelines to this element’s timeline <video xml:id="anim1“ syncMaster="true” x="40" y="110" type="video/3gp" width="50" height="50" xlink:href="../images/skier.3gp"/> • syncBehavior attribute Defines synchronization behavior for an element: canSlip, locked, independent File: media-synch-211-t.svg <animation syncBehavior=“locked” x="-20" y="-15" width="617" height="617" dur="5s" xml:id="mylyrics" xlink:href="../images/timed-lyrics.svg" repeatCount="indefinite"/>

  22. runtime synchronization example • SMIL and SVG do not specify the exact approach to maintaining synchronization • syncTolerance attribute Allows locked sync relationship to have a tolerance before forcing resynchronization File: media-synch-211-t.svg <animation syncBehavior=“locked” syncTolerance=“2s” x="-20" y="-15" width="617" height="617" dur="5s" xml:id="mylyrics" xlink:href="../images/timed-lyrics.svg" repeatCount="indefinite"/>

  23. Interactivity

  24. Element focus • SVG document has the concept of a ‘focus ring’ – the order in which elements obtain focus • Keys used to navigate focus are implementation specific • By default the order is the order in which they appear in the DOM

  25. Focusable attribute • focusable attribute applies to graphical elements and containers • Defines if an element can be part of the document focus ring • Can have a value of true, false or auto • The default value of auto means an element is focusable if it is: • An <a> element, editable text or • The target of an event or animation who is triggered by a focus event – focusIn, focusOut or activate

  26. Focus ring examples • Default focus ring Animations which trigger on a focus event are automatically focusable File: interact-focus-201-t.svg <rect width="30" height="30" fill="red"> <set attributeName="fill" to="green" begin="focusin"/> <set attributeName="fill" to="red" begin="focusout"/> </rect> • Locating to focus SVG user agents can optionally locate to the new focus File: interact-focus-203-t.svg

  27. Focus ring examples • Elements in a shadow tree are included in the focus ring A focusable element which is being referenced by multiple use elements must add each reference to the focus ring File: interact-focus-210-t.svg <defs> <rect focusable="true" xml:id="rect1" width="20" height="20" fill="inherit"> </defs> <use x="10" y="60" xlink:href="#rect1"> <use x=“40" y="60" xlink:href="#rect1">

  28. Modifying navigation order • Navigation can be specified by the 10 nav-* attributes • The most common are nav-up, nav-down, nav-left, nav-right, nav-prev, nav-next • Must specify the element which will receive focus in the given direction • Can have a value of an IRI, ‘auto’ or ‘self’ • A value of ‘auto’ for nav-prev and nav-next is to use the DOM order, otherwise it is implementation specific

  29. Navigation order example • the nav-* attributes are used to define a focus ring File: interact-focus-204-t.svg <a xml:id="t7" xlink:href="#t1" nav-up="url(#t1)" nav-down="url(#t4)" nav-right="url(#t8)" nav-left="url(#t9)" nav-up-right="url(#t2)" nav-down-right="url(#t5)" nav-up-left="url(#t3)" nav-down-left="url(#t6)" nav-next="url(#t8)" nav-prev="url(#t6)">

  30. focusHighlight attribute • Is a hint indicating that the User Agent should highlight the element when it has the focus • Has the value of ‘auto’ or ‘none’ • The default value of ‘auto’ indicates that the User Agent should highlight the element when it has the focus • The method of highlight is implementation specific File: interact-focus-202-t.svg

  31. XML Events • XML events is an XML syntax for registering event listeners and handlers • Is an alternate method to the onmousedown, on* attributes • More versatile – allows for the language to add support for new events without adding new attributes • Two new elements – the listener and handler elements

  32. handler element • Similar to a script element • Contents are either inline or by reference and executed by the User Agent script engine • Only executes content in response to an event • Two ways to listen for an event: • ev:event attribute specifies which event to handle and the parent of the handler becomes the observer • listener element

  33. Handler examples • simple handler File: script-element-202-t.svg <rect xml:id="status" x="120" y="50" width="240" height="240" fill="blue"> <handler ev:event="click"> makeScriptElement(); </handler> </rect> • Paramaters to handler elements Foreign XML content under handler element can be used as parameters <handler ev:event="click> <foo:person><foo:name>Victor Vector</foo:name> </foo:person> </handler>

  34. listener element • Is defined in XML-EVENTS W3C recommendation • Used to attach an event listener to an event handler • Main attributes are: • event attribute specifies which event to listen to • observer attribute defines who will listen for the event, and if not specified is the parent • handler attribute defines which handler to attach

  35. listener element example • simple listener File: script-handle-202-t.svg <animate xml:id="t1" attributeName="visibility" begin="0.5;1.5;2.5;3.5;4.5;5.5" dur="0.5" from="visible" to="visible"/> <ev:listener observer="t1" event="beginEvent" handler="#handler"/> <handler xml:id="handler" type="application/ecmascript"> flipVisibility(evt); </handler>

  36. Text

  37. TextArea element • Allows wrapping of text within a simple rectangular region • x, y, width and height attributes define region • Simple Example File: text-area-201-t.svg <textArea x="15" y="80" width="48" height="200" font-size="24" fill="#369"> • line-increment property provides simple control over spacing between lines File: text-area-206-t.svg

  38. TextArea element examples • Attributes defining region can be animated File: text-area-203-t.svg <textArea x="15" y="60" height="215" width="450" font-size="16" fill="#258"> <animate attributeName="width" from="450" to="10" calcMode="paced" begin="1s" dur="3s" fill="freeze"/> </textArea> • text-align property provides control over inline progression direction File: text-area-220-t.svg <textArea x="15" y="60" width="450" height="215" font-size="16" fill="#259" text-align="end">

  39. TextArea element examples • display-align property provides control over alignment in the block-progression-direction File: text-area-221-t.svg <textArea x="15" y="60" width="450" height="220" fill="#259“ font-size="40" display-align="center“> • region definition is influenced by current transformation File: text-area-207-t.svg <g transform="rotate(180,50,50)"> <textArea x="-365" y="-175" width="205" height="100" font-size="14" fill="#259“> </g>

  40. Editable attribute • SVGT 1.2 allows text elements to be edited • The new editable attribute applies to text and textArea elements • Values can be ‘simple’ or the default, ‘none’ • SVGT does not mandate in-place editing due to platform restrictions • Simple example: File: text-area-222-t.svg

  41. Rendering and document structure enhancements

  42. discard element • Allows whole portions of the DOM tree to be removed and destroyed • Uses SMIL timing attributes to trigger discard • Useful for reducing resource load on User Agents running large SVG files • Simple Example File: struct-discard-201-t.svg <rect id="rect3" x="10" y="45" height="5" width="0" fill="blue"> <discard begin="4s"/> </rect>

  43. Progressive rendering • SVGT 1.2 defines a progressive model rendering in detail • Allows consistent model for rendering incomplete DOM trees • If supported, the User Agent builds the DOM nodes in various states – unresolved, resolved and error

  44. Progressive rendering • User Agent renders an incomplete tree up to the first unresolved node with externalResourcesRequired attribute set to true • SVGT 1.2 does not specify an update model • Simple example File: struct-progressive-203-t.svg

  45. Constrained transforms • transform=“ref(svg, x, y)” • Allows graphical elements to remain fixed in the viewport without being scaled or rotated • ref(svg) specifies that the elements user space maps to the user space of the top-level SVG element • x and y specify an optional translation

  46. Constrained transform examples • Simple Example File: coords-constr-201-t.svg <g transform="ref(svg,10,10)" fill="blue"> <circle cx="40" cy="150" r="15"/> </g> • Important to note that constrained transform does not affect supplemental transform due to animateTransform or animateMotion File: coords-constr-204-t.svg <rect width="100" height="20" fill="green" transform="ref(svg, 200, 150)"> <animateMotion path="M0 0l100 50" dur="3s" fill="freeze"/> </rect>

  47. viewport-fill and viewport-fill-opacity • Elements which establish a new viewport can specify a fill color and opacity value • Applies to image, video, animation and svg elements • viewport-fill can be either ‘none’, ‘currentColor’ or a <color> data type • viewport-fill and viewport-fill-opacity on various elements File: paint-vfill-201-t.svg ( svg ) File: paint-vfill-204-t.svg ( svg and image) File: media-anim-206-t.svg ( animation )

  48. Non-scaling stroke • New property, vector-effect, will be expanded in future versions of SVG • vector-effect=“non-scaling-stroke” allows stroke outline to not scale with the current user transform • Simple example: File: paint-nsstroke-202-t.svg <circle fill="none" stroke-dasharray="5,5" r="24" cx="88" cy="122" stroke-width="10“ vector-effect=“non-scaling-stroke"/>

  49. uDOM

  50. uDOM • A subset of SVG and XML DOM interfaces • Adds additional features: • elementTraversal interface for navigating only elements within a DOM tree, not nodes • Attribute/property normalization – values may be normalized to conserve resources • Trait Access – getting and setting attributes/properties using typed access • SVGGlobal – implements AJAX methods, gotoLocation

More Related