Add SVG image support

Jacob Finch
✍️ August 30, 2019
🕒 1 min read
🧩 Intermediate

Vector images are “in.” WordPress supports them out of the box, but you are not allowed to upload them using the Media Library because of security reasons. This can be changed easily.

You’ve probably heard that WordPress supports SVG vector files now, but somehow haven’t been able to upload them? That’s because the Media Library doesn’t allow uploading the by default. SVGs can contain malicious code which can lead to code conflicts, cross-site scripting attacks, code injection, and errors. If you are confident in the source of your SVG files and want to add them to your website, proceed with this tutorial.

The method

Add this code to your child theme’s functions.php file:

function add_mimes($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}

add_filter('upload_mimes', 'add_mimes');

SVG security details

SVG support is not included in WordPress by default yet, because there are a few security issues. SVG file itself has an XML structure. This means it’s possible to include several exploits inside of the image to perform several types of attacks.

You could even include JavaScript inside SVG files to perform complex tasks like logging users keystrokes and sending them to a 3rd party. Sounds scary, right?

You should only download SVG files from a reputable source. You should also run them through an SVG Sanitizer. This will clean them of any unwanted code.

I wouldn’t advise enabling SVG support on multi-author WordPress sites. You will have no control over what kind of images your users are uploading.

Alternatively, use a plugin

You can also use a simple plugin, SVG Support, to allow SVG uploads.

I even found a plugin that performs SVG sanitization for you: Safe SVG.

Leave a Comment