How to Safely Use Vector Images with WordPress

There are dozens of image file types you can use for your media. Out of the box, WordPress supports the majority of the more popular image file types, including .jpeg, .png, .gif, and more. However, it doesn’t include any support for vector images.

In the past, we’ve talked about how to create Scalable Vector Graphics (SVGs), as well as their benefits. For this article, we’ll go over the concept of SVGs once more, why using them the wrong way may be unsafe, and how to actually implement them without compromising your website.

Let’s get to work!

Subscribe To Our Youtube Channel

An Introduction to SVGs

SVGs are images based not on pixels, but on vectors, as you may have guessed from the name. If you try to open a regular image file using a text editor, you’ll see relative gibberish. However, if you tried to open an SVG instead, you will likely see code such as the following (taken from our first piece on SVGs):

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
</svg>

Those, in a nutshell, are a series of vectors that make up a representation of the Adobe logo, with a dash of color thrown in:

SVGs are unique because they retain their quality at any size (i.e. scalable), and will still look perfect regardless of the dimensions used. This makes it an ideal filetype for a few specific use cases:

• Logos that you’ll often want to reuse across different platforms.
• Icons you’ll want to scale depending on the context.
• Images you’ll want to animate using Cascading Style Sheets (CSS).

Technically, there are three ways to create SVGs. You could write the code yourself, which is unpractical unless you’re a machine. The other routes would be to draw an SVG from scratch, or take an existing image and use software such as Illustrator or Sketch to export it as an SVG.

Despite the positives, there are two drawbacks to using SVGs. Firstly, they’re not practical for complex graphics. For example, a normal photograph would take millions of vectors to compose, which would make for a gigantic SVG file. The second drawback to using SVGs is safety-related – and we’ll discuss this in the next section.

Why Using SVGs Can Affect Your Website’s Security

Although we usually refer to SVGs as image files, it would be more accurate to call them ‘documents.’ After all, you can easily open, read, and modify an SVG file using a text editor, which is similar to a regular document.

The issues is in the ability to add JavaScript alongside vector information. Theoretically, this means implementing SVG support on your website could open you up to attacks if someone uploads a file containing malicious code.

It’s such a considerable concern that SVG support for WordPress has been under discussion for over six years:

While you don’t have to go through the entire ticket, the gist is until there’s a way to ensure that the SVG code you upload to WordPress is safe, implementing the feature might cause more problems than benefits.

Right now, there are already several tools you can use to ensure your SVGs are safe, called ‘sanitizers’. However, there are seemingly no good ways to implement their functionality into WordPress currently.

Overall, adding SVG support to WordPress is relatively simple in practice. The real difficulty lies in doing so in a way that doesn’t leave your website vulnerable to potential attacks.

2 Ways to Safely Use Vector Images With WordPress

For this section, we’ll explore both a manual and a plugin-based approach to safe SVG use in WordPress. You’ll then be able to choose the best option for your needs. Let’s get to it!

1. Add SVG Support Manually and Sanitize Your Code

You can add SVG support to WordPress in a matter of minutes with a snippet of code. However, this would leave you open to the potential safety issues we discussed before. The more secure approach to SVG implementation involves the following steps:

1. Enable SVG support by modifying your functions.php file.
2. Restrict the user roles you want from being able to upload .svg files to WordPress.
3. Sanitize every SVG file before you upload it.

Overall, steps one and two aren’t hard to accomplish. The first task is to access your website via File Transfer Protocol (FTP) and navigate to your WordPress root folder. Inside, look for your functions.php file, open it, and add the following code (courtesy of Chris Coyier from CodePen and CSS Tricks):

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

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

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

This fulfills two functions – it enables you to upload SVG files to WordPress, and visualize them within your media library. Once you add the code, save the changes to your functions.php file and close it.

Things now get a bit trickier, since we need to prevent users we don’t trust from uploading corrupted SVGs. For example, you might trust your editors and authors to upload the correct files, but not your contributors. There are two ways you can go about this:

1. Create custom user roles with limited or no access to the Media Library.
2. Use a plugin, such as WP Upload Restriction, to limit what types of files each user role can upload.

Both approaches do have their flaws, which is one of the reasons manual SVG implementation can get tricky. However, once you settle on a method to ensure no one can upload malicious SVG, you also need to ensure you don’t do so by mistake too.

Ideally, you’ll run every SVG you upload to your website through a sanitizer tool before you do so. This will take your file, make sure it doesn’t include anything untoward, and remove if it does. Ultimately, this leaves you with a clean SVG file you can finally upload to WordPress.

2. Use the Safe SVG Plugin

With the above approach, we wanted to show you just how complex safe SVG implementation can get. This is so you can properly appreciate what the Safe SVG plugin does.

In a nutshell, this plugin takes care of all the issues we listed before, including:

• Enabling you to upload SVGs in the first place.
• Making sure you can see your SVGs within the Media Library.
• Sanitizing the code of every SVG you upload to prevent security issues.

This is pretty much a plug-and-play kind of plugin and it’s definitely the most straightforward approach to safe SVG implementation in WordPress. If you’re intent on using SVGs, we recommend you give it a try.

How to Animate SVGs Using CSS and Plugins

If you go through all the trouble (depending on } method you use) of implementing SVGs in WordPress, you’ll probably want to get the most bang for your buck. This means using CSS to animate your SVGs if the situation calls for it. There are two ways you can go about the process, which we’ve covered in the past:

1. Animate SVGs manually with CSS as you would any other element.
2. Use tools such as SVGator to help you generate and animate SVGs.

If you’re up for a bit of experimentation, some animations here and there can really kick your site’s user experience up a notch. More importantly, using SVGs and CSS to accomplish this is much better than say, adding videos or GIFs, particularly for mobile devices.

Conclusion

SVGs are a fantastic choice for many situations. To give an example, they’re the perfect option for website logos due to their scalability. In general, using SVGs can help you design a more responsive website, which is always a good thing as far as your users are concerned.

However, if you’re planning on adding SVG support to WordPress, you need to make sure you use an approach that keeps your site safe. There are two methods to recommend:

1. Add SVG support manually and sanitize your code.
2. Use the Safe SVG plugin.

Do you have any questions about how to use SVGs safely in WordPress? Let’s talk about them in the comments section below!

Article thumbnail image: microtic / shutterstock.com