How to allow SVG images upload in WordPress

Do you want to upload SVG images in WordPress? By default, WordPress allows many popular formats of image, video, and audio files, but unfortunately, SVG is not among them. So in this article, I will show you how to allow SVG images to upload in WordPress.

What are SVG & benefits of SVG?

SVG stands for scalable vector graphics. SVG is an XML-based vector image that is commonly used by websites to display logos and icons. The main benefit of SVG is it is smaller in size than PNGs or JPGs. SVG allows you to enlarge images without losing quality or having any pixelation.

Let’s take a look at how easily enable SVG image upload in WordPress. There are 2 different methods that we learn in this article.

  • Method 1. Allow SVG images in WordPress using a plugin.
  • Method 2. Allow SVG image in WordPress manually using code snippet in functions.php

Method 1. Allow SVG images in WordPress using a plugin.

In WordPress, there are some plugins available that help to enable SVG images to upload to WordPress. If you are new or a beginner in WordPress then using a plugin is the best way for you. SVG Support and Safe SVG are the plugins that allow you to enable SVG images to upload in WordPress. For more details about plugin installation, you can check our article How to install a plugin in WordPress.

Now here I will show you 2 WordPress plugins that you can use to enable SVG images in your WordPress website.

Plugin 1. Safe SVG WordPress plugin which allows SVG images to upload in WordPress.

Safe SVG WordPress plugin helps to enable SVG images upload on your website. If you are new or a beginner in WordPress and don’t know how to install WordPress plugins then please refer to our article How to install WordPress plugins.

First, install the Safe SVG plugin and activate it. In the safe SVG plugin, there are no settings to configure. You can simply go ahead and start uploading SVG images.

In the Safe SVG WordPress plugin, there is one limitation you can not restrict any particular user type to upload SVG Images, Once you activate the Safe SVG plugin all user who can write posts on your site has the right to upload SVG image.

Plugin 2. SVG Support WordPress plugin which allows SVG images to upload in WordPress.

SVG Support WordPress plugin is another plugin that helps to enable SVG image upload on your website. If you are new or a beginner in WordPress and don’t know how to install the WordPress plugin then please refer to our article on How to install the WordPress plugin.

First, install SVG Support Plugin and activate it. Then visit Settings > SVG Support page to configure the plugin. On the settings page of this plugin, there are two options as below.

  1. Restrict to Administator?
    If you check this option then this plugin allows the only administrator to upload SVG images.
  2. Enable Advanced Mode?
    Checked this option if you want to allow CSS animation and inline SVG rendering.

Method 2. Allow SVG images to upload in WordPress manually using the functions.php file.

Mostly experienced WordPress developers prefer to use manual code snippets in functions.php for this kind of functionality instead of using a plugin.

To allow SVG upload manually you need to follow below mention steps.

  1. Open your active theme functions.php file. It will be below the location.
    wp-content/themes/<your-activate-theme-name>
  2. Copy below code snippet and paste it into your theme functions.php file.
    if( !function_exists('webcodecraft_mime_types') ) :
    	/**
    	 * Allow SVG Files
    	 *
    	 * Handles to allow svg files in media library
    	 *
    	 * @since Web Code Craft 1.0
    	 **/
    	function webcodecraft_mime_types($mimes) {
    	  $mimes['svg'] = 'image/svg+xml';
    	  return $mimes;
    	}
    	add_filter('upload_mimes', 'webcodecraft_mime_types');
    endif;
  3. Save your theme functions.php file.

After performing the above steps you can now upload SVG images to your WordPress website.

I hope this article helps you to understand how to allow SVG file upload in WordPress. If you have any doubts or questions you can contact us with your question. we will try to help you as soon as possible.