Repolode
Предложить
vercel

vercel/satori

Библиотека для преобразования HTML и CSS в SVG на основе JSX и собственного движка компоновки.

Открыть на GitHubСайт
Звёзды
14,121
Форки
392
Открытые issues
152
Последний коммит
позавчера

Что это?

Satori принимает дерево JSX-элементов или обычные объекты в стиле React, данные о шрифтах и размер canvas, а возвращает строку SVG. Для Flexbox, Grid и блочной компоновки библиотека использует собственный движок поверх Taffy, а для формирования текста — HarfBuzz. Поэтому результат должен соответствовать тому, как браузер отобразил бы поддерживаемое подмножество HTML и CSS.

Satori — не полноценный браузерный движок. Поддерживаемые элементы и свойства CSS перечислены в таблице совместимости; неподдерживаемые свойства игнорируются или приводят к ошибке — в зависимости от ситуации. Satori принимает только чистые компоненты без состояния, поэтому хуки React, например useState, недоступны. Шрифты в форматах TTF, OTF, WOFF и WOFF2 нужно передавать явно.

Чтобы создавать PNG-файлы, SVG можно передать в Sharp, который растеризует его с помощью librsvg. Этот движок используется в Vercel для генерации изображений Open Graph.

Ключевые возможности

  • 01Преобразует JSX или объекты в стиле React в строки SVG
  • 02Flexbox, Grid и блочная компоновка с помощью Taffy
  • 03Формирование текста с помощью HarfBuzz, включая функции OpenType и текст справа налево
  • 04Поддержка шрифтов TTF, OTF, WOFF и WOFF2
  • 05Поддержка таблиц стилей, селекторов, запросов @media и @container
  • 06Экспериментальная поддержка canvas на WebGL и перспективных преобразований

Сценарии использования

  • Генерация динамических изображений Open Graph и карточек для соцсетей во время сборки или обработки запроса
  • Отрисовка графики с большим объёмом текста в SVG для серверных конвейеров обработки изображений
  • Создание изображений PNG, передавая SVG в Sharp

Быстрый старт

  1. 1

    Установите пакет satori из npm (в приведённом фрагменте README команда установки не указана).

  2. 2

    Вызовите satori(), передав элемент JSX, width, height и fonts, как в примере Overview.

Что важно знать

  • Поддерживается только часть HTML и CSS, поэтому результат может не полностью совпадать с отображением в браузере.
  • Лицензия MPL-2.0 требует публиковать изменения исходного кода изменённых файлов.

Темы

#svg#image-generation#jsx#og-image#layout-engine#typescript#css#image#image-generator#opengraph-images

Частые вопросы

Что такое satori?
Библиотека для преобразования HTML и CSS в SVG на основе JSX и собственного движка компоновки. Satori принимает дерево JSX-элементов или обычные объекты в стиле React, данные о шрифтах и размер canvas, а возвращает строку SVG. Для Flexbox, Grid и блочной компоновки библиотека использует собственный движок поверх Taffy, а для формирования текста — HarfBuzz. Поэтому результат должен соответствовать тому, как браузер отобразил бы поддерживаемое подмножество HTML и CSS.
satori можно использовать бесплатно? Какая у него лицензия?
satori распространяется с открытым исходным кодом под лицензией MPL-2.0. Перед использованием в коммерческих продуктах проверьте условия лицензии.
satori всё ещё поддерживается?
Активно поддерживается. Последний коммит в satori — 20 окт. 2026 г..
Для чего можно использовать satori?
Генерация динамических изображений Open Graph и карточек для соцсетей во время сборки или обработки запроса Отрисовка графики с большим объёмом текста в SVG для серверных конвейеров обработки изображений Создание изображений PNG, передавая SVG в Sharp
Как установить satori?
Установите пакет satori из npm (в приведённом фрагменте README команда установки не указана). Вызовите satori(), передав элемент JSX, width, height и fonts, как в примере Overview.
Где скачать satori?
Исходный код и инструкции по установке — на GitHub: https://github.com/vercel/satori

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты