How to Get WordPress Working with SVG Files

SVG is all the new rage. I’ve written about why you might want to use SVG images here and also a variety of ways to implement them on web pages here. But if you’re using WordPress, there are a few things you can do to make using SVGs within the WP-Admin area easier.

Allow SVG Uploads via the Media Uploader

Out of the box, WordPress restricts the types of files you can upload to your site, presumably for security reasons. I don’t consider SVG files that I have created myself to be a security concern, though note that SVG files do contain code and therefore it’s theoretically possible that they could contain malicious code…but again, I know that the ones I have created do not. Therefore, without further verbose ado, just add this code to your functions.php file:

// allow SVG uploads
add_filter('upload_mimes', 'custom_upload_mimes');
function custom_upload_mimes ( $existing_mimes=array() ) {
$existing_mimes['svg'] = 'mime/type';
return $existing_mimes;
}

screenshot of an SVG file that's been uploaded to WordPress

Voila, you can now upload SVG files via the Media Uploader.

Displaying SVG Files in WordPress Posts and Pages

Just because we can upload the file though, it doesn’t mean that WordPress will know what to do with it. The easiest solution is to simply copy the URL of the image (you can get this by choosing Media File from the Link to menu when inserting a file, just copy the URL, no need to insert the actual file). Then we can manually add the image via writing our own code in the Text tab of the content editor. Something like:

<img src="/wp-content/uploads/mysvgfile.svg" alt="whatever" />

Unfortunately, right now it’s not very easy to add actual SVG code (vs. the image file itself) to a WordPress post. I’ll update this post when and if I figure out how to do that, but for now, one not-so-elegant solution is to upload an HTML file of the code and then insert that as an iframe.

<iframe width="100%" height="150" style="padding:15px;" src="/wp-content/uploads/svgcode.html"></iframe>

Which gives us something like this:

Up Next: Clearing All Filters Set by Woocommerce Layered Navigation