Satori is an open source library by the Vercel team that uses HTML and CSS codes to generate SVG images. It is an online tool that can convert HTML and CSS into SVG, PNG, and PDF, and can be used to generate Open Graph images.

Satori supports JSX syntax, here is an overview of basic usage:

// api.jsx
import satori from 'satori'

const svg = await satori(
  <div style={{ color: 'black' }}>hello, world</div>,
  {
    width: 600,
    height: 400,
    fonts: [
      {
        name: 'Roboto',
        // Use `fs` (Node.js only) or `fetch` to read the font as Buffer/ArrayBuffer and provide `data` here.
        data: robotoArrayBuffer,
        weight: 400,
        style: 'normal',
      },
    ],
  },
)

Satori will render the element as a 600×400 SVG and return the SVG string:

'<svg ...><path d="..." fill="black"></path></svg>'

Under the hood, it handles layout calculations, fonts, typography, etc. to generate an SVG that matches the exact same HTML and CSS as in the browser.