Enable SVG Upload Support in WordPress

Enable SVG Upload Support in WordPress

WordPress doesn't allow SVG uploads by default due to security concerns. This snippet enables SVG support with proper sanitization to prevent XSS attacks.

// Enable SVG uploads
function enable_svg_upload($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'enable_svg_upload');

// Fix SVG display in media library
function fix_svg_display($response, $attachment, $meta) {
    if ($response['type'] === 'image' && $response['subtype'] === 'svg+xml') {
        $response['image'] = array(
            'src' => $response['url'],
        );
    }
    return $response;
}
add_filter('wp_prepare_attachment_for_js', 'fix_svg_display', 10, 3);

// Sanitize SVG files on upload (IMPORTANT for security)
function sanitize_svg_upload($file) {
    if ($file['type'] === 'image/svg+xml') {
        $file_path = $file['tmp_name'];
        $file_content = file_get_contents($file_path);

        // Remove potentially dangerous tags
        $dangerous_tags = array(
            'script',
            'iframe',
            'object',
            'embed',
            'link'
        );

        foreach ($dangerous_tags as $tag) {
            $file_content = preg_replace('/<' . $tag . '[^>]*>.*?<\/' . $tag . '>/is', '', $file_content);
            $file_content = preg_replace('/<' . $tag . '[^>]*\/>/is', '', $file_content);
        }

        // Remove on* event handlers
        $file_content = preg_replace('/\s*on\w+\s*=\s*["\'][^"\']*["\']/i', '', $file_content);

        file_put_contents($file_path, $file_content);
    }

    return $file;
}
add_filter('wp_handle_upload_prefilter', 'sanitize_svg_upload');

// Check file extension and MIME type
function check_svg_upload($checked, $file, $filename, $mimes) {
    if (!$checked['type']) {
        $wp_filetype = wp_check_filetype($filename, $mimes);
        $ext = $wp_filetype['ext'];
        $type = $wp_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', 'check_svg_upload', 10, 4);

Display SVG Dimensions

// Add SVG dimensions
function add_svg_dimensions($dimensions, $image_src, $image_meta, $attachment_id) {
    if (get_post_mime_type($attachment_id) === 'image/svg+xml') {
        $svg_path = get_attached_file($attachment_id);
        $svg_content = file_get_contents($svg_path);

        preg_match('/width=["\'](\d+)["\']/', $svg_content, $width_match);
        preg_match('/height=["\'](\d+)["\']/', $svg_content, $height_match);

        if ($width_match && $height_match) {
            $dimensions = array(
                intval($width_match[1]),
                intval($height_match[1])
            );
        }
    }

    return $dimensions;
}
add_filter('wp_get_attachment_image_src', 'add_svg_dimensions', 10, 4);

Security Considerations

• Sanitization Required: Always sanitize SVG files to prevent XSS attacks
• Trusted Users Only: Only allow SVG uploads for admin users
• Regular Updates: Keep WordPress and plugins updated
• Backup First: Test on staging before production

Restrict SVG Upload to Admins Only

// Only allow admins to upload SVG
function restrict_svg_to_admins($mimes) {
    if (!current_user_can('administrator')) {
        unset($mimes['svg']);
        unset($mimes['svgz']);
    }
    return $mimes;
}
add_filter('upload_mimes', 'restrict_svg_to_admins', 999);