Перед публикацией одного и того же оффера в разных пропорциях нужно не растянуть картинку, а пересобрать композицию: сохранить надписи, цвет, объект и поля, но по-новому расставить блоки. Такой способ помогает адаптировать баннер под широкий, квадратный и вертикальный форматы, когда макет уже утверждён и менять текст или товар нельзя. Ниже — локальный учебный пример с полными SVG-исходниками и тремя выходами. Это не тест облачного AI-редактора и не клиентский кейс.
Учебный пример
Исходник и неизменяемое
В учебном макете зафиксированы четыре строки: «Замена молнии», «на рюкзаке», «Оценка по фото», «УЧЕБНЫЙ МАКЕТ». Палитра задана шестью цветами: фон #f5f2e9, тёмный контур #163f3c, зелёные заливки #236b66 и #39867e, акцент #f1cc72 и белый текст #ffffff. Шрифт — DejaVu Sans, объект — стилизованный рюкзак, собранный из простых фигур. Все эти элементы и есть неизменяемое: их нельзя заменить, переписать или перерисовать в новом формате.
Полный слоёный master SVG хранится как исходник композиции. В нём есть отдельный слой объекта, отдельные текстовые строки, плашка CTA и подпись. Для плоского неразборного растра этот приём не подходит: из фотографии товара код не извлекает скрытые слои и не дорисовывает недостающую часть. Если исходник — одна сплющенная картинка, нужна новая композиция или доступ к исходным слоям.
Поле 48px и размеры 1200×628, 1080×1080 и 1080×1920 — условия именно этого учебного макета. Это не универсальные safe zones рекламных площадок и не заявленные актуальные спеки.
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="628" viewBox="0 0 1200 628"><rect width="100%" height="100%" fill="#f5f2e9"/><defs><g id="backpack"><rect x="25" y="35" width="150" height="215" rx="35" fill="#236b66"/><path d="M65 35V20Q100 -5 135 20V35" fill="none" stroke="#163f3c" stroke-width="12"/><rect x="45" y="135" width="110" height="85" rx="16" fill="#39867e"/><path d="M100 65V120M60 155H140" fill="none" stroke="#f1cc72" stroke-width="6"/></g></defs><use href="#backpack" transform="translate(850 170) scale(1)"/><g font-family="DejaVu Sans" fill="#163f3c"><text x="70" y="100" font-size="48"><tspan x="70">Замена молнии</tspan><tspan x="70" dy="62.4">на рюкзаке</tspan></text><rect x="70" y="330" width="530" height="90" rx="12" fill="#163f3c"/><text x="94" y="388.3" font-size="38" fill="#ffffff">Оценка по фото</text><text x="70" y="550" font-size="22">УЧЕБНЫЙ МАКЕТ</text></g></svg>
<g id="backpack"><rect x="25" y="35" width="150" height="215" rx="35" fill="#236b66"/><path d="M65 35V20Q100 -5 135 20V35" fill="none" stroke="#163f3c" stroke-width="12"/><rect x="45" y="135" width="110" height="85" rx="16" fill="#39867e"/><path d="M100 65V120M60 155H140" fill="none" stroke="#f1cc72" stroke-width="6"/></g>
Выберите способ адаптации
Перекомпоновка отличается от растяжения и обрезки по тому, что происходит с элементами. При растяжении меняется геометрия объекта и букв, поэтому пропорции рюкзака и шрифта искажаются. При обрезке под новую пропорцию часть исходного кадра просто исчезает: может уйти заголовок, объект или CTA. При перекомпоновке каждый слой остаётся собой, а меняется только расположение и равномерный масштаб. Объект один и тот же, тексты точные, цвета те же.
Ручной путь: дизайнер открывает слои и расставляет блоки вручную. Это надёжно, но медленно, и при нескольких форматах легко забыть, что текст уже утверждён. Готовые редакторы описывают похожий процесс. В The Brief баннер начинают с настраиваемого шаблона, готового размера или загруженного PSD, затем выбирают новые размеры и правят элементы сразу на всём наборе Online Banner Resizer — The Brief. Photoroom позволяет менять размеры дизайна, выбирать готовый или свой размер и решать, достраивать ли фон с помощью AI Resize a design (Web App) — Photoroom. Это альтернативы, а не проверенный доступ к их функциям в этой статье.
AI-first путь выглядит иначе. Планировщик предлагает раскладку: где будет заголовок, объект, CTA и подпись в каждом формате. Детерминированный SVG-сборщик берёт утверждённые слои и расставляет их по предложенным координатам. Он не генерирует другой товар и не переписывает текст. Такой подход даёт повторяемый результат: один и тот же вход даёт одинаковые выходы, и проверку можно провести автоматически. Про генеративное дорисовывание фона здесь речи не идёт.
Самодостаточное задание на три размера
Задание нужно давать целиком, без скрытого эталона. В нём есть master SVG, объект, четыре текста, палитра, шрифт и три формата. Модель возвращает раскладку — координаты и равномерный масштаб для каждого размера, — а не готовую картинку с придуманным товаром.
Задача: предложить покомпонентную перекомпоновку утверждённого баннера в 3 заданных размера.
Данные:
- master SVG:
```svg
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="628" viewBox="0 0 1200 628"><rect width="100%" height="100%" fill="#f5f2e9"/><defs><g id="backpack"><rect x="25" y="35" width="150" height="215" rx="35" fill="#236b66"/><path d="M65 35V20Q100 -5 135 20V35" fill="none" stroke="#163f3c" stroke-width="12"/><rect x="45" y="135" width="110" height="85" rx="16" fill="#39867e"/><path d="M100 65V120M60 155H140" fill="none" stroke="#f1cc72" stroke-width="6"/></g></defs><use href="#backpack" transform="translate(850 170) scale(1)"/><g font-family="DejaVu Sans" fill="#163f3c"><text x="70" y="100" font-size="48"><tspan x="70">Замена молнии</tspan><tspan x="70" dy="62.4">на рюкзаке</tspan></text><rect x="70" y="330" width="530" height="90" rx="12" fill="#163f3c"/><text x="94" y="388.3" font-size="38" fill="#ffffff">Оценка по фото</text><text x="70" y="550" font-size="22">УЧЕБНЫЙ МАКЕТ</text></g></svg>
```
- object SVG:
```svg
<g id="backpack"><rect x="25" y="35" width="150" height="215" rx="35" fill="#236b66"/><path d="M65 35V20Q100 -5 135 20V35" fill="none" stroke="#163f3c" stroke-width="12"/><rect x="45" y="135" width="110" height="85" rx="16" fill="#39867e"/><path d="M100 65V120M60 155H140" fill="none" stroke="#f1cc72" stroke-width="6"/></g>
```
- approved_texts: «Замена молнии», «на рюкзаке», «Оценка по фото», «УЧЕБНЫЙ МАКЕТ»
- colors: #f5f2e9, #236b66, #39867e, #163f3c, #f1cc72, #ffffff
- font: DejaVu Sans
- font_file: доступный файл DejaVu Sans в среде сборки
- target_formats: wide 1200×628, square 1080×1080, vertical 1080×1920
Правила:
- Объект один и тот же SVG, не новый товар или фото. Не растягивать X/Y раздельно.
- Тексты точные, отдельными слоями; никакой цены, срока или нового обещания.
- 48px — только правило этого учебного макета, не универсальные safe zones площадок.
- Размеры учебные, не заявленные актуальные спеки рекламных платформ.
- Вернуть 3 layout со всеми ID, координатами, равномерным масштабом и размером шрифта; неопределённое поле — unknown.
- Не обращаться к expected_outputs и не заявлять запуск Creatopy/Photoroom/ИИФабрики; реальные выгрузки этих продуктов не получены.
Формат ответа: JSON layouts[{id,width,height,title,object,cta,logo}], unknowns, limitations.
Из ответа видно, куда переставлять блоки. В широком формате заголовок слева сверху, рюкзак справа, CTA внизу слева, подпись ещё ниже. В квадратном объект уходит вправо и вниз, заголовок остаётся слева сверху, CTA и подпись — внизу. В вертикальном заголовок сверху, объект в центре, CTA и подпись в нижней трети. Масштаб объекта растёт равномерно: 1 → 1,4 → 3, без искажения пропорций.
Полный результат и проверка
Ниже — три полных локальных SVG. Это реальные файлы артефакта, не облачная выгрузка и не генерация изображения. Все они содержат те же четыре надписи и тот же объект.
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="628" viewBox="0 0 1200 628"><rect width="100%" height="100%" fill="#f5f2e9"/><defs><g id="backpack"><rect x="25" y="35" width="150" height="215" rx="35" fill="#236b66"/><path d="M65 35V20Q100 -5 135 20V35" fill="none" stroke="#163f3c" stroke-width="12"/><rect x="45" y="135" width="110" height="85" rx="16" fill="#39867e"/><path d="M100 65V120M60 155H140" fill="none" stroke="#f1cc72" stroke-width="6"/></g></defs><use href="#backpack" transform="translate(850 170) scale(1)"/><g font-family="DejaVu Sans" fill="#163f3c"><text x="70" y="100" font-size="48"><tspan x="70">Замена молнии</tspan><tspan x="70" dy="62.4">на рюкзаке</tspan></text><rect x="70" y="330" width="530" height="90" rx="12" fill="#163f3c"/><text x="94" y="388.3" font-size="38" fill="#ffffff">Оценка по фото</text><text x="70" y="550" font-size="22">УЧЕБНЫЙ МАКЕТ</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1080" viewBox="0 0 1080 1080"><rect width="100%" height="100%" fill="#f5f2e9"/><defs><g id="backpack"><rect x="25" y="35" width="150" height="215" rx="35" fill="#236b66"/><path d="M65 35V20Q100 -5 135 20V35" fill="none" stroke="#163f3c" stroke-width="12"/><rect x="45" y="135" width="110" height="85" rx="16" fill="#39867e"/><path d="M100 65V120M60 155H140" fill="none" stroke="#f1cc72" stroke-width="6"/></g></defs><use href="#backpack" transform="translate(650 390) scale(1.4)"/><g font-family="DejaVu Sans" fill="#163f3c"><text x="64" y="120" font-size="64"><tspan x="64">Замена молнии</tspan><tspan x="64" dy="83.2">на рюкзаке</tspan></text><rect x="64" y="800" width="952" height="100" rx="12" fill="#163f3c"/><text x="88" y="866.8" font-size="48" fill="#ffffff">Оценка по фото</text><text x="64" y="960" font-size="24">УЧЕБНЫЙ МАКЕТ</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1920" viewBox="0 0 1080 1920"><rect width="100%" height="100%" fill="#f5f2e9"/><defs><g id="backpack"><rect x="25" y="35" width="150" height="215" rx="35" fill="#236b66"/><path d="M65 35V20Q100 -5 135 20V35" fill="none" stroke="#163f3c" stroke-width="12"/><rect x="45" y="135" width="110" height="85" rx="16" fill="#39867e"/><path d="M100 65V120M60 155H140" fill="none" stroke="#f1cc72" stroke-width="6"/></g></defs><use href="#backpack" transform="translate(200 600) scale(3)"/><g font-family="DejaVu Sans" fill="#163f3c"><text x="72" y="250" font-size="76"><tspan x="72">Замена молнии</tspan><tspan x="72" dy="98.8">на рюкзаке</tspan></text><rect x="72" y="1550" width="936" height="140" rx="12" fill="#163f3c"/><text x="96" y="1642.4" font-size="64" fill="#ffffff">Оценка по фото</text><text x="72" y="1780" font-size="28">УЧЕБНЫЙ МАКЕТ</text></g></svg>
Геометрия проверяется по консервативным границам блоков, а не на глаз. Во всех трёх файлах границы лежат внутри поля 48px и не пересекаются. Ширина заголовка в широком формате — до 392,1094 px, в квадратном — до 522,6875 px, в вертикальном — до 620,6875 px. Ширина текста CTA — 323,5938, 408,8594 и 545,0312 px соответственно. Это расчёт по шрифту DejaVu Sans, а не доказательство того, что зритель прочитает мелкий текст на конкретном экране.
Отрицательный контроль показывает, почему обрезка — плохой способ. Если взять широкий кадр и сделать центральный кроп под 9:16, сохранится диапазон по x от 423,375 до 776,625 исходных пикселей. В этой полосе заголовок и плашка CTA обрезаются, а объект выпадает целиком. Полных ключевых элементов в полосе нет, поэтому такой результат отклоняется. Такой результат нельзя принимать за адаптацию. Его нужно отбросить и вернуться к перекомпоновке. Геометрия и точные строки здесь доказывают только сохранность входов; они не доказывают читаемость в реальной выдаче и не обещают рост конверсии.
Перед размещением
Перед загрузкой в рекламную площадку проверьте три вещи. Первое — рендер в 1:1 и в мобильном просмотре: SVG нужно открыть в браузере или конвертировать в PNG в тех размерах, которые принимает площадка, и посмотреть глазами. Второе — слои и текст: убедитесь, что в финальном файле сохранены те же четыре строки и объект, что в утверждённом master, и что ничего не переписано на лету. Третье — актуальные требования площадки к формату, весу, safe zones и поддержке шрифта: их нужно брать из официальных условий, а не из этого примера.
У площадки останется проверить то, что не проверялось в статье: как рендерится текст на конкретном устройстве, совпадают ли поля с требованиями, не обрезается ли важное в мобильной ленте и допускает ли площадка SVG или требует растр. Запуска кампании и замера CTR здесь нет. Работу над соседними задачами удобно продолжить в материалах нейросеть для рекламных баннеров и как исправить текст на картинке.
Автор метода «Машиночитаемый маркетинг»