[eyelidlessness]

Is the SVG->PNG portion of the show handled by Satori as well, or separately as a part of the Vercel service? Asking because I’ve got code handling that part for this exact use case, which I’d be happy to either eliminate if I can use Satori, or I could clean up and open source my own solution if people would find it useful.

[leerob]

The SVG -> PNG part is handled by @vercel/og. Specifically, it uses Vercel Edge Functions + WebAssembly to handle generating images at the edge.

https://vercel.com/docs/concepts/functions/edge-functions/og...

[eyelidlessness]

Thanks! Not to discourage anyone from using Vercel services if they’re interested (y’all are doing great stuff on this and lots of other fronts), but! I’d be remiss if I didn’t point out the unpublished-but-MIT-licensed repo I could find.

For anyone else who’s curious it looks like the pertinent source[1] can be self-hosted. I’m on mobile so I’m gonna limit my peering into the source, but it appears to wrap Chromium to do the PNG generation. Quite a bit different from my solution (which takes SVG-producing JSX and anything producing CSS, and renders to PNG with Sharp).

I’m curious how much overhead using Chromium adds, and whether alternatives like Sharp were considered.

1: https://github.com/vercel/og-image

[styfle]

See this issue: https://github.com/vercel/og-image/issues/148

[nawgz]

This is vaguely supported by the browser natively, although you do have to find a way to output the CSS that impacts the SVG itself.

I recently made image export on some SVG charts that you could download as SVG and PNG and I was quite pleased I managed to do it without any library

[eyelidlessness]

To be clear, my implementation is build-time only but could easily be adapted to be dynamically server rendered, and probably could be adapted to the browser if the underlying graphics library (Sharp) has WASM support. It does need some awareness of how to get styles which can be made pluggable, but works well with my heavily customized atomic CSS setup generating styles and classes with Fela.

My use cases are all very unusual, but they’d probably make portability a much simpler task because I hobbled together such a weird set of technologies.