Практическая инструкция
SVG-иконка в Recraft: от генерации до проверки в 24 пикселя
На большом холсте лейка выглядит аккуратно, а в меню у неё пропадает ручка. Разберём, как получить в Recraft векторную иконку и довести её до размера, в котором ею действительно будут пользоваться.
Начните с размера и назначения
Допустим, для раздела об уходе за растениями нужна небольшая зелёная лейка. В меню она займёт 24 × 24 пикселя, в карточке подсказки — 48 × 48. Это учебное задание, а не показ результатов тестирования Recraft. У него есть простой критерий: человек должен узнать предмет без подписи.
До генерации решите, какие детали обязательны. У нашей лейки это корпус, вытянутый носик справа и ручка слева с заметным просветом. Блики, рисунок на стенке и отдельные капли воды задаче не помогают. Если носик исчезнет после уменьшения, останется зелёное ведро.
Выберите именно векторную генерацию
Откройте проект в Recraft Studio и перейдите в Create. В параметре Generation type выберите Vector: в текущей справке это отдельный тип генерации, отличающийся от Image. Выберите подходящую векторную модель среди доступных в аккаунте и квадратное соотношение сторон, если оно соответствует вашему макету.
Не всякая картинка с плоской заливкой является вектором. В режиме Image можно получить похожую иллюстрацию, но другой тип исходного файла. Справка Recraft также предупреждает, что для генерации типа Vector недоступны изображения-референсы. Стройте это задание от текста, а работу с готовым растром оставьте отдельной операции Vectorize.
Опишите форму так, чтобы её можно было проверить
Для первого варианта подойдёт запрос: «Простая плоская иконка садовой лейки, вид сбоку. Широкий зелёный корпус, короткий заметный носик направлен вправо, крупная ручка слева с открытым просветом. Одна тёмно-зелёная заливка, без градиентов, теней, надписей, узоров и капель воды. Предмет целиком в квадратной композиции, вокруг свободное поле. Иконка должна читаться в небольшом размере».
Последняя фраза сообщает намерение, но не проверяет результат за вас. Получите несколько вариантов и сначала отберите самый понятный силуэт. Богато украшенная лейка может смотреться интереснее на холсте и хуже выполнять роль навигационного знака.
Уберите лишнее и поправьте заметную ошибку
Посмотрите, где носик соединяется с корпусом и не слилась ли ручка со стенкой. Отдельное зелёное пятно на краю иногда оказывается лишней фигурой, а узкий светлый просвет — единственным признаком ручки. Именно такие места стоит исправлять первыми.
В Recraft есть Vector Editor. По справке двойной щелчок по вектору открывает его фигуры для редактирования; следующий двойной щелчок по нужной фигуре позволяет работать с точками и кривыми. Можно менять положение элементов и цвет заливки. Для нашей задачи разумнее расширить слишком узкий просвет и убрать случайную деталь, чем заново усложнять весь рисунок.
Сохраните вариант до правки. Если упрощение убрало узнаваемую форму, к нему будет легко вернуться.
Сравните 24 и 48 пикселей рядом с большим вариантом
Поместите копии иконки в макет в двух целевых размерах и смотрите на него при обычном масштабе 100%. Приближать маленький знак до половины экрана для этой проверки бессмысленно: посетитель не увидит его таким большим.
В 24 пикселях проверьте три вещи: различим ли носик, остаётся ли отверстие в ручке, хватает ли свободного поля вокруг корпуса. Затем посмотрите на 48 пикселей. Если более крупная версия читается, а маленькая теряет форму, проблема не решается одной сменой формата. Упростите контур, расширьте важный просвет или подготовьте отдельный вариант для меню.
Проверьте знак на том фоне, где он будет стоять. Тёмно-зелёный на белом и тот же зелёный на тёмной плашке дают разную читаемость. Ровные края SVG не компенсируют слабый контраст и тесную композицию.
Экспортируйте SVG и откройте скачанный файл
Когда форма устраивает, выберите экспорт в SVG. Проверьте уже скачанный файл в редакторе, в котором будете собирать макет: предмет целиком виден, вокруг нет неожиданно большого поля, цвета и просветы сохранились. Повторите просмотр в 24 и 48 пикселях после помещения в настоящий компонент интерфейса.
В справке Recraft есть существенное условие для экспорта целого фрейма: все его элементы должны быть векторными. Если внутри осталась растровая картинка, сначала потребуется её векторизация. Поэтому не добавляйте к подготовленной иконке PNG-декор только ради финального экспорта в SVG.
Если подходящая лейка уже есть в PNG
Тогда начните с другого маршрута: поместите растр на холст, выделите его и выберите Vectorize в контекстной панели. Документация описывает уменьшение количества цветов через Color Reduction и последующее изменение палитры. Это преобразование существующей картинки, а не нативная векторная генерация по тексту.
Возьмите ясный плоский исходник. Recraft предупреждает об артефактах при векторизации фотографий, 3D-рендеров и сильно текстурированных иллюстраций. После преобразования снова сравните носик, ручку и маленький размер. Простое переименование расширения PNG в SVG не выполняет такую обработку.
Сохраните рабочий исходник и проверьте условия плана
Оставьте вместе проект, итоговый SVG, текст запроса и запись целевых размеров. Если для меню сделан упрощённый вариант, подпишите его отдельно. Так при следующей правке вы не замените читаемый маленький знак более сложной версией с большого холста.
До использования в коммерческом проекте откройте действующие тарифы Recraft. Сейчас сервис указывает, что результаты бесплатного плана публичны и не лицензированы для коммерческого использования; для изображений, созданных во время платной подписки, заявлены другие условия. Сам факт успешного скачивания SVG не подтверждает подходящие права. Доступность моделей, расход кредитов и условия аккаунта проверяйте перед запуском задания.
