Ask AI
Skip to main content

Set the SVG of an image element

Function: Set the SVG of an image element​

This action allows you to dynamically change the graphic displayed by an image element on your page by providing SVG (Scalable Vector Graphics) code. Instead of using a traditional image file (like JPG or PNG), you can embed vector graphics directly, which are great for logos, icons, or data visualizations that need to scale without losing quality.

Input,

  • Element: The specific image element on your page that you want to update. This is a required input.
  • Svg: The SVG code (as text) that you want to display within the chosen image element. If you leave this blank, the image element will become empty or transparent.

Output,

This action directly modifies the specified image element on your page. It does not produce any direct output values that can be used in subsequent actions.

Execution Flow,

Real-Life Examples,

Here are some ways you can use this action in your application:

  • Example 1: Displaying a custom icon based on user selection

    • Inputs:
      • Element: "Product Icon" (an image element on your product detail page)
      • Svg: A variable containing SVG code for a specific product's icon, retrieved from a database or another action.
    • Result: The "Product Icon" element on the product detail page updates to display the custom SVG icon for the selected product.

  • Example 2: Dynamically generating a chart or graph

    • Inputs:
      • Element: "Sales Chart Display" (an image element on your dashboard)
      • Svg: A variable holding SVG code that represents a dynamically generated sales chart, created by a data processing action.
    • Result: The "Sales Chart Display" element on the dashboard updates to show the latest sales data as an interactive SVG chart.

  • Example 3: Clearing an image element

    • Inputs:
      • Element: "User Profile Picture" (an image element on a user's profile page)
      • Svg: (Left blank or set to an empty string "")
    • Result: The "User Profile Picture" element on the profile page becomes empty, effectively removing the previously displayed image. This could be used when a user deletes their profile picture.