SVG Reference

SVG for BlackBerry
Version 4.2.2 Reference Guide
SVG for BlackBerry Version 4.2.2 Reference Guide Last modified: 29 June 2007 Part number: 12331583 At the time of publication, this documentation is based on Plazmic Content Developers Kit for BlackBerry Version 4.2.2. Send us your comments on product documentation: https://www.blackberry.com/DocsFeedback. 2007 Plazmic, Inc. All Rights Reserved. Plazmic is a trademark of Plazmic, Inc. Plazmic Content Developers Kit for BlackBerry software and documentation, including any online documentation (collectively, the Materials) are the property of Plazmic, Inc. The Materials contain information that is confidential and proprietary to Plazmic, Inc. The Materials are protected by Canadian, U.S., Japanese and other international intellectual property laws and international treaty provisions. No part of the Materials may be reproduced or transmitted in any form or by any means, electrical, or mechanical, including by photocopying or by any information storage or retrieval system, without the written permission of Plazmic, Inc. The BlackBerry and RIM families of related marks, images, and symbols are the exclusive properties of Research In Motion Limited. RIM, Research In Motion, Always On, Always Connected, the envelope in motion symbol, BlackBerry, and BlackBerry Enterprise Server are registered with the U.S. Patent and Trademark Office and may be pending or registered in other countries. W3C is either a registered trademark or a trademark of the World Wide Web Consortium in the United States and/or other countries. All other brands, product names, company names, trademarks and service marks are the properties of their respective owners. The software referenced in this guide facilitates the creation of content for the BlackBerry Browser. In order to use the software referenced herein as intended, you must have valid agreements in place with the licensor(s) of the hardware and software referenced in this user guide. In addition to being required to comply with such license terms, you are strictly prohibited from using the software referenced herein to create, adapt, or otherwise use in any fashion any content that infringes upon or violates the intellectual property rights of any third-party. The disclaimer of liability set forth above shall apply with respect to your use of the software in any manner not authorized by Plazmic, Inc. The software referenced in this guide is based in part on the work of the Independent JPEG Group. The BlackBerry device and/or associated software are protected by copyright, international treaties, and various patents, including one or more of the following U.S. patents: 6,278,442; 6,271,605; 6,219,694; 6,075,470; 6,073,318; D445,428; D433,460; D416,256. Other patents are registered or pending in various countries around the world. Visit www.rim.com/patents for a list of RIM [as hereinafter defined] patents. This document is provided as is and Research In Motion Limited and its affiliated companies (RIM) assume no responsibility for any typographical, technical, or other inaccuracies in this document. In order to protect RIM proprietary and confidential information and/or trade secrets, this document may describe some aspects of RIM technology in generalized terms. RIM reserves the right to periodically change information that is contained in this document; however, RIM makes no commitment to provide any such changes, updates, enhancements, or other additions to this document to you in a timely manner or at all. RIM MAKES NO REPRESENTATIONS, WARRANTIES, CONDITIONS, OR COVENANTS, EITHER EXPRESS OR IMPLIED (INCLUDING WITHOUT LIMITATION, ANY EXPRESS OR IMPLIED WARRANTIES OR CONDITIONS OF FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, MERCHANTABILITY, DURABILITY, TITLE, OR RELATED TO THE PERFORMANCE OR NON-PERFORMANCE OF ANY SOFTWARE REFERENCED HEREIN OR PERFORMANCE OF ANY SERVICES REFERENCED HEREIN). IN CONNECTION WITH YOUR USE OF THIS DOCUMENTATION, NEITHER RIM NOR ITS RESPECTIVE DIRECTORS, OFFICERS, EMPLOYEES, OR CONSULTANTS SHALL BE LIABLE TO YOU FOR ANY DAMAGES WHATSOEVER BE THEY DIRECT, ECONOMIC, COMMERCIAL, SPECIAL, CONSEQUENTIAL, INCIDENTAL, EXEMPLARY, OR INDIRECT DAMAGES, EVEN IF RIM HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES, INCLUDING WITHOUT LIMITATION, LOSS OF BUSINESS REVENUE OR EARNINGS, LOST DATA, DAMAGES CAUSED BY DELAYS, LOST PROFITS, OR A FAILURE TO REALIZE EXPECTED SAVINGS. This document might contain references to third-party sources of information, hardware or software, products or services and/or third-party web sites (collectively the Third-Party Information). RIM does not control, and is not responsible for, any Third-Party Information, including,
without limitation the content, accuracy, copyright compliance, compatibility, performance, trustworthiness, legality, decency, links, or any other aspect of Third-Party Information. The inclusion of Third-Party Information in this document does not imply endorsement by RIM of the Third-Party Information or the third-party in any way. Installation and use of Third-Party Information with RIM's products and services may require one or more patent, trademark, or copyright licenses in order to avoid infringement of the intellectual property rights of others. Any dealings with Third-Party Information, including, without limitation, compliance with applicable licenses and terms and conditions, are solely between you and the third-party. You are solely responsible for determining whether such third-party licenses are required and are responsible for acquiring any such licenses relating to Third-Party Information. To the extent that such intellectual property licenses may be required, RIM expressly recommends that you do not install or use Third-Party Information until all such applicable licenses have been acquired by you or on your behalf. Your use of Third-Party Information shall be governed by and subject to you agreeing to the terms of the Third-Party Information licenses. Any Third-Party Information that is provided with RIM's products and services is provided as is. RIM makes no representation, warranty or guarantee whatsoever in relation to the Third-Party Information and RIM assumes no liability whatsoever in relation to the ThirdParty Information even if RIM has been advised of the possibility of such damages or can anticipate such damages. This product includes software developed by the Apache Software Foundation (http://www.apache.org/) and/or licensed pursuant to Apache License, Version 2.0 (http://www.apache.org/licenses/). For more information, see the NOTICE.txt file included with the software. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
Plazmic, Inc 295 Phillip Street Waterloo, ON N2L 3W8 Canada Published in Canada
Contents
1 Scalable Vector Graphics language reference................................................................................................9 Working with SVG ............................................................................................................................................. 9 Components of a basic .svg document .......................................................................................................... 9 SVG root element ...................................................................................................................................... 9 Namespaces ..............................................................................................................................................10 Elements.....................................................................................................................................................10 Syntax..........................................................................................................................................................11 Testing SVG .......................................................................................................................................................11 SVG content supported by the SVG Transcoding Utility............................................................................11 Supported SVG elements ........................................................................................................................13 Supported SVG attributes .......................................................................................................................16 Defining the document structure .....................................................................................................................21 Document structure elements ....................................................................................................................... 21 <defs> ......................................................................................................................................................... 21 <desc>........................................................................................................................................................ 22 <g>.............................................................................................................................................................. 22 <svg>.......................................................................................................................................................... 23 <title>......................................................................................................................................................... 24 Document structure definition attributes............................................................................................ 25 Core attributes .........................................................................................................................................30 Link elements....................................................................................................................................................31 <a>...............................................................................................................................................................31 <loadScene> ............................................................................................................................................. 32 Hyperlink attributes ................................................................................................................................ 32 Plazmic extension elements .......................................................................................................................... 33 <switchGroup> ......................................................................................................................................... 33 Plazmic extension attributes.................................................................................................................. 33 Adding graphic elements ..................................................................................................................................35 Basic shape elements..................................................................................................................................... 35 <circle> ...................................................................................................................................................... 35 <ellipse> ....................................................................................................................................................36
<line> .........................................................................................................................................................36 <polygon>.................................................................................................................................................. 37 <polyline>.................................................................................................................................................. 37 <rect>......................................................................................................................................................... 38 Shape attributes ...................................................................................................................................... 38 Text elements .................................................................................................................................................. 42 <text>......................................................................................................................................................... 42 <textArea>................................................................................................................................................. 43 <tspan>......................................................................................................................................................44 Text attributes ..........................................................................................................................................45 Path elements..................................................................................................................................................48 <path>........................................................................................................................................................48 Path definition attributes .......................................................................................................................49 Image elements................................................................................................................................................51 <image>......................................................................................................................................................51 Image attributes ...................................................................................................................................... 52 Pattern elements.............................................................................................................................................55 <pattern>...................................................................................................................................................55 Pattern attributes ....................................................................................................................................56 Attributes for graphic elements.................................................................................................................... 57 Paint attributes ........................................................................................................................................ 57 Opacity attributes ...................................................................................................................................60 Graphic rendering attributes.................................................................................................................62 Style attributes.........................................................................................................................................64 Static transformation attributes............................................................................................................65 4 Adding animation and media ...........................................................................................................................67 Animation elements........................................................................................................................................ 67 <animate> ................................................................................................................................................. 67 <animateColor>........................................................................................................................................68 <animateMotion>.....................................................................................................................................68 <animateTransform> .............................................................................................................................. 69 <seq>.......................................................................................................................................................... 70 <set>............................................................................................................................................................ 71 Audio elements................................................................................................................................................ 72 <audio>...................................................................................................................................................... 72 Attributes for animation and media............................................................................................................. 73
Target attributes ...................................................................................................................................... 73 Timing attributes ..................................................................................................................................... 74 Animation value attributes..................................................................................................................... 78 Addition attributes .................................................................................................................................. 82 Rotation attributes .................................................................................................................................. 83 Transformation attributes ......................................................................................................................84 Defining motion paths ...................................................................................................................................84 Defining motion paths using <mpath>.................................................................................................85 Defining motion paths using the path attribute.................................................................................85 5 Adding XForms .................................................................................................................................................. 89 XForm elements ..............................................................................................................................................89 <xforms:input> .........................................................................................................................................89 <xforms:instance>....................................................................................................................................90 <xforms:item>............................................................................................................................................91 <xforms:label> ...........................................................................................................................................91 <xforms:model>........................................................................................................................................92 <xforms:reset>..........................................................................................................................................92 <xforms:select1>.......................................................................................................................................93 <xforms:submit>.......................................................................................................................................94 <xforms:submission>...............................................................................................................................94 <xforms:textarea> ....................................................................................................................................95 <xforms:trigger>.......................................................................................................................................95 <xforms:value> ........................................................................................................................................ 96 XForm attributes..................................................................................................................................... 96 Plazmic extensions to XForms ...............................................................................................................98 Example: Using XForms to collect user information ............................................................................... 100 Defining external fonts ................................................................................................................................... 103 Font definition elements.............................................................................................................................. 103 <font-face> ............................................................................................................................................. 103 <font-face-src>....................................................................................................................................... 103 <font-face-uri>....................................................................................................................................... 104 Font definition attributes ..................................................................................................................... 104
1
Scalable Vector Graphics language reference
Working with SVG Components of a basic .svg document Testing SVG
Working with SVG

This document describes the Scalable Vector Graphics (SVG) elements and attributes that BlackBerry devices supports. SVG is a text-based XML language that is useful for describing, two-dimensional graphical content. SVG was developed by the World Wide Web Consortium (W3C), the non-profit, open-standards consortium that created HTML and XML. Bitmap web graphics, such as .jpg and .gif images, maintain a specified size despite the display area. In contrast, SVG can be scaled to fit any size screen. This feature makes SVG suitable for deployment on wireless handhelds. It is ideal for content deployment on BlackBerry devices. Different BlackBerry devices have different screen resolutions; using SVG, you can create content that is automatically scaled based on the display size, with no loss in image quality or in the legibility of text.
Components of a basic .svg document

The following annotated sample describes a simple .svg document.
Line
<?xml version="1.1"?> <svg width="240" height="160" xmlns="http://www.w3.org/2000/svg" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:pzexts="http://www.plazmic.com/ plazmic_extents"> <ellipse cx="100" cy="80" rx="80" ry="60" fill="white"/> </svg>
Description
This line specifies the XML declaration.

The opening <svg> element tag signifies the start of the SVG document fragment and, in this example, defines the size of the canvas. See SVG root element on page 9 for more information. This line shows SVG content that defines an ellipse. See Elements on page 10 for more information. The </svg> tag is required to close the SVG document fragment.
SVG root element

You define an SVG document using the <svg> element. An SVG document consists of any number of elements contained within the opening <svg> tag and closing </svg> tag.
SVG for BlackBerry Version 4.2.2 Reference Guide
Namespaces
The SVG Transcoder uses several sources to define the elements and attributes that it supports. The location of these definition files is specified in the namespace declaration. The SVG Transcoding Utility requires these definition files to validate your SVG content before transcoding. You must properly identify each of the namespaces required for your SVG document in order for the SVG Transcoder to convert the file into the .pme format. Namespaces referenced by your SVG document are identified using the xmlns[:prefix] attribute of the outermost <svg> element. See http://www.w3.org/TR/REC-xml-names/ for an explanation on using namespaces. At minimum, your SVG document must include the following namespaces:
xmlns="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/ svg.xsd"
The following table outlines possible additional namespace references, depending on the functionality your document requires.
Feature set Hyperlinks Plazmic extensions XForms Namespace reference
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:pz="http://www.plazmic.com/plazmic_extents" xmlns:xforms="http://www.w3.org/2002/xforms"
Elements
An element includes the start tag (<circle>), the end tag (</circle>), and everything in between. Elements in SVG are related as parents and children. SVG elements can be categorized into the following basic types: Container elements hold graphic elements and other container elements such as child elements. BlackBerry devices support the following container elements: <svg>, <g>, <defs> and <a>. Graphic elements enable graphics to be drawn onto the target canvas. SVG supports three types of graphic objects: vector shapes, images, and text. BlackBerry devices support the following graphics elements: basic shapes (<circle>, <ellipse>, <line>, <polygon>, <polyline>, and <rect>) text (<text>, <textArea>, <tspan>) paths (<paths>) images (<image>)
Animation elements enable developers to perform affine animations on graphic elements. XForms elements enable developers to add form fields to their SVG content to collect data from users.
Elements are rendered in the order in which they appear in the .svg file. When layering objects, place background objects at the top of the file.
10
1: Scalable Vector Graphics language reference
Syntax
As in XML, SVG can be validated against a schema. SVG with correct syntax is well-formed. This document describes the syntax for valid and well-formed SVG. In well-formed SVG, consider the following guidelines: Elements must be closed or empty. Every opening tag (for example, <text>), requires a closing tag (for example, </text>). Express empty elements as <text></text> or <text/>. Elements must be properly nested. Because SVG is a hierarchical language, you cannot overlap elements. To properly nest elements, you must close child elements before closing parent elements. Elements are case sensitive. XML-aware applications (such as XML parsers that convert SVG code into SVG objects) cannot match mixed cases for starting and ending element tags. For example, the <Name> tag is different from the </name> tag.
Testing SVG
To test SVG in a wireless device environment, use the BlackBerry device simulator, available with the BlackBerry Java Development Environment (required to install the Plazmic Content Developer Kit).
Note: Elements and attributes marked with an asterisk (*) are SVG extensions that will not run properly in an SVG-enabled web browser.
Test SVG containing custom elements

1. Transcode the .svg file to .pme format using the SVG Transcoding Utility, which is available with the Content Developer Kit. BlackBerry Device Simulator BlackBerry Browser on a BlackBerry device (you must post the content on an web application server first)
2. Open the file in one of the following applications:
See the Plazmic Content Developer Kit User Guide for more information.
SVG content supported by the SVG Transcoding Utility

The SVG Transcoding Utility included with Plazmic Content Developer Kit for BlackBerry Version 4.2.2 is in alignment with version 1.2 of the SVG specification. It supports the following content: a subset of SVG Tiny 1.2 a subset of SVG Basic 1.2 additional features from SVG 1.2 Full a subset of XForms 1.0 the <seq> element from SMIL 1.0 custom Plazmic extensions (<loadScene>, <switchGroup>)
11
The SVG Transcoding Utility converts SVG content into .pme, a binary content format supported by BlackBerry devices. The SVG Transcoding Utility can output content in one of two formats.
Output format .pme version 1.2 Description Supports the complete feature set outlined in this reference. Only BlackBerry devices running BlackBerry Device Software Version 4.1 or later support this output format. You must use the BlackBerry Device Simulator (installed with the BlackBerry Java Development Environment) to test .pme 1.2 content. .pme version 0.2 Supports the feature set provided with Plazmic Content Developer Kit for BlackBerry Version 3.7. Supported by BlackBerry devices running BlackBerry Device Software Version 3.7 or later.
12
Supported SVG elements

Supported SVG elements, listed by type
Element type Structure Hyperlinks Plazmic extension Basic Shape Text Complex Path Image Pattern Animation Elements <defs> <desc> <a> <loadScene> <circle> <ellipse> <text> <path> <image> <pattern> <animate> <animateColor> <animateMotion> Media XForms <audio> <xforms:input> <xforms:instance> <xforms:item> <xforms:label> Font Definition <font-face> <xforms:model> <xforms:reset> <xforms:select1> <xforms:submit> <font-face-src> <xforms:submission> <xforms:textarea> <xforms:trigger> <xforms:value> <font-face-uri> 103 <animateTransform> <mpath> <seq> 72 89 <set> <switchGroup> <line> <polygon> <textArea> <polyline> <rect> <tspan> 42 48 51 55 67 <g> <svg> 31 33 35 <title> See Page... 21
Supported SVG elements, listed alphabetically

Element
<a>
Type Hyperlink
Relationships Valid child elements Any element its parent can contain, except itself. Valid attributes (required attributes in bold) display, fill, fill-opacity, font-family, font-size, font-style, font-weight, id, image-rendering, shape-rendering, stroke, stroke-linecap, stroke-linejoin, stroke-width, text-decoration, text-rendering, transform, visibility, xlink:href, xml:space
See Page... 31
<animate>
Animation
accumulate, additive, attributeName, 67 attributeType, begin, by, calcMode, dur, end, fill, from, id, keyTimes, repeatCount, restart, to, values, xlink:href, xml:space accumulate, additive, attributeName, 68 attributeType, begin, by, calcMode, dur, end, fill, from, id, keyTimes, repeatCount, restart, to, values, xlink:href, xml:space
<animateColor>
Animation
13
Element <animateMotion>
Type Animation
Relationships Valid child elements <mpath> Valid attributes (required attributes in bold)
See Page... accumulate, additive, begin, by, calcMode, dur, 68 end, fill, from, id, keyPoints, keyTimes, path, repeatCount, restart, rotate, to, values, xlink:href, xml:space accumulate, additive, attributeName, 69 attributeType, begin, by, calcMode, dur, end, fill, from, id, keyTimes, repeatCount, restart, restart, to, type, values, xlink:href, xml:space begin, dur, end, fill, id, repeatCount, restart, xlink:href 72 25
<animateTransform>
Animation
<audio> <circle>
Media
Basic Shape <animate>, <animateColor>, cx, cy, display, fill, fill-opacity, id, <animateMotion>, <animateTransform>, image-rendering, opacity, r, shape-rendering, <desc>, <set>, <title> stroke, stroke-linecap, stroke-linejoin, stroke-opacity, stroke-width, text-rendering, transform, visibility, xml:space Structure Structure <font-face>, <pattern>, <xforms:model>, id <xforms:submit>, <xforms:trigger> id, xml:space
<defs> <desc> <ellipse>
13 14 26
Basic Shape <animate>, <animateColor>, cx, cy, display, fill, fill-opacity, id, <animateMotion>, <animateTransform>, image-rendering, opacity, rx, ry, <desc>, <set>, <title> shape-rendering, stroke, stroke-linecap, stroke-linejoin, stroke-opacity, stroke-width, text-rendering, transform, visibility Font Font Font Structure <font-face-src> <font-face-uri> <a>, <animate>, <animateColor>, <animateMotion>, <animateTransform>, <audio>, <circle>, <defs>, <desc>, <ellipse>, <g>, <image>, <line>, <loadScene>, <path>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switchGroup>, <text>, <title> font-family, id id xlink:href
<font-face> <font-face-src> <font-face-uri> <g>
103 103 104
display, fill, fill-opacity, font-family, font-size, 14 font-style, font-weight, id, image-rendering, opacity, shape-rendering, stroke, stroke-linecap, stroke-linejoin, stroke-opacity, stroke-width, text-decoration, text-rendering, transform, visibility, xlink:href, xml:space 33
<image>
Image
<animate>, <animateColor>, display, height, id, image-rendering, <animateMotion>, <animateTransform>, preserveAspectRatio, shape-rendering, <desc>, <set>, <title> text-rendering, transform, visibility, width, x, xlink:href, y
<line>
Basic Shape <animate>, <animateColor>, display, fill, fill-opacity, id, <animateMotion>, <animateTransform>, image-rendering, opacity, r, <desc>, <set>, <title> shape-rendering, stroke, stroke-linecap, stroke-linejoin, stroke-opacity, stroke-width, text-rendering, transform, visibility, x1, x2, xml:space, y1, y2
26
14
Element <loadScene> <mpath> <path>
Type Plazmic/ Hyperlink Animation Basic Path
Relationships Valid child elements Valid attributes (required attributes in bold) begin, id, xlink:href id, xlink:href, xml:space
See Page... 28 85
<animate>, <animateColor>, d, display, fill, fill-opacity, id, image-rendering, 28 <animateMotion>, <animateTransform>, opacity, shape-rendering, stroke, stroke-linecap, <desc>, <set>, <title> stroke-linejoin, stroke-opacity, stroke-width, text-rendering, transform, visibility <image> height, id, patternTransform, patternUnits, width, x, y 34
<pattern> <polygon>
Pattern
Basic Shape <animate>, <animateColor>, display, fill, fill-opacity, id, image-rendering, 27 <animateMotion>, <animateTransform>, opacity, points, shape-rendering, stroke, <desc>, <set>, <title> stroke-linecap, stroke-linejoin, stroke-opacity, stroke-width, text-rendering, transform, visibility Basic Shape <animate>, <animateColor>, display, fill, fill-opacity, id, image-rendering, 27 <animateMotion>, <animateTransform>, opacity, points, shape-rendering, stroke, <desc>, <set>, <title> stroke-linecap, stroke-linejoin, stroke-opacity, stroke-width, text-rendering, transform, visibility Basic Shape <animate>, <animateColor>, display, fill, fill-opacity, height, id, <animateMotion>, <animateTransform>, image-rendering, opacity, rx, ry, <desc>, <set>, <title> shape-rendering, stroke, stroke-linecap, stroke-linejoin, stroke-opacity, stroke-width, text-rendering, transform, visibility, width, x, y Animation <animate>, <animateColor>, begin, dur, id, repeatCount <animateMotion>, <animateTransform>, <audio> <desc>, <title> <a>, <animate>, <animateColor>, <animateMotion>, <animateTransform>, <audio>, <circle>, <defs>, <desc>, <ellipse>, <g>, <image>, <line>, <loadScene>, <path>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switchGroup>, <text>, <textArea>, <title>, <xforms:input>, <xforms:select1>, <xforms:textarea> <a>, <circle>, <ellipse>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switchGroup>, <text> attributeName, attributeType, begin, dur, end, fill, id, repeatCount, restart, to, xlink:href 28
<polyline>
<rect>
<seq>
70
<set> <svg>
Animation Structure
71
background-fill, display, fill, fill-opacity, 15 font-family, font-size, font-style, font-weight, height, hotspot-wrap, id, image-rendering, preserveAspectRatio, shape-rendering, stroke, stroke-linecap, stroke-linejoin, stroke-opacity, stroke-width, text-decoration, text-rendering, viewBox, width, x, xmlns[:prefix], y, zoomAndPan
<switchGroup>
Plazmic Structure Extension Text
currentChild, display, fill, fill-opacity, font-family, 22 font-size, font-style, font-weight, id, stroke, stroke-linecap, stroke-linejoin, stroke-opacity, stroke-width, style, text-decoration
<text>
<a>, <animate>, <animateColor>, display, dx, dy, fill, fill-opacity, font-family, font- 42 <animateMotion>, <animateTransform>, size, font-style, font-weight, id, stroke-opacity, <desc>, <set>, <title>, <tspan> text-decoration, text-rendering, transform, visibility, x, xml:space, y
15
Element <textArea> <title> <tspan>
Type Text Structure Text
Relationships Valid child elements Valid attributes (required attributes in bold) editable, height, id, overflow, width, x, y id, xml:space
See Page... 43 16
display, dx, dy, fill, fill-opacity, font-family, font- 44 size, font-style, font-weight, id, stroke-opacity, text-decoration, text-rendering, visibility, x, xml:space, y id, pzexts:height, pzexts:style, pzexts:width, pzexts:x, pzexts:y, xforms:model, xforms:ref id id id id id, xforms:model id, pzexts:height, pzexts:style, pzexts:width, pzexts:x, pzexts:y, xforms:model, xforms:ref id, xforms:model, xforms:submission id, xforms:action, xforms:method id, pzexts:height, pzexts:style, pzexts:width, pzexts:x, pzexts:y, xforms:model, xforms:ref id, xforms:action, xforms:method id 89 90 91 91 92 92 93 94 94 95 95 96
<xforms:input> <xforms:instance> <xforms:item> <xforms:label> <xforms:model> <xforms:reset> <xforms:select1> <xforms:submit> <xforms:submission> <xforms:textarea> <xforms:trigger> <xforms:value>
XForms XForms XForms XForms XForms XForms XForms XForms XForms XForms XForms XForms
<text>, <xforms:label> Any XML form field description. <xforms:label>, <xforms:value> <xforms:instance>, <xforms:submission> <text>, <xforms:item>, <xforms:label> <text>, <xforms:label> <xforms:reset>
Supported SVG attributes

Supported SVG attributes, listed by type
Attribute type Structure Attributes background-fill height preserveAspectRatio Core Hyperlink Shape
id xlink:href
See Page... viewBox width xmlns[:prefix] xml:space hotspot-wrap r rx, ry x1, y1 font-size font-style font-weight overflow text-decoration 45 x2, y2 30 32 33 38 zoomAndPan 25
Plazmic structure extension currentChild cx, cy height points Text dx, dy editable font-family
16
Attribute type Path Image Pattern Painting Opacity Graphic rendering Style Static Transformation Animation
Attributes d height preserveAspectRatio patternTransform fill stroke fill-opacity display image-rendering style transform accumulate additive attributeName attributeType begin by calcMode dur end fill from keyPoints keyTimes path xforms:action xforms:method pzexts:width pzexts:x, pzexts:y xforms:ref repeatCount restart rotate to type values width xlink:href patternUnits stroke-linecap stroke-linejoin opacity shape-rendering text-rendering stroke-opacity stroke-width stroke-opacity visibility
See Page... 49 52 56 57 60 62 64 65 73
XForm Plazmic XForms extension Font
xforms:model xforms:submission pzexts:height pzexts:style xlink:href
96 98 104
17
Supported SVG attributes, listed alphabetically

Note: A = Animatable, I = Inheritable
Attribute name accumulate additive attributeName attributeType

background-fill
Type Animation Animation Animation Animation Structure Animation Animation Animation Pzext Structure Shape Path Graphic Animation Text Text Animation Animation Painting Opacity Text Text Text Text Animation Structure Shape Image Pzext Structure Core
Valid parent elements

<animate>, <animateColor>, <animateMotion>, <animateTransform> <animate>, <animateColor>, <animateMotion>, <animateTransform> <animate>, <animateColor>, <animateTransform>, <set> <animate>, <animateColor>, <animateTransform>, <set>
See Page... 82 83 73 73
25
<svg>
<animate>, <animateColor>, <animateMotion>, <animateTransform>, <audio>, <loadScene>, <seq>, <set> <animate>, <animateColor>, <animateMotion>, <animateTransform> <animate>, <animateColor>, <animateMotion>, <animateTransform>
begin by calcMode currentChild

cx, cy
74 78 79 33 38 49 62 74 45 45 75 75 57 60 45 46 46 47
79
<switchGroup>
<circle>, <ellipse>
d display dur
dx, dy
<path>
<a>, <circle>, <ellipse>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <svg>, <text>, <tspan> <animate>, <animateColor>, <animateMotion>, <animateTransform>, <audio>, <seq>, <set> <text>, <tspan>
editable end fill fill fill-opacity font-family font-size font-style font-weight

from
<textArea>
<animate>, <animateColor>, <animateMotion>, <animateTransform>, <audio>, <set> <animate>, <animateColor>, <animateMotion>, <animateTransform>, <audio>, <set>
<a>, <circle>, <ellipse>, <g>, <line>, <path>, <polygon>, <polyline>, <rect>, <switchGroup>, <svg>, <text>, <tspan> <a>, <circle>, <ellipse>, <g>, <line>, <path>, <polygon>, <polyline>, <rect>, <switchGroup>, <svg>, <text>, <tspan> <a>, <font-face>, <g>, <switchGroup>, <svg>, <text>, <tspan> <a>, <g>, <svg>, <switchGroup>, <text>, <tspan> <a>, <g>, <svg>, <switchGroup>, <text>, <tspan> <a>, <g>, <svg>, <switchGroup>, <text>, <tspan> <animate>, <animateColor>, <animateMotion>, <animateTransform>
height height height hotspot-wrap

id
<svg> <rect>
<image>, <pattern>
26 39 52 34
30
<svg> Any element
18
Attribute name image-rendering keyPoints keyTimes opacity overflow path patternTransform patternUnits points preserveAspectRatio preserveAspectRatio
pzexts:height
Type Graphic Animation Animation Opacity Text Animation Pattern Pattern Shape Structure Image Pzext XForms Pzext XForms Pzext XForms Pzext XForms Shape Animation Animation Animation Shape Graphic Painting Painting Painting Opacity Painting Style Text Graphic Animation
Valid parent elements

<a>, <circle>, <ellipse>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <svg>, <text>, <tspan>
See Page... 62 80 80 61 47 85 56 57 39 26 52
98
<animateMotion>
<animate>, <animateColor>, <animateMotion>, <animateTransform> <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>
<textArea> <animateMotion> <pattern> <pattern>

<polygon>, <polyline>
<svg> <image>
<xforms:input>, <xforms:select1>, <xforms:textarea> <xforms:input>, <xforms:select1>, <xforms:textarea> <xforms:input>, <xforms:select1>, <xforms:textarea> <xforms:input>, <xforms:select1>, <xforms:textarea>
pzexts:style pzexts:width
pzexts:x, pzexts:y
99 99 100 40 76 76 83 40 63 58 59 59 61 60 64 47 63 81 65
r repeatCount restart rotate

rx, ry
<circle>
<animate>, <animateColor>, <animateMotion>, <animateTransform>, <audio>, <seq>, <set> <animate>, <animateColor>, <animateMotion>, <animateTransform>, <audio>, <set>
<animateMotion>
<ellipse>, <rect> <a>, <circle>, <ellipse>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <svg>, <text>, <tspan> <a>, <circle>, <ellipse>, <g>, <line>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switchGroup> <a>, <circle>, <ellipse>, <g>, <line>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switchGroup> <a>, <circle>, <ellipse>, <g>, <line>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switchGroup> <a>, <circle>, <ellipse>, <g>, <line>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switchGroup>, <text>, <tspan> <a>, <circle>, <ellipse>, <g>, <line>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switchGroup>
shape-rendering stroke stroke-linecap stroke-linejoin stroke-opacity stroke-width style text-decoration text-rendering to transform
<a>, <circle>, <ellipse>, <g>, <line>, <image>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switchGroup>, <text>
<a>, <g>, <svg>, <switchGroup>, <text>, <tspan> <a>, <circle>, <ellipse>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <svg>, <text>, <tspan> <animate>, <animateColor>, <animateMotion>, <animateTransform>, <set> <a>, <circle>, <ellipse>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switchGroup>, <text>
Static Transformation
19
Attribute name type values viewBox visibility width width width

x, y x1, y1 x2, y2
Type Animation Pattern Structure Graphic Structure Shape Image Shape Shape Shape XForms XForms XForms XForms XForms Hyperlink Image Font Core
Valid parent elements <animateTransform>

<animate>, <animateColor>, <animateMotion>, <animateTransform>
See Page... 84 81 27 64 28 41 54 41 42 42 96 96 97 97 98 32 54 104 30
<svg>
<a>, <circle>, <ellipse>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <svg>, <text>, <tspan>
<svg> <rect> <image>

<image>, <pattern>, <rect>, <svg>, <text>, <textArea>, <tspan>
<line> <line>
<xforms:submission>, <xforms:trigger>, <xforms:submission>, <xforms:trigger>, <xforms:input>, <xforms:reset>, <xforms:select1>, <xforms:submit>, <xforms:textarea> <xforms:input>, <xforms:select1>, <xforms:textarea>
xforms:action xforms:method xforms:model xforms:ref xforms:submission xlink:href xlink:href xlink:href xml:space
<xforms:submit> <a> <image> <font-face-uri> <a>, <animate>, <animateColor>, <animateMotion>, <animateTransform>, <circle>, <desc>, <ellipse>, <g>, <line>, <mpath>, <pattern>, <switchGroup>, <text>, <title>, <tspan> <svg> <svg>
xmlns[:prefix] zoomAndPan
Structure Structure
28 29
20
2
Defining the document structure
Document structure elements Link elements Plazmic extension elements
Document structure elements

Document structure elements hold graphics elements and other container elements as child elements, or provide meta-data for an element or scene. Refer to the SVG 1.2 specification at http://www.w3.org/TR/SVGMobile12/ for more information.
<defs>
This element is a container element for referenced elements. The content model for <defs> is the same as that for the <g>. Elements contained by the <defs> element are not rendered directly. Example
<defs> <font-face font-family="MyFontFamily" font-size="12px" font-style="normal" font-weight="normal"> <font-face-src> <font-face-uri xlink:href="externalFont1.cbtf" /> </font-face-src> </font-face> <pattern id="pattern1" patternUnits="userSpaceOnUse" x="25" y="10" height="40" width="40"> <image x="0" y="0" height="40" width="40" xlink:href="myTile.png"/> </pattern> <path id="myPath" d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" /> </defs>
Element details Valid parents Valid children Required attributes Optional attributes
id <a> <defs> <font-face> <pattern> <g> <pattern> <xforms:model> <xforms:submit> <svg> <xforms:submission> <xforms:trigger>
<desc>
This element provides a descriptive, text-only string that describes a container or graphics element in SVG. It is useful for copyright information. The first <desc> element is used in the scene information. Example Limitations
<desc> Defines a hotspot that links to www.blackberry.com. </desc>
If you specify more than one <desc> element, only the first <desc> element is used. All others are ignored. If you are producing content for BlackBerry devices running BlackBerry Device Software Version 4.0 or earlier (and therefore converting your SVG to PME Version 0.2), the text string must not exceed 256 characters. The SVG Transcoding Utility truncates any descriptions which exceed this length and continues transcoding. There are no length restrictions when converting to PME Version 1.2.
Element details Valid parents

<a> <animate> <animateColor> <animateMotion> <animateTransform> <circle> <defs> <ellipse> <font-face> <g> <image> <line> <loadScene> <path> <pattern> <polygon> id xml:space <polyline> <rect> <set> <svg> <title> <switchGroup> <text> <tspan>
Valid children Required attributes Optional attributes
<g>
This element translates, shows, and hides groups of elements. These grouped elements can also be used individually. If several drawing elements have similar attributes, they can be collected using the <g> element. Example
<g transform="translate(10,10)"> <rect width="20" height="20" fill="orange"/> <g transform="translate(10,10)"> <rect width="20" height="20" fill="white"/> </g> </g>
Limitation
If you specify more than one <desc> element, only the first <desc> element is used. All others are ignored.
22
2: Defining the document structure
Hint
To animate the x and y positions of the entire group, use the <animateTransform> element. See "<animateTransform>" on page 69 for more information.
Element details Valid parents Valid children

<a> <g> <a> <animate> <animateColor> <animateMotion> <animateTransform> <audio> <circle> <defs> display fill fill-opacity font-family font-size font-style font-weight id image-rendering opacity shape-rendering stroke stroke-linecap stroke-linejoin stroke-opacity stroke-width text-decoration text-rendering transform visibility xlink:href xml:space <svg> <switchGroup> <desc> <ellipse> <g> <image> <line> <loadScene> <path> <polygon> <polyline> <rect> <set> <svg> <switchGroup> <text> <title>
Required attributes Optional attributes
<svg>
This element defines the view port and contains an entire scene. The root, or outermost, <svg> element defines the height, width, and background color of the canvas. Each nested <svg> element defines a separate viewport. Example
<svg width="240" height="160"> <desc>Rectangles</desc> <rect x="6" y="3" width="1" height="7"/> <circle cx="50" cy="45" r="30" stroke="blue" fill="green"/> </svg>
Notes
The following attributes are supported for the outermost <svg> element only. The SVG Transcoding Utility will ignore these attributes if they are used with a nested <svg> element.
background-fill height xmlns[:prefix] zoomAndPan
The x and y attributes are only supported for embedded <svg> elements. They have no meaning for or effect on the outermost <svg> element.
23

<a> <g> <a> <animate> <animateColor> <animateMotion> <animateTransform> <audio> <circle> <defs> <desc> height background-fill height display fill fill-opacity font-family font-size font-style font-weight <svg> <switchGroup> <ellipse> <g> <image> <line> <loadScene> <path> <polygon> <polyline> <rect> width hotspot-wrap id image-rendering preserveAspectRatio shape-rendering stroke stroke-linecap stroke-linejoin stroke-opacity stroke-width text-decoration text-rendering viewBox x, y xmlns[:prefix] zoomAndPan <set> <svg> <switchGroup> <text> <textArea> <title> <xforms:input> <xforms:select1> <xforms:textarea>
<title>
This element specifies a title for each container or graphic element. The <title> element is a descriptive, text-only string. Titles are not rendered as part of the graphic, but they are included in the scene information. Example
<svg width="100" height="100"> <title id="svg_title">Rectangle</title> <rect width="60" height="60" x="20" y="20" fill="orange"/> </svg>
Limitations
If you specify more than one title for an element, only the first <title> element is used. Additional <title> elements are ignored. If you are producing content for BlackBerry devices running BlackBerry Device Software Version 4.0 or earlier (and therefore converting your SVG to PME Version 0.2), the text string in the <title> element cannot exceed 16 characters. Additional characters are ignored. There are no length restrictions when converting to PME Version 1.2.
24

<a> <animate> <animateColor> <animateMotion> <animateTransform> <audio> <circle> <desc> <ellipse> <g> <image> <line> <loadScene> <path> <polygon> <polyline> id xml:space <rect> <set> <svg> <switchGroup> <text> <textArea> <tspan>
Document structure definition attributes

The following attributes define the view port. The view port is the area through which the SVG document is presented.
background-fill
Specifies the paint used to fill the view port.
Valid values
paint_value
Description Specifies the color used to paint the interior of the object. Can be one of:
none: indicates that no paint is applied Any valid color: A valid color can be specified using:
an RGB value ("250,239,111") Hexidecimal notation ("#770aff" or "#70f" (equal to "#7700ff")) a valid textual color name ("lightgoldenrodyellow") For example:
background-fill="#2203e4"
Attribute details Default value Inherited Animatable Valid parents

none
No Yes
<svg> (outermost svg element only)
25
height
Specifies the height of the SVG document, the height of the rectangular region into which a child <svg> or <image> element is placed, or the height of a <pattern> element or a <rect> element. Notes The height attribute is required for the <rect> and <svg> elements. If this attribute is not specified for an <svg> element, the effect is as if a value of 100% were specified. Specifying a negative value produces an error. When used with the <pattern> element, the value of this attribute must be identical to the height attribute of the child <image> element. In addition, you cannot animate height when used with <pattern>.
Description Specifies the height. This value can be any positive, non-zero, whole number. If this attribute is specified for an <svg> element, you can specify the value as a percentage of the height of the viewport. For example: height=50% Attribute details Default value Inherited Animatable Valid parents
0
Valid values
measure_value
No For <svg> and <pattern> elements: No For <image> and <rect> elements: Yes
<image> <pattern> <rect> <svg>
preserveAspectRatio
Defines the behavior when a nested <svg> scene or an image is rendered in a view port that is of a different size than the image dimensions. The value of preserveAspectRatio has two components: one which specifies how the scene or image is aligned within the view port, and one which specifies whether it is scaled or cropped to fit into the view port. If the preserveAspectRatio attribute is not specified at all, the image is stretched to fill the view port. Limitation The SVG Transcoding Utility does not support the use of this attribute with the <pattern> element.
26
Valid values
align_&_scale
Description Indicates that any scaling required will be uniform. The two components of this value specify how the image is aligned and whether the image is scaled or cropped. The alignment component can have one of the following values:
xMinYMin: aligns the viewbox to the top left corner of the view port xMinYMid: vertically centers the viewbox along the left edge of the view port xMinYMax: aligns the viewbox to the bottom left corner of the view port xMidYMin: horizontally centers the viewbox along the top edge of the view port xMidYMid: aligns the viewbox to the horizontal and vertical center of the view port xMidYMax: Horizontally centers the viewbox along the bottom edge of the view port XMaxYMin: aligns the viewbox to the top right corner of the view port XMaxYMid: vertically centers the viewbox along the right edge of the view port XMaxYMax: aligns the viewbox to the bottom right corner of the view port
The scaling component is optional and can have one of the following values:
meet: The image is uniformly scaled to fit into the view port, with no cropping; transparent
padding is applied to fill out the rest of the view port. If no scaling component is specified, then
meet is assumed.
slice: The aspect ration is preserved; the content is cropped to fit into the view port. The
cropped image will fill the entire view port such that no padding is necessary. For example, to preserve the aspect without clipping and with equal padding on either side of the image or scene, you could specify the following:
preserveAspectRatio="xMidYMid meet" none
Indicates that any scaling required will not be uniform. The image will be rendered such that it completely fills the view port.

xMidYMid meet
No Yes
<image> <svg>
viewBox
Defines a rectangular area within which an SVG scene is presented. If the rectangular area specified is a different size than the view port in which it is placed, the SVG contained within it is scaled to fill the entire view port. Limitation Hints Units or percentage values are not supported for this attribute. If an SVG document is likely to be referenced as a component of another document, you should define the viewBox attribute on the outermost <svg> element so that the SVG content can be scaled to fit into an arbitrary view port. You can use the preserveAspectRatio attribute to control whether the SVG content is uniformly scaled and/or cropped.
27
Valid values
bounding_values
Description Defines the coordinate system for the rest of the SVG document. The value must be a list of four floating-point values representing the x, y, width and height properties. For example:
viewbox="0 0 1500 1000"
Attribute details Default value Inherited Animatable Valid parents No Yes

<svg>
width
Specifies the height of the SVG document, the height of the rectangular region into which a child <svg> or <image> element is placed, or the height of a <pattern> element or a <rect> element. Notes The width attribute is required for the <rect> and <svg> elements. If this attribute is not specified for an <svg> element, the effect is as if a value of 100% were specified. Specifying a negative value produces an error. When used with the <pattern> element, the value of this attribute must be identical to the width attribute of the child <image> element. In addition, You cannot animate width when used with <pattern>.
Description Specifies the width of the object. This value can be any positive, whole number. If this attribute is specified for an <svg> element, you can specify the value as a percentage of the height of the viewport. For example: width=50% Attribute details Default value Inherited Animatable Valid parents
0
Valid values
measure_value
xmlns[:prefix]
Identifies the namespace where the XML definitions of the elements and attributes used in your SVG document are located. Multiple namespaces can be identified. This attribute is a standard XML attribute.
28
You must include one or more namespace references in your document.

Valid values
resource_name
Description Identifies the URI reference at which the XML definitions for various components of the SVG document are declared. The prefix identifies a particular namespace. At minimum, you must include the following namespaces:
xmlns="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/ svg/schema/svg.xsd"
The following table outlines possible namespace references, depending on the functionality your document requires. Feature set Hyperlinks Plazmic extensions XForms Attribute details Default value Inherited Animatable Valid parents No No
Namespace reference
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:pz="http://www.plazmic.com/plazmic_extents" xmlns:xforms="http://www.w3.org/2002/xforms"
zoomAndPan
Specifies whether the browser can pan or magnify the content. This attribute is valid only for the outermost <svg> element.
Valid values
magnify disable
Description Specifies that the user agent will allow the user to magnify and/or pan across the content. Specifies that the user agent will not allow the user to magnify and/or pan across the content.

magnify
No No
<svg>
29
Core attributes
id
This attribute assigns a unique name to any SVG element. This unique name is used to identify an element for the purposes of referencing it from another element.
Valid values
unique_name
Description Uniquely identifies the element. This value may be any alphanumeric string up to 256 characters.
Attribute details Default value Inherited Animatable Valid parents No No

<a> <animate> <animateColor> <animateMotion> <animateTransform> <audio> <circle> <defs> <desc> <ellipse> <font-face> <font-face-src> <font-face-uri> <g> <image> <line> <loadScene> <mpath> <path> <pattern> <polygon> <polyline> <rect> <seq> <set> <svg> <switchGroup> <text> <textArea> <title> <tspan> <xforms:input> <xforms:instance> <xforms:item> <xforms:label> <xforms:model> <xforms:reset> <xforms:select1> <xforms:submit> <xforms:submission> <xforms:textarea> <xforms:trigger> <xforms:value>
xml:space
This attribute informs the SVG Transcoding Utility how whitespace in the SVG element is to be handled. This is a standard XML attribute.
Valid values
default
Description Informs the SVG Transcoding Utility to handle whitespace as follows: All leading and trailing spaces are deleted. All new line characters are deleted. Adjacent whitespace characters are converted to a single space. Every tab character is converted to a space. Every new line is converted to a space. All other whitespace characters are left intact.
preserve
Informs the SVG Transcoding Utility to handle whitespace as follows:
Attribute details Default value Inherited Animatable

default
No No
30
Attribute details Valid parents

<a> <animate> <animateColor> <animateMotion> <animateTransform> <circle> <desc> <ellipse> <g> <line> <mpath> <pattern> <switchGroup> <text> <title> <tspan>
Link elements
<a>
Specifies a hyperlink. This element is similar to the <a> element in HTML. When selected, the hyperlink replaces the current browser content with the contents of the URL specified in the xlink:href attribute. For example, when the user selects a hyperlink, a new scene loads, or an action (such as sound) is performed. Example
<a xlink:href="http://www.blackberry.com"> <desc> Defines a hotspot that links to www.blackberry.com. </desc> <circle id="circle1" r="100" cx="100" cy="50" fill="red" stroke-width="0" /> </a>
Limitations
To indicate that a link has focus, you must animate the focusin and focusout events. References to content outside of the .svg file must be to .pme files or must be translated to .pme file format when deployed. Otherwise, the reference must be to a named <animate> or <audio> element within the same scene.
Hint
During development, you can link to other .svg files in order to test the page(s). Prior to transcoding the SVG content, however, you must change those references to .pme files so that the links function properly on the BlackBerry device. Refer to the Plazmic Content Developers Kit User Guide for more information.
<g> <svg> xlink:href display fill fill-opacity font-family font-size font-style font-weight id image-rendering shape-rendering stroke stroke-linecap stroke-linejoin stroke-width text-decoration text-rendering transform visibility xml:space <switchGroup> <text>
may contain any element its parent can contain, except itself
31
<loadScene>
A custom Plazmic element that streams new content without requiring a user to select a hyperlink. Use the <loadScene> element to load a new scene after a specific amount of time or in response to an event, such as a completed animation. In addition to having the same functionality as the <a> element, the <loadScene> element has the
begin attribute. When the begin condition is met, the scene specified by the xlink:href attribute
is loaded. Example Limitation Hint

<loadScene id="hs1" xlink:href="test1.pme" begin="hs11.activate"/>
You can assign only one value to the begin attribute. During development, you can link to other .svg files in order to test the page(s). Prior to transcoding the SVG content, however, you must change those references to .pme files so that the links function properly on the BlackBerry device. Refer to the Plazmic Content Developers Kit User Guide for more information.
Element details Valid parents Valid children Required attributes Valid attributes
begin id xlink:href <g> <svg>
Hyperlink attributes
xlink:href
Specifies the location of a referenced object. References can point to external files, such as .svg, .pme, audio, image, or font files, or they can reference internal definitions, such as a path to be used as the basis for a motion path.
Valid values
resource_URL
Description Specifies a valid URL. If the external object you are linking to is an .svg file, the BlackBerry MDS Connection Service and BlackBerry Internet Service Browsing are designed to automatically transcode .svg files into .pme format before sending them on to the BlackBerry. However, to ensure the file can be rendered as intended, you should convert linked .svg files to .pme format whenever possible and reference the file as filename.pme. For example
xlink:href="http://yourDir/yourFile.pme"
Attribute details Default value Inherited Animatable No No
32

<a> <animate> <animateColor> <animateMotion> <animateTransform> <audio> <font-face-uri> <image> <loadScene> <mpath> <set>
Plazmic extension elements

<switchGroup>
A custom Plazmic element that extends the <g> element with a currentChild attribute. The visibility setting enables you to display one of a number of drawing elements. Using <switchGroup>, only a single child can be drawn at a time. Example
<switchGroup transform="translate(30,30)" currentChild="rectangle1"> <rect id="rectangle1" x="5" y="5" width="20" height="20" fill="blue" stroke="blue"/> <polygon id="polygon1" points="40,0 50,20 30,20" fill="green" stroke="red"/> <rect id="rectangle2" x="5" y="50" width="50" height="20" fill="yellow" stroke="red"/> </switchGroup>

<g> <a> <circle> <ellipse> <g> currentChild <svg> <image> <line> <path> <polygon> id <switchGroup> <polyline> <rect> <switchGroup> <text>
Valid attributes
Plazmic extension attributes

currentChild
A custom Plazmic attribute that specifies which child of a <switchGroup> element is visible.
Valid values
child_element
Description Specifies the id attribute of an existing child of the <switchGroup> element.
Attribute details Default value Inherited Animatable Valid parents Yes Yes
<switchGroup>
33
hotspot-wrap
A custom Plazmic attribute that provides a hint to the user agent when a user scrolls past the last hotspot in an SVG document. The user agent may wrap focus from the last hotspot to the first (or from the first to the last, when scrolling backwards), or it can stop at the first and last hotspot. Notes This attribute is a hint, and can be ignored by the user agent. The user agent might ignore this attribute if the content is part of a larger document, such as an .html file, and it needs to allow focus to leave the SVG scene. This attribute can only be applied to the outermost <svg> element.
Description Indicates that the user agent should wrap the focus when the user scrolls past the first or last hotspot. Indicates that the user agent should not wrap focus.
Valid values
true false

true
No No
34
3
Adding graphic elements
Basic shape elements Text elements Path elements Image elements Pattern elements Attributes for graphic elements
Basic shape elements

<circle>
Defines a circle based on a center point and a radius. Example
<circle id="circle1" r="100" cx="100" cy="50" fill="red" stroke-width="0"> <animate id="shrinkCircle" attributeName="r" from="100" to="10" dur="10s" fill="freeze" /> </circle>

<a> <defs> <animate> <animateColor> <animateMotion> r cx, cy display fill fill-opacity id image-rendering opacity shape-rendering stroke stroke-linecap stroke-linejoin stroke-opacity stroke-width text-rendering transform visibility xml:space <g> <svg> <animateTransform> <desc> <set> <switchGroup> <title>
<ellipse>
Defines an ellipse that is axis-aligned with the current user co-ordinate system based on a center point and two radii. A co-ordinate system defines locations and distances on the current canvas. The current user co-ordinate system is the co-ordinate system that is currently active, and it defines how co-ordinates and lengths are located and computed, respectively, on the current canvas. Example
<ellipse id="ellipse1" cx="80" cy="50" rx="10" ry="20" fill ="green" stroke="blue" /> <animateColor from="green" to="yellow" dur="10s" fill="freeze" /> </ellipse>

<a> <defs> <animate> <animateColor> <animateMotion> rx, ry cx, cy display fill fill-opacity id image-rendering opacity shape-rendering stroke stroke-linecap stroke-linejoin stroke-opacity stroke-width text-rendering transform visibility <g> <svg> <animateTransform> <desc> <set> <switchGroup> <title>
Required attributes Valid attributes
<line>
Defines a line segment that starts at one point and ends at another. Example
<a> <defs> <animate> <animateColor> <animateMotion> x1, y1 display fill fill-opacity id image-rendering <g> <svg> <animateTransform> <desc> <set> x2, y2 opacity shape-rendering stroke stroke-linecap stroke-linejoin stroke-width text-rendering transform visibility xml:space <switchGroup> <title>
<line id="line1" transform="translate(30,30)" x1="10" y1="10" x2="50" y2="50" stroke="red"/>
36
3: Adding graphic elements
<polygon>
Defines a series of straight lines that form a closed shape. Vector primitives usually have a smaller file size than an image. However, a <polygon> primitive with many points can become a large file. Space efficiency is important when building polygons for deployment on constrained wireless devices. If the .pme file becomes too large to load on the device, try to represent the same object in different ways. Complex shapes might work better as images, or perhaps may be approximated by several simpler shapes. Example Limitation
<polygon id="polygon1" points="50,10 30,30 30,60 70,60 70,30" fill="red" stroke="blue"/>
You cannot animate specific polygon points. You must redraw the whole polygon. To animate two points of a polygon, create the required number of separate polygons and cycle through them. This is a limitation of the SVG specification. To minimize file size, substitute polygons with the <rect> element.
Hint
<a> <defs> <animate> <animateColor> <animateMotion> points display fill fill-opacity id image-rendering
<g> <svg> <animateTransform> <desc> <set> opacity shape-rendering stroke stroke-linecap stroke-linejoin
<switchGroup> <title>
stroke-width text-rendering transform visibility
<polyline>
Defines a series of lines that usually form an open shape. Example Limitation
<polyline id="polyline1" points="50,10 30,30 30,60 70,60 70,30" fill="blue" stroke="red" transform="translate(20,70)"/>
Only one polyline is allowed per element. See the <path> element for more information.

<a> <defs> <animate> <animateColor> <animateMotion> points <g> <svg> <animateTransform> <desc> <set> <switchGroup> <title>
Required attributes
37
Element details Valid attributes

display fill fill-opacity id image-rendering opacity shape-rendering stroke stroke-linecap stroke-linejoin stroke-width text-rendering transform visibility
<rect>
Defines a rectangle. Example Limitation
<a> <defs> <animate> <animateColor> <animateMotion> height display fill fill-opacity id image-rendering opacity <g> <svg> <animateTransform> <desc> <set> width rx, ry shape-rendering stroke stroke-linecap stroke-linejoin stroke-opacity stroke-width text-rendering transform visibility x, y <switchGroup> <title>
<rect id="rectangle1" width="40" height="40" x="20" y="20" rx="10" fill="green" stroke="red"/>
You cannot animate height and width if rx and ry are specified.
Shape attributes
cx
cx, cy
cy
Specifies the x- and y-axis co-ordinates of the object center.

Valid values
co-ordinate
Description Specifies the x/y co-ordinate of the center of the circle or ellipse object.

0
No Yes
<circle> <ellipse>
38
height
dx
0
Valid values
measure_value
points
A list of points that make up a polygon or polyline. All co-ordinate values are in the local co-ordinate system. This is a required attribute for the <polygon> and <polyline> elements.
Valid values
co-ordinate_list
Description Specifies a list of x and y coordinates. You must format the list as follows:
x0,y0 x1,y1, x2,y2 ... xn,yn
For example,
points="50,10 30,30 30,60 70,60 70,30"

<polygon> <polyline>
39
r
Specifies the radius of a circle. This is a required attribute for the <circle> element.
Valid values
radius_length
Description Specifies the radius of the circle. This value must be a positive integer. Specifying a negative value produces an error. A value of "0" disables rendering of the element.

rx
No Yes
<circle>
rx, ry
ry
Specify the length of the x- and y-axis radii of an ellipse or a rounded rectangle. This is a required attribute of the <ellipse> element. Notes Specifying a negative value produces an error. If only a value for rx or ry is specified, then the element is processed with the same value for ry and rx. If neither is specified for a rectangle, or they have a value of "0", then square corners appear on the object. If rx is greater than half of the width of the rectangle, then the element is processed with the value for rx as half of the width of the rectangle.
Description Specifies the x or y radius length of the ellipse or rounded rectangle. This value must be a positive integer. Specifying a negative value produces an error. A value of "0" disables rendering of the element. Attribute details Default value Inherited Animatable Valid parents
1
Valid values
radius_length
Yes When used with <ellipse>. You cannot animate this attribute when used with <rect>.
<ellipse> <rect>
40
width
0
Valid values
measure_value
x, y
x y
Specify the x- and y-axis co-ordinates. If no value is specified, a value of "0" is assumed.
Valid values
co-ordinate
Description Specifies the x or y co-ordinate of the side of the parent element which has the smaller x-axis or y-axis coordinate value in the current user co-ordinate system. Typically, this is the position of the upper left corner of the object. For example, the following values:
<rect id=rect1 height="20" width="40" x="0" y="0" />
would place the upper left corner of the defined rectangle in the upper left corner of the view port in most user co-ordinate systems. Attribute details Default value Inherited Animatable Valid parents
0
Yes Yes
<rect> <svg> <text> <tspan>
41
x1, y1
x1 y1
Specify the starting point of a line. These are required attributes of the <line> element
Valid values
co-ordinate
Description Specifies the x/y co-ordinate of the starting point of the line.

x2
Yes No
<line>
x2, y2
y2
Specify the endpoint of a line. These are required attributes of the <line> element
Valid values
co-ordinate
Description Specifies the x/y co-ordinate of the starting point of the line.

0
Yes No
<line>
Text elements
<text>
Defines a graphics element that consists of text. The XML character data within the <text> elementalong with relevant attributes and propertiesdefine the glyphs that are rendered. For more information, visit the SVG 1.2 specification at http://www.w3.org/TR/SVGMobile12/. Each <text> element renders a single string of text. SVG does not automatically break lines or wrap words. To create multiple lines of text, use the <text> element for each line of text. Text strings within <text> elements will be rendered in a straight line. The location of the anchor point for a <text> element differs from most other elements. For <text> elements, the anchor point is the baseline of the font to the left of the character. This location resides on the line where text would be written. The anchor point separates the ascending and descending parts of the font.
42
Since <text> elements are rendered using the same rendering methods as other graphics elements, the same co-ordinate system transformations that apply to shapes, such as <path> and <rect>, also apply to <text> elements. Example Limitation
<text id="textline1" x="10" y="40" fill="green" font-size="12"> This is an example of text in SVG. </text>
If a font used in a scene is not in the character set for the BlackBerry device, the result might be an unexpected character (or no character at all). For correct representation, you can create an image of the text that should appear. To define a text area in which text is wrapped and is scrollable, use the <textArea> element.
Hint

<a> <defs> <a> <animate> <animateColor> display dx, dy fill fill-opacity font-family font-size <g> <svg> <animateMotion> <animateTransform> <desc> <switchGroup> <set> <title> <tspan> transform visibility x, y xml:space
font-style font-weight id stroke-opacity text-decoration text-rendering
<textArea>
Specifies a block of text and graphics to be rendered with line wrapping. It sets the font size and the scrolling rules. Example
<textArea x="10" y="10" width="75" height="75" editable="false" overflow="scroll" stroke="green" font-size="20" font-weight="normal"> Here is an example of the text area. If too much text is typed to fit into the designated area, a scroll bar will be added to facilitate scrolling. </textArea>
Hint
The SVG transcoding Utility supports the overflow attribute, which is part of the SVG-Full specification, but not part of SVG-Tiny. The overflow attribute enables you to specify whether a scroll bar is created if the contained text overflows the specified text flow area.

<g> <svg>
43
Element details Required attributes Valid attributes

height editable id width overflow x, y
<tspan>
Within a <text> element, the <tspan> element enables you to adjust the text and font properties and the current text position with absolute or relative coordinate values. Example
<text id="textline1" x="10" y="40" fill="green" font-size="12"> This is an example of <tspan fill=red>red text</tspan> in SVG. </text>
Limitations
If a font used in a scene is not in the character set for the BlackBerry device, the result might be an unexpected character (or no character at all). For correct representation, you can create an image of the text that should appear. The SVG Transcoding Utility only allows a single set of x, y and dx, dy coordinates. The SVG specification allows a list of x, y and dx, dy coordinates. The SVG Transcoding Utility does not permit any nested elements within a
<tspan> element.
display dx, dy fill fill-opacity font-family <text>

font-size font-style font-weight id stroke-opacity text-decoration text-rendering visibility x, y xml:space
44
Text attributes
dx
dx, dy
dy
Specifies the distance along the x- or y-axis that the text is shifted before the first character is rendered. Limitation The SVG 1.2 specification allows a list of values for the dx and dy attributes. The SVG Transcoding Utility only supports a single value.
Description Specifies the distance that the text is shifted in user units. This value must be a positive integer.
Valid values
co-ordinate

0
No No
<text> <tspan>
editable
Specifies whether the contents of the <textArea> element can be edited by the user.
Valid values
true false
Description Indicates that the text area is editable. Indicates that the text area is not editable.

false
No No
<textArea>
font-family
Specifies a prioritized list of font faces or generic font families to render the text.
Valid values
font_name
Description Specifies a specific font family name, such as "arial" or "Times New Roman". Font names must be enclosed in quotation marks. The font name may also be an external font that you have previously defined using the <font-face> element. Specifies a font keyword such as "serif", "sans-serif", "cursive", "monospace". Indicates that the element will inherit the font-family of the containing element.
generic_font
inherit
Attribute details Default value
45
Attribute details Inherited Animatable Valid parents Yes Yes

<a> <font-face> <g> <svg> <switchGroup> <text> <tspan>
font-size
Sets the size of a font, either in absolute terms or in relation surrounding content. During SVG transcoding, the SVG Transcoding Utility translates the integer into one of three font sizes: small, medium, or large.
Valid values
size_value
Description Specifies the size of the font. The value for this attribute can be any value together with the unit of measurement. For example, "10pt" or "6px". Units may be one of px (pixels), cm (centimeters), mm (millimeters), or pt (points). Indicates that the element will inherit the font-size of the containing element.
inherit
Attribute details Default value Inherited Animatable Valid parents 12pt Yes Yes
<a> <g> <svg> <switchGroup> <text> <tspan>
font-style
Specifies the style of font that is rendered.
Valid values
normal italic oblique
Description Indicates that no font style is applied. Applies a font with italic in its name or failing that, one with oblique in its name. Italic fonts are also sometimes named cursive or kursive. Applies a font with oblique in its name or failing that, one with italic in its name. Oblique fonts are also sometimes named slanted or inclined. Some oblique fonts are generated by electronically slanting a roman font. Indicates that the element will inherit the font-style of the containing element.
inherit

normal
Yes Yes
46
font-weight
Sets the thickness of the font.
Valid values
numerical_value
Description Specifies the absolute weight of the font. The value for this attribute can be one of 100 (lightest), 200, 300, 400, 500, 600, 700, 800, 900 (heaviest). The browser uses a standard roman font for fontweight values from 100 to 400 and a bold font for values 500 to 900. Sets the font to standard roman font weight; equivalent to 400 on the numerical scale. Sets the font to standard bold weight; equivalent to 700 on the numerical scale. Sets the font to a heavier weight than the inherited font. Sets the font to a lighter weight than the inherited font. Indicates that the font inherits the font-weight attribute of the containing element.
normal bold bolder lighter inherit

normal
Yes Yes
overflow
Specifies whether a scroll bar will be created in a <textArea> element if the contained text overflows the specified text flow area.
Valid values
scroll auto
Description Specifies that a scroll bar should be created for the text flow area. Specifies that a scroll bar will be added when the contained text overflows the specified text flow area.

auto
No No
<textArea>
text-decoration
Defines any additional decoration that is added to text enclosed within the parent element.
Valid values
none underline line-through inherit
Description Applies no text decoration to the enclosed text. Renders the enclosed text with an underline. Renders the enclosed text with a line through it. Indicates that the element inherits the decoration settings of the containing element.
47

none
No Yes
Path elements
<path>
Defines the outline of a shape, which can be filled, stroked, used as a clipping path, or any combination thereof. It may also be referenced by the <mpath> element to provide the definition of an animated motion path. A path is described using the concept of a current point. For example, when drawing a line with a pen, the current point is the location of the pen. As the pens position changes, the outline of a shape (open or closed) is traced by dragging the pen in straight or curved lines. For more information, visit the SVG 1.2 specification at http://www.w3.org/TR/SVGMobile12/. A path is defined by including a <path> element that contains the d attribute (d="path_data") that specifies moveto, line, curve (cubic and quadratic Bziers), arc, or closepath commands. See "Path data commands" on page 49 for more information. To conserve file size, commands are expressed as a single character (for example, moveto is expressed as M). Absolute co-ordinates are expressed with uppercase characters (M), and relative coordinates are expressed with lowercase characters (m). To conserve character data, x and y coordinates are implicitly defined within the d attribute, which means that the x and y attributes are omitted. Examples Defining a path:
<path id="myPath" d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />
Referencing a predefined path using <mpath>:

<animateMotion dur="6s" repeatCount="indefinite" rotate="auto"> <mpath xlink:href="#myPath"/> </animateMotion>
Limitations
All visible objects must specify a valid value for either the fill or stroke attributes. Self-intersecting polygons might not render correctly.

<a> <defs> <g> <svg> <switchGroup>
48
Element details Valid children

<animate> <animateColor> <animateMotion> d display fill fill-opacity id image-rendering opacity shape-rendering stroke stroke-linecap stroke-linejoin stroke-opacity stroke-width text-rendering transform visibility <animateTransform> <desc> <set> <title>
Path definition attributes

d
Contains path data that defines the points that make up a path, including the moveto, line, curve (both cubic and quadratic Bziers), arc and closepath instructions.
Valid values
path_data
Description Specifies the moveto, line, curve (both cubic and quadratic Bziers), arc and closepath instructions. See Path data commands on page 49 for more information on the different commands that can be used to define a path. For example:
d="M 100 100 L 300 100 q 200 300 z"

<path>
Path data commands The following path commands are used to define the points that make up a path.
Command
moveto
Character(s) M (absolute) m (relative)
Parameter(s) (x,y)+
Description Starts a new subpath at the given (x,y) co-ordinate. If a relative moveto (m) appears as the first element of the path, then it is treated as a pair of absolute co-ordinates. If a moveto command is followed by multiple pairs of co-ordinates, the subsequent pairs are treated as implicit lineto commands. For example:
M 100,100
closepath
Closes the current subpath by drawing a straight line from the current point to the initial point of the subpath.
49
Command
lineto
Character(s)
L (absolute) l (relative)
Parameter(s) (x,y)+
Description Draws a straight line from the current point to the given (x,y) co-ordinate, which becomes the new current point. To draw a polyline, specify a number of co-ordinate pairs. At the end of the command, the new current point is set to the final set of co-ordinates provided. For example:
l 100,100
horizontal
lineto
H (absolute) h (relative)
(x)+
Draws a horizontal line from the current point (cpx,cpy) to (x,cpy). For example: h -10
vertical lineto V (absolute)

v (relative)
(y)+
Draws a vertical line from the current point (cpx,cpy) to (cpx,y). For example:
V 100
cubic Bzier
curveto
C (absolute) c (relative)
(x1,y1 x2,y2 x,y)+ Draws a cubic Bzier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. To draw a polyBzier, specify multiple sets of co-ordinates. At the end of the command, the current point becomes the final (x,y) co-ordinate pair used in the polyBzier. For example:
C100,100 250,100 250,200
smooth cubic Bzier

curveto
S (absolute) s (relative)
(x2,y2 x,y)+
Draws a cubic Bzier curve from the current point to (x,y). The
first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. If there is no previous command or if the previous command was not a C, c, S, or s, assume the first control point is coincident with the current point. (x2,y2) is the second control point (that is, the control point at the end of the curve). To draw a polyBzier, specify multiple sets of co-ordinates. At the end of the command, the current point becomes the final (x,y) co-ordinate pair used in the polyBzier. For example:
S400,300 400,200
quadratic Bzier Q (absolute)

curveto q (relative)
(x1,y1 x,y)+
Draws a quadratic Bzier curve from the current point to (x,y) using (x1,y1) as the control point.
To draw a polyBzier, specify multiple sets of co-ordinates. At the end of the command, the current point becomes the final (x,y) co-ordinate pair used in the polyBzier. For example:
Q400,50 600,300
50
Command
Character(s)
Parameter(s) (x,y)+
Description
Draws a quadratic Bzier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. If there is no previous command or if the previous command was not a C, c, S, or s, then assume the first control point is coincident with the current point.
smooth T (absolute) quadratic Bzier t (relative)

curveto
(x2,y2) is the control point at the end of the curve. For example:
T1000,300
elliptical arc
A (absolute) a (relative)
(rx,ry
x-axis-rotation large-arc-flag, sweep-flag x,y)+
Draws a segment of an ellipse from the current point to (x,y). The size and orientation of the ellipse are defined by two radii (rx,ry) and an x-axis-rotation, which indicates how the ellipse as a whole is rotated relative to the x-axis of the current co-ordinate system. The center (cx,cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large-arc-flag and sweep-flag contribute to the automatic calculations and help to determine how the arc is drawn. For example:
a25,25 -30 0,1 50,-25 l 50,-25
Image elements
<image>
Indicates that the contents of a complete external image file are to be rendered into the current user co-ordinate system. Image file format support depends on the handheld type. Example Note
<image x="0" y="0" height="40" width="40" xlink:href="myImage.png" preserveAspectRatio="xMinYMin Slice"/>
The SVG Transcoding Utility does not check to see if the resource exists or not. If the SVG Transcoding Utility is producing a .pmb file, it will try to retrieve the image; if it cannot find the image at the specified location, an error is reported.

<a> <defs> <animate> <animateColor> <animateMotion> xlink:href height <g> <svg> <animateTransform> <desc> <set> width <switchGroup> <title>
Required attributes
51
Element details Valid attributes

display id image-rendering preserveAspectRatio shape-rendering text-rendering transform visibility x, y
Image attributes
height
0
Valid values
measure_value
preserveAspectRatio
Defines the behavior when a nested <svg> scene or an image is rendered in a view port that is of a different size than the image dimensions. The value of preserveAspectRatio has two components: one which specifies how the scene or image is aligned within the view port, and one which specifies whether it is scaled or cropped to fit into the view port.
52
If the preserveAspectRatio attribute is not specified at all, the image is stretched to fill the view port. Limitation The SVG Transcoding Utility does not support the use of this attribute with the <pattern> element.
Description Indicates that any scaling required will be uniform. The two components of this value specify how the image is aligned and whether the image is scaled or cropped. The alignment component can have one of the following values:
xMinYMin: aligns the viewbox to the top left corner of the view port xMinYMid: vertically centers the viewbox along the left edge of the view port xMinYMax: aligns the viewbox to the bottom left corner of the view port xMidYMin: horizontally centers the viewbox along the top edge of the view port xMidYMid: aligns the viewbox to the horizontal and vertical center of the view port xMidYMax: Horizontally centers the viewbox along the bottom edge of the view port XMaxYMin: aligns the viewbox to the top right corner of the view port XMaxYMid: vertically centers the viewbox along the right edge of the view port XMaxYMax: aligns the viewbox to the bottom right corner of the view port
Valid values
align_&_scale
The scaling component is optional and can have one of the following values:
meet: The image is uniformly scaled to fit into the view port, with no cropping; transparent
padding is applied to fill out the rest of the view port. If no scaling component is specified, then
meet is assumed.
slice: The aspect ration is preserved; the content is cropped to fit into the view port. The
cropped image will fill the entire view port such that no padding is necessary. For example, to preserve the aspect without clipping and with equal padding on either side of the image or scene, you could specify the following:
preserveAspectRatio="xMidYMid meet" none
Indicates that any scaling required will not be uniform. The image will be rendered such that it completely fills the view port.

xMidYMid meet
No Yes
<image> <svg>
53
width
0
Valid values
measure_value
xlink:href
Valid values
resource_URL
54

Pattern elements
<pattern>
Defines an image to use as pattern for an SVG shape element. The <pattern> element must be a child of <defs>, and must have a child <image> element, which defines the image that is used as basis for the pattern. Once the pattern is defined, it can be referenced as the fill of a shape element. The defined image is tiled to fill the shape. Example Defining a pattern:
<defs> <pattern id="pattern1" patternUnits="userSpaceOnUse" x="25" y="10" height="40" width="40"> <image x="0" y="0" height="40" width="40" xlink:href="myTile.png"/> </pattern> </defs>
Referencing a pattern:
<rect id="rect1" x="25" y="10" height="60" width="120" stroke-width="3" stroke="limegreen" fill="url(#pattern1)" />
Note
The SVG Transcoding Utility does not check to see if the resource exists or not. If the SVG Transcoding Utility is producing a .pmb file, it will try to retrieve the image; if it cannot find the image at the specified location, an error is reported. The <pattern> element must have a single <image> element as a child. The SVG Transcoding Utility does not support a tile size that has a different height and width than the image used as the basis for the pattern. You cannot animate the height and width attributes for the <pattern> element.
Limitations
Element details Valid parents Valid children Required attributes

<defs> <image>
55
Element details Optional attributes

height id patternTransform patternUnits width x, y
Pattern attributes
patternTransform
Transforms the image used as the basis for the pattern. This allows the pattern to be rotated, scaled or skewed prior to being applied.
Valid values
translate(tx,[ty])
Description Positions an element. This attribute can have two parameters:

tx: specifies the number of units the element will be moved along the x-axis ty: specifies the number of units the element will be moved along the y-axis; if ty is
not specified, it is assumed to be zero

scale(sx,[sy])
Scales an element. This attribute can have two parameters:

sx: specifies the change in scale, as a percentage of the original width sy: specifies the change in scale, as a percentage of the original height; if sy is not
specified, it is assumed to be equal to sx

rotate(angle,[cx, cy] )
Rotates an element. This attribute can have three parameters:

angle: specifies the rotation angle, in degrees; a positive value rotates the object clockwise, while a negative value rotates the object counter-clockwise cx: defines the x-axis co-ordinate used as the center of rotation cy: defines the y-axis co-ordinate used as the center of rotation
skewX(angle)
Skews an object by a specified angle along the x-axis. This property has a single parameter:
angle: defines the angle at which the x-axis coordinates will be skewed
skewY(angle)
Skews an object by a specified angle along the y-axis. This property has a single parameter:
angle: defines the angle at which the y-axis coordinates will be skewed

<pattern>
56
patternUnits
Defines how the co-ordinate system for those attributes that define how to tile the pattern (that is, x, y, width and height) are established. Limitations The SVG Transcoding Utility currently only supports the userSpaceOnUse value for this attribute. The objectBoundingBox value, which is the default specified by the SVG specification, is not currently supported. If a value other than userSpaceOnUse is specified, the transcoder will produce a warning.
Description Establishes co-ordinates based on the current user coordinate system in place at the time the <pattern> element is applied.
Valid values
userSpaceOnUse

<pattern>
Attributes for graphic elements

Paint attributes
Paint attributes define the fill and stroke properties for basic shapes, text, and paths. These attributes can be inherited from container elements such as <a> and <g>.
fill
Specifies the color to paint the interior (inside the stroke or outline) of an object. When rendering the inside of a shape, all subpaths are considered. The zero-width geometric outline of a shape is included in the painted area. When the fill attribute is applied to open subpaths within <path> elements (subpaths without a closepath command) and to <polyline> elements, it automatically closes all open subpaths by connecting the last point of the subpath with the first point of the subpath before painting the fill. Note Animating the fill attribute cycles through the specified colors. Color must be animated as a whole.
57
Valid values
paint_value
none: indicates that no paint is applied Any valid color: a valid color can be specified using:
an RGB value ("250,239,111") Hexidecimal notation ("#770aff" or "#70f" (equal to "#7700ff")) a valid textual color name ("lightgoldenrodyellow")
inherit
The element inherits the fill attribute of the containing element.

black
Yes Yes
<a> <circle> <ellipse> <g> <line> <path> <polygon> <polyline> <rect> <svg> <switchGroup> <text> <tspan>
stroke
Specifies the outline paint color of the object.
Valid values
paint_value
none: indicates that no paint is applied Any valid color: a valid color can be specified using:
an RGB value ("250,239,111") Hexidecimal notation ("#770aff" or "#70f" (equal to "#7700ff")) a valid textual color name ("lightgoldenrodyellow")
inherit
The element inherits the stroke attribute of the containing element.

none
Yes Yes
<circle> <ellipse> <image> <line> <path> <polygon> <polyline> <rect> <text> <tspan>
58
stroke-linecap
Specifies the shape to be used at the end of an open sub-path, when a visible stroke has been specified.
Valid values
butt round square inherit
Description Indicates that the line is capped with square ends. Indicates that the stroke is capped with semi-circular ends that extend half the stroke width past the start and end co-ordinates of the line. Indicates that the line is capped with a square end that projects half the stroke width past the start and end co-ordinates of the line. Indicates that the element inherits the stroke-linecap attribute of the containing element.

butt
Yes Yes
<a> <circle> <ellipse> <g> <line> <path> <polygon> <polyline> <rect> <svg> <switchGroup>
stroke-linejoin
Specifies the shape to be used at the corners of paths or shapes, when a visible stroke has been specified.
Valid values
miter round bevel inherit
Description Indicates that corners are pointed. Indicates that corners are rounded. Indicates that corners are blunted at an angle equal half the angle of the path. That is, if the path is a 90 degree angle, the outer stroke corner would be beveled to a 45 degree angle. Indicates that the element inherits the stroke-linejoin attribute of the containing element.

miter
Yes Yes
59
stroke-width
Specifies the width of an objects outline.
Valid values
measure_value
inherit
Description Specifies the width of the stroke. The value of this attribute must be a positive integer. A width of 0 indicates that no outline will be rendered. Indicates that the element inherits the stroke-width attribute of the containing element.

1
Yes Yes
Opacity attributes
fill-opacity
Specifies the opacity of the interior of an object. Note The actual opacity of the object fill is determined by multiplying the value of fill-opacity with the opacity of the object as a whole, specified using the opacity attribute. See "opacity" on page 61 for more information.
Description Indicates the opacity of the interior of an object. This attribute must have a value between 0 and 1, with 0 being completely transparent and 1 being completely opaque. For example:
fill-opacity=".75" inherit
Valid values
opacity_value
The element inherits the fill-opacity attribute of the containing element.

1
Yes Yes
60
opacity
Specifies the opacity an object. Limitation If the object to which the opacity attribute is being applied has a thick stroke width, opacity is rendered as a combination of stroke-opacity and fill-opacity.
Description Specifies the object opacity. This attribute must have a value between 0 and 1, with 0 being completely transparent and 1 being completely opaque. For example,
opacity=".75"
Valid values
opacity_value

1
No Yes
<circle> <ellipse> <line> <path> <polygon> <polyline> <rect>
stroke-opacity
Specifies the opacity of the outline of an object. Note The actual opacity of the stroke is determined by multiplying the value of stroke-opacity with the opacity of the object as a whole, specified using the opacity attribute. See "opacity" on page 61 for more information. The SVG Transcoding Utility does not support the stroke-opacity attribute for <text> and <tspan>.
Description Specifies the opacity of the stroke. This attribute must have a value between 0 and 1, with 0 being completely transparent and 1 being completely opaque. For example,
stroke-opacity=".75" inherit
Limitation
Valid values
opacity_value
The element inherits the stroke-opacity attribute of the containing element.

1
Yes Yes
61
Graphic rendering attributes

Graphic rendering attributes provide rendering hints for graphic elements.
display
Specifies whether an entire subtree of the SVG is visible.
Valid values
none
Description Prevents the subtree from being rendered. Indicates that the browser should render the entire subtree. Values may be one of:
block inline list-item marker run-in compact table inline-table table-row-group table-column table-column-group table-header-group table-footer-group table-row table-cell table-caption
display_value
Note: The SVG Transcoding Utility does not distinguish between these values as specified in the SVG 1.2 specification. All values simply indicate that the subtree will be rendered.
inherit
Indicates that the element inherits the display attribute of the containing element.

inline
Yes Yes
<a> <circle> <ellipse> <g> <image> <line> <path> <polygon> <polyline> <rect> <svg> <text> <tspan>
image-rendering
A hint to the browser for how it should handle the anti-aliasing of image objects.
Valid values
auto optimizeSpeed optimizeQuality inherit
Description Indicates that no anti-aliasing is performed on the object. Indicates that no anti-aliasing is performed on the object. Indicates that anti-aliasing is performed on the object. Indicates that the element inherits the image-rendering attribute of the containing element.
62

auto
Yes Yes
shape-rendering
Informs the browser how it should handle the anti-aliasing of shape objects.
Valid values
auto optimizeSpeed crispEdges geometricPrecision inherit
Description Informs the browser to anti-alias the object. Informs the browser not to anti-alias the object. Informs the browser not to anti-alias the object. Informs the browser to anti-alias the object. Indicates that the element inherits the shape-rendering attribute of the containing element.

auto
Yes Yes
text-rendering
Informs the browser how it should handle the anti-aliasing of text objects.
Valid values
auto optimizeSpeed optimizeLegibility geometricPrecision inherit
Description Informs the browser not to anti-alias the object. Informs the browser not to anti-alias the object. Informs the browser to anti-alias the object. Informs the browser to anti-alias the object. Indicates that the element inherits the text-rendering attribute of the containing element.
Attribute details Default value Inherited Animatable

auto
Yes Yes
63

visibility
Specifies whether an item is visible. Visibility is applied on an object by object basis. Note If the visibility property is set to hidden on a <tspan> element, text is invisible, but will still occupy space in text layout calculations.
Description Indicates that the current element is drawn on the screen. Indicates that the current element is not drawn on the screen. Indicates that the element inherits the visibility attribute of the containing element.
Valid values
visible hidden inherit

visible
Yes Yes
Style attributes
style
Defines multiple presentation attributes using a single attribute with a semicolon-separated list of property declarations.
Valid values
value_list
Description A semicolon-separated list of property declarations of the following form: "name1:value1;

name2:value2". For example: style="fill:green; stroke:red"
Properties that can be defined using the style attribute include:

display fill stroke visibility
Attribute details Default value
64
Attribute details Inherited Animatable Valid parents No No

<a> <circle> <ellipse> <g> <line> <image> <path> <polygon> <polyline> <rect> <svg> <switchGroup> <text>
Static transformation attributes

transform
Transforms an element by altering its position, size, or rotation or by skewing its x- or y-axis. This is a compound attribute which can have a list of one or more values that are separated by whitespace or a comma. For example:
<rect transform="skewX(30) scale(20,20) rotate(45)">
Note
Transforms are cumulative; that is, specifying translate (20,30) adds 20 to an elements current position on the x-axis and 30 to its current position on the y-axis.
Description Specifies six values which define the transformation. You can find more information about using a transformation matrix at http://www.w3.org/TR/SVG/ TransformMatrixDefined. Positions an element. This attribute can have two parameters:
tx: specifies the number of units the element will be moved along the x-axis ty: specifies the number of units the element will be moved along the y-axis; if ty
Valid values
matrix(a b c d e f)
translate(tx,[ty])
is not specified, it is assumed to be zero

scale(sx,[sy])
Scales an element. This attribute can have two parameters:

sx: specifies the change in scale, as a percentage of the original width sy: specifies the change in scale, as a percentage of the original height; if sy is not specified, it is assumed to be equal to sx angle: specifies the rotation angle, in degrees; a positive value rotates the object clockwise while a negative value rotates the object counter-clockwise. cx: defines the x-axis co-ordinate used as the center of rotation cy: defines the y-axis co-ordinate used as the center of rotation
rotate(angle,[cx, cy] )
Rotates an element. This attribute can have three parameters:
skewX(angle)
Skews an object by a specified angle along the x-axis. This property has a single parameter:
angle: defines the angle at which the x-axis coordinates will be skewed; the angle can be specified as degrees (deg), grads (grad), or radians (rad); if no units are specified, degrees is assumed
65
Valid values
skewY(angle)
Description Skews an object by a specified angle along the y-axis. This property has a single parameter:
angle: defines the angle at which the y-axis coordinates will be skewed; the angle can be specified as degrees (deg), grads (grad), or radians (rad); if no units are specified, degrees is assumed

<a> <circle> <ellipse> <g> <image> <line> <path> <polygon> <polyline> <rect> <switchGroup> <text>
66
4
Adding animation and media
Animation elements Audio elements Attributes for animation and media Defining motion paths
Animation elements
<animate>
The <animate> element animates a single attribute. It enables you to manipulate integer fields (such as width and height) and non-integer fields (such as fill and visibility). Example
<rect x="0" y="0" width="20" height="100" style="fill:#44AAFF;stroke:#880088; stroke-width:4;"> <animate attributeName="height" calcMode="linear" values="100;85;60;10" keyTimes="0;.25;.5;1" begin="0s" dur="8s" fill="freeze"/> </rect>

<circle> <ellipse> <g> <image> attributeName accumulate additive attributeType begin by calcMode <line> <path> <polygon> <polyline> dur end fill from id keyTimes repeatCount restart to values xlink:href xml:space <rect> <svg> <text>
<animateColor>
The <animateColor> element transforms color over a specified time. This element enables you to animate the stroke and fill of a shape. Example
<circle id="circle1" r="100" cx="100" cy="50" fill="red" stroke-width="0"> <animateColor from="red" to="blue" dur="10s" fill="freeze" /> </circle>

<circle> <ellipse> <g> <image> attributeName accumulate additive attributeType begin by calcMode <line> <path> <polygon> <polyline> dur end fill from id keyTimes repeatCount to restart values xlink:href xml:space <rect> <svg> <text>
<animateMotion>
This element specifies that the position of a shape or image is translated along a specific path. The motion path can be specified using the path attribute (defined the same way as the d attribute used by the <path> element) or it can reference an existing path with a child <mpath> element. See Defining motion paths on page 84 for more information. Example Defining the motion path using the path attribute:
<rect id="r1" x="10" y="10" width="20" height="20"> <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" path="M100,250 C 100,50 400,50 400,250" /> </rect>
Referencing an existing path:

<rect id="r1" x="10" y="10" width="20" height="20"> <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"> <mpath xlink:href="#myPath"/> </animateMotion> </rect>
68
4: Adding animation and media

<circle> <ellipse> <g> <image> <mpath> dur accumulate additive begin by calcMode end fill from id keyPoints keyTimes path repeatCount restart rotate to values xlink:href xml:space <line> <path> <polygon> <polyline> <rect> <svg> <text>
<animateTransform>
This element animates the transform attribute on a parent element (for example, <g>, <polyline>, <path>). Example
<rect transform="skewX(30)" x="10" y="10 width="60" height="30" fill="red" stroke="black"> <animateTransform attributeName="transform" type="rotate" from="0" to="90" dur="5s" additive="sum" fill="freeze"/> <animateTransform attributeName="transform" type="scale" from="1" to="2" dur="5s" additive="sum" fill="freeze"/> <animateTransform attributeName="transform" type="translate" to="20,10" dur="5s" additive="sum" fill="freeze"/> </rect>

<circle> <ellipse> <g> <image> attributeName dur accumulate additive attributeType begin by calcMode <line> <path> <polygon> <polyline> to type end fill from id keyTimes repeatCount restart values xlink:href xml:space <rect> <svg> <text>
69
<seq>
This element defines a sequence of behaviors that execute in order. The behaviors that are part of the sequence must be placed within the <seq> element in the order in which they are to be played. Example
<rect x="100" y="10" width="60" height="140" fill="orange" /> <circle id="red" cx="130" cy="40" r="15" fill="black" /> <circle id="yellow" cx="130" cy="80" r="15" fill="black" /> <circle id="green" cx="130" cy="120" r="15" fill="black" /> <seq repeatCount="indefinite"> <animateColor attributeName="fill" xlink:href="#green" from="black" to="red" dur="500ms" fill="freeze"/ > <animateColor begin="3s" attributeName="fill" xlink:href="#green" from="rgb(0,255,0)" to="black" dur="500ms" fill="freeze"/> <animateColor attributeName="fill" xlink:href="#yellow" from="black" to="yellow" dur="500ms" fill="freeze"/> <animateColor begin="1s" attributeName="fill" xlink:href="#yellow" from="yellow" to="black" dur="500ms" fill="freeze"/> <seq> <animateColor attributeName="fill" xlink:href="#red" from="black" to="red" dur="500ms" fill="freeze"/> <animateColor begin="3s" attributeName="fill" xlink:href="#red" from="red" to="black" dur="500ms" fill="freeze"/> </seq> </seq>
Limitations
This element may not be placed within its target as many other animations are. The begin attribute for all children must be a single non-negative clock value, which specifies an offset from the end of the previous element, or, in the case of the first child, from the start of the sequence. The default value is 0s. If the dur attribute is specified for the sequence, or if the repeatCount for the sequence is a definite value of greater than 1, the duration of every child must be definite. Usually this means that for each child element: the dur attribute must be specified without an end condition the repeatCount attribute value is not indefinite.

Children of <seq> may not be targeted by hyperlinks. You cannot animate the attributes of <seq>.
<seq> <animate> <animateColor>
<svg> <animateMotion> <animateTransform> <audio>
70
Element details Required attributes Optional attributes

begin dur id repeatCount
<set>
This element sets the value of an attribute for a specified duration. It enables you to manipulate integer fields (such as widthand height) and non-integer fields (such as fill and visibility). The <set> element supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. The accumulate and additive attributes are unsupported and are ignored if specified. Example
<g transform="translate(100,100)"> <text id="TextElement" x="0" y="0" font-family="Verdana" font-size="35.27" visibility="hidden"> It's alive! <set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze"/> <animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze"/> <animateColor attributeName="fill" attributeType="CSS" from="rgb(0,0,255)" to="rgb(128,0,0)" begin="3s" dur="6s" fill="freeze"/> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze"/> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="3s" dur="6s" fill="freeze"/> </text> </g>

<a> <circle> <ellipse> <g> <image> <desc> attributeName attributeType begin dur <line> <path> <pattern> <polygon> <polyline> <title> end fill id repeatCount restart to xlink:href <rect> <svg> <text>
71
Audio elements
Note: The custom Plazmic elements <audioclip*> and <audiostop*> have been deprecated in order to conform more closely with the SVG 1.2 specification. If the SVG Transcoding Utility encounters any <audioclip*> elements during the transcoding process, it issues a warning and converts the element as if it was an <audio> element. If the SVG Transcoding Utility encounters an <audiostop*> elements , it will produce an error.
<audio>
Specifies an external audio file for synchronized audio playback. Example Notes
<audio xlink:href="ping.mid" id="ping" begin="anim1.end -2s" repeatCount="2"/>
The SVG Transcoding Utility does not check to see if the resource exists or not. If the SVG Transcoding Utility is producing a .pme file, it will try to retrieve the audio file; if it cannot find the audio file at the specified location, an error is reported. Audio clips might sound different on different wireless handhelds. Refer to the Plazmic Content Developers Kit User Guide for information on audio guidelines.
Limitation
The audio file must be in a format supported by the BlackBerry device. The SVG Transcoding Utility does not verify that the audio file is in a supported audio file format.
xlink:href begin dur end id repeatCount restart <g> <svg>
72
Attributes for animation and media

Target attributes
The following attributes are used to identify the attribute that will be targeted by a child animation element.
attributeName
Specifies the name of the target attribute.
Valid values
attribute_name
Description Identifies the name of an attribute of the target object. This value may be any alphanumeric string. An XMLNS prefix may be appended.

<animate> <animateColor> <animateMotion> <animateTransform> <set>
attributeType
Specifies the namespace in which the target attribute is defined.
Valid values
XML CSS auto
Description Indicates that the value of attributeName is the name of an XML attribute defined in the default XML namespace for the target element. Indicates that the value of attributeName is the name of a CSS property. The browser determines what namespace attributeName belongs to at the time of implementation.

auto
No No
<animate> <animateColor> <animateMotion> <animateTransform> <set>
73
Timing attributes
The following attributes are used to set timing values for animation and audio elements.
begin
Defines when an animation or audio element begins or becomes active. Multiple triggers can be specified.
Valid values
trigger_list
Description Specifies a semicolon-separated list of one or more triggers. See Defining triggers for begin and end attributes on page 77 for a list of valid triggers. Multiple trigger values must be separated by semicolons.

offset_value = 0s
No No
<animate> <animateColor> <animateMotion> <animateTransform> <audio> <seq> <set>
dur
Specifies the simple duration of the media, that is, the length it takes for one complete iteration of the media to be played. Note By default, the value for dur is assumed to be indefinite. However, be aware that you cannot animate interpolation if the value of dur is indefinite.
Description Specifies the elapsed time in terms of presentation time. You can specify units of time as ms (milliseconds), min (minutes), or h (hours). If no unit is specified, the value is assumed to be in seconds. This value must be greater than zero (0).
media indefinite
Valid values
clock_value
Indicates that the animation lasts for the duration of the media. This is only valid for elements that define media. Indicates that the animation will continue indefinitely.

indefinite
No No
74
end
Defines when the animation/media ends or becomes inactive. Multiple triggers can be specified. Limitation The end attribute can constrain but cannot extend the animation/media that is defined by dur or repeatCount. If the animation/media becomes inactive before the defined end trigger(s) occur, end is ignored.
Description A semicolon-separated list of one or more triggers. See Defining triggers for begin and end attributes on page 77 for a list of valid triggers. Multiple trigger values must be separated by semicolons.
Valid values
trigger_list

offset_value = 0s
No No
fill
Specifies the behavior of the animation/media when stopped due to completion or some other end trigger.
Valid values
freeze remove
Description Freezes the animation/media at the point at which it stopped for the remainder of the document duration or until the animation is restarted. Returns the animation/media to its initial state.

remove
No No
75
repeatCount
Specifies the number of times the media plays in succession.
Valid values
numeric_value
Description Specifies the number of times the media clip is played. A value of 1 indicates that the clip is played once, with no repetition. For example, the following definition repeats the entire 4.5-second clip three times, such that the total active duration of the media is 13.5 seconds:
<animate attributeName="top" from="0" to="10" dur="4.5s"repeatCount="3" />
media
Specifies the length of the media clip as the minimum value.
Attribute details Default value Inherited Animatable Valid parents 1 No No

restart
Specifies how an animation reacts to a begin trigger when the animation is already active.
Valid values
always whenNotActive never
Description Indicates that the animation/media can be restarted at any time. Indicates that the animation/media can be restarted only if it is not currently active. Any attempts to restart the animation while it is already active are ignored. Indicates that the animation can never be restarted. Once it has played once, it cannot play again.

always
No No
76
Defining triggers for begin and end attributes The following are valid values that can define the begin and end triggers for animations and media.
Animation trigger
accessKey_value
Description Triggers an animation when the user presses the given access key on the BlackBerry keypad. This trigger takes the following syntax:
accessKey(keypad_character)[offset_value]
For example, accessKey(a) triggers the animation when the user presses the A key on the BlackBerry keypad. An accessKey trigger can also be tied to a visual object. By tying the trigger to a visual object, you can trigger different animations when the same key is pressed, depending on what object has focus on the screen. For example, Circle1.accessKey(a) can trigger a particular animation when the Circle1 object has focus and the user presses A on the BlackBerry keypad, while Rect1.accessKey(a) can trigger a different animation when the Rect1 object has focus and the user presses A. This trigger has the following parameters:
keypad_character: any key on the handheld keypad
event_value
Note: For users accessing content on a BlackBerry device with a SureType keypad (which has two letters on each key), only the first letter assigned to the key can be used to trigger an animation. For example, accessKey(t) can trigger an animation because T is the primary letter on the key on a SureType keypad, whereas accessKey(y) will have no effect. offset_value: the amount of time after the access key has been pushed that the animation is triggered
Triggers an animation based on the occurrence of a defined event. This trigger takes the following syntax:
animation_id.event[offset_value]
For example, anim1.end triggers when the animation anim1 ends. This trigger has the following parameters:
offset_value animation_id: specifies the id of the animation whose event is used as the basis for the
trigger; the ID of the parent element is assumed if this value is excluded

event: specifes the event that, when it occurs, triggers the animation; see http://www.w3.org/
TR/SVG11/interact.html#SVGEvents for a complete list of events

offset_value: specifies the amount of time before or after the specified event has occurred
that the animation is triggered Triggers an animation that is temporally offset relative to the SVG document begin.
[+|-]time_value
For example, 5s triggers the event five seconds after the document has been triggered. This trigger has the following parameters:
time_value: a numerical value with a time unit that specifies the time of the trigger relative
to the event
77
Animation trigger
repeat_value
Description Triggers an event when the specified repeated event begins the specified iteration. This trigger takes the following syntax:
repeated_animation_id.repeat(iteration_value)[offset_value]
For example, anim1.repeat(3) triggers the event when the animation anim1 begins its third iteration. This trigger has the following parameters:
syncbase_value repeated_animation_id: the ID of the repeated animation used as the basis for the trigger iteration_value: a numerical value representing which iteration of the repeated animation
will trigger the event time_value: a numerical value with a time unit that specifies the time of the trigger relative to the occurrence of the specified iteration
base_animation_id.begin|end[offset_value]
Triggers an event relative to a given syncbase. This trigger takes the following syntax: For example, anim1.end -2s triggers the event two seconds before the animation "anim1" ends. This trigger has the following parameters:
base_animation_id: the ID of the repeated animation used as the basis for the trigger offset_value: the amount of time before or after the specified event has occurred that the
animation is triggered
indefinite
The event is triggered by another command or element.
Animation value attributes

The following table includes a list of attributes used by all SVG elements described in the previous tables.
by
Specifies a relative offset value for the animation. Note Hint The attributes by, from, and to may be used in combination, but cannot be used with the keyTimes attribute. The by and from attributes are used in combination, for example: If from equals "1" to "5" and by equals "1", the following values are returned:
1, 2, 3, 4, 5.
If from equals "1" to "5" and by equals "2", the following values are returned:
1, 3, 5.
Valid values
offset_value
Description Specifies the number of units by which the animation will be offset.

1
No No
<animate> <animateColor> <animateMotion>
78
calcMode
Specifies the interpolation mode for an animation. Note When linear interpolation is not supported (for example, strings), calcMode is ignored. Instead, discrete interpolation is used.
Description Specifies that the animation function will jump from one value to the next without any interpolation. Specifies that simple linear interpolation is used to calculate the animation function. Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of distance between points can be calculated (for example, position, width, height). Note: If paced is specified, keyTimes is ignored. Attribute details Default value Inherited Animatable Valid parents No No
<animate> <animateColor> <animateMotion> <animateTransform>
Valid values
discrete linear paced
For <animate>, <animateColor>, and <animateTransform>: linear For <animateMotion>: paced
from
Specifies the starting value of the animation. This attribute is used in combination with the to attribute. Note The attributes by, from, and to may be used in combination, but cannot be used with the keyTimes attribute.
Description Specifies the starting value of the animation. The value for this attribute must be correspond to a valid value for the attribute specified by attributeName. For example, if the value of attributeName is fill, then the from attribute could have the following value,
from="rgb(160,160,160)"
Valid values
start_value

0
No No
79
keyPoints
Indicates how far along the motion path an object will move at the moment in time (a corresponding keyTimes value). Note There must be exactly as many keyPoints values as there are keyTimes values. Distance calculations use the user agent's distance along the path algorithm. If the value for keyPoints contains invalid values, or has too many or too few values, an error is generated.
Description Specifies a semicolon-separated list of floating point values between 0 and 1 that indicate how far along the motion path the object shall move at the moment in time specified by corresponding keyTimes value. Each progress value in the list corresponds to a value in the keyTimes attribute list. For example, if keyTimes="0;.33;.66;1" then a possible value for keyPoints might be the following:
keyPoints="0;0.25;0.5;1"
Valid values
point_values

0
No No
<animateMotion>
keyTimes
A list of time values used to control the pacing of the animation. Notes The attributes by, from, and to cannot be used with the keyTimes attribute. If a list of keyTimes and values is specified, the number of values in each list must be equal. Each successive time value must be greater than the preceding time value. The requirements for the value of this attribute are dependent on the value of the calcMode attribute: If calcMode="linear", the first time value in the list must be 0, and the last time value in the list must be 1. The key time associated with each value defines when the value is set; values are interpolated between the key times. If calcMode="discrete", the first time value in the list must be 0. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined by keyTimes. If calcMode="paced", the keyTimes attribute is ignored.
80
Valid values
time_values
Description Specifies a list of time values used to control the pacing of the animation. The keyTimes attribute represents a proportional offset into the simple duration (dur) of the animation element. Each time in the list corresponds to a value in the values attribute list (when supplied) and defines when the value is used in the animation function. For example:
keyTimes="0;.25;.5;.75;1"

0
No No
to
Specifies the value the attribute has when the animation element finishes. Use this attribute in combination with the from attribute. Note The attributes by, from, and to can be used in combination, but cannot be used with the keyTimes attribute.
Description Specifies the end value of the animation. The value for this attribute must correspond to a valid value for the attribute specified by attributeName. For example, if the value of attributeName is fill, then the to attribute could have the following value,
to="rgb(160,160,160)
Valid values
end_value

0
No No
values
Specifies a list of values that are used during an animation function. Note The keyTimes and values attributes must have exactly the same number of values.
81
Valid values
value_list
Description Specifies a set of values that are used when a key time (specified by the keyTimes attribute) is reached during an animation. The number of values must equal the number of keyTimes values. For example, if you are animating the fill color of a shape and specified five key times, the values attribute may have the following values:
values="black;rgb(255,0,0);green;#0000FF;black"

0
No No
Addition attributes
accumulate
Controls whether the animation is cumulative. This attribute defines only how the animation function interacts with itself across repeat iterations. Notes This attribute is ignored in the following instances: when the target attribute value does not support addition when the animation does not repeat itself when the animation element is specified with only the to attribute
Valid values
none
Description Indicates that repeated iterations are not cumulative. That is, each time the animation is repeated, the animated object uses the same start value and ends with the same end value. For example, the following code sample would increase the width of an object from 0 pixels to 10 pixels over a 10-second period. For the next iteration, the width would return to 0 pixels and would again increase to 10 pixels. After 5 iterations, the end result is a width of 10 pixels:
<animate attributeName="width" from="0px" to="10px" dur="10s" additive="sum" accumulate="none" repeatCount="5"/>
sum
Indicates that each repeat iteration after the first builds upon the last value of the previous iteration. That is, each time the animation is repeated, the animated object uses as its start value the end value of the previous iteration. For example, the following code sample would increase the width of an object from 0 pixels to 10 pixels over a 10-second period. For the next iteration, the starting width would be 10 pixels, and would increase to 20 pixels. After 5 iterations, the end result is a width of 50 pixels:
<animate attributeName="width" from="0px" to="10px" dur="10s" additive="sum" accumulate="sum" repeatCount="5"/>
82

none
No No
additive
Controls whether or not the animation is additive. This attribute defines how an animation is combined with other animations and the base value of the attribute. Notes This attribute is ignored in the following instances:
Valid values
replace
when the target attribute value does not support addition when the animation element is specified with only the to attribute
Description Indicates that the animation overrides the underlying value of the target attribute and other lower priority animations. The behavior is affected by the animation value attributes by and to. Indicates that the animation adds to the underlying value of the target attribute and other lower priority animations. For example:
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" additive="sum" begin="3s" dur="6s" fill="freeze"/>
sum

replace
No No
Rotation attributes
rotate
Rotates an object relative to the directional tangent vector of the motion path. You can specify a given angle of rotation, or indicate that the object should be rotated automatically so that its x-axis points in the same direction (or opposite direction) as the directional tangent vector of the motion path.
Valid values
angle_value
Description Specifies an angle relative to the x-axis.
83
Valid values
auto auto-reverse
Description Indicates that the object is rotated over time by the angle of the direction of the motion path. Indicates that the object is rotated over time by the angle of the direction of the motion path plus 180 degrees.

0
No No
<animateMotion>
Transformation attributes
type
Specifies what type of transformation the <animateTransform> element will perform upon its parent element. Note Transforms are cumulative; that is, specifying translate(20,30) adds 20 to an elements current position on the x-axis and 30 to its current position on the y-axis.
Description Repositions an element on the canvas. Scales an element. Rotates an element. Skews an object by a specified angle along the x-axis. Skews an object by a specified angle along the y-axis.
Valid values
translate scale rotate skewX skewY

<animateTransform>
Defining motion paths

There are two ways to define motion paths: by reference using the <mpath> element to reference a predefined path explicitly using the path attribute to define the path within the <animateMotion> element itself
84
Defining motion paths using <mpath>

<mpath>
References an SVG <path> element that is to be used as the definition of the motion path for an <animateMotion> element. Example Defining a path:
<path id="myPath" d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />
Referencing a predefined path using <mpath>:

<animateMotion dur="6s" repeatCount="indefinite" rotate="auto"> <mpath xlink:href="#myPath"/> </animateMotion> Element details Valid parents Valid children Required attributes Optional attributes
xlink:href id xml:space <animateMotion>
Defining motion paths using the path attribute

path
Contains path data that defines the points that make up a motion path used by the <animateMotion> element. This attribute defines the moveto, line, curve (both cubic and quadratic Bziers), arc and closepath instructions.
Valid values
path_data
Description Specifies the moveto, line, curve (both cubic and quadratic Bziers), arc and closepath instructions that define a motion path. See Path data commands on page 86 for more information on the different commands that can be used to define a path. For example:
path="M 100 100 L 300 100 q 200 300 z"

<mpath>
85
Path data commands The following path commands are used to define the points that make up a path.
Command
moveto
Character(s) M (absolute) m (relative)
Parameter(s) (x,y)+
Description Starts a new subpath at the given (x,y) co-ordinate. If a relative moveto (m) appears as the first element of the path, then it is treated as a pair of absolute co-ordinates. If a moveto command is followed by multiple pairs of co-ordinates, the subsequent pairs are treated as implicit lineto commands. For example:
M 100,100
closepath lineto
z L (absolute) l (relative)
(x,y)+
Closes the current subpath by drawing a straight line from the current point to the initial point of the subpath. Draws a straight line from the current point to the given (x,y) co-ordinate, which becomes the new current point. To draw a polyline, specify a number of co-ordinate pairs. At the end of the command, the new current point is set to the final set of co-ordinates provided. For example:
l 100,100
horizontal
lineto
H (absolute) h (relative)
(x)+
Draws a horizontal line from the current point (cpx,cpy) to (x,cpy). For example: h -10
vertical lineto V (absolute)

v (relative)
(y)+
Draws a vertical line from the current point (cpx,cpy) to (cpx,y). For example:
V 100
cubic Bzier
curveto
C (absolute) c (relative)
(x1,y1 x2,y2 x,y)+ Draws a cubic Bzier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve. To draw a polyBzier, specify multiple sets of co-ordinates. At the end of the command, the current point becomes the final (x,y) co-ordinate pair used in the polyBzier. For example:
C100,100 250,100 250,200
86
Command smooth cubic Bzier

curveto
Character(s)
S (absolute) s (relative)
Parameter(s) (x2,y2 x,y)+
Description
Draws a cubic Bzier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. If there is no previous command or if the previous command was not a C, c, S, or s, assume the first control point is coincident with the current point. (x2,y2) is the second control point (that is, the control point at the end of the curve).
S400,300 400,200
quadratic Bzier Q (absolute)

curveto q (relative)
(x1,y1 x,y)+
Draws a quadratic Bzier curve from the current point to (x,y) using (x1,y1) as the control point.
Q400,50 600,300
smooth T (absolute) quadratic Bzier t (relative)

curveto
(x,y)+
Draws a quadratic Bzier curve from the current point to (x,y).
The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. If there is no previous command or if the previous command was not a C, c, S, or s, then assume the first control point is coincident with the current point. (x2,y2) is the control point at the end of the curve. For example:
T1000,300
elliptical arc
A (absolute) a (relative)
(rx,ry
x-axis-rotation large-arc-flag, sweep-flag x,y)+
Draws a segment of an ellipse from the current point to (x,y). The size and orientation of the ellipse are defined by two radii (rx,ry) and an x-axis-rotation, which indicates how the ellipse as a whole is rotated relative to the x-axis of the current co-ordinate system. The center (cx,cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large-arc-flag and sweep-flag contribute to the automatic calculations and help to determine how the arc is drawn. For example:
a25,25 -30 0,1 50,-25 l 50,-25
87
88
5
Adding XForms
XForm elements Example: Using XForms to collect user information XForms enable you to collect and submit user data from within your .svg file. To add an XForm to your SVG content, you must define an XForm model using the <xforms:model> element, then associate the form controls (<xforms:input>, <xforms:select1>, or <xforms:textarea>) with the specific fields of the form.
XForm elements
<xforms:input>
Defines a one-line text entry field which allows users to provide input. Example
<text fill="black" x="0" y="10" font-size="10"> Enter your name: </text> <rect x="80" y="0" width="100" height="20" fill="none" stroke="blue"/> <xforms:input pzexts:x="80" pzexts:y="0" pzexts:width="100" pzexts:height="20" xforms:model="form1" xforms:ref="CustomerName" />
Notes
By default, the input field is transparent when rendered by the BlackBerry device. Content beneath the field will be visible unless a background color is set. You cannot specify a border for the input field. Although you can use the <xforms:label> element to provide descriptive text for the <xforms:input>, <xforms:select1>, or <xforms:textarea> control elements, Plazmic recommends that you use SVG text to provide labels, since it provides greater flexibility and control over the appearance of the label. The <xforms:input> element can contain a <text> child. A <text> element that is the child of an <xforms:input> element can have the following attributes defined: font-family, font-size (in pixels), font-style (italic or plain), and font-weight (bold or plain).
Limitation
If you include a child <xforms:label> element, be aware that it is included as part of the height and width of the parent <xforms:input> element. When specifying the pzexts:height and pzexts:width attributes of the control element, you must factor in the height and width of the label as well.
<svg> <text> xforms:model id pzexts:height <xforms:label> xforms:ref pzexts:style pzexts:width pzexts:x pzexts:y
<xforms:instance>
Defines the data that the form is collecting, and defines any default values. An XForm collects data for an XML document. The <xforms:instance> element is a definition of the XML document. For example, the XML document template for form data might look like this:
<customer> <firstname/> <lastname/> <telephone/> </customer>
Once the form has been completed, the XML document might look like this:
<customer> <firstname>John</firstname> <lastname>Smith</lastname> <telephone>555-1234</telephone> </customer>
Example
<xforms:model id="form1"> <xforms:instance> <customer> <firstname/> <lastname/> <telephone/> </customer> </xforms:instance> <xforms:submission id="form1Submission" xforms:method="form-data-post" forms:action="http://someSite/Script1"/> <xforms:submission id="form1Submission2" xforms:method="get" xforms:action="http://someSite/Script2"/> </xforms:model>
Note
Each model must contain exactly one <xforms:instance> element.
<xforms:model>
any XML form field description
90
5: Adding XForms
Element details Required attributes Optional attributes

id
<xforms:item>
Defines an option in a single-selection list of options. Example
<xforms:item> <xforms:label>Chocolate</xforms:label> <xforms:value>c</xforms:value> </xforms:item>
id <xforms:select1> <xforms:label> <xforms:value>
<xforms:label>
Defines the text for an item in a select list. It can also define a text label for input, text entry, or select list control elements. Example
<xforms:item> <xforms:label>Chocolate</xforms:label> <xforms:value>c</xforms:value> </xforms:item>
Limitations
You can use the <xforms:label> element to provide descriptive text for input, text entry, or select list control elements. However, Plazmic recommends that you use SVG text to provide labels, since it provides greater flexibility and control over the appearance of the label. When it is the child of a parent control element (<xforms:input>,
<xforms:select1>, or <xforms:textarea>), the label is included as part of
the parents height and width. When specifying the height and width of the control element, you must factor in the height and width of the label as well.
id <xforms:input> <xforms:item> <xforms:select1> <xforms:textarea>
91
<xforms:model>
Represents a form definition and is used as a container for elements that define the XForms model. To use forms in your SVG document, you must define at least one form model in a <defs> element of the SVG document. No restriction is placed on how many model elements can exist within a containing document. Example Defining a form model:
<xforms:model id="form1"> <xforms:instance> <CustomerName>Joe</CustomerName> <Description>description</Description> <IceCreamFlavor>c</IceCreamFlavor> </xforms:instance> <xforms:submission id="form1Submission" xforms:method="form-data-post" forms:action="http://someSite/Script1"/> <xforms:submission id="form1Submission2" xforms:method="get" xforms:action="http://someSite/Script2"/> </xforms:model>
Referencing a form model:

<xforms:trigger id="form1Reset"> <xforms:reset xforms:model="form1"/> </xforms:trigger>
Notes
To use forms in your SVG document, you must define at least one form model in a <defs> element of the SVG document. The model must contain exactly one <xforms:instance> element, which contains the form information fields and default values.
id <defs> <xforms:instance>
<xforms:submission>
<xforms:reset>
Resets all form controls to their default values. The xforms:model attribute ties the reset event to a particular form. Example

<xforms:trigger>
92
5: Adding XForms
Element details Valid children Required attributes Optional attributes

xforms:model id
<xforms:select1>
Defines a single-selection drop-down list, from which a user can select a single item. Example
<text fill="black" x="0" y="115" font-size="10"> Favourite Ice Cream Flavor: </text> <rect x="140" y="105" width="60" height="20" fill="none" stroke="green"/> <xforms:select1 pzexts:x="140" pzexts:y="105" pzexts:width="60" pzexts:height="20" xforms:model="form1" xforms:ref="IceCreamFlavor"> <xforms:item> <xforms:label>Vanilla</xforms:label> <xforms:value>v</xforms:value> </xforms:item> <xforms:item> <xforms:label>Chocolate</xforms:label> <xforms:value>c</xforms:value> </xforms:item> </xforms:select1>
Notes
Currently the SVG Transcoding Utility does not support multiple-selection lists. By default, the input field is transparent when rendered by the BlackBerry device. Content beneath the field will be visible unless a background color is set. You cannot specify a border for the input field. Although you can use the <xforms:label> element to provide descriptive text for the <xforms:input>, <xforms:select1>, or <xforms:textarea> control elements, Plazmic recommends that you use SVG text to provide labels, since it provides greater flexibility and control over the appearance of the label. The <xforms:select1> element can contain a <text> child. A <text> element that is the child of an <xforms:select1> element can have the following attributes defined: font-family, font-size (in pixels), font-style (italic or plain), and font-weight (bold or plain).
Limitation
If you include a child <xforms:label> element, be aware that it is included as part of the height and width of the parent <xforms:select1> element. When specifying the pzexts:height and pzexts:width attributes of the control element, you must factor in the height and width of the label as well.

<svg>
93

<text> xforms:model id pzexts:height <xforms:item> xforms:ref pzexts:style pzexts:width pzexts:x pzexts:y <xforms:label>
<xforms:submit>
Initiates the submission of the instance data to which it is bound. Example Note
<xforms:submit id="form1Submit" xforms:model="form1" xforms:submission="form1Submission"/>
Once activated, this control becomes unavailable for further activations until the submit process is completed.
xforms:model id <defs>
xforms:submission
<xforms:submission>
Provides declarative instructions on what to submit, how to submit it, and what action to take once it is submitted. The xforms:action property specifies the data submission method. Example
xforms:action id <xforms:model>
<xforms:submission id="form1Submission" xforms:method="get" xforms:action="http://someSite/Script1"/>
xforms:method
94
5: Adding XForms
<xforms:textarea>
Defines a multiple-line text entry field which allows users to provide more substantial input. Example
<text fill="black" x="0" y="40" font-size="10"> Description: </text> <rect x="60" y="30" width="150" height="70" fill="none" stroke="red"/> <xforms:textarea pzexts:x="60" pzexts:y="30" pzexts:width="150" pzexts:height="70" xforms:model="form1" xforms:ref="Description" />
Notes
By default, the input field is transparent when rendered by the BlackBerry device. Content beneath the field will be visible unless a background color is set. You cannot specify a border for the input field. Although you can use the <xforms:label> element to provide descriptive text for the <xforms:input>, <xforms:select1>, or <xforms:textarea> control elements, Plazmic recommends that you use SVG text to provide labels, since it provides greater flexibility and control over the appearance of the label. The <xforms:textarea> element can contain a <text> child. A <text> element that is the child of an <xforms:textarea> element can have the following attributes defined: font-family, font-size (in pixels), font-style (italic or plain), and font-weight (bold or plain).
Limitation
If you include a child <xforms:label> element, be aware that it is included as part of the height and width of the parent <xforms:textarea> element. When specifying the pzexts:height and pzexts:width attributes of the control element, you must factor in the height and width of the label as well.
<svg> <text> xforms:model id pzexts:height <xforms:label> xforms:ref pzexts:style pzexts:width pzexts:x pzexts:y
<xforms:trigger>
Defines a user-activated trigger control similar to button in HTML. Example

<defs>
95

<xforms:reset> xforms:action id xforms:method
<xforms:value>
This element provides a storage value to be used when a list item is selected in a <xforms:select1> element. Example
<xforms:item> <xforms:label>Vanilla</xforms:label> <xforms:value>v</xforms:value> </xforms:item>
id <xforms:item>
XForm attributes
The following attributes are used by XForms elements.
xforms:action
Specifies the URL to which the form is submitted.
Valid values
valid_url
Description The URL to which the form is submitted. For example:

xforms:action="http://someSite/Script1"/>

<xforms:submission>
xforms:method
Specifies the form data submission method.
Valid values
form-data-post
Description Indicates that a HTTP POST method is being used. For example:
xforms:method="form-data-post"
96
5: Adding XForms
Valid values
get
Description Indicates that a HTTP GET method is being used. For example:
xforms:method="get"

<xforms:submission>
xforms:model
Associates the form control with a particular form definition.
Valid values
model_id
Description Specifies the id attribute value of the <xforms:model> element which provides the XML document template in which the given control element is defined.

<defs>
xforms:ref
Associates the data entered into an <xforms:input> or <xforms:textarea> text entry field with one of the form information fields described in the model.
Valid values
XML_form_field
Description Specifies the XML element that is populated using the data entered by the user in the given <xforms:input> or <xforms:textarea> text entry field. For example, if the <xforms:instance> element defines the following,
<customer> <firstname/> <lastname/> <telephone/> </customer>
then an <xforms:input> element could have an xforms:ref attribute that looks like this:
xforms:ref="telephone"
to tie the data entered by the user to the <telephone> element in the XML definition. Attribute details Default value Inherited Animatable Valid parents No No
<xforms:input> <xforms:textarea>
97
xforms:submission
Associates an <xforms:submit> element with submission instructions specified using the <xforms:submission> element in an XForm model.
Valid values
submission_id
Description Specifies the id attribute of the <xforms:submission> that defines the submission instructions for the given <xforms:submit> element. For example,
xforms:submission="form1Submission"

<xforms:submit>
Plazmic extensions to XForms

The following custom Plazmic attributes enable you to define position, size, and style properties for your XForm.
pzexts:height
Defines the height of an XForms control element (<xforms:input>, <xforms:select1>, or <xforms:textarea>). Limitation If you include <xforms:label> as a child of a control element, be aware that it is included as part of the height and width of the parent element. When specifying the pzexts:height and pzexts:width attributes of the control element, you must factor in the height and width of the label as well.
Description Specifies the height of the control in pixels. For example:
pzexts:height="18"
Valid values
measure_value

<xforms:input> <xforms:select1> <xforms:textarea>
98
5: Adding XForms
pzexts:style
Defines the style of an XForms control element (<xforms:input>, <xforms:select1>, or <xforms:textarea>) with a semicolon-separated list of property declarations.
Valid values
property_list
Description A semicolon-separated list of property declarations of the following form: "name1:value1; name2:value2". For example:
style="background-color:green; columns:30 rows:5"
Properties that can be defined using the pzexts:style attribute include:

background-color: Valid for <xforms:input>, <xforms:select1>, and <xforms:textarea>. Specifies a background color for the control. The value can be any valid
color. A valid color can be specified using: an RGB value ("250,239,111") Hexidecimal notation ("#770aff" or "#70f" (equal to "#7700ff")) a valid textual color name ("lightgoldenrodyellow")
columns: Valid for <xforms:input> and <xforms:textarea>. Specifies the number of
characters that are permitted per line. When columns is specified, the actual width is bounded by the width specified by pzexts:width. If the width specified by pzexts:width cannot fit the number of columns specified, the pzexts:width value is used and the columns value is ignored.
rows: Valid for <xforms:textarea>. Specifies the number of lines that are permitted in a multiple line text entry field.
When rows is specified, the actual height is bounded by the height specified by pzexts:height. If the height specified by pzexts:height cannot fit the number of rows specified, the pzexts:height value is used and the rows value is ignored. Attribute details Default value Inherited Animatable Valid parents No No
pzexts:width
Defines the width of an XForms control element (<xforms:input>, <xforms:select1>, or <xforms:textarea>). Limitation If you include <xforms:label> as a child of a control element, be aware that it is included as part of the height and width of the parent element. When specifying the pzexts:height and pzexts:width attributes of the control element, you must factor in the height and width of the label as well.
Description Specifies the width of the control in pixels. For example:
pzexts:width="150"
Valid values
measure_value
99

pzexts:x
Defines the x-axis location of an XForms control element (<xforms:input>, <xforms:select1>, or <xforms:textarea>).
Valid values
x_co-ordinate
Description Specifies the position of the lower left corner in user units. For example:
pzexts:x="80"

pzexts:y
Defines the y-axis location of an XForms control element (<xforms:input>, <xforms:select1>, or <xforms:textarea>).
Valid values
y_co-ordinate
Description Specifies the position of the lower left corner in user units. For example:
pzexts:y="80"

Example: Using XForms to collect user information

The following code sample illustrates how to use XForms to collect user information.
Example: iceCreamForm.svg
<?xml version="1.0"?> <svg width="240" height="160" xmlns:pzexts="http://www.plazmic.com/plazmic_extents" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
100
5: Adding XForms
<defs>  <xforms:model id="form1"> <xforms:instance> <CustomerName>Joe</CustomerName> <Description>description</Description> <IceCreamFlavor>c</IceCreamFlavor> </xforms:instance> <xforms:submission id="form1Submission" xforms:method="form-data-post" xforms:action="http://someSite/someScript"/> <xforms:submission id="form1Submission2" xforms:method="get" xforms:action="http://someSite/someOtherScript"/> </xforms:model> <xforms:submit id="form1Submit" xforms:model="form1" xforms:submission="form1Submission"/> <xforms:submit id="form1Submit2" xforms:model="form1" xforms:submission="form1Submission2"/> <xforms:trigger id="form1Reset"> <xforms:reset xforms:model="form1"/> </xforms:trigger> </defs> <title>XForms Example</title> <desc>Shows the use of textarea, input, and select1.</desc> <text fill="black" x="0" y="10" font-size="10">Enter your name:</text> <rect x="80" y="0" width="100" height="20" fill="none" stroke="blue"/> <xforms:input pzexts:x="80" pzexts:y="0" pzexts:width="100" pzexts:height="20" xforms:model="form1" xforms:ref="CustomerName" /> <text fill="black" x="0" y="40" font-size="10">Description:</text> <rect x="60" y="30" width="150" height="70" fill="none" stroke="red"/> <xforms:textarea pzexts:x="60" pzexts:y="30" pzexts:width="150" pzexts:height="70" xforms:model="form1" xforms:ref="Description" /> <text fill="black" x="0" y="115" font-size="10">Favorite Ice Cream Flavor:</text> <rect x="140" y="105" width="60" height="20" fill="none" stroke="green"/> <xforms:select1 pzexts:x="140" pzexts:y="105" pzexts:width="60" pzexts:height="20" xforms:model="form1" xforms:ref="IceCreamFlavor"> <xforms:item> <xforms:label>Vanilla</xforms:label> <xforms:value>v</xforms:value> </xforms:item> <xforms:item> <xforms:label>Chocolate</xforms:label> <xforms:value>c</xforms:value> </xforms:item> <xforms:item> <xforms:label>Moose Tracks</xforms:label> <xforms:value>mt</xforms:value> </xforms:item> </xforms:select1> <g id="submitAnchor1"> <rect x="0" y="140" width="50" height="20" fill="#00ff00">
101
<animateColor begin="submitAnchor1.focusin" attributeName="fill" calcMode="linear" values="yellow;#00ff00" keyTimes="0;1" dur="2s"/> </rect> <text x="0" y="150" fill="black">Submit1</text> </g> <g id="submitAnchor2"> <rect x="60" y="140" width="50" height="20" fill="#ffff00"> <animateColor begin="submitAnchor2.focusin" attributeName="fill" calcMode="linear" values="red;#ffff00" keyTimes="0;1" dur="2s"/> </rect> <text x="60" y="150" fill="black">Submit2</text> </g> <g id="reset"> <rect x="120" y="140" width="50" height="20" fill="#ff0000"> <animateColor begin="r1.focusin" attributeName="fill" calcMode="linear" values="yellow;#ff0000" keyTimes="0;1" dur="2s"/> </rect> <text x="120" y="150" fill="black">Reset</text> </g> <loadScene xlink:href="#form1Submit" begin="submitAnchor1.activate"/> <loadScene xlink:href="#form1Submit2" begin="submitAnchor2.activate"/> <loadScene xlink:href="#form1Reset" begin="reset.activate"/> </svg>
102
6
Defining external fonts
Font definition elements
Font definition elements

<font-face>
This element defines the font family name for an externally referenced font. You must define external fonts in a <defs> element. Examples Defining an external font:
<font-face id="mainFont" font-family="MyFontFamily"> <font-face-src> <font-face-uri xlink:href="externalFont1.cbtf" /> </font-face-src> </font-face>
Referencing an external font:

<text font-family="MyFontFamily">Some random text.</text>
Note
The SVG Transcoding Utility does not check to see if the resource exists or not. If the SVG Transcoding Utility is producing a .pmb file, it will try to retrieve the font; if it cannot find the font at the specified location, an error is reported.
font-family id <defs> <font-face-src>
<font-face-src>
Identifies the font as an external font. The <font-face-src> element is a container element for the <font-face-uri> element, which defines the location of an external font. Example
<font-face-src> <font-face-uri xlink:href="externalFont1.cbtf" /> </font-face-src>
id xml:space <font-face> <font-face-uri>
<font-face-uri>
Defines the location of an external font. Example
<font-face-src> <font-face-uri xlink:href="externalFont1.cbtf" /> </font-face-src>
xlink:href <font-face-src>
Font definition attributes

xlink:href
Valid values
resource_URL

104
6: Defining external fonts
105
106
2007 Plazmic, Inc. Published in Canada.

SVG Reference

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

SVG Reference

Încărcat de

Drepturi de autor:

Formate disponibile

SVG for BlackBerry

Version 4.2.2 Reference Guide

Working with SVG

Components of a basic .svg document

This line specifies the XML declaration.

SVG root element

SVG for BlackBerry Version 4.2.2 Reference Guide

1: Scalable Vector Graphics language reference

Test SVG containing custom elements

2. Open the file in one of the following applications:

SVG content supported by the SVG Transcoding Utility

SVG for BlackBerry Version 4.2.2 Reference Guide

1: Scalable Vector Graphics language reference

Supported SVG elements

Supported SVG elements, listed alphabetically

SVG for BlackBerry Version 4.2.2 Reference Guide

<defs> <desc> <ellipse>

<font-face> <font-face-src> <font-face-uri> <g>

103 103 104

1: Scalable Vector Graphics language reference

Element <loadScene> <mpath> <path>

Type Plazmic/ Hyperlink Animation Basic Path

Plazmic Structure Extension Text

SVG for BlackBerry Version 4.2.2 Reference Guide

Element <textArea> <title> <tspan>

Type Text Structure Text

Supported SVG attributes

1: Scalable Vector Graphics language reference

XForm Plazmic XForms extension Font

xforms:model xforms:submission pzexts:height pzexts:style xlink:href

SVG for BlackBerry Version 4.2.2 Reference Guide

Supported SVG attributes, listed alphabetically

Attribute name accumulate additive attributeName attributeType

Valid parent elements

begin by calcMode currentChild

editable end fill fill fill-opacity font-family font-size font-style font-weight

height height height hotspot-wrap

<svg> Any element

1: Scalable Vector Graphics language reference

Valid parent elements

<textArea> <animateMotion> <pattern> <pattern>

r repeatCount restart rotate

SVG for BlackBerry Version 4.2.2 Reference Guide

Attribute name type values viewBox visibility width width width

Valid parent elements <animateTransform>

See Page... 84 81 27 64 28 41 54 41 42 42 96 96 97 97 98 32 54 104 30

<svg> <rect> <image>

xforms:action xforms:method xforms:model xforms:ref xforms:submission xlink:href xlink:href xlink:href xml:space

Document structure elements

SVG for BlackBerry Version 4.2.2 Reference Guide

Element details Valid parents

Valid children Required attributes Optional attributes

2: Defining the document structure

Element details Valid parents Valid children

Required attributes Optional attributes

SVG for BlackBerry Version 4.2.2 Reference Guide

Element details Valid parents Valid children

Required attributes Optional attributes

2: Defining the document structure

Element details Valid parents

Valid children Required attributes Optional attributes

Document structure definition attributes

Attribute details Default value Inherited Animatable Valid parents