How to Upload SVG to WordPress in Two Easy Ways

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.

What is SVG?

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.

Why Use SVG?

Following are some of the benefits of using SVG images:

  • Scalability ‒ As SVG is a vector image format, SVG files maintain the same quality across all screen resolutions. This benefit remains after they have been enlarged, which is why many people choose this scalable image format for icons and logos.
  • Smaller file size ‒ SVG files make it easier to improve website speed since they use less web storage space and load much faster than raster images.
  • SEO-friendly‒ SVG files are indexed by Google, which allows them to appear in Google Image Search and improve your SEO efforts. With raster images, you can only optimize their alt attributes.
  • Code-based ‒ SVGs can be edited with a text editor or vector graphics software. You can optimize SVG image files for websites or add animations to make the graphics interactive.

Why Does WordPress Prevents Add of SVG Files?

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.

How to Upload SVG to WordPress

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.

Method 1: Upload SVG in WordPress Using Plugin

This method fully supports the adding of SVG files to WordPress. It also enables inline SVG in WordPress posts and pages.

SVG Support WordPress Plugin

First, install and activate the SVG Support plugin.

After activating the plugin, go to Settings » SVG Support to adjust the plugin settings.

SVG Support 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.

Method 2: Upload SVG in WordPress Using Code Snippets

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 function add_mime_types($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_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.

Conclusion

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:

  1. If you don’t want to mess with coding, use the SVG Support plugin.
  2. Edit your functions.php file to add support for SVG if you don’t want to install an extra plugin.