1. SVGT in Icon Mode
(1.1.1) Restrictions of icon mode SVGT
Link-references, interactivity (two-way focus navigation and user events) and zoom-and-pan are NOT supported in icon mode.(1.1.2) Allowing the user to switch from icon mode to full view mode
An SVGT icon, referenced from XHTML, MAY be wrapped with an anchor tag pointing to itself......so that the SVGT icon can be clicked on and brought to full view mode. If zoom-and-pan functionality is required then, the 'zoomAndPan="disable"' attribute should NOT have been set in the SVGT document. (SVG Example)<a href="bar.svg"> <object data="bar.svg" type="image/svg+xml" width="80" /> </a>
(1.3) SVGT and xembedded bitmap images
Bitmap images (PNG, JPEG, GIF) may be referenced from within icon mode SVGT.(1.4.1) XHTML browser drawing outline for SVGT icon wrapped by a focused anchor
An xembedded SVGT may be wrapped with an XHTML anchor element, so that it can point to another XHTML document (for instance).The XHTML browser will draw an outline for all objects wrapped by the anchor tag. The outline will be drawn using a default color. (SVG Example)<a href="http://live.vodafone.com/foo.html"> <object data="bar.svg" type="image/svg+xml" width="40%" /> </a>
(1.4.2) Hiding focus outline (over SVG icon) using CSS
The XHTML focus outline color MAY be modified using CSS. The outline MAY also be made fully invisible using CSS.The following code will cause all XHTML anchors with class 'svglink' to have no outline when they receive focus:
<style type="text/css">
a.svglink:focus { outline: none }
</style>
<a href="foo.html" class="svglink">
<object data="triggered-animate.svg" type="image/svg+xml" width="40%" />
</a>
(1.4.3) XHTML focus events to trigger SVGT animations
The host XHTML browser triggers "focusin", "focusout" and "activate" events to the root<svg> element of each SVGT document wrappped by the XHTML anchor tag, receiving focus. This applies to declarative animation:
<svg id="SVGRoot">
...
<rect ... >
<animate begin="SVGRoot.focusin" ... />
<animate begin="SVGRoot.focusout" ... />
</rect>
...
</svg>In order to allow for the SVG playback to suspend their processing when they are not supposed to animate, the following parameter may be applied in the XHTML:
1. <param name="animation" value="play" /> (default)
This SVG object should play/animate all the time. focusin/focusout/activate events will be handled at any time.
2. <param name="animation" value="stop" />
This SVG object will only render the first frame for time zero (0) and then suspend indefinitely. This may be used for "static" SVG icons.
3. <param name="animation" value="onfocusevent" />
This SVG object will only render the first frame for time zero (0) and then suspend until it receives a focusin event. After receiving a focusin event the object will animate until a focusout event is received, when it will again suspend its timer and resume to a "paused" state.
The following XHTML sample code makes use of focus events in order to implement SVG based focus animations on multiple anchor objects. The automatic focus outline of the user agent is being disabled using CSS.
<style type="text/css">
a.svglink:focus { outline: none }
</style>
<object type="image/svg+xml" data="header.svg" /> <!-- defaults to 'play' -->
<a href="foo1.html" class="svglink">
<object type="image/svg+xml" data="foo1.svg">
<param name="animation" value="onfocusevent" />
</object>
</a>
<a href="foo2.html" class="svglink">
<object type="image/svg+xml" data="foo2.svg">
<param name="animation" value="onfocusevent" />
</object>
</a>
- the 'focusin'-animation is not timewise limited and may loop any number of times
- the 'focusout'-animation should be limited to one second
- the 'focusout'- and 'activate'-animations must not loop
(1.4.4) Multiple SVGT icons referenced from XHTML (grid layout / 4-way navigation)
Multiple SVGT icon objects MAY be referenced from a single XHTML document. All of them MAY have their own anchor tag, allowing the creation of a multiselection menu page. The ability to use XHTML table to wrap multiple SVGT icons enables the creation of grid layouts and thereby the use of 4-way navigation over SVGT icons.(1.5.1) Setting SVGT icon dimensions / Rightsizing
The dimension of an xembedded SVGT icon is determined by the following rules:- If the
objectelement has width and/or height attributes set (through CSS or directly in XHTML), these values will be used. - Else, if the SVGT document has width and/or height values set, these values will be used.
- Else (because the SVGT attributes width and height default to 100%), the SVGT document will be rendered into the full available region, made available by the outer container.
When using SVGT icons to create screenresolution independent layout in XHTML , content author should:
- set only one of the XHTML object-element attributes width or height, using a relative value (<="100%")
- NOT set the SVG's own width and height attributes (leave them at their default 100% values)
- set the SVG's
viewboxattributes
By setting only one of the XHTML object-element attributes width or height, both width and height attributes of the SVGT root-element will be overridden. The value of the 'not provided' attribute will be calculated based on the SVG's viewbox dimensions.
In icon mode, the destination rendering area (viewport) will automatically adjust to the aspect ratio of the viewbox attribute on the outermost SVG element. This means, that the hosting browser will (try to) reserve only the screen area needed to display the scaled SVG object. Following XHTML elements will be placed just right or below the xembedded SVG object.
(1.5.2) Banner type SVGT icons adjust themselfs to any width
The following is making use of (1.5.1, rule a).If only one of the XHTML object
width or height attributes is set, the user agent will automatically scale the other property proportionally, by inspecting the viewBox attributes of the <svg> root element (of the referenced SVGT document).
The use of the XHTML object-element width attribute set to "100%" (with no height attribute given)...
...is expected to become a common use case for small screen mobile devices, when creating banner-like objects, spreading over the full width of the screen (or a table cell), independent of the actual size of the screen (SVG Example).<object data="foo.svg" type="image/svg+xml" width="100%" />
However, in some cases will it not be possible to scale the SVG object (it's viewbox) according to the given XHTML width or height attribute.
The illustration below shows, on the left: two rendering areas with different aspect ratio (5:1 and 3:4). In the middle: two different SVG objects (green and red). And to the right: the two SVG's, each scaled into the both rendering areas (the lite blue areas are under control of the SVG, but outside of the SVG's viewbox).
(1) Rightsizing the green, 1:3 tall SVG object into the flat 5:1 box does not work really well. (Long before the full width of the rendering area is reached, will the object reach the maximum height of the rendering area. Large parts of the occupied rendering area will not be usable for content that is positioned inside the SVG's viewbox.)
(2) Rightsizing the red, 4:1 wide SVG object into in the flat 5:1 box works quite well, but some small non-filled margins still appear to the left and right of the scaled SVG object.
(3) Rightsizing the green, 1:3 tall SVG object into in the tall 3:4 box works also quite well, but here again, it is not possible to scale the SVG to the full width of the destination box.
(4) At first sight, rightsizing the red, 4:1 wide SVG object into the tall 3:4 box does not appear to work well. But, out of all four cases, this is the one case, where the SVG object does in fact scale up to the requested 100% width of the rendering area. This time, the UA has a possibility (and is also expected) to adjust the height of the destination box, to match the height of the scaled SVG object. As a result, there will be no non-filled margins (lt. blue), as visible in the other three samples.
In the modified illustration below, sample (4) now shows the desired effect. The SVG object was scaled up to the width of the destination box, as much as possible. And the UA has adjusted the vertical dimension of the destination box, as much as possible. Now, other content can be applied just below the SVG banner object.
Conclusion: When using a fixed aspect ratio, it will not be not possible to rightsize any SVG object into any destination box. It is, however, possible, to rigthsize a wide SVG object into a tall destination box. The UA MAY then be able to shrink the remaining other dimension of the destination box, so that no areas outside the SVG's viewbox become visible.
(Please note, that the behaviour shown above is supported for bitmap images in current desktop browsers. It is currently not supported for SVG objects, as it is most likely not possible for these browsers to retrieve the scaled 'other' dimension of the SVG object).
More about non-filled margins can be found under "(2.1.2) Fixed aspect ratio, scaling and resulting non-filled margins".
(1.5.3) Scaling may not be wanted for SVG objects with embedded bitmap images
The following is making use of (1.5.1, rule b).In case a SVG document contains bitmap images, the content author may NOT want to allow the complete SVG object to scale at all. Such SVG documents SHOULD be provided with width and height on it's root
<svg>
element defined with fixed (non relative) values. The display size of
such a SVGT document SHALL NOT be overridden by the XHTML object tag's width or height attributes (through CSS or XHTML). (XHTML Example)
(1.6) Multiple animating SVGT icons
From within a single XHTML document, multiple SVGT objects may be referenced and be displayed in parallel. All of these SVGT objects may animate in parallel. (This, however, is expected to create performance problems and content authors should use this with care. Content authors must also be aware, that there are limits for the combined data size of all displayed SVGT's.) (XHTML Example)(1.7) Prefer the XHTML object-element over img/embed-elements to xembed SVGT icons
From within XHTML documents, SVGT objects MUST always be referenced using the<object> element, instead of using the <img> or <embed> element. XHTML authors may leverage the <object> element's fallback behavior in order to cater for cases where an SVGT renderer is not available on the device:
<object data="animated_image.svgz"
width="..."
height="..."
type="image/svg+xml">
<img src="static_image.png"
width="..."
height="..."
alt="..." />
</object>(1.8) SVGT icon declarative animations (and XHTML overlap)
Full declarative animations are always supported for foreground SVGT objects. In case other XHTML objects temporarily overlap such an animating foreground SVGT (a pull down menu, or similar), the animation MIGHT stop (timeline MIGHT pause) for as long as the overlap takes place. (XHTML Example)(1.9) Use CSS positioning to allow XHTML overlays
The browser's CSS is expected to support absolute positioning.<html>
<object data="foo.svgz"
style="position:absolute; left:20; top:20; width:50" />
<p style="position:absolute; left:20; top:20">
This text should appears in front of the SVG document, since it is defined below .
</p>
</html>
Comments and Thanks
Please comment to timur.mehrvarz@vodafone.com
Special thanks to: Motorola, Adobe, Access, Sharp, Zoomon, BitFlash, SVG Consortium, BeatWare, NEC, Openwave, Opera, Antoine Quint, lars.piepel@vodafone.com, bruno.rodrigues@vodafone.com