The Divi Inline SVG module for Divi Builder allows you to embed and display scalable vector graphics (SVGs) directly within your content. SVGs are a powerful image format that can be scaled to any size without losing quality, making them ideal for logos, icons, and other graphics that need to be crisp and clear on all devices. The Inline SVG module lets you directly add SVG code, customize its appearance, and integrate it seamlessly with the rest of your design.
SVG in WordPress
To upload SVG files in WordPress, you need to make a few adjustments since WordPress doesn’t natively support SVG uploads due to security concerns. Here’s a safe and straightforward method to enable SVG uploads:
Use a Plugin
Two recommended SVG plugins are Safe SVG and SVG Support.
Safe SVG
- Install and activate the Safe SVG plugin.
- This plugin sanitizes SVG files to ensure they’re safe for upload and use.
SVG Support
- Install and activate the SVG Support plugin.
- This plugin not only enables SVG uploads but also allows you to inline SVG files.
Security and Safety
- Only upload SVG files from trusted sources.
- Always be cautious when enabling SVG uploads due to potential security risks.
- Consider using a tool like SVG Sanitizer to sanitize your SVG files before uploading them.
Content
SVG
- Upload SVG – This option allows you to upload an SVG file directly into the module. By uploading an SVG, you can display high-quality, scalable vector graphics on your page, which will remain sharp at any size and contribute to a clean, professional design.
Design
SVG
The SVG design options allow you to customize the appearance of the uploaded SVG. You can adjust settings such as the size, color, and alignment of the SVG to ensure it integrates seamlessly with your design and maintains visual clarity across different devices.
Text
The Text design options let you style any text associated with the SVG, such as labels or descriptions. You can modify the font, size, color, spacing, and alignment to ensure the text is readable and visually complements the SVG, enhancing the overall presentation.