wpcanyon.com

Allow SVG Uploads Safely (Sanitize + Preview) in WordPress

By default, WordPress does not allow SVG file uploads due to security risks. However, SVGs are widely used for scalable, high-quality graphics. The challenge is to enable SVG uploads safely by sanitizing the files and allowing previews in the media library. This tutorial shows you how to allow SVG upload in WordPress securely with code snippets for sanitization and preview support.

Quick Fix: Enable Safe SVG Uploads in WordPress

1. Add code to allow SVG MIME type in uploads.
2. Sanitize uploaded SVG files to remove malicious code.
3. Enable SVG previews in the WordPress media library.
4. Test uploading and previewing SVG files.

Why This Happens

WordPress blocks SVG uploads by default because SVG files are XML-based and can contain malicious scripts or harmful code. Without sanitization, uploading SVGs can open security vulnerabilities such as cross-site scripting (XSS). Simply enabling SVG uploads without cleaning the files is risky.

To safely allow SVG uploads, you must:

• Whitelist the SVG MIME type.
• Sanitize the SVG content to strip out any harmful code.
• Enable WordPress to generate previews for SVG files.

Step-by-Step: Allow and Sanitize SVG Uploads in WordPress

1. Allow SVG MIME Type

Add this code to your theme’s functions.php file or a custom plugin to permit SVG uploads:

function allow_svg_upload_mime_type( $mimes ) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'allow_svg_upload_mime_type' );

2. Sanitize Uploaded SVG Files

Use the SVG Sanitizer PHP library to clean SVG files on upload. First, install it via Composer or manually include it in your plugin.

Example code to sanitize SVG uploads:

use enshrinedsvgSanitizeSanitizer;

function sanitize_svg_on_upload( $file ) {
    if ( $file['type'] === 'image/svg+xml' ) {
        $sanitizer = new Sanitizer();

        $dirtySVG = file_get_contents( $file['tmp_name'] );
        $cleanSVG = $sanitizer-sanitize( $dirtySVG );

        if ( $cleanSVG === false ) {
            $file['error'] = 'Invalid SVG file.';
            return $file;
        }

        file_put_contents( $file['tmp_name'], $cleanSVG );
    }
    return $file;
}
add_filter( 'wp_handle_upload_prefilter', 'sanitize_svg_on_upload' );

3. Enable SVG Previews in Media Library

WordPress does not generate thumbnails for SVGs by default. Add this code to display SVG previews:

function svg_media_preview( $response, $attachment, $meta ) {
    if ( $response['mime'] === 'image/svg+xml' ) {
        $response['icon'] = $response['url'];
        $response['thumb'] = $response['url'];
        $response['sizes'] = [
            'thumbnail' =[
                'url' =$response['url'],
                'width' =80,
                'height' =80,
                'mime-type' ='image/svg+xml',
            ],
            'medium' =[
                'url' =$response['url'],
                'width' =160,
                'height' =160,
                'mime-type' ='image/svg+xml',
            ],
        ];
    }
    return $response;
}
add_filter( 'wp_prepare_attachment_for_js', 'svg_media_preview', 10, 3 );

4. Test Your Setup

1. Go to Media > Add New in your WordPress admin.
2. Upload a sanitized SVG file.
3. Verify the upload succeeds without errors.
4. Check the media library to see the SVG preview thumbnail.

Common Pitfalls

• Not sanitizing SVGs: Uploading raw SVGs can expose your site to XSS attacks.
• Missing MIME type: Forgetting to add SVG MIME type causes upload errors.
• Composer dependency: The SVG Sanitizer library requires Composer or manual inclusion.
• Preview issues: Some themes/plugins may override media previews, causing SVG thumbnails not to show.
• Caching: Browser or plugin caching might prevent updated SVG previews from appearing immediately.

Works on

This solution works on WordPress sites running on Apache, Nginx, or LiteSpeed web servers. It is compatible with hosting control panels like cPanel and Plesk. The PHP SVG Sanitizer library requires PHP 7.0 or higher.

FAQ

Q: Is it safe to allow SVG uploads in WordPress?

A: Yes, if you sanitize SVG files on upload to remove malicious code. Never allow raw SVG uploads without sanitization.

Q: Can I use a plugin instead of code?

A: Yes, plugins like “Safe SVG” handle sanitization and previews, but using code gives you more control and reduces plugin overhead.

Q: Why don’t SVG thumbnails show in the media library?

A: WordPress does not generate raster thumbnails for SVGs by default. The code snippet above forces SVG previews by using the SVG itself as a thumbnail.

Q: What if my SVG files are still blocked after adding the MIME type?

A: WordPress also checks file extensions and content. Make sure your SVG files have the correct extension and pass sanitization.

Q: Can I customize the SVG sanitization?

A: Yes, the SVG Sanitizer library allows configuring allowed tags and attributes. Refer to its documentation for advanced customization.