WordPress SVG Support: How To Add SVG Logo To WordPress

It is widely known that a website attracts more people when it makes use of visuals. WordPress is an excellent and easy to use platform for many web developers and even the beginners. It supports a number of image formats that include PNG, GIF, and JPEG. However, it does not support SVG by default. Enabling WordPress SVG support will play a big role in ensuring your content is more shareable, and engaging.

What Is An SVG File?

Scalable Vector Graphics (SVG) do not directly imply any image format. They are a markup language used to create 2-D vector images. It was a guideline that was established in 1999. It has grown popularity in the age of mobile design. SVGs are image types that are most flexible. You will find plenty of vector resources that you can use to create your brand logo.

Enabling the image format requires tweaking some files. Once done, you can easily integrate SVGs in your content as logos, regular images and many more. With the WordPress SVG file type enabled, it will be extremely easy to learn how to add SVG logo to WordPress.

What Are The Advantages Of SVG?

SVG images are scalable. You can easily increase or shrink the size without affecting the quality. Therefore, they are good to use in responsive design.

The files are smaller in size. They contain scalable vectors, unlike the larger pixel formats. With such smaller size files, your WordPress site loads faster.

All browsers across different platforms (desktop and mobile) support SVG. Most visitors have no difficulties in displaying them.
Google recognizes SVG. Thus, your SEO is not at stake when you decide to add WordPress SVG support. Google will index SVGs in the same manner it does with other images.

You can easily animate SVGs by the use of CSS. This can be used to come up with interesting applications.

The Shortcomings Of SVG Format

SVG files are hard to create when you do not have some basics in graphic design.

The technology is not good for complex images. SVG fits well for icons and logos. When they become too complex, they happen to increase in size. This makes them larger than the pixel formats.

There are security concerns about SVG. You need to understand that SVG is not an image format but a document format. With the use of XML, SVGs are open to malware injections and other various vulnerabilities. Some of the issues include XSS attacks, XML external entity (XEE) attacks and bomb nested entities. It is the reason why WordPress does not support them fully. SVG files give permission allowing the embedding of JavaScript and browsers are required to execute.

Social networks like Facebook and Twitter do not support SVG.

With the advantages and drawbacks, many sites take a hybrid route. They utilize SVG for icons, logos, and background patterns, while complex images are pixel based.

For SVGs to work well, there needs to be sanitization of the files. It implies that the code or input needs to be clean to ensure no experience of security issues like code injection, no errors and avoid the conflicts in code. The process may include encoding your data, filtering out any anomaly, and validating any strings. It is also important to allow access of uploading SVGs to the users who understand the security concerns or you may restrict the uploads to administrators.

Adding SVG Support To WordPress

Method 1: Use The SVG Support Plugin

WordPress SVG Support Plugin

The first option you can add SVG support is by using the SVG Support plugin. This plugin will enable the SVG format and will add support to the media library. The process involves installing and activating the plugin. It makes it possible on how to upload SVG to WordPress.

Once activated, you have to go to Settings, then the SVG Support tab. Move to the Advanced Mode of the plugin that will give you access to SVG with CSS.

Settings WordPress SVG Support Plugin

After enabling WordPress SVG support, you need to set up your site. Ensure that it meets the requirements, and be able to control all content on the site.

SVG Support WordPress

SVG WordPress Support Advanced Usage

Method 2: Modify The Functions.php File

The functions.php file holds a number of vital classes, functions, and filters. It is another important channel you can use to add SVG support to WordPress by writing some critical lines of code.

To access the file, you will need to login to your site through FTP. You can use FileZilla to get to the root folder. Move to the root folder that is normally created under the name public_html or bears the name of your site.

You can also log in via cPanel of your site. Move to your File Manager, then head to public_html.

File Manager

Once you are in the public_html folder, browse to enter the wp-includes folder and locate the functions.php. Note that it is the parent file as there exists other functions.php for every theme on the site.

Functions-PHP

With the code we need to add, we shall accomplish the mission by editing the parent file. If the changes are lost once you update your WordPress, you may alternatively add the code to any specific functions.php file of a particular theme.

Open the functions.php file by right-clicking and choosing the Edit option. The default text editor will be opened.

functions.php

SVG Functions PHP Code

Scroll towards the bottom of the file and add the following code snippet:
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');

WordPress SVG Code - Functions PHP

Save the file to effect the changes you have made and then close it. Move to the main dashboard and try the new feature by getting to upload an SVG file format into the media library. It is supposed to work without any problem.

From the above discussion, it can be noted that SVGs are among the interesting image types that one can make use in modifying their WordPress websites. You will enjoy a plethora of benefits that make your site to stand out. Apart from enjoying their scalability that converts your site into a good and responsive site, they also allow the animation of the site to replace the use of GIFs in some circumstances.

About the Author

Kushal is a content strategist for CyberChimps and a passionate blogger. He has a keen interest in analytics and always likes to keep himself updated with the latest news and trends in technology. Loves coffee, listening to music, and playing soccer.

Leave a Reply

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