Element Properties
Selecting an element of the SVG image opens the Element Properties Editor, with an interface similar to the component Property Editor. Changing the values of properties in the Element Properties Editor changes the element attributes of the SVG file associated with the component. For each property, the indicated SVG 1.1 specification can be consulted to determine valid values.
Furthermore, any element property can be the target of bindings, and its values can be referenced like any other property using the expression language references.
Common Properties
Properties that are common to all SVG elements, and will always appear in the Element Properties Editor, regardless of the type of element selected.
Name
The name property provides a label for the SVG element, allowing it to be identified and targeted by expressions.
Variable Name: | name |
|---|---|
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
|---|---|---|
name | String | Name |
Lock
The locked attribute is a Boolean value that can be used to prevent unintended changes to an SVG element. When enabled, the element is protected from modification.
Variable Name: | locked |
|---|---|
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
|---|---|---|
locked | Boolean | Lock |
Visibility
The visibility attribute is a Boolean value that controls whether an SVG element is visible or hidden during rendering. Corresponds to the ‘visibility’ attribute defined in the SVG 1.1 specification.
Variable Name: | visibility |
|---|---|
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
|---|---|---|
visibility | Boolean | Visibility |
ID
The HTML identifier of the SVG element, allowing it to be referenced as an HTML element, allowing it to be the target of scripting, CSS styling, and otherwise referenced. Corresponds to the ‘id’ attribute defined in the SVG 1.1 specification.
Variable Name: | id |
|---|---|
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
id | String | ID |
Class
Assigns one or more class names to the element and allows the element to be targeted by CSS rules or JavaScript for specific styling or behavior. Corresponds to the ‘class’ attribute defined in the SVG 1.1 specification.
Variable Name: | class |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
class | String | Class |
Opacity
Controls the transparency of the element. A value of 1.0 represents full opacity (fully visible), while a value of 0.0 represents complete transparency (completely invisible). Corresponds to the ‘opacity’ attribute defined in the SVG 1.1 specification.
Variable Name: | opacity |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
opacity | Float | Opacity |
Transform
Applies various transformations to the element, such as scaling, rotating, translating, and skewing, to change its position and appearance. Corresponds to the ‘transform’ attribute defined in the SVG 1.1 specification.
Variable Name: | transform |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
transform | String | Transform |
Stroke Width
Defines the thickness in pixels of the outline or border around the shape.
Variable Name: | strokeWidth |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
strokeWidth | Integer | Stroke Width |
Stroke Color
Specifies the color of the outline or border of an SVG element. It can be defined using color values like hexadecimal, RGB, or named colors.
Variable Name: | stroke |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
stroke | Color | Stroke Color |
Fill Color
Specifies the color used to fill the interior of the element. It can be defined using color values like hexadecimal, RGB, or named colors.
Variable Name: | fill |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
fill | Color | Fill Color |
X Coordinate
Represents the horizontal position of the element. It specifies how far from the left of the SVG canvas the element's left edge should be located.
Variable Name: | x |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
x | Float | X Coordinate |
Y Coordinate
Represents the vertical position of the element. It specifies how far from the top of the SVG canvas the element's top edge should be located.
Variable Name: | y |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
y | Float | Y Coordinate |
Width
Determines the horizontal size or width of the element. It is measured in user coordinates.
Variable Name: | width |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
width | Float | Width |
Height
Determines the vertical size or height of the element. It is measured in user coordinates.
Variable Name: | height |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
height | Float | Height |
Text Element Properties
In addition to the common properties, Text elements have the following properties.
Text
Specifies the text content of the element.
Variable Name: | text |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
text | String | Text |
Offset Y
Indicates the vertical offset of the text. Corresponds to the ‘dy’ attribute defined in the SVG 1.1 specification.
Variable Name: | dy |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
dy | Float | Offset Y |
Offset X
Indicates the horizontal offset of the text. Corresponds to the ‘dx’ attribute defined in the SVG 1.1 specification.
Variable Name: | dx |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
dx | Float | Offset X |
Rotation
Specify the rotation angle applied to each character of the text.
Variable Name: | rotate |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
rotate | Integer | Rotation |
Font Weight
Specifies the font weight from among the following options:
Lighter
Bold
Bolder
Normal
Variable Name: | fontWeight |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
fontWeight | String | Font Weight |
Font Size
Set the size of the font in pixels.
Variable Name: | fontSize |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
fontSize | Integer | Font Size |
Font Family
Specify the desired font to apply to the text.
Variable Name: | fontFamily |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
fontFamily | String | Font Family |
Line Element Properties
The following properties are available to line elements.
First X Coordinate
Denotes the X-axis coordinate of the first point of the line. Corresponds to the ‘x1’ attribute defined in the SVG 1.1 specification.
Variable Name: | x1 |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
x1 | Float | First X Coordinate |
First Y Coordinate
Denotes the Y-axis coordinate of the first point of the line. Corresponds to the ‘y1’ attribute defined in the SVG 1.1 specification.
Variable Name: | y1 |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
y1 | Float | First Y Coordinate |
Second X Coordinate
Denotes the X-axis coordinate of the second point of the line. Corresponds to the ‘x2’ attribute defined in the SVG 1.1 specification.
Variable Name: | x2 |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
x2 | Float | Second X Coordinate |
Second Y Coordinate
Denotes the Y-axis coordinate of the second point of the line. Corresponds to the ‘y2’ attribute defined in the SVG 1.1 specification.
Variable Name: | y2 |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
y2 | Float | Second Y Coordinate |
Circle Element Properties
Additional properties which apply to circle elements.
Radius
Defines the extent of the circle from its center to the perimeter. Corresponds to the ‘r’ attribute defined in the SVG 1.1 specification.
Variable Name: | r |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
r | Float | Radius |
CX Coordinate
Indicates the X-coordinate of the center of the circle. Corresponds to the ‘cx’ attribute defined in the SVG 1.1 specification.
Variable Name: | cx |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
cx | Float | CX Coordinate |
CY Coordinate
Indicates the Y-coordinate of the center of the circle. Corresponds to the ‘cy’ attribute defined in the SVG 1.1 specification.
Variable Name: | cy |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
cy | Float | CY Coordinate |
Rectangle Element Properties
Additional properties that apply to rectangle elements.
X Radius
The x-axis radius of the ellipse used to round off the corners of a rounded rectangle. Corresponds to the ‘rx’ attribute defined in the SVG 1.1 specification.
Variable Name: | rx |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
rx | Float | X Radius |
Y Radius
The y-axis radius of the ellipse used to round off the corners of a rounded rectangle. Corresponds to the ‘ry’ attribute defined in the SVG 1.1 specification.
Variable Name: | ry |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
ry | Float | Y Radius |
Ellipses Element Properties
Additional properties which apply to ellipse elements.
CX Coordinate
Indicates the X-coordinate of the center of the ellipse. Corresponds to the ‘cx’ attribute defined in the SVG 1.1 specification.
Variable Name: | cx |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
cx | Float | CX Coordinate |
CY Coordinate
Indicates the Y-coordinate of the center of the ellipse. Corresponds to the ‘cy’ attribute defined in the SVG 1.1 specification.
Variable Name: | cy |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
cy | Float | CY Coordinate |
X Radius
Controls the rounding of the ellipse in relation to the X axis. Corresponds to the ‘rx’ attribute defined in the SVG 1.1 specification.
Variable Name: | rx |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
rx | Float | X Radius |
Y Radius
Controls the rounding of the ellipse in relation to the Y axis. Corresponds to the ‘ry’ attribute defined in the SVG 1.1 specification.
Variable Name: | ry |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
ry | Float | Y Radius |
Polygon and Polyline Element Properties
The following properties apply to polygon and polyline elements.
Points
A string defining the list of points that define the polygon or polyline element. Corresponds to the ‘points’ attribute defined in the SVG 1.1 specification.
Variable Name: | points |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
points | String | Points |
Path Element Properties
The following properties apply to path elements.
Path
A string defining the polygon or polyline path. Corresponds to the ‘d’ attribute defined in the SVG 1.1 specification.
Variable Name: | d |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
d | String | Path |
Was this page helpful?