Импорт SVG в Rive: редактируемая графика для анимации

Можно импортировать SVG в Rive перетаскиванием файла в редактор или через панель Assets. Rive преобразует графику в собственные редактируемые векторные объекты. Импортированному результату нужны две проверки: правильно ли он выглядит и можно ли выбрать части для анимации? Документация Rive по SVG объясняет преобразование и его ограничения.

Начните с исходного векторного файла, если он есть. Если источник — PNG или JPG, выберите между сохранением изображения, рисованием нужных фигур или предварительной трассировкой в SVG. Трассировка полезна для восстановления редактируемых контуров; их всё равно нужно организовать для анимации.

Что происходит с SVG внутри Rive?

После импорта вы работаете с объектами Rive. Исходный SVG не включается в экспортированный .riv, а среды выполнения Rive сейчас не преобразуют SVG-ресурсы во время выполнения. Завершите подготовку и импорт SVG в редакторе перед экспортом файла Rive. Поведение экспорта Rive описывает эту границу.

Различие важно и при выборе графики. Слой фигуры управляет заливкой и обводкой, а контур или контуры внутри задают геометрию. Раскройте фигуру в Hierarchy для проверки этих контуров. Выбор родительской группы может двигать всю иллюстрацию, даже если её дочерние объекты редактируемы. Руководство Rive по фигурам и контурам показывает структуру.

Если сам исходный SVG не разделяется, используйте диагностику объектов и разгруппировки SVG, чтобы определить группу, составной контур или встроенное изображение перед изменением.

Подготовьте части перед экспортом

Запишите нужные движения перед объединением или сведением графики. Возьмём настольную лампу: абажур должен кивать, рычаг — наклоняться, основание — оставаться неподвижным. Движения предполагают отдельные выбираемые и размещаемые части.

Тот же метод подходит векам персонажа, машущей руке или элементу логотипа: назовите движение, затем проверьте наличие нужной части в исходнике.

Спланируйте движущиеся части

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

После импорта организуйте части группами Rive, давая им отдельное управление преобразованиями. Rive позволяет создавать группу и помещать в неё объекты в Hierarchy. Также можно сгруппировать выбор Command+G на macOS или Ctrl+G на Windows. Документация групп Rive разбирает управление.

Импортируйте из SVG, Figma или Illustrator

Сохранённый SVG-файл

1. Сохраните отдельный экспорт SVG, оставляя редактируемый оригинал доступным.
2. Перетащите файл в Rive или нажмите + в панели Assets и выберите файл импорта.
3. Разместите графику в нужном месте и раскройте структуру в Hierarchy.
4. Выберите одну небольшую часть, измените заливку и отмените изменение. Проверьте, изменилась ли только нужная область.

Оба способа импорта файла описаны в обзоре Assets Rive. Успешный импорт — начало проверки редактирования.

Figma

Используйте Copy as SVG для нужной графики Figma, затем вставьте в редактор Rive. Проверьте импортированные фигуры и вид перед копированием остальной большой композиции. Это документированный способ импорта Figma Rive.

Illustrator

Установите оформление SVG в Presentation Attributes. Rive описывает немного разные подписи для способов экспорта Illustrator:

• Save As: в SVG Options задайте CSS Properties как Presentation Attributes.
• Export As: в SVG Options задайте Styling как Presentation Attributes.
• Прямое копирование и вставка: проверьте настройки оформления Export As SVG, поскольку Illustrator использует их для этого способа.

Также отключите Preserve Illustrator Editing Capabilities в SVG для передачи. Храните оригинал Illustrator отдельно. Rive предупреждает, что опция добавляет лишние данные Illustrator, увеличивает файл и может включать данные, не распознаваемые импортёром. Рекомендации Rive по Illustrator — источник этих настроек.

Сопоставьте симптом импорта с первой проверкой

Rive поддерживает линейные и радиальные градиенты, но не воспроизводит все возможности SVG. Таблица переводит список неподдерживаемых возможностей в порядок исправления. Столбец первой проверки — диагностическое предложение, а не гарантия для файла.

Если SVG Illustrator выглядит чёрным, начните с экспорта Presentation Attributes, затем проверьте оформление проблемной фигуры. Одна чёрная графика не определяет причину. Её не следует путать с документированным белым запасным цветом Rive для inherit.

Для пропавшего изображения руководство по встроенному растру SVG объясняет проверку реальных контуров или картинки внутри контейнера SVG. Rive может импортировать JPEG, PNG и WebP как отдельные ресурсы изображений согласно списку типов ресурсов. Сохранение текстурного фона отдельным растром может быть правильным выбором.

Если импорт не завершается

Попробуйте небольшой простой SVG в той же сессии. Если и он не работает, сохраните работу и перезапустите редактор перед перестройкой графики. Если не работает лишь один файл, изолируйте его группы в отдельных экспортных копиях до обнаружения проблемной секции. Это разделяет проблему сессии и конкретного файла, но не устанавливает универсального предела сложности.

Когда PerfectVector нужен в этом процессе

PerfectVector полезен, если исходная графика растровая и вам нужны редактируемые векторные контуры для Rive. Для плоской PNG- или JPG-иллюстрации преобразуйте изображение в контуры SVG, затем проверьте результат в векторном редакторе перед импортом. Проверьте силуэт, мелкие промежутки и границы частей с отдельными движениями. Трассировка восстанавливает видимые области, но не исходные имена слоёв и не решает, где должны находиться шарниры анимации.

Вернёмся к лампе. Если рычаг и основание стали одной связной фигурой, разделите или перерисуйте границу. Если движущаяся часть показывает скрытую в исходнике область, нарисуйте её самостоятельно. Сделайте это перед построением анимации вокруг импортированной структуры.

Используйте исходный SVG, если он уже содержит пригодные контуры. Используйте встроенные инструменты рисования для нескольких простых геометрических частей. Оставляйте фотографии и живописные текстуры растровыми ресурсами, если вид важнее редактируемых контуров. Наш обзор векторизации изображений объясняет компромиссы исходника; руководство по трассировке Adobe Animate разбирает отдельный процесс, если цель — Animate.

Проверьте одно движение перед созданием анимации

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

Проверьте и центр поворота. В Rive дочерние объекты наследуют преобразования родителя, а точка отсчёта определяет место поворота или масштабирования. Freeze позволяет переместить родителя без движения дочерних объектов; переключите его Y и отключите после настройки точки отсчёта. Следуйте руководству Rive Freeze и Origin.

Перед переходом к анимации убедитесь, что:

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

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

Делает ли импорт SVG его редактируемым в Rive? Да, для поддерживаемых Rive возможностей SVG. Раскройте импортированную графику в Hierarchy для выбора нужной части. Если несколько областей остаются одним объектом, проверьте группировку и структуру контуров.

Почему изображение внутри SVG пропало? Rive игнорирует встроенные изображения при импорте SVG. Найдите исходный растр и импортируйте как ресурс изображения либо трассируйте подходящую графику в контуры, если нужна редактируемость.

Поддерживает ли Rive градиенты SVG? Линейные и радиальные градиенты поддерживаются. Преобразования градиента игнорируются, поэтому его размещение может требовать настройки после импорта.

Создаст ли трассировка PNG анимацию Rive? Трассировка может создавать геометрию SVG из подходящего растра. Всё ещё нужно проверить и разделить движущиеся части, задать иерархию и точки отсчёта и построить анимацию в Rive.

Источники

1. Rive — SVG & Vector Assets — Преобразование в собственные объекты, импорт Illustrator и Figma, поведение экспорта времени выполнения и неподдерживаемые возможности SVG.
2. Rive — Assets — Управление импортом файлов и отдельные растровые ресурсы.
3. Rive — Shapes and Paths Overview — Оформление фигур и геометрия контуров внутри слоя фигуры.
4. Rive — Groups — Организация частей и управление группировкой в Hierarchy.
5. Rive — Freeze and Origin — Преобразования родительских и дочерних объектов и перемещение точки отсчёта без движения дочерней графики.

---

Если графика начинается с PNG или JPG и нужны редактируемые контуры, подготовьте SVG с PerfectVector. Проверьте трассированные части, импортируйте файл в Rive и протестируйте одно независимое движение перед созданием остальной анимации.