How to Allow SVG Uploads in WordPress: Step-by-Step Tutorial

by | Jan 22, 2025 | Tutorials | 0 comments

Affiliate Disclosure: Some of the links in this post are affiliate links, which means we may earn a commission if you click through and make a purchase. For more details, please read our Affiliate Disclosure Policy.

SVG Images are a great choice for WordPress websites because they offer scalability, small file sizes, and high-quality graphics. However, WordPress does not allow SVG uploads by default due to security concerns. This limitation can be frustrating, especially if you want to use SVG images for icons, logos, or other design elements.

Fortunately, you can enable SVG uploads in WordPress using either a plugin or custom code. In this step-by-step tutorial, we will walk you through both methods so you can easily upload SVG files without any issues. You can choose the method that suits you best, and we’ll ensure both options are simple, safe, and easy to follow.

Allow SVG Upload Using a Plugin

In this step, we will use an SVG support plugin to enable SVG uploads in WordPress. We’ll guide you through the entire process, from downloading to using the plugin, step by step.

Step 1: Download and Install the SVG Support Plugin

First, download and install the SVG Support plugin to allow easy SVG file uploads.

  1. Click on Plugins in the WordPress dashboard.
  2. Select Add New Plugin.
  3. Type SVG in the plugin search bar.
  4. Install and activate the SVG Support plugin, as shown in the screenshot below.
The process of installing and activating the SVG Support plugin in the WordPress dashboard to enable SVG file uploads.

Step 2: Upload SVG Image

In this step, we will show you how to upload SVG images. Ensure that the SVG Support plugin is activated; otherwise, SVG files will not be visible during the upload process.

  1. Click on the Media option in the WordPress dashboard.
  2. Select Library under the Media section.
  3. Click on the Drop files to upload button.
  4. Choose the SVG image from the folder where it is saved.
Screenshot demonstrating the process of uploading an SVG image to the WordPress media library using the SVG Support plugin.

The screenshot below displays the result after successfully uploading the SVG image to the WordPress media library.

The SVG image successfully uploaded and visible in the WordPress media library using the SVG Support plugin.

Final Result of Enabling SVG via Plugin

The screenshot below shows the result of enabling SVG using a plugin. It also shows that we have successfully uploaded the SVG image without any issues.

Screenshot displaying the successful upload of an SVG image in Divi after enabling SVG support using a plugin.

Learn More: 23 WordPress Plugins for Divi Website in 2024

Allow SVG Upload Using PHP Code

In this section, we will demonstrate how to enable SVG image uploads using PHP code. This method is simple and can be done easily by following the steps below.

Step 1:  Adding PHP Code for SVG Support in WordPress

In this step, you need to copy the PHP code provided below. There is no need for any separate code—simply use our code and paste it by following our step-by-step instructions. Make sure not to include the PHP opening and closing tags, just paste the code below the default PHP code.

// Enable SVG file upload support in WordPress for Divi Cake
function divi_cake_enable_svg_upload($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'divi_cake_enable_svg_upload');

// Fix SVG display in media library
function divi_cake_fix_svg_display() {
    echo '<style>
        .attachment-details .details .filename {
            word-wrap: break-word;
        }
    </style>';
}
add_action('admin_head', 'divi_cake_fix_svg_display');

  1. Click on the Appearance option in the WordPress dashboard.
  2. Select Theme File Editor from the dropdown.
  3. Click on functions.php in the theme file editor.
  4. Scroll to the bottom of the functions.php file and paste the copied PHP code.
  5. Click on the Update File button to save the changes.
Add PHP code to the functions.php file in WordPress Theme File Editor to enable SVG uploads and fix SVG display issues in the media library.


Learn More: 8 Best WordPress Image Optimization Plugins in 2024

Step 2: Upload the SVG Image to WordPress Media Library

Now, go back to the Media Library and upload the SVG image from your PC.

  1. Click on the Select Files button.
  2. Choose the SVG image from your PC, as shown in the screenshot below.
Selecting and uploading an SVG image from the computer to the WordPress Media Library after enabling SVG support using PHP code.

Final Result of Enabling SVG via PHP Code

The screenshots below show the result after successfully enabling SVG using the PHP code. It also confirms that we have easily uploaded the SVG image without any difficulties.

The screenshot showing the successful upload of an SVG image to the WordPress Divi library using PHP.

Conclusion

In this tutorial, we’ve walked you through two effective methods to allow SVG uploads in WordPress using a plugin and by adding custom PHP code. Both methods offer unique advantages, with plugins providing a quick, beginner-friendly solution and PHP code offering more customization and control for those familiar with coding.

By following the steps outlined for both options, you can easily enable SVG uploads and enhance your website with scalable, high-quality images. Whether you opt for the simplicity of a plugin or the flexibility of custom code, both approaches ensure that you can seamlessly incorporate SVG images into your WordPress website. Choose the method that best suits your needs, and start utilizing SVG files for a more efficient and visually appealing web design.

Learn More: How To Enable Any File Type Uploads In WordPress/Divi

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Stay ahead with the Latest WordPress Insights

Subscribe for tips, updates, and exclusive tools to elevate your website game.

Newsletter

No spam ever. Only Divi related updates. You need this.

Pin It on Pinterest

Shares