Advanced SVG Image¶
Applications
Typically used to modify statically or dynamically part or all the colors of an SVG image, for example, icons, dynamic images depending on specific runtime logic, or backgrounds of other objects (see Image object). Makes it possible to perform the following actions:
Configure the object
Set the image to display
In UI, right-click the desired container (MainWindow (type), Panel…), then select New > Designs > Advanced SVG image: the new object appears.
Next to the Path property of the object, click Browse: the Select file folder opens.
Click on the desired image, then click Select: the image appears in the Objects editor.
Set a customized color for a section of the image
Prerequisite: to modify parts of the image, the different parts must be identified by specific IDs in the SVG file.
Click
next to SVG element properties: the new property appears.
In ID, select the desired section of the image.
In Properties, select the Color property to change the color of the section of interest.
Next to Value, click Select Color and select the desired color, or enter the hexadecimal code of the desired color.
Set the change at runtime of the section color
Prerequisite: to modify parts of the image, the different parts must be identified by specific IDs in the SVG file.
Click
next to SVG element properties: the new property appears.In ID, select the desired section of the image.
In Properties, select the Color property to change the color of the section of interest.
Next to Value, click
> Advanced to open the Dynamic Links editor, then select the property of the desired object.
Resize an image keeping the original proportions
In Fill Mode, select Fill.
Set a value for one of the two dimensions, for example set Height to 50 pixels.
Set the value of the other dimension to Auto. To do it, click properties, for example Width, and press DELETE.
The image assumes the desired height, while the width stretches to keep the original aspect ratio.
Properties¶
Name |
BrowseName |
DataType |
Description |
|---|---|---|---|
| Path | Path |
Path |
|
| Fill Mode | FillMode |
Fill mode of the image object (Fill = resize the image keeping the original aspect ratio, Fit = resize the image by fitting the aspect ratio to the area of the image object) |
|
| Hit test visible | HitTestVisible |
True = intercept user clicks. False = does not intercept user clicks, which are instead passed to the underlying object, based on the order on the z axis. |
|
| SVG Element Properties | SVGElementProperties |
Collection of AdvancedSVGImageElementProperty |
Set the color of a part of the SVG file |
| Visible | Visible |
Show/hide the window.
(Inherited from Element)
|
|
| Enabled | Enabled |
Enables/disables the interaction with the user (True = enabled; False = disabled).
(Inherited from Element)
|
|
| Opacity | Opacity |
Opacity level (0 = transparent)
(Inherited from Element)
|
|
| Left margin | LeftMargin |
(Only if Horizontal Alignment = Left or Center or Stretch) Distance between the left edge of the object and the left edge of its container.
(Inherited from Element)
|
|
| Top margin | TopMargin |
(Only if Vertical Alignment = Top or Center or Stretch) Distance between the top edge of the object and the top edge of its container.
(Inherited from Element)
|
|
| Right margin | RightMargin |
(Only if Horizontal Alignment = Right or Center or Stretch) Distance between the right edge of the object and the right edge of its container.
(Inherited from Element)
|
|
| Bottom margin | BottomMargin |
(Only if Vertical Alignment = Bottom or Center or Stretch) Distance between the bottom edge of the object and the bottom edge of its container.
(Inherited from Element)
|
|
| Width | Width |
Width of the window. It can assume values greater than or equal to zero. The Auto value sets the width equal to the width of the content (in this case, in the absence of content the object collapses).
(Inherited from Element)
|
|
| Height | Height |
Height of the window. It can assume values greater than or equal to zero. The Auto value sets the height equal to the height of the content (in this case, in the absence of content the object collapses).
(Inherited from Element)
|
|
| Horizontal alignment | HorizontalAlignment |
Alignment of the object on the horizontal axis. Left = the left side is positioned on the left side of the container, except for the left margin; Right = the right side is positioned on the right side of the container, except for the right margin; Center = the center of the object is positioned in the center of the container, except for the left and/or right margins; Stretch = object width equals container width, except for the left and/or right margins.
(Inherited from Element)
|
|
| Vertical alignment | VerticalAlignment |
Alignment of the object on the vertical axis. Top = the top side is positioned on the top side of the container, except for the top margin; Bottom = the bottom side is positioned on the bottom side of the container, except for the bottom margin; Center = the center of the object is positioned in the center of the container, except for the top and/or bottom margins; Stretch = object height equals container height, except for the top and/or bottom margins.
(Inherited from Element)
|
|
| Rotation | Rotation |
Rotation of the object around its center point. Positive values indicate clockwise arc degrees.
(Inherited from Element)
|