How to Upload SVG Images in WordPress?

WordPress is the most popular content management system for creating websites. However, it also comes with restrictions and do not allow uploading certain type of files. SVG is one such filetype WordPress does not allow uploading from admin dashboard. If you are in a need of uploading SVG images, here is how to use them in your WordPress site.

Using SVG Images

Scalable Vector Graphics (SVG) is a widely used image format based on XML which you can edit using any text editor. Here are some of the reasons why SVG format is suitable:

The advantage is that it uses lossless compression and hence you can scale the images without losing quality.
Many WordPress block plugins and page builder plugins use SVG images to offer beautiful looking animations and graphics.
In addition, many free stock image websites offer free vector graphics in SVG format with high quality and low size. As you can see in the below image, SVG image size is 34KB while the smallest PNG format is of 154KB in size.

Default Behavior of SVG Image Upload in WordPress

However, WordPress will not allow you to upload SVG files.

Login to your WordPress admin dashboard and navigate to “Media > Add New” menu.
Click “Select Files” button and upload SVG image from your computer.
You will see the error message mentioning “Sorry, you are not allowed to upload this file type”.

You will see the same error if you try to upload SVG file using image block in Gutenberg editor. you will not even able to select SVG files for uploading through “Media Library” option from the image block.

SVG File Upload Error in Gutenberg Editor

SVG Security Issues

As mentioned, unlike other image formats SVG is an XML text file which anyone can edit and add malicious codes. You can use Notepad or TextEdit apps to easily inject any code in the XML source file. Therefore, SVG files are vulnerable for Cross Site Scripting (XSS), brute force and XML External Entity attacks. Due to these security issues, WordPress will safely block uploading SVG images and protect your site.

However, if you are the person creating SVG image (for example, using Adobe Illustrator), then you can upload as it has a clean code. This essentially means, you should prevent other users (editor or contributor or other admin) from uploading SVG images. In addition, avoid downloading from unknown websites and upload it on your site as it can contain malicious code.

How to Upload SVG Images in WordPress?

There are two options to allow SVG uploads in WordPress.

1. Using Plugin to Allow SVG Upload

This is a super easy option to install a plugin and allow SVG uploads in WordPress.

Go to admin dashboard and navigate to “Plugins > Add New” section.
Search for “svg” to find “SVG Support” plugin.
Install the plugin and activate it on your site.

Now, try to upload your SVG files through “Media > Add New” menu or from post editor.
The files will be uploaded successfully, you can copy the image URL and view it in browser like any other uploaded images.

When uploading from the post editor, you can resize the image size like any other images. In addition, the plugin offers few settings which you can access from “Settings > SVG Support” section.

Restrict to Administrators – only allow admins to upload SVG images and all other user roles will be restricted.
Load frontend CSS – enable this option if you have problem in loading CSS on published site.
Sanitize SVG while uploading – enable this option to clean up the XML file before it is uploaded. This will remove all external URLs thus protecting the upload.
Minify SVG – enable minification to remove space, comments and other unnecessary content from the file.
Delete Plugin’s Data – use this option when you decide to uninstall the plugin from your site.
Enable Advanced Mode – this will open up advanced settings allowing you to use Vanilla JS instead of JQuery, move JS to footer, sanitize SVG in frontend, inline SVG and add custom CSS class.

2. Manual Code to Allow SVG Upload

The next option is to use a code snippet instead of using a plugin.

Go to “Appearance > Theme File Editor” option in admin dashboard (if you are using block-based themes then go to “Tools > Theme File Editor”).
Make sure your current theme is selected and click on “Theme Function” file (called functions.php).
Copy the following code snippet.

function svg_support($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'svg_support');

Paste the copied code at the end of your file and click on “Update File” button.

Now, upload SVG file from “Media > Add New” section or from the post editor using an image block. You should be able to upload it successfully without any error.

Remember, changes to functions.php file will be deleted when you update the theme. To avoid this, you can use child theme and update the functions.php file of child theme. Alternatively, you can use plugins like Code Snippets to add custom functions to your WordPress site without editing template files. This will help if you are using block these which does not have Theme Functions file (like Twenty Twenty Three block theme).

Final Words

Compared to menu code insertion, we recommend using SVG Support plugin. This will allow you to restrict the file upload only for administrators and eliminate the hassle of maintaining the code snippet manually.

How to Upload SVG Images in WordPress?

Using SVG Images