Apply (responsive) image styles only on supported types (i.e. leave SVG untouched)

Problem/Motivation

When SVG files are uploaded to an image field and the field is configured to use a Responsive Image formatter, the rendered output breaks.

Image styles do not generate derivatives for SVG files.

As a result, when a Responsive Image style is applied, Drupal attempts to generate responsive image source URLs for SVG files, which leads to broken derivative URLs in the rendered markup.

This issue commonly occurs when using the svg_image contributed module (or similar modules that allow SVG uploads in image fields), but the underlying problem is that the Responsive Image formatter does not defensively handle unsupported image types.

Currently:

SVG files can be uploaded to image fields.

Responsive Image styles can be applied to those fields.

The rendered output includes invalid derivative URLs for SVG images.

The SVG image therefore appears broken on the frontend.

Additionally, since SVG files often contain an internal <title> element for accessibility, there is an opportunity to improve UX by optionally allowing the system to use that title and bypass the required alt text field when appropriate.

Steps to reproduce

Install Drupal core (tested on 10.x/11.x).

Install and enable the svg_image contributed module (or any module that allows SVG uploads in image fields).

Create or edit a content type and add an image field.

Configure the field display to use a Responsive Image formatter.

Configure a Responsive Image style for the field.

Upload an SVG file to the image field.

View the rendered entity.

Result:

The responsive image <source> elements reference derivative URLs that do not exist.

The SVG image renders incorrectly or appears broken.

Expected result:

SVG images should either:

Be rendered without responsive image derivatives, or

Fall back to the original file URL, or

Use a defined fallback image style.

Proposed resolution

Add defensive handling in the Responsive Image formatter to detect unsupported image types (such as SVG) and avoid generating responsive image derivative URLs for them.

Possible approaches:

• Detect SVG file extensions or MIME types and bypass responsive derivative generation.
• Render the original file URL directly when image styles do not support the file type.
• Allow configuration of a fallback image style for unsupported formats.

Optional enhancement:

Detect a valid <title> element within the SVG file and optionally use it as the alt text, allowing sites to relax the required alt text constraint for SVG images where appropriate.

Note:

When using the svg_image_responsive submodule (provided by svg_image), this issue does not occur because it replaces the Responsive Image formatter. However, adding defensive checks in core would improve robustness and prevent broken output even when contrib workarounds are not installed.

Remaining tasks

• Determine whether the fix belongs in core Responsive Image formatter or should remain in contrib.
• Implement defensive detection for unsupported image types.
• Add automated test coverage for SVG handling in responsive image formatting.
• Confirm no regressions for supported raster image formats (JPG, PNG, WebP, etc.).
• Review and testing.

User interface changes

None required for the core defensive fix.

If the optional SVG title-to-alt feature is implemented, it may introduce minor UI adjustments to allow configuration of that behavior.

Introduced terminology

None.

API changes

No new public APIs are required.

The change would introduce additional internal validation/handling in the Responsive Image formatter to prevent generation of invalid derivatives for unsupported image types.

The change should be backward compatible and only affect cases where unsupported image formats (such as SVG) are used with Responsive Image styles.