There is a little legwork to do if you plan on using SVG in WordPress. For fair-enough reasons, WordPress doesn’t allow SVG out of the box. SVG is a markup syntax that has lots of power, including the ability to load other resources and run JavaScript. So, if WordPress were to blanket-ly allow SVG by default, users even with quite limited roles could upload SVG and cause problems, like XSS vulnerabilities.
But say that’s not a problem for your site and you just use SVG gosh darn it. First, let’s be clear what we mean by using SVG in WordPress: uploading SVG through the media uploader and using the SVG images within post content and as featured images.
There is nothing stopping you from, say, using SVG in your templates. Meaning inline <svg>
or SVG files you link up as images in your template from your CSS or whatnot. That’s completely fine and you don’t need to do anything special for that to work in WordPress.
![Example of Using SVG in WordPress. the media library is open and shows tile previews of different SVG files.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/01/using-svg-in-wordpress.png?resize=2884%2C2322&ssl=1)
Taking 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 SVG in WordPress, you really just 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 after that is that the SVG file usually won’t display correctly in the various places it needs to, like the Media Library’s image previews, the Featured Image widget, and possibly even the classic or Block Editor. I have a snippet of CSS that can be injected to fix this. But — and this is kinda why I’m writing this new post — that doesn’t seem to work for me anymore, which has got me thinking.
Plugins for using SVG in WordPress
I used to think, eh, why bother, it’s so little code to allow this might that I may as well just do it myself with the function. But WordPress, of course, has a way of shifting over time, and since supporting SVG isn’t something WordPress is going to do out of the box, this is actually a great idea for a plugin to handle. That way, the SVG plugin can evolve to handle quirks as WordPress evolves and, theoretically, if enough people use the SVG plugin, it will be maintained.
So, with that, here are a couple of plugin recommendations for using SVG in WordPress.
SVG Support
This is the one I’ve been using lately and it seems to work great for me.
![Screenshot of the SVG Support plugin for WordPress in the WordPress Plugin Directory.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/01/svg-support.png?resize=2912%2C2604&ssl=1)
I just install it, activate it, and do nothing else. It does have a settings screen, but I don’t need any of those things. I really like how it asks you if it’s OK to load additional CSS on the front-end (for me, it’s not OK, so I leave it off) — although even better would be for the plugin to show you what it’s going to load so you can add it to your own CSS if you want.
The setting to restrict uploading SVG in WordPress to admins is smart, although if you want to be more serious about SVG safety, you could use this next plugin instead…
Safe SVG
This one hasn’t been updated in years, but it goes the extra mile for SVG safety in that it literally sanitizes SVG files as you upload them, and even optimizes them while it adds the SVG in WordPress.
![Screenshot of the Safe SVG plugin in the WordPress Plugin Directory.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/01/safe-svg.png?resize=2680%2C2666&ssl=1)
We have fairly tight editorial control over authors and such here on this site, so the security aspects of this SVG plugin aren’t a big worry to me. Plus, I like to be in charge of my own SVG optimization, so this one isn’t as perfect for me, though I’d probably recommend it to a site with less technical expertise at the site owner level.
Looks like there is Easy SVG Support as well, but it doesn’t seem to be as nice as the Support SVG plugin and hasn’t been updated recently, so I can’t recommend that.
What plugins have you successfully tried for using SVG in WordPress? Any recommendations you’d like to add?
Wow. What a great read. I will install the first plugin and check out the result.
But the challenge I’m having is that converting images to svg from JPG makes it bigger in size.
Please how can I prevent this?
Good news! Safe SVG is slated to be updated soon. @jeffpaul at 10up has been working on a release: https://github.com/10up/safe-svg
Definitely this one – https://wordpress.org/plugins/wp-svg-images/ – only one working with Beaver Builder on frontend editor
Why not just copy the SVG code and paste it in an block? Works for me. No extra code or plugins needed. Just make sure the SVG’s you put on your site are clean code and voila. You can then further control your SVG’s with css classes or id’s etc.
Few reasons off the top of my head:
I’ve used WP SVG images ( https://wordpress.org/plugins/wp-svg-images/ ) as it won’t modify (i.e., clean up) your SVG. It leaves your upload untouched, for better or worse.
I started with Safe SVG and SVG Support beforehand, but they kept modifying the contents, ever so slightly. Not securing them, as there was nothing notable to secure and remove, but shifting some of the attributes around.
I optimize SVG before uploading, so I just want to have a plugin leave it alone and not change one byte. Just upload it as-is.
I didn’t know that there’s a plugin for SVG. We always get it from another source and just upload them. This is cool. Thanks you, it’s another piece of information I learned today.