How to Enable SVG Uploads In WordPress

SVGs are disabled by default in WordPress. SVGs (or Scalable Vector Graphics) have one huge advantage over other image formats: They can be scaled up or down without losing their quality. If you scale a PNG or a JPEG beyond their original size, they’ll look stretched out and blurry.

This is why a lot of websites use SVG for their logo and any other image that needs to be scaled based on screen size. But it isn’t possible to upload SVG files in WordPress. WordPress blocks them by default for security reasons.

Method 1: Use This Simple PHP Snippet

Enabling SVG uploads in WordPress is really easy.

All you have to do is add the following code snippet to your theme’s functions.php file:

/*
* Enable SVG Uploads
*/

function wpturbo_enable_svg_uploads($mimes){
   $mimes['svg'] = 'image/svg+xml';
   return $mimes;
}
add_filter('upload_mimes', 'wpturbo_enable_svg_uploads');

You can edit your theme’s functions.php file from Tools -> Theme File Editor in your WordPress admin dashboard. Paste this code at the end of the file.

You can also add this code snippet to a site-specific plugin. Use our Plugin Header generator to generate a plugin file and add this code.

The above code snippet is really simple. It hooks into the ‘upload_mimes’ filter. This filter allows you to modify what file types are allowed to be uploaded. In this case, our function wpturbo_enable_svg_uploads adds SVG’s mime type to the array of allowed files.

You can also enable Webp uploads in this same way. Read our tutorial to learn how.

Method 2: Use a Plugin

If you don’t want to add the above PHP snippet to your theme’s functions.php file, you can install a simple plugin called SVG Support. It’s a free plugin that will add SVG support to your website. It will also sanitize all SVG uploads adding a layer of security.

Enable GZIP Compression For SVG Files

SVG files are made of XML. So, you can compress them to make them smaller.

If you have already enabled GZIP on your server using a plugin, check the plugin’s settings or documentation on how to enable GZIP compression.

If you haven’t yet enabled GZIP compression on your website, copy and paste this code snippet at the end of your .htaccess file:

<ifmodule mod_deflate.c>

AddOutputFilterByType DEFLATE image/svg+xml text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

</ifmodule>

If you see something similar to the above code snippet in your .htaccess file, it means GZIP is already enabled. In that case, simply add the second last line “image/svg+xml” after DEFLATE if you don’t already see it.

Conclusion

SVGs are a much better format than JPEG or PNG for vector images if you are building a responsive website. Although WordPress disables SVG by default, enabling it is really easy and quick.