Introducing the new features of SVGT 1.2

Andrew T. EmmonsOpen 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

• leaders in Mobile SVG• W3C membership since 1999• co-authored Mobile SVG profiles (SVGT and SVGB)

with Nokia

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

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

Existing 1.1 features added to Tiny

Object opacity Linear and radial gradients Pointer-events attribute External resources – fonts, use Script element

Multimedia

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

Audio Element Examples

Begin based on timeFile: media-audio-205-t.svg <audio id="welcome" xlink:href="../images/welcome.wav"

begin="3s"/>

Begin based on eventFile: 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"/>

Audio Element Examples

repeatCountFile: media-audio-202-t.svg<audio id="mondays“ repeatCount="2”

xlink:href="../images/excuse_me.wav"/>

Indefinite repeatCountFile: media-audio-203-t.svg<audio id="mondays“ repeatCount=“indefinite”

xlink:href="../images/excuse_me.wav"/>

simultaneous audio elementsFile: 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" />

Audio Element Examples

audio-level propertyFile: 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>

Video Element Examples

preserveAspectRatio attributeVideo 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 propertyVideo element supports the new viewport-fill attributeFile: 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”/>

Video Element Examples

transformBehavoir=“geometric”Treated like any other geometric element with regards to

transformationsFile: 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>

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 angleFile: media-audio-216-t-vf.svg <video xlink:href="../images/video.3gp"

transformBehavior="pinned90" x="-50" y="-50"/>

Video Element Examples

Changing xlink:href attributeChanging the xlink:href attribute will restart the media, if the

media type is capable of controlling the timeFile: media-video-215-t.svgdocument.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>

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

Animation Element Examples

Begin based on time with repeatCountFile: 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 eventFile: media-anim-203-t.svg <animation width="50" height="50" id="animation3"

begin="animation2.end" dur="2" xlink:href="../images/animation2.svg"/>

Animation Element Examples

preserveAspectRatio attributeFile: 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“/>

TransformationsFile: 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>

Animation Element Examples

Separate documentsScripting context is different for each referenced

documentFile: 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"/>

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

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

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 attributeDefines synchronization behavior for an

element: canSlip, locked, independentFile: 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"/>

runtime synchronization example

SMIL and SVG do not specify the exact approach to maintaining synchronization

syncTolerance attributeAllows locked sync relationship to have a

tolerance before forcing resynchronizationFile: 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"/>

Interactivity

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

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

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 focusSVG user agents can optionally locate to the

new focusFile: interact-focus-203-t.svg

Focus ring examples Elements in a shadow tree are included in

the focus ringA 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">

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

Navigation order example the nav-* attributes are used to define a

focus ringFile: 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)">

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 specificFile: interact-focus-202-t.svg

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

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:1. ev:event attribute specifies which event to

handle and the parent of the handler becomes the observer

2. listener element

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

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

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>

Text

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 linesFile: text-area-206-t.svg

TextArea element examples Attributes defining region can be

animatedFile: 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 directionFile: text-area-220-t.svg<textArea x="15" y="60" width="450" height="215" font-

size="16" fill="#259" text-align="end">

TextArea element examples display-align property provides control

over alignment in the block-progression-directionFile: 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 transformationFile: 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>

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

Rendering and document structure enhancements

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>

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

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 exampleFile: struct-progressive-203-t.svg

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

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 animateMotionFile: 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>

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 elementsFile: paint-vfill-201-t.svg ( svg )File: paint-vfill-204-t.svg ( svg and image)File: media-anim-206-t.svg ( animation )

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"/>

uDOM

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