Skip to content

Divi Inline SVG

Inline SVG is part of Divi Conkit Pro. It renders an uploaded SVG file directly in the page markup — rather than as an image tag — so you can recolor, resize, and animate it with Divi’s native controls.

Key Features

  • True inline SVG rendering — the SVG’s paths are part of the page, not a flattened image.
  • Custom color override — recolor a single-color SVG without editing the source file.
  • Aspect-ratio-aware sizing — Use Aspect Ratio keeps proportions correct as you resize.
  • Remove Inline CSS — strip embedded styles from the source file when needed.

Adding the Module

  1. Edit a page with the Divi Visual Builder.
  2. Add a new module and search for Inline SVG.
  3. Upload your SVG file, then set a custom color and size if needed.

Content Settings

  • Upload SVG — the source file.
  • Use Custom Width / Use Aspect Ratio — sizing controls.
  • Use Custom Color — override the SVG’s native fill color.
  • Remove Inline CSS — strip any embedded `<style>` from the uploaded file.
  • Alignment — Left, Center, Right, or Justify.

Design Settings

  • SVG — Width, Height, and Color.

Single-color SVGs recolor best
Use Custom Color works most predictably on SVGs authored with a single fill color — multi-color source files may only partially recolor depending on how the paths are grouped.

FAQ

Does it work with Divi 5?

Yes. Native Divi 5 module with full Divi 4 support — your license covers both.

Why use this instead of Divi’s core Image module?

The Image module renders your SVG as a flat picture. Inline SVG keeps the vector paths live in the DOM, enabling recoloring and CSS-based animation the Image module can’t do.

Where can I see it in action?

Visit the Inline SVG module page for a live overview and pricing.

Loading...