OG rendering SVG title element

[AleksandarDev]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/cool-darkness-679p3h

To Reproduce

1. Start the application in development or production mode
2. Navigate to /opengraph-image

Current vs. Expected behavior

Expect only the SVG to render, not the title element that is there for a11y.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.1
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 16.1.1-canary.12 // Latest available version is detected (16.1.1-canary.12).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed), next start (local), next dev (local)

Additional context

We enabled biome checking and fixed reported a11y issues with SVGs missing title by adding the title element to the SVGs. We now see title is rendered in OG.

We have this in production over at www.gredice.com/opengraph-image. Version doesn't seem to be an issue, it was present in 15 too.

[CaarLo1337]

The SVG that you output with "ImageResponse" does not need a <title> because "new ImageResponse" generates an image from the code it contains. Of course, your linter cannot figure this out and therefore flags it. So remove the title and write a lint ignore statement.

[AleksandarDev]

@CaarLo1337 We are using the same Logo/Logotype component in other places which is not ImageResponse. Our current workaround is we set opacity to 0 for the title element but I figured this is still a bug since other SVG viewers/renderers don't render the title elements (eg. https://svgtopng.com).

[CaarLo1337]

@AleksandarDev Okay, yes, you're right, it's obviously a bug.
However, there are current workarounds. You could also use role=“img” aria-label=“title” on the SVG, right?
Otherwise, I took a closer look at it. I don't quite understand how the package gets in there yet, but I suspect it's the following location. https://github.com/vercel/satori/blob/main/src/handler/preprocess.ts#L112
When I have time, I could try to fix it. There's also a place that says the following: <text> nodes are not currently supported, please convert them to <path>.