Import SVG do Rive: przygotuj edytowalną grafikę do animacji

Możesz zaimportować SVG do Rive, przeciągając plik do edytora lub korzystając z panelu Assets. Rive przekształca grafikę w natywne obiekty wektorowe, które możesz edytować. Po imporcie sprawdź dwie rzeczy: czy grafika wygląda prawidłowo i czy możesz zaznaczyć części, które chcesz animować? Rive — SVG & Vector Assets wyjaśnia tę konwersję i jej ograniczenia.

Zacznij od oryginalnego pliku wektorowego, jeśli go masz. Jeśli źródłem jest PNG lub JPG, zdecyduj, czy zachować go jako obraz, narysować potrzebne kształty, czy najpierw przeprowadzić wektoryzację do SVG. Wektoryzacja pomaga odtworzyć edytowalne kontury; nadal trzeba je uporządkować na potrzeby animacji.

Co dzieje się z SVG w Rive?

Po imporcie pracujesz na obiektach Rive. Źródłowy SVG nie jest dołączany do wyeksportowanego pliku .riv, a środowiska uruchomieniowe Rive obecnie nie konwertują zasobów SVG podczas działania aplikacji. Przygotuj i zaimportuj SVG w edytorze przed wyeksportowaniem pliku Rive. Rive — Export behavior opisuje to ograniczenie.

To rozróżnienie ma znaczenie również podczas zaznaczania grafiki. Warstwa kształtu określa jego wypełnienie i obrys, a znajdująca się w niej ścieżka lub ścieżki definiują geometrię. Rozwiń kształt w panelu Hierarchy, aby przyjrzeć się tym ścieżkom. Zaznaczenie grupy nadrzędnej może sprawić, że poruszy się cała ilustracja, nawet jeśli jej elementy podrzędne są edytowalne. Rive — Shapes and Paths Overview przedstawia tę strukturę.

Jeśli nie możesz rozdzielić elementów w samym źródłowym SVG, skorzystaj z poradnika diagnozowania obiektów SVG i problemów z rozgrupowaniem, aby rozpoznać grupę, ścieżkę złożoną lub osadzony obraz, zanim wprowadzisz zmiany.

Przygotuj części przed eksportem

Zapisz, jakie ruchy chcesz uzyskać, zanim połączysz lub spłaszczysz grafikę. Weźmy lampkę biurkową: klosz ma się przechylać, ramię pochylać, a podstawa pozostać nieruchoma. Te ruchy wskazują, że potrzebujesz osobnych części, które możesz zaznaczać i rozmieszczać.

Ta sama metoda sprawdza się w przypadku powiek postaci, machającej dłoni czy elementu logo: nazwij ruch, a następnie sprawdź, czy źródło zawiera część potrzebną do jego wykonania.

Zaplanuj ruchome części

Nadaj istotnym częściom nazwy w dokumencie źródłowym i zachowaj kopię pliku głównego. Trzymaj powiązane detale razem, jeśli mają poruszać się wspólnie. Unikaj łączenia całej ilustracji w jedną ścieżkę tylko po to, aby skrócić listę obiektów.

Po imporcie użyj grup w Rive, aby uporządkować te części i zapewnić im osobne sterowanie transformacjami. Rive pozwala utworzyć grupę i umieścić w niej obiekty w panelu Hierarchy. Możesz też zgrupować zaznaczone elementy skrótem Command+G w macOS lub Ctrl+G w Windows. Rive — Groups opisuje te funkcje.

Importuj z pliku SVG, Figmy lub Illustratora

Zapisany plik SVG

1. Zapisz osobny eksport SVG, aby zachować dostęp do edytowalnego pliku głównego.
2. Przeciągnij plik do Rive lub kliknij + w panelu Assets i wybierz plik do zaimportowania.
3. Umieść grafikę tam, gdzie jej potrzebujesz, i rozwiń jej strukturę w panelu Hierarchy.
4. Zaznacz jedną małą część, zmień jej wypełnienie, a następnie cofnij zmianę. Sprawdź, czy zmienił się tylko zamierzony obszar.

Obie metody importowania plików opisano w Rive — Assets. Udany import to początek sprawdzania możliwości edycji.

Figma

Użyj polecenia Copy as SVG dla wybranej grafiki w Figmie, a następnie wklej ją do edytora Rive. Sprawdź zaimportowane kształty i wygląd, zanim skopiujesz resztę dużej kompozycji. To udokumentowana przez Rive metoda opisana w Rive — Importing from Figma.

Illustrator

Ustaw sposób zapisu stylów SVG na Presentation Attributes. Dokumentacja Rive podaje nieco inne nazwy opcji dla poszczególnych metod eksportu z Illustratora:

• Save As: w oknie SVG Options ustaw CSS Properties na Presentation Attributes.
• Export As: w oknie SVG Options ustaw Styling na Presentation Attributes.
• Bezpośrednie kopiowanie i wklejanie: sprawdź opcje stylów SVG w Export As, ponieważ Illustrator używa tych ustawień przy tej metodzie.

Wyłącz też opcję Preserve Illustrator Editing Capabilities w docelowym pliku SVG. Zachowaj osobno plik główny Illustratora. Rive ostrzega, że ta opcja dodaje dodatkowe dane Illustratora, zwiększa rozmiar pliku i może zawierać dane nierozpoznawane przez importer. Źródłem tych ustawień jest Rive — Importing from Illustrator.

Ustal, co sprawdzić najpierw na podstawie objawu po imporcie

Rive obsługuje gradienty liniowe i radialne, ale nie odtwarza wszystkich funkcji SVG. Poniższa tabela przekłada listę nieobsługiwanych funkcji Rive na kolejność napraw. Kolumna z pierwszą rzeczą do sprawdzenia zawiera sugestie diagnostyczne, a nie gwarancję dotyczącą Twojego pliku.

Jeśli SVG z Illustratora wygląda na czarny, zacznij od ustawienia eksportu Presentation Attributes, a następnie sprawdź wypełnienie i obrys kształtu, którego dotyczy problem. Sama czarna grafika nie wskazuje przyczyny. Nie należy mylić tego z udokumentowanym przez Rive zastępowaniem inherit kolorem białym.

W przypadku brakującej zawartości obrazu poradnik o obrazach rastrowych osadzonych w SVG wyjaśnia, jak sprawdzić, czy plik zawiera rzeczywiste ścieżki, czy obraz umieszczony w kontenerze SVG. Rive może importować JPEG, PNG i WebP jako osobne zasoby obrazu, zgodnie z Rive — Asset types. Zachowanie teksturowanego tła jako osobnego obrazu rastrowego może być właściwym wyborem.

Jeśli import nigdy się nie kończy

Spróbuj zaimportować mały, prosty SVG w tej samej sesji. Jeśli to również się nie uda, zapisz pracę i uruchom edytor ponownie, zanim zaczniesz przebudowywać grafikę. Jeśli problem dotyczy tylko jednego pliku, wyodrębniaj jego grupy do osobnych kopii eksportu, aż znajdziesz fragment, którego dotyczy problem. Pozwala to odróżnić problem z sesją od problemu z konkretnym plikiem; nie wyznacza to uniwersalnego limitu złożoności.

Kiedy PerfectVector przydaje się w tym procesie

PerfectVector przydaje się, gdy Twoja grafika źródłowa jest rastrowa i potrzebujesz edytowalnych konturów wektorowych do Rive. W przypadku płaskiej ilustracji PNG lub JPG przekształć obraz w ścieżki SVG, a następnie sprawdź wynik w edytorze grafiki wektorowej przed importem. Sprawdź sylwetkę, niewielkie szczeliny i granice między częściami, które mają poruszać się niezależnie. Wektoryzacja odtwarza widoczne obszary; nie odzyskuje oryginalnych nazw warstw ani nie określa, gdzie powinny znajdować się przeguby w Twojej animacji.

Wróćmy do przykładu lampki. Jeśli ramię i podstawa stały się jednym połączonym kształtem, rozdziel je lub narysuj na nowo granicę między nimi. Jeśli ruchoma część odsłania obszar ukryty w obrazie źródłowym, samodzielnie dorysuj brakujący fragment. Zrób to, zanim zaczniesz budować animację na podstawie zaimportowanej struktury.

Użyj oryginalnego SVG, jeśli zawiera już odpowiednie ścieżki. Do kilku prostych części geometrycznych użyj wbudowanych narzędzi do rysowania. Zachowaj fotografie i malowane tekstury jako zasoby rastrowe, gdy ich wygląd jest ważniejszy niż edytowalne kontury. Nasz przegląd wektoryzacji obrazów wyjaśnia kompromisy związane z obrazem źródłowym; poradnik wektoryzacji w Adobe Animate opisuje osobny proces, jeśli Twoim środowiskiem docelowym jest Animate.

Sprawdź jeden ruch, zanim zbudujesz animację

W kopii roboczej zaznacz klosz lampki i obróć go nieznacznie. Upewnij się, że odpowiednie detale poruszają się razem z nim, a podstawa pozostaje nieruchoma. Cofnij zmianę, zaznacz ramię i powtórz próbę. Jeśli poruszają się niewłaściwe części, sprawdź układ elementów nadrzędnych i podrzędnych, zanim zaczniesz edytować kolejne ścieżki.

Sprawdź również punkt obrotu. W Rive elementy podrzędne dziedziczą transformacje elementu nadrzędnego, a początek układu współrzędnych (origin) określa punkt, względem którego odbywa się obrót lub skalowanie. Freeze pozwala zmienić położenie elementu nadrzędnego bez przesuwania jego elementów podrzędnych; przełącz tę funkcję klawiszem Y i wyłącz ją po dostosowaniu położenia początku układu współrzędnych. Informacje o tych funkcjach znajdziesz w Rive — Freeze and Origin.

Zanim przejdziesz do budowy animacji, upewnij się, że:

• każdą potrzebną część można zaznaczyć niezależnie;
• wypełnienia, obrysy, otwory i gradienty nadal odpowiadają zamierzonemu wyglądowi;
• osobno zaimportowane obrazy rastrowe znajdują się tam, gdzie zdecydowałeś się je zachować;
• ruch nie odsłania przypadkowych szczelin ani brakujących fragmentów grafiki ukrytych w źródle;
• każda ruchoma część obraca się wokół właściwego przegubu;
• oryginalne źródło i czysta kopia do importu pozostają dostępne.

FAQ

Czy import SVG pozwala edytować go w Rive? Tak, w zakresie funkcji SVG obsługiwanych przez Rive. Rozwiń zaimportowaną grafikę w panelu Hierarchy, aby zaznaczyć potrzebną część. Jeśli kilka obszarów nadal zachowuje się jak jeden obiekt, sprawdź ich grupowanie i strukturę ścieżek.

Dlaczego obraz wewnątrz mojego SVG zniknął? Rive ignoruje osadzone obrazy podczas importu SVG. Znajdź oryginalny obraz rastrowy i zaimportuj go jako zasób obrazu albo zwektoryzuj odpowiednią grafikę do ścieżek, jeśli potrzebujesz edytowalnych konturów.

Czy Rive obsługuje gradienty SVG? Obsługiwane są gradienty liniowe i radialne. Transformacje gradientów są ignorowane, więc po imporcie może być konieczne dostosowanie położenia gradientu.

Czy wektoryzacja PNG utworzy animację w Rive? Wektoryzacja może utworzyć geometrię SVG z odpowiedniej grafiki rastrowej. Nadal musisz sprawdzić i rozdzielić ruchome części, ustawić ich hierarchię oraz położenie początków ich układów współrzędnych, a następnie zbudować animację w Rive.

Źródła

1. Rive — SVG & Vector Assets — Konwersja do natywnych obiektów, import z Illustrator i Figma, zachowanie podczas eksportu w kontekście środowisk uruchomieniowych oraz nieobsługiwane funkcje SVG.
2. Rive — Assets — Funkcje importowania plików i osobne zasoby obrazów rastrowych.
3. Rive — Shapes and Paths Overview — Style kształtów i geometria ścieżek wewnątrz warstwy kształtu.
4. Rive — Groups — Porządkowanie części i funkcje grupowania w panelu Hierarchy.
5. Rive — Freeze and Origin — Transformacje elementów nadrzędnych i podrzędnych oraz zmiana położenia początku układu współrzędnych bez przesuwania grafiki podrzędnej.

---

Jeśli Twoja grafika źródłowa jest plikiem PNG lub JPG i potrzebujesz edytowalnych konturów, przygotuj SVG z PerfectVector. Sprawdź zwektoryzowane części, zaimportuj plik do Rive i przetestuj jeden niezależny ruch, zanim zbudujesz resztę animacji.