> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Логотипы SVG в Satori: графика в фирменной карточке > Встройте SVG-логотип в карточку Satori с явными размерами и самодостаточными данными изображения. Проверьте вложенную графику, затем отрисуйте отдельный PNG для передачи. Source: https://perfectvector.com/ru/blog/satori-svg-logo Language: ru Author: Irene Kim Published: 2026-10-05T08:00:00+09:00 Updated: 2026-10-05T08:00:00+09:00 Чтобы поместить SVG-логотип в карточку Satori, передайте его как источник изображения, задайте ширину и высоту изображения и сохраните оригинальный SVG рядом со сгенерированной карточкой. В примере ниже SVG в base64 становится вложенным изображением в результате Satori. Он не становится новым набором редактируемых контуров логотипа во внешней карточке. Satori создаёт SVG из ограниченного набора HTML и CSS. Его [официальные рекомендации по изображениям](https://github.com/vercel/satori#images) советуют явные размеры и самодостаточные данные изображения, если последующее средство отрисовки будет создавать PNG. Это даёт два отдельных результата: скомпонованную карточку SVG и растровую копию для передачи. ## Храните три файла с разными задачами | Файл | Что содержит | Что менять в нём | | --------------------- | -------------------------------------------------------------- | ------------------------------------------------------ | | Исходный SVG логотипа | Геометрию и отверстие эмблемы | Форму, цвет, границы исходника | | SVG карточки Satori | Компоновку карточки, надписи и встроенное изображение логотипа | Прямоугольник графики, положение и содержимое карточки | | Отрисованный PNG | Пиксели передаваемой карточки | Создавать заново после изменений исходника | SVG `` может ссылаться на другой SVG, как объясняет [справочник MDN по image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image). Поэтому элемент image не означает автоматически, что встроенная графика растровая. Проверьте тип данных и декодированное содержимое, прежде чем диагностировать карточку по более общему [списку проверок растровых изображений в SVG](https://perfectvector.com/ru/blog/svg-contains-raster-image). **Держите мастер рядом с карточкой** ![Концептуальная иллюстрация мастера полого ромба и его копий разных размеров в простых фирменных карточках](https://perfectvector.com/blog/satori-svg-logo/master-and-card.webp) *Иллюстрация: храните редактируемую графику отдельно от композиции карточки. Проверка исходника и результата ниже относится к независимо созданному примеру Satori, а не к этой сгенерированной схеме.* ## Полный локальный пример Этот стартовый пример использует стандартный импорт с выводом SVG из [Satori 0.35.0](https://github.com/vercel/satori/releases/tag/0.35.0) и resvg-js 2.6.2. В пустой рабочей папке установите закреплённые пакеты: ```bash npm install --save-exact satori@0.35.0 @resvg/resvg-js@2.6.2 ``` Создайте папку `fonts` и загрузите `Abel-Regular.ttf` и `OFL.txt` из [каталога Abel в Google Fonts](https://github.com/google/fonts/tree/main/ofl/abel). Abel распространяется по [SIL Open Font License 1.1](https://raw.githubusercontent.com/google/fonts/main/ofl/abel/OFL.txt); при распространении шрифта с примером сохраняйте прилагаемые уведомление и лицензию. Сохраните следующий код как `starter.mjs` и запустите `node starter.mjs`. Он передаёт шрифт Satori, создаёт полый ромб и две карточки 600×320 с прямоугольниками графики 80×80 и 160×160. Файловые URL оставляют пути шрифта и результата относительными к сценарию. ```js import { readFile, writeFile } from 'node:fs/promises'; import satori from 'satori'; import { Resvg } from '@resvg/resvg-js'; const logo = ``; const src = `data:image/svg+xml;base64,${Buffer.from(logo).toString('base64')}`; const font = await readFile(new URL('./fonts/Abel-Regular.ttf', import.meta.url)); await writeFile(new URL('./logo-master.svg', import.meta.url), logo); for (const size of [80, 160]) { const svg = await satori({ type: 'div', props: { style: { display: 'flex', width: 600, height: 320, backgroundColor: '#f6f2e8', color: '#152e29', fontFamily: 'Abel' }, children: [ { type: 'img', props: { src, width: size, height: size, style: { position: 'absolute', left: 24, top: 64 } } }, { type: 'div', props: { style: { position: 'absolute', left: 220, top: 112, fontSize: 42 }, children: 'CEDAR FIELD' } }, { type: 'div', props: { style: { position: 'absolute', left: 220, top: 168, fontSize: 20 }, children: 'A study in simple shapes' } }, ], }, }, { width: 600, height: 320, fonts: [{ name: 'Abel', data: font, weight: 400, style: 'normal' }], }); const png = new Resvg(svg, { font: { loadSystemFonts: false } }).render().asPng(); await writeFile(new URL(`./card-${size}.svg`, import.meta.url), svg); await writeFile(new URL(`./card-${size}.png`, import.meta.url), png); } ``` `Buffer.from(logo).toString('base64')` кодирует созданные байты SVG в UTF-8 через [API кодирования Buffer в Node](https://nodejs.org/api/buffer.html#buffers-and-character-encodings). Префикс `data:image/svg+xml;base64,` определяет содержимое. Он меняет транспортное представление, а не геометрию логотипа. Вызов Satori возвращает SVG карточки. Следующая строка передаёт этот SVG отдельному [средству отрисовки PNG resvg-js](https://github.com/thx/resvg-js#basic-usage). В примере нет удалённого URL изображения; локальный шрифт читается до отрисовки. Своё поведение удалённой загрузки или развёртывания проверяйте отдельно. ## Что дали два реальных вызова Мы запустили этот точный пример с закреплёнными пакетами, проверили оба выходных SVG и открыли каждый SVG и PNG в браузере. Все четыре файла карточек загрузились в 600×320. Надписи остались на тех же местах, а прямоугольник эмблемы удвоился. Каждая карточка содержала один внешний `` и два внешних элемента ``. Эти два контура представляли надписи, а не внешние и внутренние очертания ромба. Декодирование base64-данных изображения восстановило точные исходные байты SVG: один контур, ноль элементов image и то же определение полого ромба. В этом запуске у карточки не было живых элементов ``. | Проверка | Прямоугольник графики 80×80 | Прямоугольник графики 160×160 | | ----------------------------------------------- | --------------------------- | ----------------------------- | | Размеры карточки | 600×320 | 600×320 | | Положение внешнего изображения | x24, y64 | x24, y64 | | Встроенный SVG | Исходный мастер 128×128 | Те же байты мастера | | Точные границы сплошного бирюзового цвета в PNG | 68×68 пикселей | 138×138 пикселей | | Пиксель карточки в центре отверстия | Кремовый, альфа 255 | Кремовый, альфа 255 | Строки границ окрашивания считают пиксели, точно совпадающие со сплошным бирюзовым цветом эмблемы. Они исключают сглаженные края. Это не размеры прямоугольника изображения: исходный ромб занимает координаты от 8 до 120, поэтому его математический охват масштабировался бы до 70 или 140 единиц внутри этих прямоугольников. Измеренные границы сплошного цвета были немного меньше. Центр исходной эмблемы был прозрачным, с альфа-каналом 0 при отдельной отрисовке. В каждом конечном PNG карточки отверстие показывало непрозрачный кремовый фон: RGBA 246,242,232,255. Видимое отверстие и прозрачный пиксель конечной карточки — разные требования. Если нужен прозрачный фон для передачи, измените фон карточки и отдельно проверьте полученный альфа-канал. Это два вызова с одной оригинальной эмблемой в двух размерах. Они не устанавливают, что работает любая функция SVG, что исправлены повторяющиеся задания с удалёнными изображениями или что все целевые среды одинаково отрисовывают карточку. ## Меняйте прямоугольник графики, не теряя исходник Для собственного логотипа замените строку `logo` самодостаточным SVG или прочитайте мастер-файл перед кодированием. Сначала проверьте `viewBox`, ширину, высоту и отверстие. Дополнительное пустое пространство внутри этих границ может сделать видимый логотип меньше назначенного ему прямоугольника карточки. Задайте оба размера изображения в нужных пропорциях. Наш исходник квадратный, и оба прямоугольника квадратные; выходное изображение использовало `preserveAspectRatio="none"`, что здесь не изменило пропорции. Этот пример не проверяет прямоугольный логотип, принудительно помещённый в квадратное место. Меняйте по одной переменной компоновки, затем проверяйте фактический SVG и передаваемый PNG. Держите надписи вне встроенного логотипа, если хотите менять их независимо. Текст карточки этого примера становится контурами в передаваемом SVG, но слова остаются редактируемыми в сценарии. Шрифтовой вход, графический вход и скомпонованный результат выполняют разные задачи; [разбор шрифтов resvg](https://perfectvector.com/ru/blog/resvg-svg-fonts) описывает отдельный процесс отрисовки живого текста SVG. [Документация Satori по HTML и CSS](https://github.com/vercel/satori#html-elements) описывает поддерживаемое подмножество и ограничения. Браузерный снимок существующей страницы не обещает, что этот движок компоновки воспроизведёт её точно. Начните с небольшой карточки и обычного импорта `satori`, затем добавьте свойства, действительно нужные дизайну. ## Подготовьте логотип, начинающийся с пикселей Если единственный логотип — PNG или JPG, а нужны редактируемые контуры, [подготовьте SVG-логотип с PerfectVector](https://perfectvector.com/ru/vectorize-logo), проверьте силуэт и внутренние отверстия и сохраните чистый SVG как мастер. Затем встройте его в карточку и проверьте оба размера графики и конечный PNG. Векторизация готовит графику, Satori выполняет композицию карточки. Существующий чистый SVG может сразу перейти к встраиванию. [Руководство по векторизации](https://perfectvector.com/ru/blog/what-is-image-vectorization) объясняет различие исходника и результата. После передачи PNG сохраняйте мастер, сценарий и входные шрифты. Если используете другой этап растрирования, проверяйте его размеры отдельно; [пример SVG в PNG через Sharp](https://perfectvector.com/ru/blog/sharp-svg-to-png) описывает размеры этого средства отрисовки. ## Частые вопросы **Становится ли SVG-изображение редактируемыми контурами в карточке Satori?** В этом примере логотип остаётся вложенным SVG-изображением. Его исходник из одного контура сохраняется в данных изображения; внешние контуры карточки — надписи. Храните оригинальный мастер для правки геометрии. **Почему видимый логотип меньше его ширины и высоты?** Прямоугольник изображения включает границы исходника. Наш ромб оставляет поля внутри исходника 128×128, а границы пикселей точного цвета также исключают сглаженные края. Проверяйте пустое место исходника и назначенные пропорции отдельно. **Делает ли прозрачное отверстие логотипа карточку прозрачной?** Отверстие пропускает фон карточки. Наш кремовый фон непрозрачен, поэтому пиксель PNG в отверстии имеет альфа-канал 255. Если передаче нужен прозрачный фон карточки, проверяйте его отдельно. **Возвращает ли Satori PNG?** Этот пример запрашивает у Satori строку SVG, затем отрисовывает её в PNG с resvg-js. Разделяйте эти этапы, чтобы независимо проверять компоновку и растровую передачу. ## Источники 1. [Документация Satori по изображениям, компоновке и шрифтам](https://github.com/vercel/satori) — размеры изображений, самодостаточные входы, стандартный вывод SVG и поддерживаемый объём HTML/CSS. 2. [Выпуск Satori 0.35.0](https://github.com/vercel/satori/releases/tag/0.35.0) — закреплённая версия исходного примера. 3. [Элемент image SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — SVG-изображения могут ссылаться на другие файлы SVG. 4. [API кодирования Buffer в Node](https://nodejs.org/api/buffer.html#buffers-and-character-encodings) — операция кодирования base64 в стартовом примере. 5. [Использование resvg-js](https://github.com/thx/resvg-js) — отдельный этап отрисовки SVG в PNG. 6. [Лицензия шрифта Abel](https://raw.githubusercontent.com/google/fonts/main/ofl/abel/OFL.txt) — происхождение шрифта, уведомление и лицензия распространения. *** Для своего PNG- или JPG-логотипа [подготовьте мастер SVG с PerfectVector](https://perfectvector.com/ru/vectorize-logo) и проверьте его очертания и внутренние отверстия. Сохраните мастер, затем проверьте его положение в SVG карточки и передаваемом PNG в размерах, которые планируете использовать. ## Explore - [Read the HTML article](https://perfectvector.com/ru/blog/satori-svg-logo) - [Значки SVG MapLibre: пиксели и размер символа](https://perfectvector.com/ru/blog/maplibre-svg-symbol-image.md) - [SVG в p5.js: загрузка, масштаб и сохранение исходника](https://perfectvector.com/ru/blog/p5js-svg-artwork.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)