Vector Drawing
The vector drawing component allows for the inclusion of images in SVG format. Manipulate and animate SVG images based on events, functions, and variable values using Dynamic Vector Images. Custom parameters will appear in the SVG properties tab as component variables. The tutorial Manipulating SVG images shows how to leverage custom properties in user interface designs. |  |
Public Variables (Properties)
[?]
The Vector Drawing component has the following basic properties and property groups that are common to all components:
Name, Advanced Properties, Container Properties, Styles, Preloader, Events, Bindings.
SVG File
Indicates the file to be displayed by the component.
Variable Name: | drawing |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
drawing | Data Block | SVG File |
Scale
Increases or decreases the size of the image in the component window.
Variable Name: | scale |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
scale | Float | Scale |
Rotation
The number of degrees to rotate the image clockwise.
Variable Name: | rotation |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
rotation | Float | Rotation |
Enable Interactions
Allows the user to reposition the image within the viewing frame.
Variable Name: | enableInteractions |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
enableInteractions | Boolean | Enable Interactions |
Animated
Allows animated elements of SVG images to be displayed.
Variable Name: | animated |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
animated | Boolean | Animated |
Preserve Aspect Ratio
Indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio. If true, the Horizontal Alignment and Vertical Alignment properties will be applied when the viewBox and viewport have different aspect ratios.
Variable Name: | preserveAspectRatio |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
preserveAspectRatio | Boolean | Preserve Aspect Ratio |
Horizontal Alignment
Indicates how the image should be horizontally aligned when the viewBox and viewport have different aspect ratios.
Variable Name: | horizontalAlign |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
horizontalAlign | String | Horizontal Alignment |
Vertical Alignment
Indicates how the image should be vertically aligned when the viewBox and viewport have different aspect ratios.
Variable Name: | verticalAlign |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
verticalAlign | String | Vertical Alignment |
Maximize
Enables the X Margin Percent and Y Margin Percent properties to be applied to the relevant values of the viewbox of the SVG in cases when the viewport size increases or decreases.
Variable Name: | maximize |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
maximize | Boolean | Maximize |
X Margin Percent
When the Maximize property is enabled, the SVG element takes all empty space in the viewBox. The marginPercentX property controls the percent indent of the SVG elements in the X-axis. All changes occur in the viewBox property.
Variable Name: | marginPercentX |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
marginPercentX | Float | X Margin Percent |
Y Margin Percent
When the Maximize property is enabled, the SVG element takes all empty space in the viewBox. The marginPercentY property controls the percent indent of the SVG elements in the Y-axis. All changes occur in the viewBox property.
Variable Name: | marginPercentY |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
marginPercentY | Float | Y Margin Percent |
Canvas Width
Canvas width in pixels of the SVG image. Value is set when an SVG file is uploaded, and can be modified. Before a file is uploaded, the value of 0 indicates unlimited horizontal stretching and the canvas width will be equal to the viewport width.
Variable Name: | canvasWidth |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
width | Integer | Width |
Canvas Height
Canvas height in pixels of the SVG image. Value is set when an SVG file is uploaded, and can be modified. Before a file is uploaded, the value of 0 indicates unlimited vertical stretching and the canvas height will be equal to the viewport height.
Variable Name: | canvasHeight |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
width | Integer | Height |
Was this page helpful?