How to Upload SVG to WordPress in Two Easy Ways

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.

What is SVG?

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.

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.

Does WordPress Support SVG?

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.

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

How to Upload SVG in WordPress

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.

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.

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.

Method 2: Upload SVG File in WordPress Without Plugin

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 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 in 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.