How to Allow SVG Uploads in WordPress?

Do you want to allow SVG uploads on your WordPress website?

By default, WordPress allows you to upload audio, video, and image file formats. WordPress doesn’t offer SVG uploads due to security reasons, and you may encounter an error while uploading the SVG file to the WordPress media library.

Why Allow SVG Uploads in WordPress?

Allowing SVG (Scalable Vector Graphics) uploads in WordPress can be beneficial, especially for developers and content creators. Here are some key reasons:

1. Scalability:

Since SVG images are vector-based, they can be scaled to any size without losing quality. This makes them ideal for responsive designs where images need to look crisp on various screen sizes and resolutions.

2. File Size:

SVG files are smaller in size compared to image formats like PNG or JPEG. This results in improving the overall performance of the website and fast loading times.

3. Editability:

SVG files are XML-based, which makes them easily editable with a text editor or graphic design software like Figma. This enabled quick modifications to the images without needing to recreate them.

4. Interactivity and Animation:

SVGs support interactivity and animation, allowing for dynamic and engaging visuals. Developers can create interactive graphics or animations directly within the SVG file, enhancing the user experience.

5. SEO Benefits:

SVG files are text-based, which allows search engines to read and index them. This results in improving SEO. Including relevant keywords and descriptions within the SVG can help search engines understand the content better.

6. Accessibility:

SVGs can include accessible descriptions, titles, and other metadata that assist screen readers and other accessibility tools. This can improve the accessibility of the website for users with disabilities.

7. Design Flexibility:

Designers can create more complex and intricate graphics with SVGs compared to raster images.

8. Open Standard:

SVG is an open standard developed by the World Wide Web Consortium (W3C), ensuring compatibility and support across various platforms and technologies.

9. Security Considerations:

Although SVGs can include potentially harmful scripts, proper sanitization and security measures can mitigate these risks. Using plugins like “Safe SVG” can help ensure that uploaded SVG files are safe and secure.

To add support for SVG files to be uploaded to WordPress media, you can use the below code snippets and add them to your WordPress theme’s functions.php file.

Code Snippet to Allow SVG Uploads For All Users

If you want to enable SVG uploads in WordPress, you can use the below code.

/**
 * Add Mime Types
 */
function maverick_svgs_upload_mimes($mimes = array())
{

    if (current_user_can('administrator')) {

        // allow SVG file upload
        $mimes['svg'] = 'image/svg+xml';
        $mimes['svgz'] = 'image/svg+xml';

        return $mimes;
    } else {

        return $mimes;
    }
}
add_filter('upload_mimes', 'maverick_svgs_upload_mimes', 99);

/**
 * Check Mime Types
 */
function maverick_svgs_upload_check($checked, $file, $filename, $mimes)
{

    if (!$checked['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/') && $ext !== 'svg') {
            $ext = $type = false;
        }

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

    return $checked;
}

add_filter('wp_check_filetype_and_ext', 'maverick_svgs_upload_check', 10, 4);

/**
 * Mime Check fix for WP 4.7.1 / 4.7.2
 *
 * Fixes uploads for these 2 version of WordPress.
 * Issue was fixed in 4.7.3 core.
 */
function maverick_svgs_allow_svg_upload($data, $file, $filename, $mimes)
{

    global $wp_version;
    if ($wp_version !== '4.7.1' || $wp_version !== '4.7.2') {
        return $data;
    }

    $filetype = wp_check_filetype($filename, $mimes);

    return [
        'ext'                => $filetype['ext'],
        'type'                => $filetype['type'],
        'proper_filename'    => $data['proper_filename']
    ];
}

add_filter('wp_check_filetype_and_ext', 'maverick_svgs_allow_svg_upload', 10, 4);

Code Snippet to Allow SVG Uploads Only For Administrators

Since uploading the SVG files can put your site at risk, you can restrict SVG file upload to Site Administrators. You can use the below code to allow SVG file uploads only by administrators.

//Enable SVG upload Only by Administrators
function maverick_enable_svg_upload($mimes)
{
    //Only allow SVG upload by admins
    if (!current_user_can('administrator')) {
        return $mimes;
    }
    
    $mimes['svg'] = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';

    return $mimes;
}
add_filter('upload_mimesv', 'maerick_enable_svg_upload');