2 Safe Ways To Upload SVG Files in WordPress

You’ve probably seen the error before, you try and upload an SVG file to your WordPress website, and you’re met with the error: “Sorry, this file type is not permitted for security reasons.”.

I have seen this error numerous times on the many WordPress websites I’ve worked on over the years, and luckily there is a simple solution for this.

You can easily overcome this by installing the plugin: SVG Support. Usually, I’m not one for adding a plugin as a solution for each problem, but in this case, SVG Support adds another security layer that scans all the SVG files you upload for malware.

Upload SVG Files By Adding A Code Snippet To Your Functions.php File

This solution is my favourite because it requires the absolute minimum to get WordPress to allow SVG uploads. This is important because we don’t want to add too much extra code or plugins to WordPress. The more code and plugins you add to your WordPress website, the slower it will naturally load.

In 2022 your website needs to be as fast as possible to have the highest chance of succeeding in your goals. If you have just the slightest coding knowledge or dare to give it a try, then I will recommend you this solution.

[cboxarea id=”cbox-DZ7YzH84qT48YAf1″]

First, we need to head over to Appearance -> Theme File Editor. On the right side, you’ll want to click on the Theme functions(functions.php) file. Make sure your cursor is at the bottom of the file.

Then you simply just copy the code snippet below and paste it into the bottom of your Theme functions(functions.php) file.

add_filter('wp_check_filetype_and_ext', function ($data, $file, $filename, $mimes) {
    $filetype = wp_check_filetype($filename, $mimes);
    return [
	'ext'             => $filetype['ext'],
	'type'            => $filetype['type'],
	'proper_filename' => $data['proper_filename']
    ];
}, 10, 4);

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

After you’ve inserted it, remember to press: Update file. And don’t worry, if you’ve made a syntax error or a mistake, WordPress won’t allow you to save the file, so you won’t be able to save any errors.

You might still after these changes get an error while uploading your SVG file, but this doesn’t necessarily have something to do with your code or your SVG file. It’s usually because of your folder permissions.

I’ve written an article on how you change and fix your folder permissions, read it here.

Use SVG Support To Allow SVG Upload In WordPress

Now, if you were scared away by the code, then fear not. There is a more straightforward solution with some added benefits.

You can simply install the plugin: SVG Support and then activate it. By doing this, not only do you enable SVG uploads for your WordPress website, but you also enable options to easier control your SVG images more, as styling can be a bit difficult.

On top of this, you get a sanitizing feature that scans all your SVG files for any malware. Optimise your SVG files and even minimise them to ensure fast loading speed for your website.

SVG Support

FAQ