SVG (Scalable Vector Graphics) files are becoming increasingly popular due to their ability to scale without losing quality. While WordPress supports various file types for uploads, SVGs are not enabled by default due to security concerns. However, with a few simple steps, you can safely allow SVG uploads to your WordPress site. In this tutorial, we’ll guide you through the process.

Enabling SVG uploads in WordPress can be done using either a plugin or custom code. Below are detailed descriptions of both methods:

Method 1: Using a Plugin (Safe SVG)

Using a plugin is the easiest and safest method for enabling SVG uploads in WordPress. The Safe SVG plugin is widely used and trusted for this purpose.

Steps to Enable SVG Uploads Using Safe SVG Plugin:

1. Installation:

• Navigate to your WordPress admin dashboard.
• Go to Plugins » Add New.
• Search for “Safe SVG” in the search bar.
• Find the “Safe SVG” plugin by “10up” and click Install Now.
• After installation, click Activate.

2. Configuration:

• Go to Settings » Media in your WordPress admin dashboard.
• In the bottom of the page, select which user roles that should be allowed to upload SVG files.
• Click Save Changes to apply the settings.

3. Upload and Insert SVG:

• Navigate to Media » Add New.
• Upload your SVG file.
• Insert the SVG file into your posts or pages using page builder of your choice.

That’s it!

Method 2: Using Custom Code

If you prefer not to use a plugin or want more control over the SVG handling process, you can enable SVG uploads using custom code. This method involves adding code snippets to your theme’s functions.php file or a custom site-specific plugin.

Steps to Enable SVG Uploads Using Custom Code:

1. Access Theme’s functions.php File:

• Navigate to your WordPress admin dashboard.
• Go to Appearance » Theme Editor.
• Select the functions.php file from the list of theme files.

OR

• Use FTP or cPanel to access your WordPress site’s files.
• Navigate to wp-content/themes/your-theme-name/
• Locate and edit the functions.php file.

2. Add Custom Code:

Add the following code snippet to enable SVG uploads:

add_filter('upload_mimes', function($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
});

3. Save the Changes:

• If you’re using the Theme Editor, click “Update File” to save the changes.
• If you’re using FTP or cPanel, save the functions.php file and upload it back to your server.

4. Upload and Insert SVG:

• Navigate to Media » Add New.
• Upload your SVG file.
• Insert the SVG file into your posts or pages using page builder of your choice.

That’s all for today!

Both methods – using a plugin like Safe SVG or adding custom code to your theme’s functions.php file – can effectively enable SVG uploads in WordPress. The plugin method is simpler and recommended for most users, while the custom code method offers more control and flexibility for advanced users or developers. Choose the method that best suits your needs and comfort level with WordPress customization!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: Hot to add a favicon in WordPress

👉 Free course: Create a website from scratch with Divi