Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.
-
Upload
rebecca-strickland -
Category
Documents
-
view
213 -
download
0
Transcript of Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.
![Page 1: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/1.jpg)
Introducing the new features of SVGT 1.2
Andrew T. EmmonsOpen Text, BitFlash Division
![Page 2: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/2.jpg)
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
![Page 3: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/3.jpg)
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
![Page 4: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/4.jpg)
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
![Page 5: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/5.jpg)
Existing 1.1 features added to Tiny
Object opacity Linear and radial gradients Pointer-events attribute External resources – fonts, use Script element
![Page 6: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/6.jpg)
Multimedia
![Page 7: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/7.jpg)
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
![Page 8: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/8.jpg)
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"/>
![Page 9: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/9.jpg)
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" />
![Page 10: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/10.jpg)
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>
![Page 11: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/11.jpg)
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”/>
![Page 12: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/12.jpg)
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>
![Page 13: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/13.jpg)
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"/>
![Page 14: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/14.jpg)
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>
![Page 15: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/15.jpg)
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
![Page 16: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/16.jpg)
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"/>
![Page 17: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/17.jpg)
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>
![Page 18: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/18.jpg)
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"/>
![Page 19: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/19.jpg)
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
![Page 20: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/20.jpg)
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
![Page 21: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/21.jpg)
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"/>
![Page 22: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/22.jpg)
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"/>
![Page 23: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/23.jpg)
Interactivity
![Page 24: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/24.jpg)
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
![Page 25: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/25.jpg)
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
![Page 26: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/26.jpg)
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
![Page 27: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/27.jpg)
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">
![Page 28: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/28.jpg)
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
![Page 29: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/29.jpg)
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)">
![Page 30: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/30.jpg)
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
![Page 31: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/31.jpg)
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
![Page 32: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/32.jpg)
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
![Page 33: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/33.jpg)
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>
![Page 34: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/34.jpg)
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
![Page 35: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/35.jpg)
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>
![Page 36: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/36.jpg)
Text
![Page 37: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/37.jpg)
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
![Page 38: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/38.jpg)
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">
![Page 39: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/39.jpg)
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>
![Page 40: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/40.jpg)
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
![Page 41: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/41.jpg)
Rendering and document structure enhancements
![Page 42: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/42.jpg)
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>
![Page 43: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/43.jpg)
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
![Page 44: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/44.jpg)
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
![Page 45: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/45.jpg)
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
![Page 46: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/46.jpg)
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>
![Page 47: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/47.jpg)
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 )
![Page 48: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/48.jpg)
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"/>
![Page 49: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/49.jpg)
uDOM
![Page 50: Introducing the new features of SVGT 1.2 Andrew T. Emmons Open Text, BitFlash Division.](https://reader036.fdocuments.us/reader036/viewer/2022062719/56649ee05503460f94bf0ca9/html5/thumbnails/50.jpg)
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