800,000+ WordPress sites are already using MetaSlider!

Can You Use SVG Images in WordPress and MetaSlider?

Scalable Vector Graphics (SVG) images are quickly becoming one of the most popular image formats for displaying logos on websites.

SVG allows you to use images with small file sizes that can scale to any visual size without losing quality. They are also SEO-friendly because they use XML text files that can be crawled by search engines.

However, SVG images come with some significant disadvantages. They can possibly be a security hazard, and it’s not unusual for SVG files to contain viruses. Here’s an explanation from Trustwave:

Scalable Vector Graphics or SVG is a vector graphic image file defined using XML-based format … SVG images can be represented using the Document Object Model (DOM) and can be controlled using JavaScript. Yes, you heard that right, JavaScript and this is exactly how bad guys exploit this file format. By injecting malicious JavaScript code into the file, they can redirect the browser to a malicious website.

Some new file types are being rapidly adopted, for example, read about WebP images in WordPress. But these security issues mean that SVG files can be difficult to use in WordPress.

How WordPress Deals with SVG Files

Because of the security issues, WordPress has always been careful about allowing users to upload SVG files. If you try to upload an SVG file to WordPress, this is the message you’ll see: “Sorry, you are not allowed to upload this file type.”

WordPress SVG: Sorry, you are not allowed to upload this file type.

If you do find an SVG file on your site, the most common use is for your site’s logo. This will be part of the theme, and not uploaded via the WordPress admin area.

The WordPress community started discussing SVG files back in 2013, but there are still problems to solve. For example, the most popular way to support SVG files is the the SVG Sanitizer library. That library only supports PHP 7, and WordPress still supports PHP 5.6.

WordPress Plugins and SVG FIles

There is no core WordPress support, but there are popular plugins available including Safe SVG and SVG Support. These plugins contain tools that will scan and sanitize your SVG files so you don’t have to worry about the security issues.

Some of these plugins are incredibly popular. I’ll use the SVG Support plugin in this tutorial, which has over 1 million installs.

With this SVG Support plugin installed, WordPress will no longer complain about SVG files. You will be able to upload them and see them in your Media Library. You can also add these images into posts, just as with any other file type that WordPress supports.

SVG files uploaded to media library

Please note that I don’t recommend immediately installing and using this plugin. Check the plugin’s options first, by going to “Settings” and then “SVG Support”.

  • Restrict to Administrators? Set this to “Yes” unless you are ok having anyone with access to the site uploading SVG files.
  • Load frontend CSS? Set this to “Yes” if you see any display issues with your SVG files.
  • Sanitize SVG while uploading: Set this to “Yes” always. Just do it.
Settings for the SVG Support plugin.

SVG Files in MetaSlider

If you use a plugin such as “SVG Support”, you will be able to use SVG files with MetaSlider. You will be able to add slides that include SVG images, and they will display correctly in your slideshows.

SVG files with MetaSlider

For a more complete guide to file types, see what file types you can use in WordPress.

Leave a Comment

Start Using Your Slider Today!

Create and publish WordPress slideshows in minutes… What are you waiting for?