SVG Viewers have certain built-in functionalities. For instance, you can zoom in and out via a native contextMenu and pan by dragging the mouse with the Alt key pressed. As well, the 'SVGWindow' object methods, accessible with scripting, allow one to display alert messages (especially useful during the development of an application), load a new document and post data to a URL. These behaviors are all available with the dSVG markup.
Despite the fact that full-blown Web applications can be built with dSVG markup, scripting may still be required for very advanced, non-generic features. dSVG allows the author to easily combine script with dSVG markup via the 'function' element.
<!ENTITY % stdBehaviorAttrs |
The 'alert' element displays a message in a popup window.
<!ENTITY % alertExt "" > <!ELEMENT dsvg:alert EMPTY > <!ATTLIST dsvg:alert %stdBehaviorAttrs; message %Text; #IMPLIED > |
Example 302_alert shows a push button with an associated 'alert' behavior.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> <svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410"> <script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/> <script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/> <script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/> <script type="text/ecmascript" xlink:href="dsvg11/alert.js"/> <script type="text/ecmascript" xlink:href="dsvg11/button.js"/> <!-- template --> <rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/> <text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: alert</text> <line y2="350" x2="744" y1="350" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:button, dsvg:alert</text> <text y="380" x="20" font-size="12" id="expected">The dsvg:alert element is a dialog box used to display a custom message.</text> <!-- adding behavior --> <dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" selected="false" disabled="false" toggle="false" y="70" x="50" label="Fire alert" id="dsvgUniqueID_0"> <dsvg:alert message="Alert message" id="dsvgUniqueID_2"/> </dsvg:button> </svg>
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'function' element is used to call an existing script function.
<!ENTITY % functionExt "" > <!ELEMENT dsvg:function EMPTY > <!ATTLIST dsvg:function name %Text; #IMPLIED parameters %Text; #IMPLIED > |
Attribute definitions:
Example 308_function shows a push button that invokes the 'function' behavior, which calls a script function.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> <svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410"> <script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/> <script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/> <script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/> <script type="text/ecmascript" xlink:href="dsvg11/button.js"/> <script type="text/ecmascript" xlink:href="dsvg11/function.js"/> <!-- template --> <rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/> <text y="25" x="20" font-weight="bold" font-size="18" fill="white" id= "text_1">dSVG sample behavior: function</text> <text y="365" x="20" font-size="12" id= "content">Content of file: dsvg:function, dsvg:button</text> <text y="380" x="20" font-size="12" id= "expected">The dsvg:function element is a named procedure that performs a distinct set of parameters.</text> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <!-- adding behavior --> <dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="70" x="50" label="Call function" id="dsvgUniqueID_0"> <dsvg:function parameters="sample of dsvg:function" name="alert" id="dsvgUniqueID_1"/> </dsvg:button> </svg>
View this example as SVG (SVG-enabled browsers only)
The 'loadURL' element loads an SVG document and uses it to completely replace the existing SVG document.
<!ENTITY % loadURLExt "" > <!ELEMENT dsvg:loadURL (%behaviors;) > <!ATTLIST dsvg:loadURL %stdBehaviorAttrs; xmlns:xlink CDATA #FIXED 'http://www.w3.org/1999/xlink' xlink:href %URI; #IMPLIED > |
Attribute definitions:
Example 310_loadURL shows a push button with the associated 'loadURL' behavior.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> <svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410"> <script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/> <script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/> <script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/> <script type="text/ecmascript" xlink:href="dsvg11/button.js"/> <script type="text/ecmascript" xlink:href="dsvg11/loadURL.js"/> <!-- template --> <rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/> <text y="25" x="20" font-weight="bold" font-size="18" fill="white" id= "text_1">dSVG sample behavior: loadURL</text> <text y="365" x="20" font-size="12" id= "content">Content of file: dsvg:loadURL, dsvg:button</text> <text y="380" x="20" font-size="12" id="expected">The dsvg:loadURL element loads an SVG file.</text> <text y="395" x="20" font-size="12" id="depend"/> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <!-- adding behavior --> <dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="70" x="50" label="loadURL" id="dsvgUniqueID_0"> <dsvg:loadURL xlink:href="310.svg" id="dsvgUniqueID_1"/> </dsvg:button> </svg>
View this example as SVG (SVG-enabled browsers only)
The 'pan' element scrolls the document by the specified amount. Internally, this sets the SVG DOM's currentTranslate.x and currentTranslate.y variables, which should trigger a 'scroll' event.
<!ENTITY % panExt "" > <!ELEMENT dsvg:pan EMPTY > <!ATTLIST dsvg:pan %stdBehaviorAttrs; x %Integer; #IMPLIED y %Integer; #IMPLIED type %Type; 'relative' > |
Attribute definitions:
Example 317_pan shows 4 buttons that invoke the 'pan' behavior to scroll the document in all 4 directions.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> <svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410"> <script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/> <script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/> <script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/> <script type="text/ecmascript" xlink:href="dsvg11/button.js"/> <script type="text/ecmascript" xlink:href="dsvg11/pan.js"/> <!-- template --> <rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/> <text y="25" x="20" font-weight="bold" font-size="18" fill="white" id= "text_1">dSVG sample behavior: pan</text> <text y="365" x="20" font-size="12" id= "content">Content of file: dsvg:pan</text> <text y="380" x="20" font-size="12" id= "expected">The dsvg:pan element translates the x,y coordinates of a document by a specified amout.</text> <text y="395" x="20" font-size="12" id= "depend">The type of pan can be either relative or absolute.</text> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <!-- adding behavior --> <dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="125" x="100" label="left" id="dsvgUniqueID_0"> <dsvg:pan type="relative" y="0" x="50" id="dsvgUniqueID_1"/> </dsvg:button> <dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="125" x="300" label="right" id="dsvgUniqueID_5"> <dsvg:pan type="relative" y="0" x="-50" id="dsvgUniqueID_2"/> </dsvg:button> <dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="200" label="up" id="dsvgUniqueID_6"> <dsvg:pan type="relative" y="50" x="0" id="dsvgUniqueID_3"/> </dsvg:button> <dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="150" x="200" label="down" id="dsvgUniqueID_7"> <dsvg:pan type="relative" y="-50" x="0" id="dsvgUniqueID_4"/> </dsvg:button> </svg>
View this example as SVG (SVG-enabled browsers only)
The 'postURL' element loads a document or fragment (an element, possibly with children) and inserts it into the specified location in the DOM or into a new documentFragment (a lightweight document useful for storing XML data of a non-native format).
<!ENTITY % postURLExt "" > <!ELEMENT dsvg:postURL (%behaviors;) > <!ATTLIST dsvg:postURL %stdBehaviorAttrs; xmlns:xlink CDATA #FIXED 'http://www.w3.org/1999/xlink' xlink:href %URI; #IMPLIED collection %Text; IMPLIED mimeType %Text; IMPLIED synchronous %Boolean; "false" elementID ID; #IMPLIED insertAs %InsertAs; "child" from %From; #IMPLIED offset %Integer; #IMPLIED ignoreText %Boolean; 'false' ignoreCData %Boolean; 'false' ignoreComments %Boolean; 'false' > |
Attribute definitions:
Example postURL shows a textBox and comboBox whose data and selection gets posted to a URL.
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="420px" width="760px" onload="init(evt)" viewBox="0 0 760 420"> <script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/> <script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/> <script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/> <script type="text/ecmascript" xlink:href="dsvg11/textbox.js"/> <script type="text/ecmascript" xlink:href="dsvg11/combobox.js"/> <script type="text/ecmascript" xlink:href="dsvg11/button.js"/> <script type="text/ecmascript" xlink:href="dsvg11/contextMenu.js"/> <script type="text/ecmascript" xlink:href="dsvg11/slider.js"/> <script type="text/ecmascript" xlink:href="dsvg11/listBox.js"/> <script type="text/ecmascript" xlink:href="dsvg11/scrollbar.js"/> <script type="text/ecmascript" xlink:href="dsvg11/postURL.js"/> <dsvg:variable saveState="session" collection="project" value="%'text1'@value%" name="text"/> <dsvg:variable saveState="session" collection="project" value="%'cboColor'@value%" name="fill"/> <dsvg:textBox xlink:href="dsvg/skinTextbox_Default.svg#skinTextBox" autoScale="true" height="22" width="256.615" y="105" x="181" label="Enter the text that will appear on the third page" id="text1"/> <dsvg:comboBox xlink:href="dsvg/skinComboBox_Composite.svg#skinComboBox" autoScale="true" height="17" width="256.615" y="179" x="178" label="Enter the color you want for the rectangle" id="cboColor"> <dsvg:item value="blue" data="blue" id="item1"/> <dsvg:item value="green" data="green" id="item2"/> <dsvg:item value="red" data="red" id="item3"/> <dsvg:item value="purple" data="purple" id="item4"/> <dsvg:item value="navy" data="navy" id="item5"/> </dsvg:comboBox> <dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="247" x="258" label="postURL" id="postURL"> <dsvg:postURL insertAs="newDOM" collection="project" xlink:href="http://myURL.com/SessionTest/sgproxy.asp?CXS=Page2" id="dsvgUniqueID_10"/> </dsvg:button> </svg>
The 'zoom' element scales the document by the specified amount. Internally, this sets the SVG DOM's currentScale variable, which should trigger a 'zoom' event.
<!ENTITY % zoomExt "" > <!ELEMENT dsvg:zoom EMPTY > <!ATTLIST dsvg:zoom %stdBehaviorAttrs; scale %Number; #IMPLIED cx %Coordinate; #IMPLIED cy %Coordinate; #IMPLIED type %Type; 'relative' > |
Attribute definitions:
Example 324_zoom shows two buttons that invoke 'zoom' behaviors--one to zoom the document in by a factor of 2 and one to zoom the document out by a factor of 2.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> <svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410"> <script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/> <script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/> <script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/> <script type="text/ecmascript" xlink:href="dsvg11/zoom.js"/> <script type="text/ecmascript" xlink:href="dsvg11/attributeZoomAndPan.js"/> <script type="text/ecmascript" xlink:href="dsvg11/button.js"/> <!-- template --> <rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/> <text y="25" x="20" font-weight="bold" font-size="18" fill= "white" id= "text_1">dSVG sample behavior:zoom</text> <text y="365" x="20" font-size="12" id= "content">Content of file: dsvg:zoom, dsvg:zoomAndPan</text> <text y="380" x="20" font-size="12" id= "expected">The dsvg:zoom element will zoom in / zoom out by the amount specified in the scale attribute.</text> <text y="395" x="20" font-size="12" id="depend"/> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <!-- adding behavior --> <dsvg:button dsvg:zoomAndPan="magnify" xlink:href="dsvg/skinButtonZoomIn.svg#skinButtonZoomIn" autoScale="true" disabled="false" selected="false" toggle="false" height="21" width="20" y="100" x="120" label="zoom in" id="button_in"> <dsvg:zoom type="relative" cy="50.5" cx="50.5" scale="2" id="dsvgUniqueID_2"/> </dsvg:button> <dsvg:button xlink:href="dsvg/skinButtonZoomOut.svg#skinButtonZoomOut" autoScale="true" disabled="false" selected="false" toggle="false" height="21" width="20" y="100" x="170" label="zoom out" id="button_out"> <dsvg:zoom type="relative" cy="50.5" cx="50.5" scale="0.5" id="dsvgUniqueID_3"/> </dsvg:button> <circle dsvg:zoomAndPan="disable" r="30" cy="200" cx="180" stroke-width="5" stroke="darkred" fill="red" id="circle_disabled"/> <circle dsvg:zoomAndPan="magnify" r="30" cy="200" cx="350" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle_magnified"/> <text y="330" x="20" font-size="10" id= "zoom_text">dsvg:zoomAndPan attributes applied to: Red circle (disabled) Blue circle (magnify)</text> <text y="80" x="50" font-size="10" id= "zoom_text1">Select the Zoom In / Zoom Out buttons.</text> </svg>
View this example as SVG (SVG-enabled browsers only)