How to Enable SVG Files Upload in WordPress

SVG (Scalable Vector Graphics) files are disabled for upload in WordPress by default due to security reasons. WordPress by default don’t let its users to upload SVG images in media library. Basically, SVG is an XML-based vector image format that means it can contain scripts or other code.

Your website can be easily be attacked with Cross-Site Scripting (XSS) if your SVG file is not properly sanitized.

Here are some reasons why SVG uploads should not be allowed to upload in your WordPress media library:

SVG files are XML-based code which can open the door for potential security threats (XSS attacks)
WordPress does not have built-in tools to sanitize SVG files
Validating and sanitizing SVG files is complex because of various types of data they can contain
Malformed SVG files can break the layout of a website or cause other issues if not handled correctly

Enable SVG Files Upload in WordPress

To enable SVG uploads in WordPress, users often use plugins like Safe SVG¹ & WP SVG Images². I personally like to use Safe SVG plugin because it checks the SVG file if it is sanitized or not before uploading in media library. It ensures that no malicious content is uploaded and removes the content if such thing is present in the file.

Caution: Enabling SVG uploads should be done with caution, considering the security threats.

How to enable SVG uploads without a plugin

Go to Plugins > Add New
Look for Code Snippets, install & activate it
Now, from sidebar Snippets > Add New
Name your snippet i.e., Enable SVG Uploads
Paste the following code in the snippets and activate the snippet.

/**
 * Enable SVG uploads
 *
 * @param array $upload_mimes Allowed mime types.
 *
 * @return mixed
 */
add_filter(
    'upload_mimes',
    function ( $upload_mimes ) {
        // Allow only administrators to upload SVGs
        if ( ! current_user_can( 'administrator' ) ) {
            return $upload_mimes;
        }

        $upload_mimes['svg']  = 'image/svg+xml';
        $upload_mimes['svgz'] = 'image/svg+xml';

        return $upload_mimes;
    }
);

/**
 * Add SVG files mime check.
 *
 * @param array        $wp_check_filetype_and_ext Values for the extension, mime type, and corrected filename.
 * @param string       $file Full path to the file.
 * @param string       $filename The name of the file (may differ from $file due to $file being in a tmp directory).
 * @param string[]     $mimes Array of mime types keyed by their file extension regex.
 * @param string|false $real_mime The actual mime type or false if the type cannot be determined.
 */
add_filter(
    'wp_check_filetype_and_ext',
    function ( $wp_check_filetype_and_ext, $file, $filename, $mimes, $real_mime ) {

        if ( ! $wp_check_filetype_and_ext['type'] ) {

            $check_filetype  = wp_check_filetype( $filename, $mimes );
            $ext             = $check_filetype['ext'];
            $type            = $check_filetype['type'];
            $proper_filename = $filename;

            if ( $type && 0 === strpos( $type, 'image/' ) && 'svg' !== $ext ) {
                $ext  = false;
                $type = false;
            }

            $wp_check_filetype_and_ext = compact( 'ext', 'type', 'proper_filename' );
        }

        return $wp_check_filetype_and_ext;

    },
    10,
    5
);