Hacker News Reader

Comment by steventey | Hacker News Reader

You can basically use this to generate Open Graph images programmatically for your websites really really fast (1-2ms)!

Here's a blog post detailing how this works (using @vercel/og): https://vercel.com/blog/introducing-vercel-og-image-generati...

View on HN

That's pretty cool. I've hand rolled an og-image generator with Automattic/node-canvas for a static site (Docusaurus) at build time. Edge is cool, but doing it at build time probably makes more sense for static sites.

Looks like using Satori might have been easier to use then having to do all the canvas draw calls (which isn't all that bad either though).

Edit: Nevermind. Actually looks like this wouldn't be self hostable in a github action. vercel/og doesn't run in a node runtime?

Satori does run in node runtime.

vercel/og (a wrapper around Satori) does not support node

Could satori be used to convert a whole webpage into a single SVG image?

Could be a (convoluted?) way to ensure an asset looks the same across all browsers..

No, Satori does not guarantee that the SVG will 100% match the browser-rendered HTML output. That's because Satori implements its own layout engine based on the SVG 1.1 spec. However, Satori generated result (SVG) is stable on all browsers.

This was the use case I had in mind. My company generates exports that are either PDF or PNG/JPEG images from the DOM using Puppeteer. We really wanted to support SVG but every option we explored had pretty significant rendering issues, meaning an entire rewrite in SVG would have been required.

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.

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...

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

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

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

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.

Reply on news.ycombinator.com