SVG Image

The SVG Image component is used to insert and display images in the Scalable Vector Graphics (SVG) format. Unlike raster images (PNG, JPG), SVGs are resolution-independent and retain clarity at any size, making them ideal for logos, icons, vector illustrations, and diagrams in dashboards.

SVGs can also be styled or manipulated with CSS and JavaScript, giving them flexibility for both static visuals and interactive dashboard elements.

Best Situations to Use

Use the SVG Image component when you want to:

  • Display scalable icons or logos without losing quality on different screen sizes.

  • Add vector-based illustrations that are lightweight and resolution-independent.

  • Include interactive SVG elements styled with CSS or linked to actions.

  • Ensure consistent rendering of graphics across different devices and resolutions.

Not Recommended for:

  • Displaying high-detail photographs (use standard Image component instead).

  • Complex image editing scenarios that require raster image manipulation.

Properties

Background

  • Shadow: Enable or disable shadow effect behind the SVG.

  • Shadow Color: Define the shadow color.

  • Shadow Transparency: Adjust the opacity of the shadow.

General

  • Component Name: Assign a unique identifier for the SVG component.

  • Left / Top: Position the SVG on the dashboard canvas.

  • Height / Width: Define the dimensions of the SVG container.

  • Initial Visibility: Toggle whether the SVG is displayed on the first preview.

  • Browse SVG: Upload an SVG file from your system or repository.

Example Configurations

  1. Static Logo Display

    • Add a company logo in SVG format to ensure crisp rendering on all resolutions.

  2. Scalable Icon Set

    • Insert icons (e.g., social media or status indicators) using SVGs for clean scaling.

  3. Interactive SVG Graphic

    • Apply hover styles or associate actions with SVG elements for interactivity.

Notes

  • SVGs are ideal for dashboards viewed on multiple devices due to their scalability.

  • Optimize SVG files before upload to reduce size and improve performance.

  • Use consistent styling with other components to maintain design cohesion.

PreviousStepperNextText Box