Allow SVG File Upload in WordPress

If you are a WordPress user, you may have noticed that WordPress doesn’t allow SVG file upload by default. While there are several free and paid plugins that do this job, we will discuss two of the popular SVG plugins. Sometimes it is not necessary to use a plugin for such a simple task. so, we will learn how to allow SVG file upload in WordPress without using any plugin also.

First let us understand, what is SVG? Why use SVG File? Why does WordPress prevent upload of SVG file?

What is SVG?

SVG files are vector-based graphics. That means they look good on any screen, and not only that—they are lightweight, meaning they don’t take up a lot of space on your website.

Let me explain in detail. SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software.

All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, and Microsoft Edge—have SVG rendering support.

Why use SVG File?

In the recent past, we’ve all been used to seeing images on a website in .PNG and .JPG formats. However, a new image format has emerged over the past several years that is quickly becoming more and more popular: SVG.

SVG essentially scalable line drawings that can be used to represent different kinds of pictures. So why choose them over the more common PNG and JPG formats? Here’s why.

• SVG files can be scaled infinitely without losing image quality.
• SVG files are smaller than many other image formats because they are vector-based and have no loss in quality.
• Images in SVG format can be edited by any text editor program.
• Images in SVG format can be opened directly in most browsers.

Why does WordPress prevent upload of SVG Files?

As we discussed earlier, SVG (scalable vector graphics) files are used to render images on the web, and they’re often used for logos and icons. But because they’re written in human-readable XML, they can contain JavaScript that executes when the file is rendered in a browser.

This can be harmless, like a script that changes the size of an image or color of a shape when you hover over it with your mouse. But it can also be malicious code that’s designed to take advantage of security vulnerabilities in your browser or WordPress site.

For instance, an SVG file could contain a script that downloads some malware to your computer, or it could instruct your site to send user data to a malicious server every time someone visits your site.

These risks only apply to SVG files from untrusted sources, so the simplest way to prevent any problems is to only use SVG files from trusted sources.

How to allow SVG file upload in WordPress?

We will discuss two methods in this article to allow SVG file upload. The first is with a plugin and the second is without using any plugin. So let’s start.

Method 1: Upload SVG in WordPress by using a plugin.

I will recommend two plugins here. You can choose any one from these two plugins as per your requirements. Let me explain.

A). Add SVG in WordPress using “Safe SVG” Plugin.

Safe SVG plugin is simple and straightforward. To install Safe SVG plugin, just go to Plugins > Add New. Search for Safe SVG in the search bar.

This plugin doesn’t have settings. So, you just need to install and activate this plugin and then you can start uploading SVG files.

Safe SVG plugin is perfect for those who do not allow guest posting, as the free version of this plugin do not provide a feature to restrict the upload to administrator only, which is the only drawback of this plugin.

If you want some extra features then the second plugin may help you. But remember, install and use only one plugin at a time.

B). Upload SVG File using SVG Support Plugin.

SVG Support plugin provides a feature to restrict the upload to administrator only. This feature is perfect for those who allow guest posting. So, let us understand this plugin and how you can use it.

Step 1: Search for SVG Support Plugin and then you need to install and activate the plugin.

Step 2: After activating the plugin, go to Settings > SVG Support and configure the plugin settings.

Below are the Plugin default Settings.

The default settings are fine for most sites, however, you can allow SVG uploads only for administrators if you want. You can also use the advanced settings panel to customize the sanitization of uploaded SVGs. To access the advanced options, just checkmark the ‘Yes’ box right after ‘Enable Advanced Mode’ and then click on ‘Save Changes’. The page will reload and you will see the advanced options.

Below are the plugin Advanced settings.

You can enable features as per your requirements. You should enable the first advanced feature ‘Sanitize SVG’ to sanitize your SVG file. This is helpful when non-admins are allowed to upload SVG images (like in the case of guest posting). The rest of the settings depends on your requirements. Features are explained for every option just after the ‘Yes’ check box.

So this is how you can allow SVG upload in WordPress using a plugin.

Now let us understand how to allow SVG File Upload in WordPress without plugin. To do this, we will use a snippet or code in functions.php file.

Also Check:
Show Media URL Column in WordPress Media Library
Show Media ID column in Media Library WordPress
Show image dimensions column in media library without plugin
Automatically add WordPress image alt text without plugin

Method 2: Allow SVG Upload in WordPress (Without Plugin)

Now, we will learn how to allow SVG file upload in WordPress without using any plugin.

The reason why you should not use a plugin is that, when you upload multiple images at the same time, the plugins take time to process and optimize them. Then, after all this, WordPress limits the size of the image files that you can upload. Therefore, it is better to allow SVG file upload in WordPress without a plugin. So let’s start.

Before starting, you should:

• Take a full backup of your website.
• If you are not comfortable editing functions.php file then install this free plugin and add snippets by using a single plugin.
• Use a child theme to make customizations. Use this free plugin to create a child theme (you can delete the plugin after creating child theme, but do not delete the parent theme).

Step 1: In your WordPress dashboard, go to Appearance > Theme File Editor. Then click on Theme Functions or functions.php file.

Below are the images for your reference.

Step 2: Add below code to the footer of functions.php file.

// Allow SVG file upload
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+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

That’s it. I hope this tutorial helps you learn how to allow SVG file Upload in wordpress with and without plugin. If you need any help, please comment below. I will be happy to help you.