Generate an OG image using your Svelte component.
pnpm i -D svelte-og-imageIf you're using SvelteKit, create an API route that exposes a GET function. Then, import the ImageResponse class and the Svelte component you wish to render as an image. The Svelte component you use must have the injected CSS option <svelte:options css="injected" /> so that the renderer can retrieve the injected styles. See this example component to learn more.
// src/routes/og/+server.js
import { read } from '$app/server';
import { ImageResponse } from 'svelte-og-image';
import Card from './Card.svelte';
import font from './Overpass-SemiBold.ttf';
const fontData = await read(font).arrayBuffer();
export async function GET() {
return new ImageResponse(
Card,
{ title: 'Hello world!' },
{
fonts: [
{
name: 'Overpass',
data: fontData,
style: 'normal',
weight: 600
}
]
}
);
}Warning
Certain CSS features such as CSS variables and display: grid; are not compatible with Satori.
Read the Satori documentation for more info.
Implementation taken from svelte.dev.
A special thanks to Geoff Rich for breaking this down in his excellent blog post. Many of his blog posts have helped me when I first started learning Svelte in 2022 for my studies.