(This version: PUBLIC DRAFT 2, May 24. 2004 / 11th update. ChangeLog at the end of this document.)
This document gives guidens on how to create combined markup for mobile devices, making use of XHTML Mobile Profile and SVG Tiny 1.1.
Devices capable of handling such markup will become available towards the end of 2004. Using a least common denominator approach, content providers will be able to statically host such documents to be rendered on many different mobile devices. In general, there will be no need to evaluate user agent identification strings.
All compatible devices will...
A conformance test suite for many of the following recommendations is available at http://lab.vodafone.com/xhtml-svgt11/index.xhtmlmp.
<object> element, are (in general) rendered as icons (like animated GIF's, see section "1. SVGT in Icon Mode"). Icon Mode SVGT objects do not (in general) support interactivity or zoom-and-pan functionality.
pointing to itself, so that the 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 be set. (SVG Example)<a href="bar.svg"> <object data="bar.svg" type="image/svg+xml" width="80" /> </a>
The XHTML browser will draw an outline for the currently selected object. The outline will be drawn using a default color. (SVG Example)<a href="foo.html"> <object data="bar.svg" type="image/svg+xml" width="40%" /> </a>
<style type="text/css">
xobject:focus { border-width: 1; border-color: red }
</style>
The following code will cause all <xobject> elements to have no border when they receive focus:
<style type="text/css">
xobject:focus { border-width: 0 }
</style>
<svg> element of the SVGT document, which applies to declarative animation:
<svg id="SVGRoot">
...
<rect ... >
<animate begin="SVGRoot.focusin" ... />
</rect>
...
</svg>
width or height attributes are provided, when referencing an SVGT object, both width and height attributes inside the SVGT document will be overridden. If the SVGT document specifies width and/or height as 100% (explicitly or by using the default value), then 100% means the size of the entire region into which the XHTML content will render. (SVG Example)
width and/or height attributes set, these will be used.width and/or height values set, these will be used.width/height=100%).viewBox- nor any width/height-attributes are specified, then a square object is assumed. In general, authors should set the viewBox attribute in the SVGT object and at least one of the width/height attribute in the XHTML object element.
width or height is set, the user agent will automatically scale the other property proportionally, by inspecting the viewBox attribute on the outermost <svg> element. If the viewBox attribute is not specified, then the aspect ratio is computed from the width and height attributes from the SVG root element. The use of width="100%" (and no height attribute) is expected to become a common use case for small screen mobile devices to create banner like objects.
Note that this behaviour is not supported in current desktop browsers as it is most likely not possible for those to retrieve native aspect ratio of the SVG object. (SVG Example)<object data="foo.svg" type="image/svg+xml" width="100%" />
<object> element, instead of using the <img> or <embed> element. XHTML authors should 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>
<html>
<style type="text/css">
.pile {
position: absolute;
left: 20px;
top: 20px;
}
</style>
<object width="..."
height="..."
data="foo.svgz"
class="pile"
style="z-index: 1" />
<p class="pile"
style="position: absolute; left: 0px; top: 10px; z-index: 2">
This text should appear atop the SVG document
</p>
</html>
<html>
<body style="background-image:url(background-noanim.svgz)">
<p>This in foreground</p>
</body>
</html>
(preliminary) When using the CSS route, your XHTML document MAY need to contain enough content (or CSS sizing information) for the full background SVGT to be drawn.
| SVG-Perf | description |
| 0 | none animating very low perf (Arm7 <30MHz) |
| 1* | none animating low perf (Arm7 <60MHz) |
| 2 | none animating high perf (Arm7 >=60MHz) |
| 3 | animating low perf (Arm7 >=90MHz) |
| 4 | animating mid perf (Arm7 >=120MHz / ~6600) |
| 5 | animating high perf (Arm7 >=120MHz + HW-accel) |
| 6 | animating high perf (low gradient/opacity) (Arm7 >=150MHz) |
| 7 | animating high perf (mid gradient/opacity) (Arm9 >=150MHz) |
| 8 | animating +gradient +opacity high perf (Arm9 >=180MHz) |
| 9 | animating +gradient +opacity very high perf (Arm9 >=180MHz + HW-accel) |
| 10+ | to be defined... |
"Accept: text/html, ..., image/svg+xml; ver=T1.1:T1.2; PI=5, image/png, ..."Rational: The plugin-nature of many existing SVG(T) rendering components and the fact that these plugins are (at least in part) user installable makes it almost impossible to propose a UAProf based solution for these values. Especially when considering the limitations of current plugin-interfaces. A plugin-host (browser) is however expected to permit the plugin to provide a MIME type string during initialization.
evalAccept(String accept)
{
// accept = "text/html, ..., image/svg+xml; ver=T1.1:T1.2; PI=5, image/png, ...";
System.out.println("Accept=["+accept+"]");
StringTokenizer st = new StringTokenizer(accept,",");
while(st.hasMoreTokens())
{
String mimeType = st.nextToken().trim();
if(mimeType.startsWith("image/svg+xml"))
{
StringTokenizer st2 = new StringTokenizer(mimeType,";");
while(st2.hasMoreTokens())
{
String str = st2.nextToken().trim();
if(str.startsWith("ver="))
{
StringTokenizer st3 = new StringTokenizer(str.substring(4),":");
while(st3.hasMoreTokens())
{
String version = st3.nextToken().trim();
System.out.println("ver="+version);
}
}
else
if(str.startsWith("PI="))
{
String pI = str.substring(3);
System.out.println("PI="+pI);
}
}
}
}
}
Accept=[text/html, ..., image/svg+xml; ver=T1.1:T1.2; PI=5, image/png, ...] ver=T1.1 ver=T1.2 PI=5
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, Lars, bruno.rodrigues@vodafone.com