Vector Image

Step 1: Add the component

1. Create a web application. For more information, see Create a web application.

2. In the Web application editor, click the component icon on the left.

3. Above the component list on the left of the canvas, enter Vector Image, find the component, and drag it onto the canvas.

   For more information about adding components, see Add a component.

   In the Style panel on the right, you can set its position (X, Y), size (W, H), name, visibility, and opacity. Upload an SVG file using the Select SVG button.

Step 2: Configure the data source

1. In the Style panel on the right, configure the image data source.
   • Click Select SVG to upload a local SVG file or choose one from your existing image library.
   • Click the Configure Data Source button to the right of Select SVG. Select a data source type and use the returned data as the image URL.

     The available data source types are Device, API, Application Push, and Page Variable. The data returned from the data source must be a string.

2. Click OK.

The widget updates the displayed image in real-time based on the associated data source.

Step 3: Configure styles

1. In the Style panel on the right, select the Fill Color checkbox to change the image's fill color.
   You can configure the fill color using a data source. An API data source must return a JSON object representing an RGB color.

   Note The a property represents the opacity of the color, with a value range from 0 to 1.

   {
     "r": 255,
     "g": 255,
     "b": 255
   }

   or

   {
     "r": 255,
     "g": 255,
     "b": 255,
     "a":0
   }

   Important

   • Currently, you can only change the fill color of Path elements within the SVG. You must configure the fill for other elements manually.
   • To ensure the SVG scales correctly, add the viewBox attribute to the SVG file and specify its original dimensions.
2. Optional: If the image appears stretched, you can adjust its size by adjusting the W (width) and H (height) values.
   For more information about component style settings, see Style Configuration.

Step 4: Configure interactive actions

1. Select the Interaction tab and configure events and interactive actions. For more information, see Interaction configuration.

   For example, you can configure the widget to perform the Open Link action when it is clicked. You can also configure how the link opens.

2. Click Preview in the upper-right corner of the page to view and debug the component's data and style.