Introducing the new features of SVGT 1.2

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
• ltaudio id"welcome" xlinkhref"../images/welcome.
  wav" begin"3s"/gt
• Begin based on event
• File media-audio-208-t.svg
• ltaudio id"sound1" xlinkhref"../images/welcome.w
  av"/gt
• ltaudio id"sound2" begin"sound1.end"
  xlinkhref"../images/excuse_me.wav"/gt

9
Audio Element Examples

• repeatCount
• File media-audio-202-t.svg
• ltaudio id"mondays repeatCount"2
  xlinkhref"../images/excuse_me.wav"/gt
• Indefinite repeatCount
• File media-audio-203-t.svg
• ltaudio id"mondays repeatCountindefinite
  xlinkhref"../images/excuse_me.wav"/gt
• simultaneous audio elements
• File media-audio-201-t.svg
• ltaudio id"mondays" xlinkhref"../images/excuse_m
  e.wav" repeatCount"5"/gt
• ltaudio id"problem" xlinkhref"../images/welcome.
  wav" repeatCount"5" /gt

10
Audio Element Examples

• audio-level property
• File media-alevel-203-t.svg
• ltaudio id"mondays" begin"0" end"100"
  repeatCount"100"
• xlinkhref"../images/welcome.wav"gt
• ltanimate attributeName"audio-level" dur"15"
  values"00.250.25110.5010" fill"freeze"/gt
• lt/audiogt
• Audio is muted if it is not in the rendering tree
• File media-audio-211-t.svg
• ltdefs audio-level"1"gt
• ltaudio id"mondays1" xlinkhref"../images/excuse
  _me.wav"
• begin"1s" end"3s"/gt
• lt/defsgt

11
Video Element Examples

• preserveAspectRatio attribute
• Video element establishes a new viewport and thus
  has the preserveAspectRatio attribute
• File media-video-205-t.svg
• ltvideo x"15" y"65" type"video/3gp" width"450
• height"220" xlinkhref"../images/skier.3gp"
  preserveAspectRatio"xMinYMin meet" /gt
• viewport-fill property
• Video element supports the new viewport-fill
  attribute
• File media-audio-205-t-vf.svg
• ltvideo x"15" y"65" type"video/3gp" width"450
• height"220" xlinkhref"../images/skier.3gp"
  preserveAspectRatio"xMinYMin meet
  viewport-fillred/gt

12
Video Element Examples

• transformBehavoirgeometric
• Treated like any other geometric element with
  regards to transformations
• File media-video-214-t.svg
• ltggt
• ltvideo id"v1" width"185" height"105"
  xlinkhref"../images/skier.3gp" type"video/3gp"
  repeatCount"indefinite" /gt
• ltanimateTransform id"translate1"
  attributeName"transform" type"translate"
  from"15,55" to"280,195" begin"0s
  translate2.end" dur"2s" fill"freeze"/gt
• lt/ggt

13
Video Element Examples

• transformBehavoirpinnedX
• Video is rendered untransformed centered on x and
  y coordinate width and height attributes have
  no effect
• File media-video-203-t.svg
• ltg transform"translate(240,167.5),rotate(15)"gt
• ltvideo width"100" height"67"
  transformBehavior"pinned" xlinkhref"../images/s
  kier.3gp" type"video/3gp" fill"freeze"/gt
• lt/ggt
• pinned90, pinned180, pinned270 apply rotation
  angle
• File media-audio-216-t-vf.svg
• ltvideo xlinkhref"../images/video.3gp"
  transformBehavior"pinned90" x"-50" y"-50"/gt

14
Video Element Examples

• Changing xlinkhref attribute
• Changing the xlinkhref 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")
• displaynone
• File media-audio-217-t-vf.svg
• Audio is muted and not displayed if it is not in
  the rendering tree
• ltvideo id"video1" xlinkhref"../images/skier.3g
  p" x"100" y"100" width"100" height"100"
  begin"0s" dur"8sgt
• ltset id"anim1" attributeName"display"
  to"none" begin"4s" end"6s"gtlt/setgt
• lt/videogt

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
• ltanimation width"50" height"50" begin"0"
  dur"10" x"35" xlinkhref"../images/animationres
  ource-anim1.svg" repeatCount"indefinite"/gt
• Begin based on event
• File media-anim-203-t.svg
• ltanimation width"50" height"50" id"animation3"
  begin"animation2.end" dur"2" xlinkhref"../imag
  es/animation2.svg"/gt

17
Animation Element Examples

• preserveAspectRatio attribute
• File media-anim-205-t.svg
• ltanimation x"0" y"0" width"100" height"60"
  xlinkhref"../images/animation3none.svg"
  begin"0" dur"5s" repeatCount"indefinite"
  fill"freeze" preserveAspectRatio"xMidYMid
  meet/gt
• Transformations
• File media-anim-207-t.svg
• ltg transform"rotate(10,75,50)"gt
• ltanimation x"0" y"0" width"150" height"100"
  xlinkhref"../images/animation3none.svg"
  begin"0" dur"5s" repeatCount"indefinite"
  fill"freeze/gt
• lt/ggt

18
Animation Element Examples

• Separate documents
• Scripting context is different for each
  referenced document
• File media-anim-210-t.svg
• initialVisibilityalways
• 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
• ltanimation initialVisibility"always" width"50"
  height"50" id"animation1" begin"animation4.end
  0" dur"2" xlinkhref"../images/animation2.svg"/gt
  

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 elements timeline
• ltvideo xmlid"anim1 syncMaster"true x"40"
  y"110" type"video/3gp" width"50" height"50"
  xlinkhref"../images/skier.3gp"/gt
• syncBehavior attribute
• Defines synchronization behavior for an element
  canSlip, locked, independent
• File media-synch-211-t.svg
• ltanimation syncBehaviorlocked x"-20" y"-15"
  width"617" height"617" dur"5s"
  xmlid"mylyrics" xlinkhref"../images/timed-lyri
  cs.svg" repeatCount"indefinite"/gt

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
• ltanimation syncBehaviorlocked
  syncTolerance2s x"-20" y"-15" width"617"
  height"617" dur"5s" xmlid"mylyrics"
  xlinkhref"../images/timed-lyrics.svg"
  repeatCount"indefinite"/gt

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 ltagt 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
• ltrect width"30" height"30" fill"red"gt
• ltset attributeName"fill" to"green"
  begin"focusin"/gt
• ltset attributeName"fill" to"red"
  begin"focusout"/gt
• lt/rectgt
• 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
• ltdefsgt
• ltrect focusable"true" xmlid"rect1" width"20"
  height"20" fill"inherit"gt
• lt/defsgt
• ltuse x"10" y"60" xlinkhref"rect1"gt
• ltuse x40" y"60" xlinkhref"rect1"gt

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
• lta xmlid"t7" xlinkhref"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)"gt

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
• evevent 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
• ltrect xmlid"status" x"120" y"50" width"240"
  height"240" fill"blue"gt
• lthandler evevent"click"gt
• makeScriptElement()
• lt/handlergt
• lt/rectgt
• Paramaters to handler elements
• Foreign XML content under handler element can be
  used as parameters
• lthandler evevent"clickgt
• ltfoopersongtltfoonamegtVictor Vectorlt/foonamegt
• lt/foopersongt
• lt/handlergt

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
• ltanimate xmlid"t1" attributeName"visibility"
• begin"0.51.52.53.54.55.5"
  dur"0.5" from"visible" to"visible"/gt
• ltevlistener observer"t1" event"beginEvent"
  handler"handler"/gt
• lthandler xmlid"handler" type"application/ecmasc
  ript"gt
• flipVisibility(evt)
• lt/handlergt

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
• lttextArea x"15" y"80" width"48" height"200"
  font-size"24" fill"369"gt
• 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
• lttextArea x"15" y"60" height"215" width"450"
  font-size"16" fill"258"gt
• ltanimate attributeName"width" from"450"
  to"10" calcMode"paced" begin"1s" dur"3s"
  fill"freeze"/gt
• lt/textAreagt
• text-align property provides control over inline
  progression direction
• File text-area-220-t.svg
• lttextArea x"15" y"60" width"450" height"215"
  font-size"16" fill"259" text-align"end"gt

39
TextArea element examples

• display-align property provides control over
  alignment in the block-progression-direction
• File text-area-221-t.svg
• lttextArea x"15" y"60" width"450" height"220"
  fill"259 font-size"40" display-align"centergt
  
• region definition is influenced by current
  transformation
• File text-area-207-t.svg
• ltg transform"rotate(180,50,50)"gt
• lttextArea x"-365" y"-175" width"205"
  height"100" font-size"14" fill"259gt
• lt/ggt

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
• ltrect id"rect3" x"10" y"45" height"5"
  width"0" fill"blue"gt
• ltdiscard begin"4s"/gt
• lt/rectgt

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 externalResourcesRequir
  ed attribute set to true
• SVGT 1.2 does not specify an update model
• Simple example
• File struct-progressive-203-t.svg

45
Constrained transforms

• transformref(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
• ltg transform"ref(svg,10,10)" fill"blue"gt
• ltcircle cx"40" cy"150" r"15"/gt
  
• lt/ggt
• Important to note that constrained transform does
  not affect supplemental transform due to
  animateTransform or animateMotion
• File coords-constr-204-t.svg
• ltrect width"100" height"20" fill"green"
  transform"ref(svg, 200, 150)"gt
• ltanimateMotion path"M0 0l100 50" dur"3s"
  fill"freeze"/gt
• lt/rectgt

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 ltcolorgt 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-effectnon-scaling-stroke allows stroke
  outline to not scale with the current user
  transform
• Simple example
• File paint-nsstroke-202-t.svg
• ltcircle fill"none" stroke-dasharray"5,5" r"24"
  cx"88" cy"122" stroke-width"10
  vector-effectnon-scaling-stroke"/gt

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