As a widely used vector image format, SVG is already supported by all mainstream browsers. However, as of the time of this writing, WordPress does not yet include built-in SVG support, which means users cannot directly upload SVG images to their posts or media library. While allowing XML-based files like SVG can introduce some security concerns (such as JavaScript injection), these are manageable. Disabling SVG entirely because of this is a missed opportunity for better web design.
Fortunately, WordPress is a highly flexible platform. Even though it doesn’t support SVG uploads by default, we can easily add this functionality to our site using either a custom code snippet or a dedicated plugin.
Enabling SVG Support via Code
Below is a code snippet that enables SVG uploads in WordPress. Simply add this to your theme’s functions.php file or a custom plugin file. This code registers the SVG MIME type and ensures that WordPress correctly identifies the file extension.
add_filter('wp_check_filetype_and_ext', function ($data, $file, $filename, $mimes)
{
global $wp_version;
if ($wp_version !== '4.7.1') {
return $data;
}
$filetype = wp_check_filetype($filename, $mimes);
return [
'ext' => $filetype[ 'ext' ],
'type' => $filetype[ 'type' ],
'proper_filename' => $data[ 'proper_filename' ],
];
}, 10, 4);
add_filter('upload_mimes', function ($mimes)
{
$mimes[ 'svg' ] = 'image/svg+xml';
return $mimes;
});
add_action('admin_head', function ()
{
echo '<style>
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
});Note: Using this manual code method does not include security sanitization for the uploaded SVG files. Therefore, it is not recommended for multi-user WordPress sites where untrusted users might upload malicious files.
Enabling SVG Support via Plugins (Recommended)
For most users, the simplest and safest method is to use the Safe SVG plugin. This plugin not only enables SVG support but also sanitizes and validates every uploaded SVG file to prevent potential security vulnerabilities that could affect your website.
The security layer of the Safe SVG plugin is powered by the svg-sanitizer library. If you are a developer looking to integrate secure SVG support directly into your own theme or plugin, you can refer to the implementation logic used by Safe SVG as a robust reference.
Other Methods and Considerations
Beyond the methods mentioned above, popular page builders like Elementor have built-in options to enable SVG support. However, these settings often only apply to uploads made within the builder’s interface and may not affect the default WordPress media library.
If you know of any other effective ways to enable SVG support in WordPress, feel free to share your thoughts in the comments section below!
