Restoring ACF SVG Image Support in Version 6.8.8

The release of Advanced Custom Fields 6.8.8 restores critical ACF SVG image support for developers who rely on vector graphics within their custom database schemas. In previous minor iterations, a validation regression caused both the Image and Gallery fields to reject SVG uploads, even when the underlying WordPress installation was explicitly configured to allow them. This release addresses that specific friction point, ensuring that your content editors can once again upload scalable vector graphics without encountering unexpected validation blocks.

Understanding the SVG Upload Issue in Prior Versions

In recent updates to Advanced Custom Fields, changes to the media validation pipeline inadvertently restricted certain mime types. While WordPress core does not support SVG uploads out of the box due to security concerns, developers frequently use plugins like Safe SVG, SVG Support, or custom filter hooks to enable them.

When these custom configurations were active, the standard WordPress media library would accept the SVG files, but the ACF Image and Gallery fields would throw validation errors during the upload process or fail to attach the media asset to the post meta. ACF 6.8.8 corrects this behavior by aligning its field validation logic with the allowed mime types filtered by your active WordPress environment.

The Importance of ACF SVG Image Support for Modern Web Design

In modern front-end development, vector graphics are indispensable. Unlike raster formats such as PNG or JPEG, SVGs scale infinitely without losing quality, making them ideal for logos, icons, and complex illustrations across high-density displays. Maintaining robust ACF SVG image support ensures that editorial workflows remain seamless.

When ACF fields reject SVG files, developers are often forced to use generic File fields instead of dedicated Image or Gallery fields. This workaround breaks the user experience in the WordPress admin, as File fields do not render visual previews of the selected assets. By updating to ACF 6.8.8, you can restore the native visual preview for SVG assets within your custom field groups.

Security Considerations for SVG Uploads in WordPress

Because SVGs are XML-based documents, they can contain executable JavaScript and external entity references. This makes them vulnerable to Cross-Site Scripting (XSS) and XML External Entity (XXE) injection attacks. This inherent risk is the primary reason WordPress core does not enable SVG uploads by default.

When enabling SVG support alongside ACF, you must ensure that all uploaded vector files are sanitized. Simply adding the SVG mime type to the allowed list is not secure. You should always use a sanitization library or a well-maintained plugin that strips malicious scripts and XML payloads during the upload process before the file is saved to the media library.

How ACF 6.8.8 Resolves the SVG Rejection Bug

The core fix in ACF 6.8.8 targets the validation hooks that run when an asset is uploaded or selected via the ACF media modal. The plugin now correctly references the filtered list of allowed mime types provided by the upload_mimes filter in WordPress.

If your site uses a sanitization plugin or a custom filter to allow SVGs, ACF’s validation engine now recognizes image/svg+xml as a valid image format. This prevents the “This file type is not allowed” error from triggering when an editor attempts to populate an ACF Image or Gallery field with a vector asset.

Step-by-Step Guide to Safely Enable and Use SVGs with ACF

To implement secure SVG handling and take full advantage of the restored capabilities in ACF 6.8.8, follow this implementation pattern.

Step 1: Enable SVG Uploads in WordPress

Add the following code to your child theme’s functions.php file or a custom functionality plugin to allow SVG uploads while ensuring they are registered as a valid mime type:

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

Note: To ensure security, pair this filter with an SVG sanitizer plugin that runs during the wp_handle_upload_prefilter hook.

Step 2: Render the SVG in Your Templates Safely

When outputting an SVG from an ACF field, you have two primary options: rendering it via an <img> tag, or inlining the XML markup directly to allow CSS manipulation. Here is how to handle both scenarios safely in your PHP templates:

<?php
$image = get_field('company_logo');
if( $image ): 
    $file_path = get_attached_file($image['id']);
    $file_ext  = pathinfo($file_path, PATHINFO_EXTENSION);

    if ( $file_ext === 'svg' && file_exists($file_path) ) {
        // Option A: Inline the SVG for CSS control (Sanitize the output first)
        echo file_get_contents($file_path);
    } else {
        // Option B: Standard image tag fallback
        echo '<img src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['alt']) . '" />';
    }
endif;
?>

Verifying Your ACF SVG Image Support After the Update

Once you have updated to ACF 6.8.8, you should verify that your fields are processing vector files correctly. Navigate to your custom field groups and ensure your Image and Gallery fields are configured to accept the appropriate file types.

If you have restricted the allowed file types in the field settings, make sure “svg” is explicitly listed in the allowed file extensions input, or leave the setting blank to inherit the default allowed mime types from your WordPress configuration. Test the upload process with a sanitized SVG to confirm the visual preview renders correctly in the block editor or classic editor interface.

Limitations and Best Practices for Vector Assets in ACF

While the restoration of ACF SVG image support solves the upload bottleneck, developers must still manage the front-end limitations of vector assets. Unlike raster images, WordPress cannot automatically generate intermediate sizes (like thumbnail, medium, or large) for SVGs.

When querying an SVG through ACF, the sizes array in the field’s return value will not contain scaled variations. Your CSS must explicitly define the width and height properties of the container or the SVG element itself to prevent layout shifts during page load. Additionally, always ensure that your SVGs contain a defined viewBox attribute within their source XML to ensure they scale responsively across different viewport sizes.

Primary reference: Review the original announcement for exact release details. This article is an independent explanation and does not reproduce the source text.