SVG <image> in OpenGraph image crashes
Unanswered
White-tailed Kite posted this in #help-forum
White-tailed KiteOP
On the web, I'm using
However, the following code works in Open Graph Image Playground, yet it crashes Next 15.3.3 dev server.
I ended up working around it using
mix-blend-mode to tint pictures, in opengraph-image.tsx I mix-blend-mode doens't work, so I need feBlend and an SVG <image> tag.However, the following code works in Open Graph Image Playground, yet it crashes Next 15.3.3 dev server.
<svg viewBox="0 0 400 400">
<image href="https://placedog.net/400/399" />
</svg>TypeError: Cannot read properties of undefined (reading '0')I ended up working around it using
hue-rotate, but it would be nice to know if this has happened to somebody else too.1 Reply
@White-tailed Kite On the web, I'm using `mix-blend-mode` to tint pictures, in `opengraph-image.tsx` I `mix-blend-mode` doens't work, so I need `feBlend` and an SVG `<image>` tag.
However, the following code works in Open Graph Image Playground, yet it crashes Next 15.3.3 dev server.
tsx
<svg viewBox="0 0 400 400">
<image href="https://placedog.net/400/399" />
</svg>
TypeError: Cannot read properties of undefined (reading '0')
I ended up working around it using `hue-rotate`, but it would be nice to know if this has happened to somebody else too.
Northeast Congo Lion
We had to dynamically create an OG image using the API routes.
We had huge problems and compatability issues when trying to render an SVG or webp at times. The best solution for us was to convert the image to a PNG then use it.
I'm not entirely sure what the best method is for v15 tho.
We had huge problems and compatability issues when trying to render an SVG or webp at times. The best solution for us was to convert the image to a PNG then use it.
I'm not entirely sure what the best method is for v15 tho.