SVG¶
General information¶
SVG (Scalable Vector Graphics) is a component for integrating vector graphics into user interfaces. It allows you to display images, making it ideal for icons, diagrams, and complex illustrations.
Parameters¶
Component properties
| Settings group | Setting Field | Value Options | Purpose |
|---|---|---|---|
| Name | - | Name of the UI Component in the system | |
| Common | Binding | Multiselect of Catalog | Contains a related “File” field from the model |
| File | Button | Allows you to upload a file with an .svg extension |
CSS properties
| Settings group | Setting field | Value Options | Purpose |
|---|---|---|---|
| Layout | Width | - | Component width |
| Height | - | Component height | |
| Grow | true, false | The property determines how much an element will grow relative to the rest of the flex elements within the same container | |
| Margin | - | The property defines the outer paddings on all four sides of the element | |
| Padding | - | The property sets the inner paddings on all sides of the element | |
| Appearance | CornerRadius | - | The property is used to round the corners of an element |
| BorderThickness | - | The property allows you to set the boundaries for the element | |
| Brush | Background | - | The property sets the background color of the element |
| BorderBrush | - | The property sets the color of the element's border |
Use Cases¶
- Icons and Illustrations: Used to add clear and scalable graphic elements.
Exceptions¶
- Performance: Complex or large SVG images can affect web page performance.