Carlos Aguni

Highly motivated self-taught IT analyst. Always learning and ready to explore new skills. An eternal apprentice.


Html + Css -> Svg Png

11 Oct 2022 »

Html + Css -> SVG. Satori

https://github.com/vercel/satori

// api.jsx
import satori from 'satori'

const svg = await satori(
  <div style=>hello, world</div>,
  {
    width: 600,
    height: 400,
    fonts: [
      {
        name: 'Roboto',
        data: robotoArrayBuffer,
        weight: 400,
        style: 'normal',
      },
    ],
  },
)

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

Html + Css -> Png

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

import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'experimental-edge',
};

export default function () {
  return new ImageResponse(
    (
      <div
        style=
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    },
  );
}