24 February 2022
Are you looking for a way to upload SVG files to your WordPress website?
WordPress lets you upload all popular image, audio, and video file formats by default but restrict svg uploads.
In this post, we’ll show you how to upload SVG to WordPress using two easy ways.
SVG is an Extensible Markup Language based vector image format that supports two-dimensional images with animation.
The main benefit of SVG is that it allows us to enlarge the images without losing quality. It differs from traditional image formats like PNG and JPG, which are made of thousands of pixels.
Instead, SVG images comprise a set of written instructions with a schema-like data set to create a two-dimensional image. As these images don’t use pixels, they won’t pixelate when you zoom in or out of the image.
Following are some of the benefits of using SVG images:
Because of security issues, you can’t upload SVG to WordPress.
When you upload Scalable Vector Graphics images, the following error message appears:
If you want to upload this file type to WordPress, you can use one of the ways described later in this post.
WordPress Prevents the upload of SVG images because it uses an XML Markup language similar to HTML and may create security vulnerabilities when used on a website.
When we upload an SVG file from an untrusted site, it may create security issues like triggering brute force attacks, cross-scripting attacks, or using it for unauthorized access to users’ data. So, always use SVG files from a trusted source only.
There may be other problems enabling SVG upload in WordPress, mainly when accepting guest posts. Anyone can upload a corrupt SVG file and break your WordPress site.
Luckily, there are several WordPress security plugins available that you can use to prevent this security threat.
To learn more about security, see our complete WordPress security guide for beginners.
WordPress, as previously stated, does not support SVG out of the box. You may manually enable this functionality or use a plugin to allow WordPress to upload SVG. Let’s start with the latter option because it’s the most straightforward.
This method fully supports the adding of SVG files to WordPress. It also enables inline SVG in WordPress posts and pages.
First, install and activate the SVG Support plugin. For more in detail, see our guide on how to install a plugin in WordPress.
After activating the plugin, go to Settings » SVG Support to adjust the plugin settings.
Tick the box next to the Restrict to Administrators option on the settings page. This will allow only a site administrator to upload SVG files in WordPress.
The next step is to enable advanced mode. You only need to check this option to use advanced features such as CSS animations and inline SVG rendering.
Don’t forget to save your changes by clicking the Save Changes button.
WordPress now allows you to add and embed SVG files.
Alternative: You can also install and activate the Safe SVG plugin for WordPress. This plugin has no settings for you to configure. You can simply go ahead and start uploading SVG files.
Instead of using a plugin, you may upload SVG files in WordPress by adding a simple PHP code snippet to your theme funcation.php file.
Go to the template folder, find the functions.php and paste the below code:
// Enable SVG support
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
add_filter('upload_mimes', 'add_mime_types'); Finally, Save the file, and you are done.
You can also use a code management plugin like Code Snippets to insert the PHP code in WordPress.
We hope this post should have given you a better knowledge of what SVG images are, how they work, and what security issues they can create.
Choose one of these two methods to upload SVG in WordPress, and you’ll be free to explore the file type as much as you want: