Components

Inline SVG

Scalable. Customizable. Seamlessly Integrated.

The Inline SVG component enables you to embed SVG graphics directly into your content, providing complete styling flexibility and visual clarity across all screen sizes. Ideal for icons, logos, and animations, it ensures that your visuals are crisp, fast-loading, and easy to update, without needing external image requests or complex overrides.

You can even define theme-based variants, making it easy to adapt your visuals across light and dark, or branded UI modes. And with direct editing of SVG paths, designers and developers alike can tweak and preview visuals live inside the Visual Editor.

Sharp graphic, Seamless behavior

  1. Render crisp visuals at any size.
    No quality loss, ever.

  2. Fast-Loading.
    No external file requests.

  3. Adapt visuals to active themes.
    Ensure visual harmony everywhere.

Powerfully Customizable

  1. Tweak paths directly.
    Visual feedback in seconds.

  2. Apply component themes.
    Fine-tune every detail.

  3. Ideal for Icons & Logos.
    Perfect for branded elements.

Use Cases

Use the Inline SVG component when you need ultra-sharp, lightweight, and fully customizable graphics across your site:

  • Logos and brand marks

  • UI icons and button illustrations

  • Interactive or animated SVG elements

  • Theme-aware visuals (e.g., light/dark variants)

  • Custom SVGs with precise control over color, stroke, or animation

Unlike raster images or external SVG links, this component brings your visuals into the content pipeline—optimized for speed, styling, and consistency.

Configuration Options & Features

The Inline SVG component empowers you to add precise, scalable, and customizable graphics to your content without compromising performance or flexibility. Whether you need to render icons, logos, or advanced animations, this component keeps things fast, flexible, and theme-aware.

Pixel precision. Infinite scalability. Full control.

Content

Paste or load the full SVG markup (starting with <svg>). This is the actual vector content that will be embedded inline within your page.

  • Allows full customization of paths, shapes, and styling

  • Enables inline animations and JavaScript interactions

  • Automatically previewed inside the Visual Editor

You can adapt your SVG markup at any time with instant feedback.

Component Theme

Apply a styling theme to the content or parent container of your SVG element. This enables you to set styling options directly on the SVG, making it possible to color specific paths and change certain other elements to your liking directly from your Visual Editor interface.