How to upload SVG files to WordPress: 2 safe methods

Web administrators and designers are required to use different media file formats in their work. One of the most popular formats today is SVG, an XML-based vector format. Unfortunately, not all browsers and platforms support SVG and you need to manually enable it beforehand.

This article will cover the steps to upload SVG files to a WordPress website using the SVG Support plugin. We’ll also answer some questions related to the security issues surrounding this particular media file format and why it’s worth using SVG.

To start with, let’s get familiar with SVG and how it works.

What is SVG?

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

As of January 2022, they use the SVG format. This percentage has increased since January 2021, when only they used it. Like the PNG and JPG formats, SVG is popular with high-traffic websites like Google, Wikipedia, and YouTube.

Another positive aspect of SVG is that it is widely supported by all major browsers. Below is one that support the SVG file format:

Browserpartial supportfull supportEdge–Version 12-18, 79-96, 97FirefoxVersion 2Version 3-94, 95, 96-97Firefox for Android–Version 95Chrome–Version 4-96, 97, 98-100Chrome for Android–Version 96SafariVersion 3.1Version 3.2-15.1, 15.2 , TPOpera–Version 10-81, 82Opera Mini–All versionsOpera Mobile–Version 12-12.1, 64Safari on iOS–Version 3.2-15.1, 15.2Android BrowserVersion 3-4.3Version 4.4-4.4.4, 96UC Browser for Android–Version 12.12 Samsung Internet–Version 4-14.0, 15.0QQ Browser–Version 10.4Baidu Browser–Version 7.12KaiOS Browser–Version 2.5

How does SVG work?

Scalable vector graphics use XML to produce two-dimensional vector images. Unlike JPG and PNG, vector graphics are not made up of pixels. Instead, its behavior is described in XML text files.

Because of this, scalable vector graphics can be searched, indexed, scheduled, edited, and compressed just like code. Therefore, anyone can create them with a text editor or vector graphics software.

Does WordPress support SVG?

There is no support for SVG in WordPress by default due to the security risks it imposes. Later we will cover the security issues surrounding SVG in more depth.

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

The possibility of SVG being part of the core features of WordPress is currently being debated. Until then, we have to get creative and use other solutions to upload SVG images to WordPress.

Why use SVG in WordPress?

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

• Scalability: Because SVG is a vector image format, SVG files retain the same quality at all screen resolutions. This advantage is also present after scaling, which is why many people use this scalable image format for icons and logos.
• smaller file size: Using SVG files makes it easy to improve website performance with images at scale, as they take up less storage space on the web and load much faster than raster images.
• SEO friendly: SVG files are indexed by Google, allowing them to appear in Google Image Search and improving your SEO efforts. With raster images, you just optimize their alt attributes.
• based on the code: SVGs are editable using a text editor or vector graphics editing software. You can optimize SVG image files for websites or even add animations to make graphics interactive.

WordPress SVG: Security

Since SVG is basically an XML text file, it has exploitable vulnerabilities that do not 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, care must be taken 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’ll cover the steps to do that later. However, we recommend doing a double clean with the , an online tool from Darryll Doyle, a WordPress developer.

Another way is by limiting SVG uploads to trusted users only. Selected users should be aware of the security issues surrounding the SVG format. This will make them think twice before getting SVG files from dubious sources.

How to upload SVG files to WordPress using 2 secure methods?

Technically, there are two ways to add SVG support to WordPress: using a plugin or manually enabling it. Regardless of your choice, we strongly recommend that you limit upload privileges to administrators and trusted users to minimize malicious uploads.

Use a plugin

In this tutorial, we are going to use the . This plugin uses an SVG sanitization library that will be automatically activated when uploading SVG files to the media library. It’s also easy to set up and free to use.

Here are the steps to configure SVG support:

1. and activate it.

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

3. Check the box next to the option Restrict to Administrator to limit upload privileges. Do the same with the option Enable Advanced Mode if you want access to advanced features like inline SVG rendering and CSS styling.

4. After saving your changes, you can safely start uploading the SVG files 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 advanced mode.

Manually add WordPress SVG support

This method involves editing the file functions.php of your WordPress website. Therefore, we recommend that you follow these steps carefully if you are familiar with PHP and fully understand SVG security.

Important! make sure Make a backup of 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 through the File Manager. That said, you can also use an FTP client like that instead.

1. Access hPanel and go to Records -> File Manager.
2. go to public_html -> wp-includes. Scroll down until you find functions.php.

3. Double-click the file to open it and paste the following code snippet:

function add_file_types_to_uploads($file_types){ $new_filetypes = array(); $new_filetypes = ‘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 to upload a file of type SVG. If the process is successful, your media library should accept the file upload.

conclusion

The many advantages of SVG files contribute to the growing popularity of this type of file. Unfortunately, XML text files are prone to code injection, which is the main reason WordPress doesn’t include SVG support by default, posing a web security issue.

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

We hope this article has given you an idea of ​​the benefits and risks of uploading SVG files to a WordPress website. Good luck!

Deyi is a digital marketing enthusiast, with a background in web design, content creation, copywriting, and SEO. She is part of ‘s SEO & Localization team. In her free time, she likes to develop projects, read a book or watch a good movie.