Using SVG in WordPress (2 Helpful Plugin Recommendations) | CSS-Tricks

There is a little legal work to do if you plan to use SVG in WordPress. For fair reasons, WordPress doesn’t allow SVG out of the box. SVG is a markup with a lot of power, including the ability to load other resources and run JavaScript. So, if WordPress comprehensively allows SVG by default, even users with very limited roles can load SVG and cause problems, such as XSS vulnerabilities.

But let’s say this isn’t a problem for your site and you’re just using SVG oh my gosh. First, let’s be clear what we mean by using SVG in WordPress: Upload SVG through a media upload program and use SVG images within the publication content and as featured images.

There is nothing to stop you, for example, from using SVG in your templates. inline meaning <svg> or SVG files that you link as images in your template from your CSS or otherwise. That’s totally fine and You don’t need to do anything special For this to work in WordPress.

Example of using SVG in WordPress.  The media library is open and displays tile previews for different SVG files.

Take matters into your own hands

What prevents you from using SVG in WordPress is that the Media Library Uploader rejects the file’s MIME type. To allow the use of SVG in WordPress, you only need this filter. This would go in your functions.php or a functionality plugin:

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

But the problem then is that the SVG file usually doesn’t render correctly in the various places it’s needed, such as image previews in the media library, the featured images tool, and maybe even the classic or block editor. I have a CSS snippet that can be injected to fix that. But – which is why I’m writing this new post – it seems like this just doesn’t work for me anymore, which got me thinking.

Plugins for using SVG in WordPress

I used to think, why bother, it’s so little code to allow this, and I might do it myself with the function. But WordPress, of course, has a way of changing over time, and since SVG support isn’t something WordPress will do out of the box, this is actually a great idea to work around with the plugin. This way, the SVG plugin can evolve to handle quirks as WordPress evolves, and in theory, if enough people use the SVG plugin, it will be preserved.

With that said, here are some additional recommendations for using SVG in WordPress.

SVG support

This is the one I’ve been using lately and seems to work great for me.

Screenshot of the SVG Support plugin for WordPress in the WordPress Component Directory.

I just install and activate it and don’t do anything else. It does have a settings screen, but I don’t need any of those things. I really like how it asks if it’s OK to load additional CSS on the front end (for me, that’s not good, so I leave it) – although it would be better if the plugin shows you what to load so you can add it to your CSS if you want that.

The setting for restricting SVG loading in WordPress for admins is smart, although if you want to get more serious about SVG security you can use this following plugin instead…

SVG Safe

This file hasn’t been updated in years, but it goes above and beyond for SVG security in that it literally sanitizes SVG files as they are loaded, and even optimizes them while adding SVG in WordPress.

Screenshot of the Safe SVG plugin in the WordPress Plugin Directory.

We have fairly strict editorial control over authors etc here on this site so the security aspects of this SVG plugin are not a huge concern to me. Additionally, I would like to be responsible for optimizing my SVG, so this is not ideal for me, although I might recommend it for a site with less technical expertise at the site owner level.

There appears to be Easy SVG support as well, but it doesn’t seem to be as good as the Support SVG plugin and it hasn’t been updated recently, so I can’t recommend it.

What plugins have you tried successfully for using SVG in WordPress? Any recommendations you would like to add?

Leave a Comment