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.

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.

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:

Browser	Partial Support	Full Support
Edge	–	Version 12-18, 79-96, 97
Firefox	Version 2	Version 3-94, 95, 96-97
Firefox for Android	–	Version 95
Chrome	–	Version 4-96, 97, 98-100
Chrome for Android	–	Version 96
Safari	Version 3.1	Version 3.2-15.1, 15.2, TP
Opera	–	Version 10-81, 82
Opera Mini	–	All versions
Opera Mobile	–	Version 12-12.1, 64
Safari on iOS	–	Version 3.2-15.1, 15.2
Android Browser	Version 3-4.3	Version 4.4-4.4.4, 96
UC Browser for Android	–	Version 12.12
Samsung Internet	–	Version 4-14.0, 15.0
QQ Browser	–	Version 10.4
Baidu Browser	–	Version 7.12
KaiOS Browser	–	Version 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:

There’s a 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

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.

2. Navigate to Settings -> SVG Support from your WordPress dashboard.

3. 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.

4. After saving the changes, you can start uploading SVG files safely to the media library.

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.

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.

3. 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');

4. 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 WordPress tutorial has given you insight into the benefits and risks of uploading SVG files to a WordPress website. Good luck.

Upload SVG to WordPress FAQ

The following are some answers about having SVG in WordPress.