24 February 2022
Are you looking to add SVG files to your WordPress site? WordPress allows you to upload all popular image, audio, and video file types by default, but SVG isn’t one of them.
In this blog post, I will share a guide on how to upload SVG images to WordPress using a plugin or adding a simple PHP code snippet.
SVG is a file format that defines vector graphics using the XML markup language. The main advantage of SVG is that it allows you to enlarge images without losing quality or having any pixelation.
Following are some of the benefits of using SVG images:
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 trigger brute force attacks, cross-scripting attacks, or use it for unauthorized access to user’s 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 website.
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, however, either manually enable this functionality or use a plugin to do so. 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.
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 SVG upload in 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 to 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 to WordPress, and you’ll be free to explore the file type as much as you want: