2 Safe Ways To Upload SVG Files in WordPress

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

svg wordpress upload

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.


Can WordPress Use SVG Files?

Yes, WordPress can easily use SVG Files, but it requires some extra setup. You need to install the plugin SVG Support and then you can continue to upload your SVG files.

Why is SVG not allowed in WordPress?

SVG’s are still not incorporated into WordPress because it does have security issues. Even though an SVG file displays an image, then it’s actual code behind. This code can be altered to pose a security risk to your WordPress website.

Are SVG files a security risk?

They most likely aren’t, but as SVG files are code displaying an image then the code can be altered with to try and harm your website.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *