How to Safely Use Vector Images with WordPress

Posted on June 12, 2019 by in WordPress | 14 comments

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:

The Adobe logo.

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:

A Trac ticket from six years ago.

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.

The Safe SVG plugin.

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

Premade Layouts

Check Out These Related Posts

7 Best Project Management Plugins for WordPress

7 Best Project Management Plugins for WordPress

Posted on October 9, 2019 by in WordPress

Staying organized is one of the most important things you can do when running a business. It doesn’t matter what industry you’re in, skip organization and you’re largely out of luck. There are plenty of tools out there for “getting organized” but figuring out which one is best for your...

View Full Post

14 Comments

  1. Interesting post ! Thanks !

    “n 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.”

    Does it mean that it won’t be a good idea to upload (for any reason) svg files via ftp ?
    I mean the plugin won’t be able to manage the files…?

    • I would think that you can still upload SVGs via SFTP without an issue. However, if you try this and it doesn’t work, come back and let us know!

  2. Thank you for the information. I’ve noticed that more than 100.000 websites using this plugin

  3. A great plugin!
    Im a big vector fan! Would this also make it easy to implement animated vectors made with tumult hype?

    • That’s a question I don’t have an answer to, but Google will be your friend on this one I think. 🙂

  4. I might try the manual way of implementing SVG on my WordPress site. But for now I’ve been using the Safe SVG plugin. I’m even thinking of upgrading to pro.

  5. Standards Services is a recruitment firm in nsp We provide the best jobs. We are Hiring fresher or experienced candidates mainly for hr recruiter, bpo jobs in Delhi, Noida, Gurgaon.

  6. SVG’s rock! Easy to change colors, animate, and they’re super lightweight. I’m hoping more people start using them.

    • They’re pretty cool things, and are the future of web graphics. Thanks for your opinion, Jeremiah!

  7. Your explanation good, I want to know if I use images URL address on my site, does it harmful for the site?

    • Thank you for your comment Muk, but I’m afraid I don’t understand what you’re asking. Could you possibly rephrase your question?

  8. Hello John Hughes,

    Actually, I am trying to add a logo on SVG format but have no idea how to add properly but after going through all the steps you have mentioned now it is easy and safe to do that. And it will save my lots of time also.

    So thank you so much for sharing this great tutorial with us which is really helpful for those who are a beginner or no idea about this like me.

    • You are very welcome Rick I am glad it helped so much!

Join To Download Today

Pin It on Pinterest