How to Upload SVG to WordPress: 2 Safe Methods

Web admins and web designers are bound to use different media file formats in their work. Today, one of the most popular formats is SVG, an XML-based vector format. Unfortunately, not all browsers and platforms support SVG and you need to enable SVG support manually beforehand.

Start A Free 7-day Email Course On WordPress

This article will cover the steps of uploading SVG files on a WordPress website using the SVG Support plugin. We will also answer some questions concerning the security issues surrounding this particular media file format and why SVG is worth using.

To begin, let’s familiarize ourselves with SVG and how it works.

Scalable Vector Graphics (SVG) is a vector graphic image format based on the XML text. While common image formats like JPG and PNG are made up of tons of tiny squares called pixels, this format relies on the XML markup language to describe image attributes.

As of January 2022, 42% of all websites worldwide use SVG. This percentage has increased since January 2021, when only 29.4% of websites utilized it. Similar to PNG and JPG formats, SVG is popular among high traffic websites like Google, Wikipedia, and YouTube.

Another great thing about SVG is that it is widely supported by all major browsers. The following is a list of browsers that support the SVG file format:

BrowserPartial SupportFull Support
EdgeVersion 12-18, 79-96, 97
FirefoxVersion 2Version 3-94, 95, 96-97
Firefox for AndroidVersion 95
ChromeVersion 4-96, 97, 98-100
Chrome for AndroidVersion 96
SafariVersion 3.1Version 3.2-15.1, 15.2, TP
OperaVersion 10-81, 82
Opera MiniAll versions
Opera MobileVersion 12-12.1, 64
Safari on iOSVersion 3.2-15.1, 15.2
Android BrowserVersion 3-4.3Version 4.4-4.4.4, 96
UC Browser for AndroidVersion 12.12
Samsung InternetVersion 4-14.0, 15.0
QQ BrowserVersion 10.4
Baidu BrowserVersion 7.12
KaiOS BrowserVersion 2.5

How Does SVG Work?

Scalable vector graphics utilize XML to produce two-dimensional vector images. Unlike JPG and PNG, vector graphics don’t comprise pixels. Instead, their behavior is described in XML text files.

For this reason, scalable vector graphics can be searched, indexed, scripted, edited, and compressed like code. Accordingly, anyone can create them using a text editor or vector graphics software.

Does WordPress Support SVG?

There’s no SVG support in WordPress by default due to the security risks it imposes ‒ we will cover the security issues surrounding SVG in more depth later.

The following is an error message that appears when uploading an SVG graphic to a WordPress website:

The error message that appears when a user tries to upload an SVG file to a WordPress site.

There’s an ongoing discussion about making SVG a part of WordPress core features. Until then, we have to get creative and use other solutions to upload SVG images to WordPress.

Why Use WordPress SVG?

A comparison of simple and complex SVGs.

Despite its security issues, many users still use this image format as it has various benefits. Here are some of the advantages of using SVG files:

  • Scalability ‒ since SVG is a vector image format, SVG files retain the same quality across all screen resolutions. This benefit is also present after enlarging them, which is why many people use this scalable image format for icons and logos.
  • Smaller file size ‒ using SVG files makes improving website performance with scaled images easier as they take less of your web storage space and load way faster than raster images.
  • SEO-friendly ‒ Google indexes SVG files, allowing them to show up on Google Image Search and improving your SEO efforts. With raster images, you’re limited to optimizing their alt attributes.
  • Code-based ‒ SVGs are modifiable using a text editor or vector graphics editing software. You can optimize SVG image files for websites or even add animations to make the graphics interactive.

WordPress SVG and Security

Since SVG is basically an XML text file, it has exploitable vulnerabilities that don’t affect other image formats. Consequently, people can easily hijack it with malicious code to launch cross-site scripting (XSS) and XML external entity (XXE) attacks on your system.

For this reason, you need to be careful when handling SVG files and adding them to WordPress.

To minimize security risks, make sure to sanitize SVG files before uploading them to the WordPress media library. This process removes suspicious code and errors, making the images safe for your site.

You can sanitize SVG file uploads using an SVG plugin ‒ we will cover the steps to do so later. However, we recommend double-sanitizing it with the SVG Sanitizer Test ‒ it’s an online tool by Darryll Doyle, a WordPress developer.

Another way to secure your WordPress website is by limiting SVG uploads to trusted users only. The selected users should be aware of the security concerns surrounding the SVG format ‒ this will discourage them from obtaining SVG files from dubious sources.

How to Upload SVG Files to WordPress in 2 Secure Methods

Technically, there are two ways to add SVG support to WordPress ‒ using a plugin or enabling it manually. Regardless of your choice, we strongly suggest limiting upload privileges to administrators and trusted users only to minimize malicious uploads.

Use a Plugin

In this tutorial, we will be using SVG Support. This plugin uses an SVG sanitizer library that will automatically activate upon uploading SVG files to the media library. It’s also easy to set up and free to use.

Here are the steps to set up SVG Support:

  1. Install the plugin and activate it.
The SVG Support plugin in the official WordPress directory.
  1. Navigate to Settings -> SVG Support from your WordPress dashboard.
SVG Support being accessed from the WordPress dashboard.
  1. Check the box next to the Restrict to Administrator option to limit the upload privileges. Do the same to the Enable Advanced Mode option if you want access to advanced features, such as inline SVG rendering and CSS styling.
The settings of the SVG Support plugin.
  1. After saving the changes, you can start uploading SVG files safely to the media library.

Pro Tip

The option to render featured images inline will appear on WordPress posts that use SVG files as featured images if you enable the advanced mode.

Manually Add WordPress SVG Support

This method involves editing the functions.php file of your WordPress website. Therefore, we strongly recommend following these steps if you’re familiar with PHP and fully understand the issue of SVG security.

Important! Make sure to back up your WordPress website before making any changes to avoid any data loss in case of misconfiguration.

The following steps will explain how to enable SVG in WordPress manually via Hostinger File Manager. That said, you can also use an FTP client like FileZilla instead.

  1. Access hPanel and go to Files -> File Manager.
  2. Navigate to public_html -> wp-includes. Scroll down until you locate functions.php.
Functions.php being accessed via hPanel's File Manager.
  1. Double-click the file to open it and paste the following code snippet in there:
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');
  1. Save the changes and try uploading an SVG file type. If the process is successful, your media library should accept the file upload.

Conclusion

The many benefits of SVG files contribute to this file type’s rising popularity. Unfortunately, XML text files are prone to code injection, which is the main reason why WordPress doesn’t include SVG support by default.

That said, there are two ways to make your WordPress site accept SVG files ‒ by using a WordPress plugin or modifying the site’s functions.php file. Along with limiting upload privileges, you’ll get to safely upload SVG files to the site’s media library.

We hope this article has given you insight into the benefits and risks of uploading SVG files to a WordPress website. Good luck.

Was this tutorial helpful?

Author
The author

Jordana Alexandrea

Jordana is a Digital Content Writer at Hostinger. With her Information System and website development knowledge, she aims to help aspiring developers and enterpreneurs build their technical skills. During her free time, she travels and dabbles in freestyle writing.