2 Easy Methods To Add SVG in WordPress

Are you looking for easy ways to add SVG in WordPress websites? Then this tutorial is meant for you. Many people convert sites to WordPressin order to get an interface with enhanced visual appeal. The open source platform supports most image and video file formats. Users can easily upload .jpg, .jpeg, .png, and .gif files to make their websites more attractive. However, there is no out of the box support for Scalable Vector Graphics (SVGs). It is an incredibly flexible image type but due to lack of compatibility, most WordPress users are unable to take advantage of this file format. In this guide, we are presenting two simple methods which will help them in adding SVG to their interfaces. These techniques will be found useful by professionals as well as amateur website owners.

What Is SVG?

Scalable Vector Graphics define vector-based graphics through the XML language. In fact, it is not an image format by itself but a markup language which helps create two-dimensional vector images. The most significant advantage that SVGs enjoy over other file types like PNGs is easy scalability. When you enlarge images belonging to other formats, pixelation occurs leading to reduced image quality. Vector graphics use two-dimensional maps instead of pixels to define images. Whether they are scaled up or down, there will be no reduction in the picture quality. Moreover, they also occupy lesser storage space and can be animated with CSS.

Why WordPress Does Not Support SVG?

A question that arises now is why the open-source CMS does not support this useful file format. People trying to upload such images are met with a message saying that the type is not supported due to security reasons. The problem lies within SVG’s code composition which is made up of XML, a markup language like HTML. Such images are rendered after the browser parses the XML to generate the output. This can be exploited by unscrupulous elements to carry out cross-site scripting or brute-force attacks. Users must, therefore, authenticate the source of such files before uploading them. 

How Can You Add SVG To WordPress Websites?

Let’s now take a look at two simple ways to upload SVG fils to WordPress interfaces.

1. Using A Plugin

The first method for adding SVG is by using a plugin. All WordPress users know that plugins allow them to easily extend the functionality of their interfaces. These convenient solutions along with themes enable even technically deficient people to create functional websites. The vast community of developers has enriched the open source platform by contributing countless templates and plugins. It is second nature for WordPress users to search for a plugin whenever they want to add a feature to their websites.

In this tutorial, we are using the SVG Support plugin to add SVG in WordPress. It is an open source software meaning you do not need to make any payments for using the tool. Use the following process:

Step 1:Access the admin dashboard of your WordPress installation by entering the username and password. In the menu, on the left-hand side, locate “Plugins” and click on it. Go to the “Add New” section where you will see a search box. Type the name of the above-mentioned plugin in the field and select the correct option from the search results. Download its installation and activate the tool on your interface. 

Step 2:Go back to the menu in the control panel and locate “Settings”. The plugin will be visible in this section. Click on it to open and configure its settings. On the settings screen, you will come across the option named “Restrict to Administrators?”. Tick the box in front of it to enable only site administrators to upload SVG files. 

Step 3:The next option is for enabling the advanced mode. Check it only if you want to use advanced features such as CSS animations. Press the “Save Changes” tab. Your website is now ready for uploading SVG files. 

2. Modifying The Website’s functions.php File

The next method for adding SVG files must be used only if you possess coding knowledge. It involves modifying the functions.php file of your website. In order to do this, you will have to access the root folder of your interface by using an FTP client. The following steps will help in the purpose:

Step 1: Access the root folder through FTP. it will either be named after your interface or labeled as public_html.

Step 2:Locate the wp-includes folder and open it. The functions.php file will be present in this folder. 

Step 3:Use your mouse to open the right-click options and select “View/Edit”. The file will open in the text editor installed on your system. Go to the end of the file and add the following code right at the bottom:

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_action('upload_mimes', 'add_file_types_to_uploads');

Save the changes and close the file. You can now easily upload SVG files to your website.


These two methods will help to effortlessly add SVG in WordPress interfaces. However, you must be careful while selecting the files as those originating from unreliable sources can cause great harm to the website.

About Author:

Brandon Graves has been working as professional Wordpress Web Developer at HIreWPGeeks Ltd., which provides PSD to WordPress theme servicewithin the given time frame. He loves to share excellent stuff on WordPress. 
2 Easy Methods To Add SVG in WordPress 2 Easy Methods To Add SVG in WordPress Reviewed by Durgesh Thakur on March 13, 2019 Rating: 5

No comments:

Powered by Blogger.