How To Allow SVG File Uploads In WordPress Media

There’s a lot of “wisdom” floating around on the Internet about what kind of image formats to use on your website. PNG or JPG? What size, and resolution? Which compression algorithm? Despite what a lot of articles tell you, there’s no one solution and you need to constantly test to separate myth from fact.

Vector Images vs Regular Images

However, one paradigm stands out – scalability. There are certain images on your site that you use repeatedly. Logos for example. These are used in multiple areas like the header and footer, advertising materials, and on letterheads. These “wide use” images need to be in a format that allows them to expand and contract without losing any of their resolution. They need to be as smooth no matter where you see them, or you risk damaging your brand.

This is why the best practice is to use vector images. Vector images are a special type of image that is defined by mathematical functions instead of pixels. As a result, they can scale up and down infinitely. There’s no “pixilation” when you zoom in –  no matter how high the magnification. By their nature, they are uniquely suited to logos which don’t have a lot of grainy details but are usually more “shape” like.

Plus, the size of vector images is minuscule. Even when you blow it up to thousands of pixels, a vector images just uses up a few KB of space! Whereas normal images can suck up several MB of data.

Vector images are stored in special file formats with the “.svg” extension. So if you’re thinking of placing a logo on your site, try and design it in a vector format as an SVG file so that you’re able to showcase it properly in all the right places.

Problems Uploading Vector Images to WordPress

Ok, you’re convinced that you need a vector image as your logo and you manage to find or design one that will work nicely. Unfortunately, when you try and add an SVG image to the WordPress media library, you get an error like this:

This because by default, WordPress only allows the following file types as images:

• jpg
• gif
• png
• bmp
• tiff
• x-icon

Any image filetype other than these, and it will give you the message as seen in the screenshot above:

“Sorry, this file type is not permitted for security reasons”

There’s a reason why this is the case since there are reports of “SVG Injection” attacks where hackers can place Javascript into SVG files. If you want to be safe, open the contents of your SVG image in a text editor, and paste it into a tool to sanitize SVG files first!

There’s an ongoing discussion over on the WordPress.org forums over whether or not it should be a default function to allow the uploading of SVG files.

Enabling SVG Uploads

To allow WordPress to upload SVG files, paste the following code into your theme’s functions.php or custom PHP code plugin:

function upload_svg_files( $allowed ) {
    if ( !current_user_can( 'manage_options' ) )
        return $allowed;
    $allowed['svg'] = 'image/svg+xml';
    return $allowed;
}
add_filter( 'upload_mimes', 'upload_svg_files');

If you don’t know how to do this, read this tutorial on pasting custom code into WordPress. Save your changes and you’re done!

Now when you try and upload SVG files into the media library, it works as expected:

It’s a good idea in general to disallow uploading SVG files when it’s no longer needed. You don’t want to give people the ability to freely upload this stuff to your WordPress directory and potentially compromise your website.

So use the above code, upload the file, and then delete it! Best to be safe.

Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!