Want to upload SVG files in WordPress? By default WordPress accepts every common image, audio and video format, but SVG is not one of them.
What SVG is
SVG (Scalable Vector Graphics) is a vector image format based on XML markup, supporting two dimensional graphics with animation.
Its main advantage is that you can scale an image up without losing quality. That is different from traditional formats like PNG and JPG, which are made of thousands of pixels.
An SVG image instead consists of a set of written instructions, a kind of schema describing how to draw a two dimensional image. Because these images do not use pixels, they do not degrade when you scale them up or down.
Why use SVG
There are several benefits to using SVG images on a website. Because they scale so well, you can change their size freely without any effect on quality.
By contrast, when you scale up a JPG or PNG it starts to break apart at some point and looks poor on larger screens.
SVG files also tend to be smaller than any other image format. And search engines like Google index SVG files, so it helps your image SEO by keeping quality high without hurting your page speed.
So why does WordPress not support it?
WordPress blocks SVG uploads because the format uses XML markup, similar to HTML, and that can create security holes when used in a site.
If you upload an SVG file from an untrusted source, it can enable security problems such as brute force attacks, cross-site scripting attacks, or unauthorised access to user data. So always use SVG files from a source you trust.
There are other issues with allowing SVG uploads too, especially if you accept guest posts. Anyone could upload a malformed SVG file and break your site.
Fortunately there are WordPress security plugins you can use to guard against this kind of threat.
How to upload SVG images to WordPress
Method 1: use a plugin
Go to Plugins, choose Add New, and search for “SVG Support” or “Safe SVG”.
For usage instructions, follow the documentation from the plugin author. I am not covering that here.
Method 2: enable SVG with PHP
If you do not want a plugin for this, you can use PHP in your theme instead.
Add the following to the functions.php file in your theme:
<?php
add_filter('wp_check_filetype_and_ext', 'web99_check_filetype_and_ext', 10, 4);
function web99_check_filetype_and_ext($data, $file, $filename, $mimes) {
if (!$data['type']) {
$wp_filetype = wp_check_filetype($filename, $mimes);
$ext = $wp_filetype['ext'];
$type = $wp_filetype['type'];
$proper_filename = $filename;
if ($type && 0 === strpos($type, 'image/') && $ext !== 'svg') {
$ext = $type = false;
}
$data['ext'] = $ext;
$data['type'] = $type;
$data['proper_filename'] = $proper_filename;
}
return $data;
}
add_filter('upload_mimes', 'web99_upload_mimes');
function web99_upload_mimes($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_action('admin_head', function () {
echo '<style type="text/css">
.media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail {
width: 100% !important;
height: auto !important;
}</style>';
});That last block is a small quality of life fix: without it, SVG thumbnails in the media library render at zero height and become impossible to click.
One thing worth adding if the site has multiple editors: restrict this to administrators, so a contributor account cannot upload SVG at all. The code above enables it for everyone who can upload media, which is the part that carries the risk.
