@astrojs/netlify handle SVG images passed to Picture

[tordans]

Astro Info

% npx astro info
Astro                    v5.0.4
Node                     v22.9.0
System                   macOS (arm64)
Package Manager          npm
Output                   server
Adapter                  none
Integrations             keystatic
                         @astrojs/tailwind
                         @astrojs/react
                         @astrojs/mdx
                         @astrojs/sitemap
                         astro-matomo

Describe the Bug

I am using Keystatic as a CMS and have a list of sponsors that is managed as a content collection.
One of those sponsors has a SVG file uploaded as an image.

• This works fine on Development 🟢
• This works fine on Preview with output mode static 🟢
• It fails on Netlify (output mode server) 🔴

---

• Netlify shows an error in the Logs
  

  Dec 10, 04:09:51 PM: cc032f11 ERROR  Invoke Error 	{"errorType":"AstroUserError","errorMessage":"Unsupported image format \"svg\"","type":"AstroUserError","hint":"Use one of avif, jpg, png, webp instead.","name":"AstroUserError","message":"Unsupported image format \"svg\"","stack":["AstroUserError: Unsupported image format \"svg\"","    at Object.validateOptions (file:///var/task/node_modules/@astrojs/netlify/dist/image-service.js:32:19)","    at getImage$1 (file:///var/task/.netlify/build/chunks/_astro_assets_xx8qQ7_J.mjs:1072:68)","    at async getImage (file:///var/task/.netlify/build/chunks/_astro_assets_xx8qQ7_J.mjs:1252:42)","    at async file:///var/task/.netlify/build/chunks/_astro_assets_xx8qQ7_J.mjs:1225:25"]}Dec 10, 04:09:51 PM: cc032f11 ERROR  Unhandled Promise Rejection 	{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"AstroUserError: Unsupported image format \"svg\"","reason":{"errorType":"AstroUserError","errorMessage":"Unsupported image format \"svg\"","type":"AstroUserError","hint":"Use one of avif, jpg, png, webp instead.","name":"AstroUserError","message":"Unsupported image format \"svg\"","stack":["AstroUserError: Unsupported image format \"svg\"","    at Object.validateOptions (file:///var/task/node_modules/@astrojs/netlify/dist/image-service.js:32:19)","    at getImage$1 (file:///var/task/.netlify/build/chunks/_astro_assets_xx8qQ7_J.mjs:1072:68)","    at async getImage (file:///var/task/.netlify/build/chunks/_astro_assets_xx8qQ7_J.mjs:1252:42)","    at async file:///var/task/.netlify/build/chunks/_astro_assets_xx8qQ7_J.mjs:1225:25"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: AstroUserError: Unsupported image format \"svg\"","    at process.<anonymous> (file:///var/runtime/index.mjs:1276:17)","    at process.emit (node:events:517:28)","    at emit (node:internal/process/promises:149:20)","    at processPromiseRejections (node:internal/process/promises:283:27)","    at process.processTicksAndRejections (node:internal/process/task_queues:96:32)"]}Dec 10, 04:09:51 PM: [ERROR] [1733843391810] LAMBDA_RUNTIME Failed to post handler success response. Http response code: 403.Dec 10, 04:09:51 PM: RequestId: cc032f11-4fb6-40e6-9d56-622bba2720f4 Error: Runtime exited with error: exit status 128
  Runtime.ExitError
  

• The Netlify page just ends right before the logos…
  
  
• How I load the Image:
  
• My content collection, managed by Keystatic
  
• But it does work on build (static) + preview where Astro just uses the SVG
  
• And the same for local dev with server output
  

What's the expected result?

Netlify should follow the same behavior that local dev and build static locally uses and return the SVG.

Link to Minimal Reproducible Example

--

Participation

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

[ematipico]

If you're using the Netlify image service, you need to make sure the svg images are supported

[ascorbic]

Netlify doesn't support SVGs. A picture tag makes no sense for an SVG in any case. Your best bet is to include logic to check the format of the image and display it in an img tag if it's an SVG, or to upload a different format for the logos.

[tordans]

One reason for creating this issue was to give visibility to the fact that the Picture element behaves very differently based on the used adapter wich I consider very unexpected, especially when running a static site (which IMO could pre process all images in the Netlify build the same way it does in my local build).

I did not see any documentation on the Astro docs nor warning during development or local build that this will fail.

[ascorbic]

The adapter docs link out to the Netlify Image CDN docs for this, but perhaps it could call out more explicitly that the support isn't exactly the same. You can disable the image CDN if you want, but I'd not recommend it.