How to Allow SVG Images Upload with WordPressHow to Allow SVG Images Upload with WordPress

If you are using WordPress and have tried to upload SVG files, you probably found out that it is not allowed by default. This free source code snippet provides a solution to allow SVG Images Upload with WordPress.

This source code can also be applied to enable other file extensions, such as allowing your WordPress Users to upload .doc, .pdf or any other file extension format.

Enabling SVG Images Upload with WordPress Filters

The source code to enable SVG uploads uses WordPress Filters, first by adding the .svg and .svgz file extensions with the upload_mimes filter, and then by adding a wp_check_filetype_and_ext filter that enables the newly added .svg extensions for WordPress File Uploads.

<?php
/**
 * Allow SVG uploads for administrator users.
 *
 * @param array $upload_mimes Allowed mime types.
 *
 * @return mixed
 */
add_filter(
    'upload_mimes',
    function ( $upload_mimes ) {
        // By default, only administrator users are allowed to add SVGs.
        // To enable more user types edit or comment the lines below but beware of
        // the security risks if you allow any user to upload SVG files.
        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
);

You can add the above source code snippet in your active theme’s functions.php. In case you are looking for a guide on how to install WordPress on a VPS Server, make sure to have a read here.

Note also that the above source code enables SVG uploads only for administrators, you can remove this restriction by deleting if-block with the condition !current_user_can('administrator'). This part is only added to provide a level of security, as you need to understand that SVG files may contain malicious scripts, as well.

Make sure to install adequate plugins to verify the integrity of your SVG images as well as verify that they do not contain malicious scripts.

Editorial Team

By Editorial Team

A source code library for the open world! Find snippets and examples for popular programming languages including PHP, Javascript, Typescript, Node.js, Vue.js, and more.