Want to learn how to upload SVGs to WordPress? We will present in this tutorial the methods to achieve this..
Web administrators and web designers are bound 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, so you must enable SVG support manually first.
This article will cover the steps for uploading SVG files to a WordPress website using the SVG Support plugin. We'll also answer a few questions regarding the security issues surrounding this particular media file format and why SVG is worth using.
To get started, let's get familiar with SVG and how it works.
But before we start, if you have never installed WordPress, find out How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
What is SVG?
Scalable Vector Graphics (SVG) is an XML text-based vector graphics image format. Although common image formats like JPG and PNG are made up of tons of tiny squares called pixels, this format relies on XML markup language to describe image attributes.
In January 2022, 42% of all websites worldwide use SVG. This percentage has increased since January 2021, when only 29,4% of websites have used 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's widely supported by all major browsers.
here is list of browsers that support SVG file format:
| Navigator | Partial support | Full support |
| Tables | - | Versions 12-18, 79-96, 97 |
| Firefox | version 2 | Versions 3-94, 95, 96-97 |
| Firefox for Android | - | version 95 |
| Chrome | - | Versions 4-96, 97, 98-100 |
| Chromium for Android | - | version 96 |
| Safari | version 3.1 | Version 3.2-15.1, 15.2, TP |
| Opera | - | Versions 10-81, 82 |
| Mini Opera | - | All Versions |
| Opera Mobile | - | Release 12-12.1, 64 |
| Safari on iOS | - | Release 3.2-15.1, 15.2 |
| Android browser | Release 3-4.3 | Release 4.4-4.4.4, 96 |
| UC Browser for Android | - | version 12.12 |
| Samsung Internet | - | Release 4-14.0, 15.0 |
| QQ Browser | - | version 10.4 |
| Baidu Browser | - | version 7.12 |
| KaiOS Browser | - | version 2.5 |
How does SVG work?
SVGs use XML to produce two-dimensional vector images. Unlike JPG and PNG, vector graphics have no pixels. Instead, their behavior is described in XML text files.
For this reason, SVGs can be searched, indexed, scripted, modified, and compressed like code. As a result, anyone can create them using a text editor or vector graphics software.
Does WordPress support SVG?
There is no SVG support by default in WordPress due to the security risks it imposes – we'll cover security issues surrounding SVG in more depth later.
Here is an error message that appears when uploading an SVG graphic to a WordPress website:
There is a current discussion on making SVG part of core WordPress functionality. 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 advantages. Here are some of the benefits of using SVG files:
- Scalability: Since SVG is a vector image format, SVG files maintain the same quality across all screen resolutions. This advantage is also present after making them larger, which is why many people use this scalable image format for icons and logos.
- Smaller file size : SVG files make it easy to improve website performance because they take up less web storage space and load much faster than other images.
- SEO Friendly : Google indexes SVG files, allowing them to appear on Google Image Search and improving your search efforts. SEO. With other types of images, you are limited to optimizing their alt attributes.
- Code-based SVGs are editable using a text editor or vector graphics editing software. You can optimize SVG files for websites or even add animations to make graphics interactive.
SVG on WordPress and security
Since SVG is essentially an XML text file, it has exploitable vulnerabilities that do not affect other image formats. Therefore, 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 should 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 website.
You can clean up uploaded SVG files using an SVG plugin – we'll cover its steps later. However, we recommend that you disinfect it twice with the SVG Sanitizer Test -
Another way to secure your WordPress website is to limit SVG uploads to trusted users only. Selected users should be aware of the security issues 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 WordPress Plugin or by activating it manually. Whichever you choose, we strongly suggest that you limit download privileges to administrators and trusted users only to minimize malicious downloads.
Use a WordPress plugin
In this tutorial, we will use SVG Media. This WordPress Plugin uses an SVG sanitizer library that will automatically activate 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:
- IInstall the plugin and activate it.
- Access to Settings -> support SVG from your WordPress dashboard.
- Check the box next to the option Restrict to administrators to limit upload privileges. Do the same for the option Activate advanced mode if you want access to advanced features, such as inline SVG rendering and CSS styling.
- After saving the changes, you can safely start uploading SVG files to the media library.
Manually add WordPress SVG support
This method involves editing file functions.php of your WordPress website. Therefore, we strongly recommend that you follow these steps if you are familiar with PHP and fully understand the SVG security issue.
Make sure you backup your WordPress website before making changes to avoid data loss in case of misconfiguration.
The following steps will explain how to enable SVG in WordPress manually with the help of an FTP client like fileZilla.
- Go to your website's file directory at your host
- Access to public_html -> wp-includes. Scroll down until you find functions.php.
- Right-click on this file and select View/Edit to open it and paste the following code snippet into it:
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');- Save changes and try uploading a new SVG file. If the process is successful, your media library should accept the file upload.
The many advantages of SVG files contribute to the growing popularity of this file type. Unfortunately, XML text files are prone to code injection, which is the main reason WordPress doesn't include SVG support by default.
That said, there are two ways to get your WordPress website to accept SVG files: using a WordPress Plugin or edit the file functions.php. In addition to limiting upload privileges, you will be able to securely upload SVG files to the website's media library.
Other recommended resources
We also invite you to consult the resources below to take more ownership and control of your website and blog.
- How to Create a Simple WordPress Plugin
- How to Create a Simple Gutenberg Block WordPress Plugin
- How to set your homepage in WordPress
- How to Understand the WordPress Dashboard
- How to Create a Simple WordPress Plugin
Conclusion
That's it for this guide that shows you how to upload SVGs to WordPress. We hope this article has given you some insight into the benefits and risks of uploading SVG files to a WordPress website. If you have any concerns or suggestions, please let us know within Comments.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
Waiting, share this article on your different social networks.
...
