Support SVG: Best ways to support SVG in WordPress

Do you want to support SVG file or logo in your WordPress site? But it is a matter of sorrow that, by default, WordPress doesn’t support this type of file because of security issue. Don’t worry, this article will help you to support SVG in WordPress.

By default, WordPress supports all popular file formats like jpg, png, audio, video etc but SVG format is not included among them. Sometimes, you may need to use an SVG file for your WordPress theme. So, continue this article.

What is SVG format?

The full meaning of SVG is Scalable Vector Graphics. It is a file format which defines vector-graphics using XML language.

SVG format will provide you with a smart presentation of your graphics (Images). This type of file never becomes pixelated. As a result, you will find the high-quality graphics whose quality will never lose with an infinite zoom in.

The benefit of using SVG?

In the case of png or jpg image, if you zoom in them, they will be pixelated and blurry. As a result, the image will lose its quality. Because the png and jpg files are pixel based.

support SVG in wordpress

On the other hand, in case of SVG format, this is vector based not pixel based. So, if you zoom in this image, it will never be blurry or pixelated and lose its quality.

support SVG in wordpress

There is also another benefit of using SVG. SVG files are smaller in filesize than JPG or PNG. As a result, it will reduce the loading time of your website.

Usually, in the case of icons, icon fonts, branding image like logo etc, vector graphics are used. You can also add any vector graphics in your website when you will support the SVG format.

Why SVG format is not supported in WordPress

Vector graphics are not supported in WordPress because the SVG technology displays two-dimensional drawings which are based on the XML markup language.  

It means that the SVG files contain the codes of XML markup language which is similar to HTML codes.
As a result, anyone can use it to gain unauthorized access in your website data and destroy your data and files which is never expected.

Video Tutorial

You can skip this video tutorial and continue the article…..

Best way to use SVG files

We have already known that SVG files are really dangerous if the uploaded files are not trusted and reliable. So, before supporting the SVG files, you have to ensure the best way.

The best way to support SVG files is that the only administrator will be able to upload this type of file and others never will be able to upload these SVG files.

In the case of other users, the uploaded files must need to be trusted and reliable. So, to complete the uploading, must ensure reliability.

Otherwise, try your best to avoid uploading any SVG file to your website.

How to support SVG in WordPress?

When you will try to upload an SVG file in your WordPress site, you will get the following error message-

Sorry, this file type is not permitted for security reasons.

SVG support in wordpress

It is showing a security issue. So, we need to support SVG in WordPress. We will do this using two ways and these are –

  1. Using Plugin
  2. Editing functions.php without any plugin

So, now let’s go to discuss these methods in details.

Method 1: Using SVG Support Plugin

This is a simple and easy method. For this, you have to install a plugin which will allow supporting SVG files. There are a number of plugins available in the WordPress repository which are free to use.

I have found about 7 popular plugins which support SVG files. These are –

  1. SVG Support
  2. Safe SVG
  3. Add Full SVG Support
  4. WP SVG Icons
  5. SVG Uploads Support
  6. Easy SVG Support
  7. WP SVG Images

You can choose any of them to support SVG in your WordPress theme. But among theme, I recommend using SVG Support plugin. Because it has an option to restrict the file uploading.

If you install the SVG Support plugin and active it, you will find it in Settings >> SVG Support.

SVG support in WordPress

If you go to the options of SVG Support plugin, you will find two options one is Restrict to Administrators? And another is Enable Advanced Mode?

The most important option is Restrict to Administrators option. You must need to check mark this option if you don’t want to allow anyone to upload SVG files. Otherwise, you can uncheck it but that will be really dangerous.

The another option Enable Advanced Mode, simply you can skip it.

If you have completed the installation and activation of the SVG Support plugin, now you will be able to support vector graphics in your WordPress theme.

SVG Support in WordPress

I am skipping to discuss the other plugins. Because these are very simple just you need to know about WordPress plugin installation and activation.

Method 2: Without any plugin

If you want to avoid using any plugin to support SVG in WordPress, you can also do it editing the functions.php. You can edit the functions.php file through the control panel or FTP access to the theme directory.

I think it may be better if you want to avoid using the plugin because more plugins make slow your website. However, to continue the editing of functions.php, just you need to paste the following codes in the functions.php file-

function svg_file_types_to_uploads($file_types){
    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );
    return $file_types;
add_action('upload_mimes', 'svg_file_types_to_uploads');

If you have added the codes and update the functions.php file, you will be able to add SVG file. But you don’t get any preview of the SVG file in media preview section.

SVG support in WordPress

Most Important Issue: As I have already told that allowing to upload SVG files is must need to be safe and trusted. So, be careful about allowing to upload SVG files especially for the other users. Only allow trusted users. Otherwise, restrict it just for administrator only.

I hope, you have enjoyed this article. Just share it and appreciate us through commenting.

Leave a Reply

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

I am available for freelance work

Let's start a project with the best services and full satisfaction guaranteed. Clean and standard coding. Best service is the goal of this project.

Hire Me

Message Me