Source: https://divicake.com/blog/allow-svg-uploads-wordpress-step-by-step-guide/

[Blog](https://divicake.com/blog/)/[Tutorials](https://divicake.com/category/tutorials/)

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

By Divi Cake·22 January 2025·Updated 19 August 2026·4 min read

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

We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/)

On this page

- [Allow SVG Upload Using a Plugin](https://divicake.com#allow-svg-upload-using-a-plugin)

- [Step 1: Download and Install the SVG Support Plugin](https://divicake.com#step-1-download-and-install-the-svg-support-plugin)
- [Step 2: Upload SVG Image](https://divicake.com#step-2-upload-svg-image)
- [Final Result of Enabling SVG via Plugin](https://divicake.com#final-result-of-enabling-svg-via-plugin)
- [Allow SVG Upload Using PHP Code](https://divicake.com#allow-svg-upload-using-php-code)

- [Step 1: Adding PHP Code for SVG Support in WordPress](https://divicake.com#step-1-adding-php-code-for-svg-support-in-wordpress)
- [Step 2: Upload the SVG Image to WordPress Media Library](https://divicake.com#step-2-upload-the-svg-image-to-wordpress-media-library)
- [Final Result of Enabling SVG via PHP Code](https://divicake.com#final-result-of-enabling-svg-via-php-code)
- [Conclusion](https://divicake.com#conclusion)

SVG Images are a great choice for [WordPress websites](https://divicake.com/blog/website-is-built-with-wordpress/) because they offer scalability, small file sizes, and high-quality graphics. However, [WordPress](https://divicake.com/blog/wordpress-tutorial/) 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](https://wordpress.org/plugins/svg-support/) plugin to allow easy SVG file uploads.

- Click on Plugins in the WordPress dashboard.
- Select Add New Plugin.
- Type SVG in the plugin search bar.
- 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.

- Click on the Media option in the WordPress dashboard.
- Select Library under the Media section.
- Click on the Drop files to upload button.
- 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](https://divicake.com/blog/wordpress-plugins-for-divi/)

## Allow SVG Upload Using PHP Code

In this section, we will demonstrate how to enable SVG image uploads using [PHP code](https://divicake.com/blog/how-to-add-php-code-to-the-divi/). 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');

- Click on the Appearance option in the WordPress dashboard.
- Select Theme File Editor from the dropdown.
- Click on functions.php in the theme file editor.
- Scroll to the bottom of the functions.php file and paste the copied PHP code.
- 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](https://divicake.com/go/image-optimization-plugins/)

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

- Click on the Select Files button.
- 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](https://divicake.com/blog/how-to-enable-any-file-type-uploads-in-divi/)

## Written by Divi Cake

Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week.

- [About Divi Cake](https://divicake.com/about/)

## Get the Divi Cake newsletter

New Divi tutorials and Divi Cake product news, by email.

First name (optional)Email

Company website

SubscribeSubscribeSubscribe

Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/)

The sign-up form needs JavaScript for its spam check.

Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do.

## Submit a comment

Comments are read before they appear. Your email is not published.

Comment

NameEmail

Company website

Submit commentSubmit commentSubmit comment

The comment form needs JavaScript for its spam check.

Thanks. Your comment is waiting for review and will appear here once it is approved.

## Do you need help with …

- [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/)
- [Divi websites](https://divicake.com/divi-website-development/)
- [Divi plugins](https://divicake.com/divi-plugin-development/)
- [Fix a site](https://divicake.com/fix-existing-site/)
- [Beyond Divi](https://divicake.com/beyond-divi/)
- [Technical SEO](https://divicake.com/technical-seo/)
- [SEO content](https://divicake.com/seo-content/)

## Newsletter

New Divi tutorials and Divi Cake product news, by email.

First name (optional)Email

Company website

SubscribeSubscribeSubscribe

Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/)

The sign-up form needs JavaScript for its spam check.

Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do.

## Save Annually on Divi

[Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/)

## WordPress Hosting & Tools

[100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/)

## More in Tutorials

[

Divi Responsive Views Explained

Tutorials7 min read

### Divi Responsive Views Explained

How Divi's responsive views work: preview any tablet or phone size, see where the fold lands, flip to landscape, and save your own default view.

27 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-responsive-views/)

[

Divi's Global Color System Explained

Tutorials6 min read

### Divi's Global Color System Explained

How Divi's global colors work: add or convert a color once, reuse it in every module, then edit it in one place to recolor the whole site.

25 October 2026](https://divicake.com/blog/a-look-at-divis-new-global-color-system/)

[

Getting Started with Divi: Theme Options - SEO Tab

Tutorials5 min read

### Getting Started with Divi: Theme Options - SEO Tab

What every setting in Divi's Theme Options SEO tab does — homepage title, meta description and keywords, canonical URLs, title autogeneration, and the separate controls for single posts and the index page.

21 October 2026](https://divicake.com/blog/getting-started-with-divi-theme-options-seo-tab/)
