Do you want to add SVG files to your WordPress site?
By default, WordPress allows you to upload all popular image, audio, and video file formats, but SVG is not among them. There are potential security concerns, but there are ways to safely use them.
In this article, we will show you how to easily add SVG in WordPress.
What is SVG?
SVG or Scalable Vector Graphics is a file format that defines vector graphics using the XML markup language. The main benefit of SVG is that it allows you to enlarge images without losing quality or having any pixelation.
How does SVG work?
Scalable Vector Graphics (SVG) is a technology that displays two-dimensional drawings using XML. They are different than the commonly used image formats like PNG, GIF, or JPEGs.
If you take a png or jpeg image file and zoom in, then you will notice that the image will start to blur and become pixelated.
Vector graphics don’t use pixels. Instead, they use a two-dimensional map that defines the graphic you are viewing. As you zoom in, the image doesn’t pixelate.
This enables you to enlarge vector graphics without losing quality. Most importantly, SVG images can be way smaller in filesize than jpg or pngs.
Vector graphics are commonly used for icons, icon fonts, website logos, and branding images. You may want to add SVG files in WordPress for your company logo, icons, or other graphics.
As cool as they sound, SVG files are still a bit unsafe. That’s why WordPress doesn’t support SVG file uploads by default.
If you upload an SVG image in WordPress, then you will see the following error message:
Sorry, this file type is not permitted for security reasons.
Security Issues Concerning SVG in WordPress
SVG files contain code in the XML markup language which is similar to HTML. Your browser or SVG editing software parses the XML markup language to display the output on the screen.
However, this opens up your website to possible XML vulnerabilities. It can be used to gain unauthorized access to user data, trigger brute force attacks, or cross-site scripting attacks.
The methods we will share in this article will try to sanitize SVG files to improve their security. However, these plugins cannot totally prevent malicious code from being uploaded or injected.
The best solution is to only use SVG files that are created by reliable sources and to restrict SVG uploads to trusted users only.
To learn more about security, check out our complete WordPress security guide for beginners.
That being said, let’s take a look at how to easily and safely use SVG files in WordPress using one of 3 methods.
- Method 1. Allow SVG Files in WordPress Using WPCode
- Method 2. Upload SVG Files in WordPress Using SVG Support
- Method 3. Upload SVG Files in WordPress Using Safe SVG
Method 1. Allow SVG Files in WordPress Using WPCode
The simplest and easiest way to safely allow SVG uploads to WordPress is by using WPCode, the most powerful code snippets plugin available.
WPCode comes with a large library of pre-configured code snippets that can replace many single-use plugins on your site, from disabling attachment pages, using the Classic Post Editor, or allowing SVG file uploads.
First, you will need to install and activate the free WPCode plugin. For detailed instructions, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you should navigate to Code Snippets » Add Snippet in your WordPress admin panel. Just search for ‘svg’ and hover your mouse over ‘Allow SVG Files Upload.’
Then, you can click on ‘Use snippet.’
Next, you will be taken to the ‘Edit Snippet’ page where WPCode has already configured all the settings the code needs to run.
All you need to do is click the switch to ‘Active’ and then press the ‘Update’ button.
Now, you will be able to upload SVG files without being given an error or warning message by WordPress.
You can then treat it as you would any other image on your WordPress website.
By default, the WPCode snippet only allows users with the Administrator role to add SVGs to WordPress.
You can also grant permission to all other user roles by simply deleting Lines 14-16 of the code snippet.
You can also ‘comment them out’ by adding two slashes ‘//’ to the beginning of each of those lines, turning them a light tan color. WPCode won’t execute any part of the snippet that it sees as a comment rather than code.
You can see an example of this in Lines 11-13 in the image below.
Either way, with the code removed, all users will be able to upload SVG files to your WordPress site. Just be sure to click ‘Update’ to save any changes you make.
Method 2. Upload SVG Files in WordPress Using SVG Support
This method uses the SVG Support plugin and allows you to display inline SVGs in WordPress posts and pages, as well as control who has permission to upload them.
Upon activation, you need to visit Settings » SVG Support page to configure plugin settings.
On the settings page, you need to check the box next to ‘Restrict to Administrators?’ option. This will allow only a site administrator to upload SVG files in WordPress.
The next option is to turn on the advanced mode. You only need to check this option if you want to use advanced features like CSS animations and inline SVG rendering.
Don’t forget to click on the save changes button to store your settings.
You can now create a new post or edit an existing one. In the post editor, you will upload your SVG file like you would upload any other image file. Simply add an image block to the editor and then upload the SVG file.
You will now be able to upload and embed SVG files in WordPress.
Method 3. Upload SVG Files in WordPress Using Safe SVG
This method also uses a plugin and allows you to perform sanitization of SVG files uploaded to WordPress.
The plugin works out of the box, and there are no settings for you to configure. You can simply go ahead and start uploading SVG files.
The downside is that this plugin allows SVG uploads by all users who can write posts on your WordPress site.
In order to control who can upload files, you will need to purchase the premium version of the plugin.
We hope this article helped you learn how to safely add SVG files in WordPress. You may also want to see our article on how to fix the most common image issues in WordPress and the best SEO plugins and tools.