If you are an ardent user of WordPress, you would have noticed that WordPress does not support SVG (Scalable Vector Graphics) file uploads. But SVG images are highly useful and have many benefits, such as helping you zoom in the files without losing its quality.
SVG files are created using XML as their base. Unlike other formats, such as PNG, SVG does not use pixels for image quality. Instead, it uses “vectors”. The major benefit of this kind of file is the retention of image quality.
Although SVG files have many advantages, WordPress does not have the option to upload SVG files directly to your sites. It is because SVG files open up your website to data risks. On your website, you might include such files in a safer and more secure manner.
This article helps to explain 3 other ways of uploading SVG files to your WordPress website.
Why Add SVG in WordPress?
You may have wondered why you should use SVG when WordPress allows other upload formats like PNG, JPG, JPEG, etc. One reason is that the SVG images work best for website graphics, logos, icons, graphs and diagrams.
Other than that, some reasons to use SVG files on your websites are as below.
Quick loading of your website
The main reason for you to use SVG in your WordPress site is the Speed. To insert infographics such as charts, logos etc. to your website, SVG files can be used.
Highly scalable
An SVG image will maintain its quality even if you zoom in. Considering the fact that JPG formats pixelate while zooming in, SVG files are the next best option.
View the content on any device
The SVG files are supported in all kinds of devices such as mobile, computers, etc. So when you use an SVG image on your website, you don’t need to worry about its visibility across various devices.
Steps to Add SVG in WordPress
Alright. Now that you have understood why SVG is needed in your WordPress site, let us see three steps through which you can upload SVG files. They are,
- Uploading SVG Using WordPress Plugin
- Adding MIME-Type in Code Snippets Plugin
- Uploading SVG by Editing Function.php File
I have given the step-by-step process for these three methods below.
Uploading SVG Using WordPress Plugin
SVG can be added to the WordPress site by using plugins. This is a simple method as you only want to install a plugin. In case you want to know how to add plugins to your site, check this article that clearly explains how to add plugins.
The best plugin to carry out this activity is the SVG support plugin. Let’s break the process to add this plugin to your site into simple steps.
Firstly, log in to your website. Then click on the plugins option on the left side and select “Add new”. Search for the plugin “SVG support” in the search box. It will appear as below.
You can see the option Install now on the right side. Click on the button. It will turn blue and the option “Activate” will be shown. Once you select that, the plugin will be activated.
WordPress does not allow SVG file uploads because of its risks. So once you install this plugin, for your safety, restrict the uploading rights to administrators only. You can change the SVG support plugin setting by going to Settings -> SVG support.
With this process, you can upload SVG files straight from your device’s folders.
Adding MIME-Type in Code Snippets Plugin
If you’re into coding, you may know that you can edit your site’s functionality by entering codes in the “Code snippet” plugin. Using the same process, you can insert a MIME- Type code in the plugin that allows your site to accept SVG files.
To install the plugin, follow the process mentioned in the previous paragraph. Search for “Code Snippets” plugin. Install and activate it.
Once you install it, you can see the option “snippets” appear in the left side menu bar.
Click on the Snippets -> Select “Add new”. A screen will appear where you can insert the code to allow WordPress to upload the SVG file.
Now insert the below MIME- Type code.
function add_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_filter(‘upload_mimes’, ‘add_file_types_to_uploads’);
Scroll down and add descriptions and tags. Click on “Save changes and activate”.
Now try uploading SVG files and you can see that your WordPress website allows uploading of these files.
Uploading SVG by Editing Function.php File
This is an alternate method that involves coding to an extent. WordPress websites can be edited “directly” by entering relevant codes.
To do this, from your dashboard, select Appearance-> Theme file editor.
As you click on that, a warning message will be shown like this.
This message gives us a heads-up that changing the code will change the basics of the website itself. In case you want to avoid any kind of harm to your website, try entering the code in the child theme or copy-paste the code for future reference.
Then, without worrying, click on “I understand.”
Select the “function.php“ option under the theme sections.
Then add this code snippet into your file.
function add_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_filter(‘upload_mimes’, ‘add_file_types_to_uploads’);
Click on the “Update file” option at the bottom of the page to save the changes made.After you add this code to your function.php file, you will upload SVG files to your WordPress website.
The major difference between adding a code to your theme directly and through a plugin is the loss of data. When you add code directly via function.php file, it might be lost while auto-updating the theme. But if you insert the code through a plugin, the code will not be lost.
These are three of the ways by which you can slip SVG files to your site.
Frequently Asked Questions (FAQs)
Reading this article may have left you with some questions. Let us see the answers to such commonly asked questions.
What is the simple way to insert SVG files in WordPress?
Inserting SVG files using the plugin ”SVG support” is the simplest way. Because there is no coding involved in this method.
All you need to do is to install and activate the plugin to start uploading SVG type media from your device.
Is it safe to upload SVG files on our WordPress website?
SVG files come with a set of data risks. But it is possible only when third parties are allowed to upload SVG files to your website.
To avoid such risks, you can change your upload settings to “Administrator only”. So that only the owner (you) can only upload SVG files.
What is the use of SVG files?
The SVG files are perfect when it comes to lesser size images with high quality. The fact that it is also compatible with all kinds of devices makes it one of the most popular types of files.
Final Thoughts
I hope this article clearly explains the three safe and secure ways to upload SVG to your WordPress website. Personally, I would say the plugin method is the easiest one in case you are a complete beginner with WordPress.
You can also try the two code methods if you want to take up some challenge. Coding your website to make it support SVG files should be done carefully, as it can alter your website totally.
Take a look at each of these three methods by yourself and follow the one that feels easiest for you. Shoot us a message in case you have any doubts!
