Нейросеть отдаёт SVG вместо картинки: зачем это тем, кто делает сайты и контент⁠⁠

Обычный генератор картинок выдаёт пиксели. Для статьи в блог сойдёт, для иконки на сайте - уже не очень: нужен второй файл под ретину, вес растёт, при масштабировании края мылятся. Recraft умеет отдавать векторный файл, и в этом вся разница.

Модель приехала в агрегатор Cyber AI: Telegram | MAX. Мы прогнали её по всем тринадцати режимам и залезли внутрь получившихся файлов - интересного там оказалось больше, чем ожидалось.

Что вообще даёт вектор на сайте

SVG - это текстовый файл с описанием контуров. Отсюда три практических следствия.

Весит он мало, и вот насколько: Наш набор из двенадцати иконок занял 44 килобайта на все двенадцать сразу. Тот же набор в PNG под ретину потянул бы сотни килобайт и потребовал бы отдельных файлов под каждый размер.

А ещё он не мылится. Одна и та же иконка одинаково резкая и в шапке на 24 пикселя, и на баннере в полэкрана. Никаких @2x и @3x.

Ну и перекрасить его можно прямо в CSS. Нужна тёмная тема - меняете заливку, а не пересобираете картинки.

Плюс вектор нормально живёт в Illustrator, Figma и Affinity, режется на плоттере и уходит в печать без пересъёмки.

Мы посчитали контуры, потому что этого не сделал никто

Вокруг Recraft ходит резонный вопрос: он правда рисует вектор - или генерирует картинку и втихую прогоняет её через обводчик? Публичных замеров нет. Обзоры пишут про «на 20-30% больше точек, чем у человека», но методику не показывает ни один.

Мы сделали три файла подряд, на одинаковом холсте 2048 на 2048, и разобрали скриптом.

Персонаж, нарисованный моделью как вектор: 51 контур, 579 команд, 29 килобайт, восемь цветов.

Набор из двенадцати иконок, тоже нарисованный сразу вектором: 115 контуров, 923 команды, 44 килобайта, шесть цветов.

Фотография, прогнанная через режим «перевести в вектор»: 521 контур, 7699 команд, 301 килобайт, шестьдесят шесть цветов.

Разница в десять раз по контурам. Логика-то понятная: когда модель рисует сама, она думает фигурами и кладёт ровно столько форм, сколько нужно. Когда обводит фотографию - вынуждена описывать каждый градиент и каждую тень плоскими заливками, отсюда и полтысячи контуров.

Двенадцать иконок одной генерацией: 115 контуров, 44 килобайта на весь набор. Сделано в боте Cyber AI

Ещё проверили, нет ли внутри спрятанной картинки. Искали base64 по телу файлов - пиксельных вставок нет ни в одном, только честные контуры с заливками. Единственный base64, который нашёлся, - это манифест C2PA в метаданных, то есть подпись происхождения: файл сам сообщает, что сгенерирован ИИ.

Кстати, полтысячи контуров на векторизованном фото - не приговор модели. Recraft в своей документации прямо советует сначала убрать фон и только потом векторизовать, иначе фоновые пятна тоже превращаются в контуры. Совет и правда рабочий.

Тринадцать режимов в одном списке

Recraft устроен не как генератор, а как редактор. Всё выбирается в одном поле «Что делаем»:

Нарисовать картинку по описанию. Нарисовать вектор по описанию. Переделать готовую картинку. Заменить область кистью. Стереть лишнее. Расширить кадр. Заменить фон. Сделать фон по маске. Собрать похожие варианты. Перевести в вектор. Убрать фон. Увеличить. Увеличить с дорисовкой деталей.

Вот четыре последних вообще не требуют описания: загрузили файл и нажали кнопку.

Для человека, который ведёт сайт или блог, самая полезная тут третья группа. Убрать фон с фотографии товара, стереть лишний предмет из кадра, вытянуть присланный клиентом мыльный скриншот, дорисовать поля до нужных пропорций - всё то, ради чего обычно открывают редактор.

Прогон на одной картинке

Взяли промпт из официального гайда Recraft - зелёная коробка и половинка папайи на мраморе - и погнали результат по режимам.

Убрать фон: оба объекта вырезались чисто, кромка ровная, тени ушли вместе с фоном.

Исходник для прогона. Промпт дословно из официального гайда Recraft

Расширить кадр отработал лучше всех. Задали по 512 пикселей влево и вправо, квадрат 1024 на 1024 стал прямоугольником 2048 на 1024. Модель дорисовала вторую коробку и ещё половинку фрукта, продолжила прожилки мрамора и направление света. Шва не видно, хотя я специально приглядывался.

Кому это нужно на практике: под обложку статьи обычно требуется горизонталь примерно 1200 на 630, а картинка часто приходит квадратом. Вместо кропа, который режет композицию, кадр можно дорисовать в стороны.

Расширение кадра: было 1024 на 1024, стало 2048 на 1024. Вторая коробка и половинка фрукта дорисованы

Увеличение подняло 1024 на 1024 до 4096 на 4096. Забавно, что подсказка в интерфейсе обещает прибавку примерно втрое по стороне, а по факту вышло вчетверо и в шестнадцать раз по площади.

Где мы промахнулись, и почему это полезно знать

Режим «стереть лишнее» работает через кисть: закрашиваете объект, он исчезает, фон достраивается.

Мы закрасили папайю овалом и получили ровно то, что просили. Мрамор достроился идеально. Но кончик фрукта из овала торчал - и остался в кадре оранжевым пятном. Плюс на столе осталась половина тени от предмета, которого больше нет.

Папайя стёрта, мрамор достроен. Но торчавший за границу маски кончик остался - вместе с половиной тени

Никакого волшебства тут нет: Recraft ведь стирает строго по маске и ни пикселем дальше. Это не поломка, а руководство к действию - закрашивать надо с запасом и обязательно захватывать тень, потому что тень модель отдельно не ищет. Пятнадцать лишних секунд кистью экономят повторный заход.

Три ограничения, о которых лучше узнать заранее

Первое. Выбор движка - между V4.1, V4.1 Pro, V3 и V2 - влияет только на рисование с нуля. Все правки Recraft делает на V3 независимо от того, что стоит в поле. Об этом честно написано в подсказке, но заметить с первого раза удаётся не каждому.

Второе, и вот оно для нас главное. Русский текст в кадре Recraft не соберёт. Модель рисует надписи из фиксированного набора символов, и из кириллицы туда попали только буквы, совпадающие по начертанию с латиницей: А, В, Е, К, М, Н, О, Р, С, Т, У, Х. Список лежит в официальной документации. Слово «СТОП» получится. Слово «Доставка» - нет, недостающие буквы просто не отрисуются. С латиницей при этом всё в порядке, длинные надписи держит уверенно.

Вывод-то простой: подложку генерим, русский текст кладём слоем сверху. А если надпись нужна прямо в генерации - в агрегаторе для этого есть Banana PRO.

Третье. В режимах с кистью описание должно относиться ко всей картинке, а не к закрашенному пятну. Если написать «напиши тут GG», модель область просто затрёт. Она ждёт описание готового кадра и сама достаёт оттуда нужное для маски.

Отдельно про права, если картинки идут на коммерческий проект

Момент, который почему-то редко попадает в обзоры. На бесплатном тарифе самого recraft.ai изображения принадлежат Recraft, уезжают в публичную галерею сервиса и коммерческой лицензии не получают. Отказаться от обучения моделей на своих материалах на бесплатном плане тоже нельзя.

Для личных экспериментов оно и неважно, а вот для клиентского проекта - уже вопрос. Плюс оплата подписки из России отдельным квестом, вокруг которого написана куча инструкций.

Как попробовать

Открываете Cyber AI, жмёте «Открыть приложение», идёте в «Изображения» и выбираете карточку Recraft. Дальше всё крутится вокруг поля «Что делаем»: выбрали режим - интерфейс сам покажет нужные настройки, загрузку картинки или холст для кисти.

Кнопка называется «Сохранить», и она же запускает генерацию. Отдельной кнопки «Сгенерировать» тут нет, это сбивает с толку в первый раз.

Расскажите, кто уже пробовал тащить SVG из нейросетей на боевой сайт - как оно себя повело в проде?

Агрегатор Cyber AI: Telegram | MAX