Skip to main content

The SVG Module in Divi 5

Learn how to add and style sharp, infinitely scalable vector graphics on any Divi 5 page by pasting valid SVG code or uploading an SVG file.

The Divi SVG Module lets you place a vector graphic anywhere on your page by pasting raw SVG markup or uploading an SVG file. Because SVGs are vectors (math-based images instead of pixel-based ones), they stay crisp at every screen size and can be recolored, animated, and restyled directly inside the Visual Builder.

Use the SVG Module for logos, icons, illustrations, and decorative shapes that need to scale flawlessly across breakpoints and stay editable through Fill, Stroke, and the rest of Divi's composable design options.

Add The Divi SVG Module

When you load the Visual Builder, Divi automatically adds a Section.

  1. Click the Green Plus icon to insert a Row.

  2. Click the Gray Plus icon inside the Row, which will show the list of all available Divi modules.

  3. Find the SVG module and click on it to load it. Alternatively, you can use the Search option to find it.

Divi 5 - Add The Divi SVG Module

The Divi SVG Module Use Cases

  1. Displaying Logos and Brand Marks: Drop in your logo as an SVG so it stays sharp on retina screens and never pixelates at large sizes.

  2. Creating Decorative Shapes: Use SVG dividers, blobs, and background flourishes that you can recolor and resize without losing any image quality.

  3. Embedding Custom Illustrations: Paste in custom SVG markup when you need full control over the vector code, ideal for animated illustrations or graphics styled directly with Fill and Stroke.

SVG Module Settings Breakdown

Once you've added the SVG module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:

The Content tab

Inside the Content tab, you choose where the SVG comes from, set its accessible title, configure the module link, and more.

Divi 5 - SVG Module's Content tab

  1. Source Type - 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> element. Broken or partial markup will not render.

    • 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 the How to Upload SVG and JSON Files article.

    • 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.

  2. Link - Make the entire SVG module clickable. Set the Link URL, choose the Link Target (same tab or new tab), and add a Link Rel value such as nofollow or noopener when needed.

  3. Elements - Toggle which sub-elements of the SVG module are shown.

  4. Background - Choose the SVG module's background styles.

  5. Loop - Enables the loop builder.

  6. Order - Choose the order in which the SVG module appears inside a Flexbox or Grid layout.

  7. Meta - Choose the SVG Module's Label text and force its Visibility inside the Visual Builder.

The Design tab

All the design styles and options for the SVG module are in this tab.

Divi 5 - SVG Module's Design tab

  1. Layout - Choose how the SVG module lays out its content using Divi's Flexbox or CSS Grid system.

  2. Fill - Choose the SVG's fill color, which is the paint applied to the inside of closed shapes. Setting Fill here overrides any fill values defined inside the SVG markup itself.

  3. Stroke - Choose the SVG's stroke color, stroke width, and stroke style, such as a dashed pattern. Strokes are the outlines drawn along the SVG's shape paths.

  4. Sizing - Choose the SVG module's sizing.

  5. Spacing - Choose the SVG module's spacing.

  6. Border - Choose the SVG module's border styles.

  7. Box Shadow - Choose the SVG module's Box Shadow styles.

  8. Filters - Choose the SVG module's filters, such as hue shifts, saturation changes, and blending modes.

  9. Transform - Choose the SVG module's advanced design effects, such as scaling, rotating, skewing, and translating.

  10. Animation - Choose the SVG module's animation styles.

The Advanced tab

The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.

Divi 5 - SVG Module's Advanced tab

  1. 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.

  2. CSS - Allows you to add custom CSS code to fine-tune your SVG module, enabling advanced styling that perfectly aligns with your vision.

  3. HTML - Choose the semantic HTML tag for the SVG module.

  4. Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.

  5. Interactions - Create custom interactions, such as showing or hiding the SVG, and many more.

  6. Visibility - Choose the SVG module's visibility based on different devices.

  7. Transitions - Choose how long the SVG module's animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.

  8. Position - Choose precise control of the SVG module's placement and create dynamic, visually engaging designs.

  9. Scroll Effects - Control how the SVG module behaves and transforms during scrolling.

Save your changes and exit the Visual Builder

To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.

You can also:

  1. Click on the Save button.

  2. Click on the Exit button.

Divi 5 - Save and Exist Visual Builder

Related Articles
The Blog Module in Divi 5
The Code Module Divi 5
The Icon Module in Divi 5
The Text Module in Divi 5
The Lottie Module in Divi 5
Did this answer your question?