### ELI5 (Generated by Haiku, reviewed by Wim.) _Canvas is a page builder where editors drop pictures into components. Photos are grids of dots; SVGs are drawing instructions. Three things went wrong with SVGs. First, Canvas asked its photo-shrinking machine to make small copies of every picture, and offered those copies to the browser. The machine cannot read drawings, so every copy was a broken link. Now Canvas checks whether the machine can read a file before offering copies. Second, when a picture's size is unknown, Canvas wrote down "zero by zero" instead of "unknown". A zero-sized picture is invisible. Now unknown stays unknown, and for SVGs Canvas reads the size from the drawing itself. Third, the code-component image helper always used the shrinking recipe, even when there was none, and logged an error for each attempt. Now it renders the picture as-is. The tests check that an SVG renders with no broken copies, with its real size when the drawing states one, and with no size at all rather than zero when it doesn't._ ### Overview Canvas does not render an SVG media item selected for a component's `image` prop. #3544517+ fixed shape matching, so an SVG can be selected, but it does not render. Reported observation: an SVG renders for a background image prop but not for a "regular" image prop. The background image prop uses the `image-uri` string shape; the `image` object shape is the one that breaks. (This affects all `\Drupal\canvas\Plugin\Canvas\ComponentSource\JsonSchemaPropsComponentSourceBase`-powered `ComponentSource` plugins. With just Canvas installed, that means: SDCs + code components.) ### Root causes 1. **A derivative image is offered for every image file.** `ImageDerivativeWithParametrizedWidth` builds a `canvas_parametrized_width--{width}` URL for any file, and `ComputedUrlWithQueryString` appends it as `?alternateWidths=`. The image toolkit cannot process SVG, so that route responds with an error. Every candidate in `srcset` is broken. 2. **`width` and `height` resolve to `0`.** Core leaves both empty when the toolkit cannot read a file. `Evaluator` then casts every primitive field property, and `(int) NULL` is `0`. An `<img>` with `width="0" height="0"` is invisible. The `0` also reaches `inputs_resolved` over the HTTP API. 3. **The `Image` code component wrapper always installs a loader.** `next-image-standalone` skips optimization for SVG only when Next.js' own image optimizer is used; with a custom loader it assumes the loader knows better. So the wrapper built candidates from an absent `alternateWidths` and logged an error per candidate width. The SDC (Twig) execution path avoids cause 1 by accident: `getWidth()` returns NULL for SVG, so `toSrcSet()` returns nothing. ### Proposed resolution 1. Skip the derivative image when `ImageStyle::supportsUri()` is FALSE, and omit a query parameter that evaluates to NULL. Same check in `ImageAndStyleAdapter`. 2. Stop casting NULL in `Evaluator`, and omit object props that evaluate to NULL: `null` does not validate against the type a prop shape specifies. Two fixes follow from this. The access-denied inference for a required-yet-empty field property assumed Typed Data marks the property required, which it does not for `width` and `height`. And a computed field property that computes NULL still carries cacheability, which must come from the property rather than from the value it computed. 3. Mark an image without `alternateWidths` `unoptimized` in the `Image` wrapper, which omits `srcset` and `sizes`. 4. Read the intrinsic dimensions of an SVG image at save time: its `width` and `height` when both are in pixels, else the width and height in its `viewBox`. Without dimensions a browser sizes an SVG image to its containing block's width, so a 24px icon fills its column. SVG stays opt-in per media type. Canvas' default `file_extensions` is unchanged. ### API changes Removing the NULL cast in `Evaluator` (resolution item 2) changes two more things: 1. An optional object prop with no value is absent, no longer `0`, `''` or `FALSE`. Visible in `inputs_resolved` and in code component props; Twig output is unchanged. See [#3623307](https://www.drupal.org/node/3623307). 2. During preview of a multiple-cardinality static prop, empty items are omitted instead of becoming `0`. Persisted values never contain empty items. **NOT a BC break:** required props are only ever mapped onto required field properties, which still throw when empty, and no stored data changes. ### User interface changes SVG images appear! :blush: For example, uploading https://commons.wikimedia.org/wiki/File:Druplicon.vector.svg into Drupal core's `image` media type as a new Media item, then placing a `Test SDC Image` component instance and picking that SVG from the media library: - resulting markup (with width and height computed from the uploaded SVG): ``` <img class="image" src="/sites/default/files/2026-09/Druplicon.vector.svg" alt="Druplicon SVG" width="681" height="779" loading="lazy"> ``` - published `canvas_page` with that component instance for end users: {width=491 height=600} - although ironically the media library itself fails to show/visualize that SVG correctly: {width=343 height=600} > Change record: [#3623307](https://www.drupal.org/node/3623307)