How to make WordPress allow SVG upload into Media Library

Scalable Vector Graphics or SVG is as it’s name say, a file format used for vector graphics. SVG files are gaining popularity in web design because they are very lightweight and resizable without loosing quality. WordPress by default doesn’t allow upload of SVG files due to security reasons. In this tutorial we’ll introduce you to the security aspects and show how to make WordPress allow SVG upload into Media Library.

Benefits of using SVG files on WordPress websites

The main benefit of using SVG files on WordPress or any other websites is that SVGs are extremely lightweight. Another benefit of using SVG is the possibility to animate them with CSS and JavaScript and achieve cool visual effects. Animating SVG is a topic for another tutorial, for now let’s keep to the lightweight of this file type.

Website loading speed is becoming one of the most important aspects of web development nowadays. Therefore, developer’s goal should be to keep the website as lightweight as possible. Among other methods, keeping the image file sizes as small as possible is one of the most important steps in website loading speed optimization. This is where every web developer should use the huge benefit of SVG files – their extremely small size in kilobytes. In many cases, the size of a SVG image can be up to 90% smaller than the same image in JPG or PNG format.

Let’s take for example this cute mushroom image by aalmeidah from Pixabay in 600×640 resolution. It’s PNG version size is 238kb and the JPG is 100kb large, compared to the 34kb SVG version of the same image.

Let’s not forget to mention another benefit of using SVG images on websites, their vector format. Vector images won’t loose quality when resizing them, from icons to extra large dimensions. SVG images will work great as icons, stand alone images or background images of HTML elements.

Security concerns when using SVG files in WordPress

This whole tutorial is based on the fact that WordPress doesn’t allow SVG upload into the Media Library. If you try to do it a message pops up saying: Sorry, this file type is not permitted for security reasons. So, what could possibly be the security reasons not allowing you to upload an image into your Media Library?

Unlike other image files, SVG files are actually XML files containing strings of code. The browsers render those strings of code into vector images. To get this clearer, try to open a SVG file with a text editor. XML files can integrate JavaScript code which is an easy way to incorporate malicious scripts inside SVG imagesb. When you upload a SVG image containing malicious code in to WordPress and add it to your website, the website becomes vulnerable in many ways and exposed to external attacks. That’s why you have to take special precautions when enabling SVG support in WordPress.

Security precautions to take when you make WordPress allow SVG upload

Not every SVG image can pose a threat to a WordPress website. Actually, most SVG files are completely safe to use. Still, precaution are to be taken seriously.

Examples of SVG images safe to use in WordPress:

• images created by yourself or your trustworthy graphic designer
• images downloaded from a trustworthy website
• SVG images received from other trustworthy sources

Examples of unsafe SVG images:

• images downloaded from a random website or Google image search
• images received from other insecure sources
• SVG images added to your website via guest blogging or comment forms

If both website developers and administrators are well aware of the risks when using SVG images, and take all precautions seriously, there shouldn’t be any worries regarding the website security. There are also WordPress plugins available to additionally secure a website that uses SVG images.

Additional security added trough plugins:

• limit SVG images upload to administrators only
• sanitize SVG images (remove any code scripts from SVG files)

Make WordPress allow SVG upload by editing functions.php

If you don’t like overloading WordPress with plugins and feel comfortable editing template files, this is a quick and easy solution. You can make WordPress allow SVG upload simply by adding few lines of code to your functions.php file. Locate your theme’s functions.php whitin the Theme Editor and paste the following code snippet at it’s end. After saving the changes, reopen the Media Library and upload your SVG images.

/*  ALLOW SVG  */

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

Pro Tip: When editing WordPress theme files, make sure you are using a Child theme. That way your changes to theme files won’t get lost once you update the main theme. To learn more about WordPress Child themes , consult the WP Theme Handbook.

Downsides of this method: If you make WordPress allow SVG upload by editing functions.php, you must be aware of it’s downsides. Firstly, this method offers no security against malicious code injected into SVG files. Therefore, you and the website administrators should make sure to take all security precautions we mentioned before. Secondly, SVG files uploaded into the Media Library won’t show a preview image, only a file icon. Make sure to name your files clearly for easier management later. Finally, this method of uploading works for 99% of SVG images, but some SVG files you still won’t be able to upload.

Make WordPress allow SVG upload by installing a plugin

There are a couple of plugins available in the WordPress Repository to make WordPress allow SVG upload. Each SVG upload plugin will do it’s job well, with some differences to consider. We suggest you use one of the following plugins, depending on your (security) needs:

• Safe SVG : offers highest level of security by sanitizing uploaded SVG files
• SVG Support : doesn’t sanitize SVG images, option to allow SVG upload to administrators only
• WP SVG images : allows SVG upload without any security measures

All SVG upload plugins are simple to use, without any or with only few settings to customize. The plugins will also generate previews of uploaded SVG images in the Media Library. No matter which plugin you choose, always be aware of potential risks when uploading SVG images into WordPress. Take the necessary security precautions and enjoy all the benefits of using SVG images on your website.