The SVG Module in Divi 5¶
The Divi 5 SVG Module lets you place SVG graphics directly on a page and control their appearance with native stroke and width settings — keeping vector artwork lightweight and pixel-perfect at any size.
Overview¶
This module was introduced as part of the Five New Modules for Divi 5 release (Timeline, Breadcrumbs, Table of Contents, SVG, Instagram Feed). Unlike inserting an SVG as an image, the SVG module exposes the source vector's strokes and fills as Divi settings, so you can restyle the artwork in the builder without editing the file.
Caption: Placeholder — capture once a working install is available.
Settings & Options¶
Content Tab¶
| Setting | Type | Default | Description |
|---|---|---|---|
| SVG Source | Choose how the SVG is supplied to the module:SVG Code: Paste in valid SVG markup. The code you paste must be well-formed | ||
| SVG Code | Paste in valid SVG markup. The code you paste must be well-formed | ||
| Uploaded SVG | Upload any SVG file from the WordPress Media Library.Important note:By default, WordPress blocks the upload of SVG files for security reasons. You'll need to enable SVG uploads before this option will work. For instructions, refer to theHow to Upload SVG and JSON Filesarticle. | ||
| Title | Set the SVG's title text. The title is used for accessibility and appears as a tooltip when a visitor hovers over the graphic. | ||
| Link | Make the entire SVG module clickable. Set theLink URL, choose theLink Target(same tab or new tab), and add aLink Relvalue such asnofollowornoopenerwhen needed. | ||
| Elements | Toggle which sub-elements of the SVG module are shown. | ||
| Background | Choose the SVG module's background styles. | ||
| Loop | Enables the loop builder. | ||
| Order | Choose the order in which the SVG module appears inside a Flexbox or Grid layout. | ||
| Meta | Choose the SVG Module's Label text and force its Visibility inside the Visual Builder. |
Design Tab¶
| Setting | Type | Default | Description |
|---|---|---|---|
| Stroke | Native stroke styling exposed by the module | ||
| Stroke Width | Native stroke width styling exposed by the module | ||
| Layout | Choose how the SVG module lays out its content using Divi'sFlexboxorCSS Gridsystem. | ||
| Fill | Choose the SVG's fill color, which is the paint applied to the inside of closed shapes. Setting Fill here overrides anyfillvalues defined inside the SVG markup itself. | ||
| Sizing | Choose the SVG module's sizing. | ||
| Spacing | Choose the SVG module's spacing. | ||
| Border | Choose the SVG module's border styles. | ||
| Box Shadow | Choose the SVG module's Box Shadow styles. | ||
| Filters | Choose the SVG module's filters, such as hue shifts, saturation changes, and blending modes. | ||
| Transform | Choose the SVG module's advanced design effects, such as scaling, rotating, skewing, and translating. | ||
| Animation | Choose the SVG module's animation styles. |
Advanced Tab¶
| Setting | Type | Default | Description |
|---|---|---|---|
| CSS ID | text | none | Custom HTML id attribute |
| CSS Class | text | none | Custom CSS class(es) |
| Custom CSS | code | none | Target specific elements within the module |
| Attributes | Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the element. Use these to apply advanced styling via your child theme's stylesheet or Divi's custom CSS settings. | ||
| CSS | Allows you to add custom CSS code to fine-tune your SVG module, enabling advanced styling that perfectly aligns with your vision. | ||
| HTML | Choose the semantic HTML tag for the SVG module. | ||
| Conditions | Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time. | ||
| Interactions | Create custom interactions, such as showing or hiding the SVG, and many more. | ||
| Visibility | Choose the SVG module's visibility based on different devices. | ||
| Transitions | Choose how long the SVG module's animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out. | ||
| Position | Choose precise control of the SVG module's placement and create dynamic, visually engaging designs. | ||
| Scroll Effects | Control how the SVG module behaves and transforms during scrolling. | ||
| Save | k on theSavebutton. | ||
| Exit | k on theExitbutton. |
Elegant Themes tutorials¶
- Five New Modules for Divi 5 (Timeline, Breadcrumbs, Table of Contents, SVG, Instagram Feed) — release announcement; SVG module is highlighted for native stroke and width styling.
Version Notes¶
Divi 5 Only
This page documents Divi 5 behavior exclusively.
Troubleshooting¶
Uploading SVGs
See Uploading SVG and JSON files for WordPress upload-permission setup.