SVG rendering error - "unsupported file type"

[HiDeoo]

Astro Info

Astro                    v4.6.3
Node                     v20.11.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

This issue was initially found in the Starlight repository through another issue but I'm posting a new issue here as the original issue contained other issues as well and to also include a smaller reproduction case. cc @OliverSpeir @TheGreatAxios

Rendering some SVGs (the repro link includes an example of such SVG file) using Astro's Image API, e.g. in some basic Markdown, can trigger an error.

# Broken

![An SVG file](../assets/my-file.svg)

The error is:

TypeError: unsupported file type: undefined
    at Module.lookup (file:///home/projects/github-f2xprf/node_modules/astro/dist/assets/utils/vendor/image-size/lookup.js:34:9)
    at Module.imageMetadata (file:///home/projects/github-f2xprf/node_modules/astro/dist/assets/utils/metadata.js:19:53)
    at Module.emitESMImage (file:///home/projects/github-f2xprf/node_modules/astro/dist/assets/utils/emitAsset.js:32:43)
    at async Context.load (file:///home/projects/github-f2xprf/node_modules/astro/dist/assets/vite-plugin-assets.js:187:33)
    at async Object.load (file:///home/projects/github-f2xprf/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:51153:32)
    at async loadAndTransform (file:///home/projects/github-f2xprf/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:53857:24)

My initial suspicion would be this image-size error as image-size is now vendored with Astro since version 4.4.0.

Downgrading Astro to version 4.3.6 fixes the issue and the SVG is rendered correctly.

What's the expected result?

The SVG should be rendered correctly.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-f2xprf?file=src%2Fpages%2Fbroken.md

Participation

• I am willing to submit a pull request for this issue.

[Princesseuh]

Yeah, the SVG in the repro is weird and it seems like image-size doesn't detect it correctly. We could either send a PR to image-size, or if it proves complicated, maybe a fallback like if the file has a .svg file extension, assume it's a SVG and hope for the best just to catch weird things like this

[Princesseuh]

Closing in favour of the upstream issue, in the meantime I'd suggest cleaning the SVG of the weird metadata.

[widcardw]

I have also encountered this problem. However, it does not raise unsupported type. Instead, it raises NoImageMetadata. Here is the reproduction https://stackblitz.com/edit/withastro-astro-ephpw9

The svg with error is created with obsidian plugin diagram (maybe there is style tags or other metadata in this svg).

The problem turns out that the SVG detector will only match the first 1000 chars in the SVG and tells if this file is a SVG. However, the svg that draw io exported will contain a content field, and it contains the page info of this svg (in base64 format, and this field can easily excceed 1000 chars). The solution may be to remove the content field of the svg before deploying.