DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS

[0034] FIG. 1 shows a typical web display environment 10 for displaying web pages and web applications. A web display environment 10 comprises a browser 11 , a viewer 13 , a script interpreter 14 , and a DOM 15 . The browser 11 is the host application, which understands and visually renders hypertext markup language (HTML) and/or extensible hypertext markup language (XHTML). Examples of browsers include Netscape (™) and Internet Explorer (™). The browser 11 includes a window which is displayed on the display apparatus, such as a monitor, of an end user computer system. The browser 11 typically employs a plug-in architecture, in which third party software (known as the plug-in or viewer 13 ) can be associated with any file format that is not already natively supported by the browser 11 and is allowed to render that file within the host browser's 11 window. One type of file that the browser 11 may be asked to open is a Scalable Vector Graphic (SVG) file having a “.svg” extension. The browser 11 does not natively support the SVG markup language (which is an XML language) and so passes the SVG file to the SVG viewer 13 , which has associated itself to the SVG file format, via the rules of the plug-in architecture of the browser 11 .

[0035] The viewer 13 comprises software code for parsing the SVG markup, creating a DOM, rendering that DOM to the browser's window, listening for events and dispatching them to their assigned handler script functions, and interpreting/executing those script functions. An example of a viewer 13 is the Corel (™) SVG Viewer. The viewer 13 uses the SVG file received from the browser 11 to create a DOM 15 . The DOM is a hierarchical tree structure of objects in memory, representing the hierarchical XML markup in the XML text file. The DOM also contains methods (also known as functions or application programming interfaces (API's)) that allow it to be queried or modified. The viewer 13 may also have access to a script interpreter/engine 14 , which can execute script code created by a programmer for the purpose of making the document non-static (e.g., animation) and/or interactive with the user (e.g., the user can create events with the mouse or keyboard, which cause something to happen) via manipulation of the DOM.

[0036] The following common data types are used in this specification:

[0037] <boolean>: A <boolean> is specified as either ‘true’ or ‘false’.

[0038] <integer>: An <integer> is specified as an optional sign character (‘+’ or ‘−’) followed by one or more digits “0” to “9”. If the sign character is not present, the number is non-negative.

[0039] Unless stated otherwise for a particular attribute or property, the range for a <integer> encompasses (at a minimum) −2147483648 to 2147483647.

[0040] Within the SVG DOM, an <integer> is represented as an long or an SVGAnimatedInteger.

[0041] <number> (real number value): The specification of real number values is different for property values than for XML attribute values.

[0042] The Cascading Style Sheets, level 2 (CSS2) Specification—a style sheet language that allows one to attach style (e.g. fonts, spacing and aural cues) to structured documents (e.g. HTML documents and XML applications)—states that a property value which is a <number> is specified in decimal notation (i.e., a <decimal-number>), which consists of either an <integer>, or an optional sign character followed by zero or more digits followed by a dot (.) followed by one or more digits. Thus, for conformance with CSS2, any property in SVG which accepts <number> values is specified in decimal notation only.

[0043] For SVG's XML attributes, to provide as much scalability in numeric values as possible, real number values can be provided either in decimal notation or in scientific notation (i.e., a <scientific-number>), which consists of a <decimal-number> immediately followed by the letter “e” or “E” immediately followed by an <integer>.

[0044] Unless stated otherwise for a particular attribute or property, a <number> has the capacity for at least a single-precision floating point number (ICC32) and has a range (at a minimum) of −3.4e+38F to +3.4e+38F.

[0045] It is recommended that higher precision floating point storage and computation be performed on operations such as coordinate system transformations to provide the best possible precision and to prevent round-off errors.

[0046] Conforming High-Quality SVG Viewers are required to use at least double-precision floating point (ICC32) for intermediate calculations on certain numerical operations.

[0047] Within the SVG DOM, a <number> is represented as a float or an SVGAnimatedNumber.

[0048] <length>: A length is a distance measurement. The format of a <length> is a <number> optionally followed immediately by a unit identifier. (Note that the specification of a <number> is different for property values than for XML attribute values.)

[0049] If the <length> is expressed as a value without a unit identifier (e.g., 48), then the <length> represents a distance in the current user coordinate system.

[0050] If one of the unit identifiers is provided (e.g., 12 mm), then the <length> is processed according to the description in Units.

[0051] Percentage values (e.g., 10%) depend on the particular property or attribute to which the percentage value has been assigned. Two common cases are: (a) when a percentage value represents a percent of the viewport (refer to the section that discusses Units in general), and (b) when a percentage value represents a percent of the bounding box on a given object (refer to the section that describes Object bounding box units).

[0052] Within the SVG DOM, a <length> is represented as an SVGLength or an SVGAnimatedLength. 1

[0053] Within the SVG DOM, <uri> is represented as a DOMString or an SVGAnimatedString.

[0054] FIG. 2 shows a system 20 for extending the interactivity of presentation markup languages (e.g., scalable vector graphics (SVG), hypertext markup language (HTML)), in accordance with an embodiment of the present invention. The SVG interactivity extension system 20 comprises one or more designated elements 29 , and one or more associated instructions (script or code) 28 . Preferably, the one or more designated elements 29 map to the one or more associated instructions 28 on a one-to-one basis. The designated elements 29 comprise a namespace and attributes. The namespace of the designated elements may follow a predetermined naming convention. For example, a prefix may be added to the generic name of the designated element 29 . In one example of an embodiment of an SVG interactivity extension system 20 , the prefix “dsvg:” is added to the generic name of the designated element 29 . Among the attributes of the element are name & xmlns (identifying that the element belongs to the dsvg). Other components may be added to the system 20 , such as an initialization function having instructions for traversing each node in a DOM, searching for the designated elements 29 by searching for any element whose name is prefixed with the desired namespace (e.g., “dsvg:”), and calling the associated instructions 28 that is associated with each particular behavior element, whose name follows the predetermined naming convention.

[0055] FIG. 3 shows another example of an SVG interactivity extension system 30 . The SVG extension system 30 comprises a collection of designated items 39 and a collection of associated instructions (script or code) 38 . The collection of designated items 39 comprises one or more of the following: flow control elements 22 , coordinate mapping elements 23 , viewer behavior elements 24 , a focus element 25 , a constraint element 26 , and a set of passive attributes 27 . The collection of associated instructions 38 comprise flow control instructions 32 , coordinate mapping instructions 33 , viewer behavior instructions 34 , a focus instruction 35 , a constraint instruction 36 , and a set of passive attributes instruction 37 . Items 38 , 39 may be added or removed from the SVG interactivity extension system 30 . An initialization file may be added as a component to the system 30 having instructions for traversing each node in a document object model (DOM) and for searching and calling functions associated with elements having names following a predetermined naming convention. The associated instructions 39 could be matched with the designated elements 38 through the initialization function (or file). Alternatively, the associated instructions 39 and designated elements 38 could be coded natively in a viewer 13 .

[0056] Flow Control Elements 22

[0057] Flow control is desired for building web applications. With scripting, programmers have conditional evaluative expressions, such as “if” and “switch” statements, and looping.

[0058] A flow control element 22 is used to control statement flow of the web application. Flow control elements are used for conditional rendering of graphical elements or execution of behavior elements. Flow control elements 22 are inserted in a document object model (DOM) as parents of other DOM elements which are to be rendered or executed if the conditional flow statement of the parent flow control element is satisfied.

[0059] The attributes of a flow control element 22 may comprise one attribute having a complex expression representing the flow control statement. Preferably, multiple attributes are present, with each attribute representing one item in the expression representing the flow control statement. Having such a one-to-one mapping of multiple attributes to flow control statement items is advantageous for data mapping, where a web application designer desires to define variables from one data type into extensible markup language (XML). The associated instruction 32 performs actions associated with the flow control element 22 .

[0060] Flow control elements 22 include the ‘if’ element, the ‘switch’ element, the ‘case’ element, the ‘default’ element, and the ‘loop’ element.

[0061] The ‘if’ Element

[0062] The ‘if’ element defines a simple conditional statement which, if evaluated to true, results in its child behavior elements being executed. Commonly used in conjunction with dSVG expressions for referencing the real-time value of element attributes. 2

[0063] Attribute Definitions:

[0064] value1=‘<string>’

[0065] The first of two values to be compared. 3

[0066] The ‘switch’ element

[0067] The ‘switch’ element defines a conditional statement, comparing one value to other values defined in child ‘case’ elements. Commonly used in conjunction with dSVG expressions for referencing the real-time value of variables or element attributes. 4

[0068] Specifies the value to compare against many others, which are defined in the child ‘case’ elements. Usually, ‘variable’ will be a dSVG expression.

[0069] FIG. 5 shows a comboBox 105 with an associated ‘switch’ behavior, resulting in one of four ‘setData’ behaviors being run. The switch element compares conditions of the child case element(s) along with the default element values. The example is provided below: 5

[0070] The ‘case’ Element

[0071] The ‘case’ element is a child of the ‘switch’ element, which defines the value to compare to the ‘switch’ element's ‘value’ attribute. If it evaluates to true, its child elements are executed. Commonly used in conjunction with dSVG expressions for referencing the real-time value of variables or element attributes. 6

[0072] Specifies the value to compare against the ‘switch’ element's ‘value’ attribute. Usually, ‘value’ will be a dSVG expression.

[0073] The ‘default’ Element

[0074] The ‘default’ element is a child of the ‘switch’ element, whose child behaviors are executed whenever none of the ‘switch’ element's ‘case’ elements evaluate to true. Commonly used in conjunction with dSVG expressions for referencing the real-time value of variables or element attributes. 7

[0075] The ‘loop’ Element

[0076] The ‘loop’ element allows its child behaviors to be executed iteratively (like a ‘for’ statement in ECMAscript) and/or upon multiple targets (like a ‘for-each’ statement in ECMAScript). A node list of multiple targets can be obtained from the ‘findElements’ element, which allows you to find all elements which match the specified search criteria. Optionally, the actual matching elements can be copied to a documentFragment, which can be used by the ‘postURL’ element. 8

[0077] Attribute Definitions: 9

[0078] The last value to loop on. 10

[0079] This attribute should never be provided by the markup. It is automatically populated for reference purposes.

[0080] FIG. 6 shows a push button 110 that invokes the ‘loop’ behavior, storing the matches in a nodelist, and using the ‘loop’ element to display the ID's of the nodes via the ‘alert’ element. The loop element is a sequence of instructions that is continually repeated until a certain condition is reached. The example is provided below: 11

[0081] The ‘timer’ Element

[0082] The ‘timer’ element allows its child behaviors to be executed iteratively at a specified time interval until such time as its ‘break’ attribute evaluates to true. The ‘iteration’ attribute is incremented internally so that it can be referenced by the child behaviors for context. 12

[0083] Attribute Definitions:

[0084] interval=‘<number>’

[0085] The time, in milliseconds, between each iteration.

[0086] break=‘“(true|false)”’

[0087] A value of ‘true’ causes the timer to stop running. A value of ‘false’ causes the timer to continue running. The default is ‘false’. It is expected that either the ‘break’ attribute gets modified externally via the setAttribute behavior, or it is a dSVG expression, which gets re-evaluated every iteration.

[0088] iteration=“<number>”

[0089] The value of the current iteration, where the first iteration starts at zero, i.e. the number of times the child behaviors have been run. Each iteration, the child behaviors can reference this ‘iteration’ attribute via the dSVG expression syntax. This attribute should never be provided by the markup. It is automatically populated for reference purposes.

[0090] FIG. 7 shows shows a set of rectangles with 2 timers applied—one that starts at the first rectangle, setting each consecutive rectangle green, and another starting at the last rectangle, setting each previous rectangle blue. The example is provided below: 13

[0091] Coordinate Mapping Elements 23

[0092] Often a web application requires the ability to click and drag objects, perhaps for the purposes of editing their positions. SVG does not currently have this capability. Thus, script is required which tracks the mouse movements and creates a translation transform on the object. Also, a user may desire to display coordinate information for where the mouse curser is located. Thus, the user first needs to know where the mouse cursor is in the coordinate system of the SVG document, before the user can convert the coordinate information to the coordinate system the user is using. Currently, only script can assist a user.

[0093] In order to display coordinate-based data, such as the location of cities on a background map, a user must convert those coordinates to the coordinate system of the SVG document. An example of such a conversion is a linear transformation (a scale and translation), such as a cartesian grid with parallel latitude and longitude lines. Another example of a transformation is a polynomial transformation, such as for a map with a latitude/longitude projection (i.e., curved lines of latitude, angled lines of longitude). Usually, calculations are required to determine transformations. SVG does not provide markup for creating and applying complex mathematical transformations.

[0094] Sometimes data visualized in a web application uses a projection system, such as a latitude/longitude or universal transverse mercator (UTM), which usually requires knowledge of how the projection system operates. To be able to map to the coordinate system of an SVG document usually requires knowledge of how to convert between such projections. SVG does not provide markup to specify a projection system and parameters, and automatically map any coordinate from one system to the other.

[0095] A coordinate mapping element 23 manipulates the coordinates of an object in the web application. Coordinate mapping elements 23 are used to display an object whose coordinates are in a system different from the DOM coordinate system. A coordinate mapping element 23 is inserted in a DOM as a child of another DOM elements.

[0096] The attributes of a coordinate mapping element 23 include point pair coordinates. The associate instruction 33 performs actions used to take third party XML data and position the data in a DOM. Coordinate mapping elements 23 include the ‘mousePosition’ element, the ‘mapCoords’ element, the ‘pointPair’ element, and the ‘mapProj’ element.

[0097] The ‘mousePosition’ Element

[0098] The ‘mousePosition’ element defines a container for holding the current mouse coordinates, relative to the document or to the target element. It is a persistent object in memory that should be instantiated once, and so should not be a child of any element other than the ‘svg’ root element (or a ‘g’ element). 14

[0099] Attribute Definitions:

[0100] elementID=“name”

[0101] The ‘id’ attribute of the target element to generate the mouse events.

[0102] x=“<coordinate>”

[0103] The current x-coordinate of the mouse cursor. Setting this attribute has no effect—it is purely a storage attribute, intended to be referenced.

[0104] y=“<coordinate>”

[0105] The current y-coordinate of the mouse cursor. Setting this attribute has no effect—it is purely a storage attribute, intended to be referenced.

[0106] type=“(relative|absolute)”

[0107] Specifies whether the mouse coordinates are to be relative to the document (absolute) or relative to the target element (relative).

[0108] FIG. 8 shows a rectangle 115 with mouse coordinates displayed relative to both the document and the rectangle. The mousePosition element defines a container for holding the current mouse coordinates. The coordinates can be tracked relative to the document or absolute to the parent element. The example is provided below: 15

[0109] The ‘mapCoords’ Element

[0110] The ‘mapCoords’ element defines an object used for mapping coordinates in one space to another space, via a polynomial transformation, whose coefficients are determined by the coordinates of the point-pairs given in the child ‘pointPair’ elements. 16

[0111] Attribute Definitions: 17

[0112] FIG. 9 shows two ellipses 120 and 125 transformed to another coordinate space. The mapCoords element defines an object used for mapping from one coordinate space to another. The resulting coefficients are determined by the coordinates of the point-pairs (child) elements. The example is provided below: 18

[0113] The ‘pointPair’ Element

[0114] The ‘pointPair’ element, which must be a child of the ‘mapCoords’ element, defines the x-y coordinates for the same location in two different coordinate spaces. The point-pairs are used to calculate the polynomial transformation coefficients. 19

[0115] Attribute Definitions: 20

[0116] The ‘mapProj’ Element

[0117] The ‘mapProj’ element defines an object used for mapping coordinates in one space to another space, via a polynomial transformation, whose coefficients are determined by the coordinates of the point-pairs given in the child ‘pointpair’ elements. 21

[0118] Attribute Definitions: 22

[0119] FIG. 10 shows two ellipses transformed to another coordinate space. The mapProj element defines an object used for mapping coordinates from one project system to another. For example, “latlong” can be mapped to “UTM”. The example is provided below: 23

[0120] Viewer Behavior Elements 24

[0121] SVG viewers allow a user to zoom in and out, and to pan, using a built-in UI, or by accessing the SVG DOM via script. There currently does not exists an SVG DOM API for playing a sound. One way to play a sound currently is via an Adobe (™) extension in the Adobe SVG Viewer.

[0122] A viewer behavior element 24 is used to manipulate viewer behavior with respect to the web application. An example of a viewer is an SVG pluggin for a web browser. In particular, the viewer behavior elements 24 assist a designer to zoom and pan the current document or a document fragment.

[0123] The attributes of a viewer behavior element 24 include an event attribute that triggers the viewer behavior element. The associated instruction 34 performs actions used to zoom and pan a document in a web application. Other actions may be performed by the associated implementation code 34 .

[0124] Some behavior elements have attributes that provide the ID of other elements. For instance, <dsvg:setAttribute> uses an ‘elementID’ attribute to specify the target element whose attribute is to be modified. In such cases, the method of targeting other elements could be more robust. One example would be to have additional attributes that allow for the targeting of different frames, objects and documents in an HTML page, which would allow for behaviors in multiple SVG documents embedded in a single HTML document to interact with each other. Another example would be to use XPath expressions (http://www.w3.org/TR/xpath) rather than ID's to target elements. Using XPaths could also enable some behaviors to act upon multiple targets.

[0125] Viewer behavior elements 24 include the ‘alert’ element, the ‘function’ element, the ‘loadURL’ element, the ‘pan’ element, the ‘postURL’ element, the ‘zoom’ element, and the ‘playSound’ element. Examples of the viewer behavior elements 24 are provided below. The examples provide a syntax, a description and attributes of the viewer behavior elements 24 . Other viewer behavior element 24 may be created. The provided viewer behavior elements 24 are examples of one implementation. The common attributes and viewer behavior elements 24 are presented as fragments of a sample document type definition (DTD).

[0126] Common Attributes 24