SVG Support in WordPress

Do you want to support SVG images or logos on your WordPress site? By default, WordPress supports all popular file formats like jpg, png, audio, video, etc. But it is a matter of sorrow that, by default, WordPress doesn’t support this type of file because of security issues. However, if it is essential for your site, don’t worry, in this article, I have explained the best and easiest way to support SVG format images or logos on your WordPress site. 

What is SVG Format?

The full meaning of SVG is Scalable Vector Graphics. It is a file format that 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 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 images, if you Zoom In on 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. 

On the other hand, in the case of SVG format, this is vector-based, not pixel-based. So, if you Zoom In on these images, they will never be blurry or pixelated or lose their quality. 

There is also another benefit of using SVG. SVG files are smaller in file size 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 images like logos, etc, vector graphics are used. You can also add any vector graphics to your website when you will support the SVG format. 

Looking for Developer

Why WordPress Doesn’t Support SVG

Vector graphics are not supported in WordPress because the SVG technology displays two-dimensional drawings that 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 to your website data and destroy your data and files which is never expected. 

Ensure the Security to Support SVG Format

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 and secure way.

The best way to support SVG files is that the only administrator will be able to upload this type of file and other users will never 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 to your WordPress site, you will get the following error message- 

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

SVG Error

It is showing a security issue. So, we need to support SVG in WordPress. We will do this using one of the following two ways-

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

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

Support SVG Using a Free Plugin

It is the best, easiest, simplest way to support SVG on your WordPress Site. To do this, you have to install a plugin that 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 that 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 all of them, I recommend using the SVG Support plugin. Because it has an option to restrict the file uploading and this option is super-useful to make your SVG uploading secure. 

So, simply install and activate the SVG Support plugin. Once you install and activate it, you will find it in Settings >> SVG Support. 

If you go to the options of the SVG Support plugin, you will find the following three options-  

  • Restrict to Administrators
  • Load Frontend CSS
  • Enable Advanced Mode
 Support SVG in WordPress
SVG Support Plugin Settings

The most important option is the Restrict to Administrators option. You must need to checkmark 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 other options, simply you can skip them. 

 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. 

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

Support SVG Without any Plugin

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

I think it may be better if you want to avoid using plugins 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 prefix_mime_types($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter( 'upload_mimes', 'prefix_mime_types' );
Code language: PHP (php)

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

In this way, there is no restriction to any user. But if you want to allow uploading SVG just for admin, you have to implement conditions and check the current users. To do that you can learn more about this hook from here. That may be complicated for you, in this case, I suggest to use the first method. 

Most Important Issue: As I have already told that allowing to upload SVG files is a 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 administrators only. 

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

Leave a Reply