PerfectVector
Autor: Irene Kim9 min czytania

Import SVG do Synfig: przygotuj edytowalne warstwy animacji

Porównaj bezpośredni import SVG z eksportem SIF z Inkscape do Synfig. Sprawdź warstwy, kolory i oddzielne ruchome części, zanim zaczniesz tworzyć animację lub rig.

Na tej stronie

Synfig może importować SVG przez File → Import, ale przed animowaniem sprawdź utworzone warstwy. Dokumentacja importu SVG opisuje też sposób przenoszenia grafiki z Inkscape przez SIF, gdy bezpośredni import nie odtwarza jej w użytecznej postaci.

To dwa sposoby przenoszenia grafiki wektorowej. Żaden z nich nie tworzy za Ciebie planu ruchu. Zaimportowana lampka biurkowa może wyglądać poprawnie, a mimo to jej klosz, ramiona i podstawa mogą być trudne do niezależnego zaznaczania lub obracania.

Zacznij od jednego obiektu, zdecyduj, które części mają się poruszać, i porównaj wynik importu z głównym plikiem SVG. Krótka kontrola warstw i ruchu jest bardziej przydatna niż importowanie całej sceny i odkrywanie jej struktury dopiero później.

Wybierz bezpośredni import SVG lub kopię SIF

Jeśli masz już SVG, najpierw wypróbuj bezpośredni import. Pozostaw oryginał otwarty w edytorze, w którym powstał, aby porównać kształty, wypełnienia i obrysy oraz organizację grafiki.

SposóbPlik przenoszony do SynfigCo sprawdzić
Bezpośredni import SVGWyeksportowany plik .svgWidoczną grafikę, edytowalną geometrię, strukturę warstw i skalę
Eksport SIF z InkscapeOsobną kopię .sifWyeksportowane grupy warstw, wypełnienia i obrysy, a następnie te same aspekty wizualne
Import obrazu rastrowegoObsługiwany plik obrazuCzy poruszanie płaskim obrazem wystarczy w danym ujęciu

Opcja SIF nadal widnieje w oficjalnej definicji rozszerzenia eksportu do Synfig w Inkscape. Deklaruje ona format Synfig Animation (*.sif) i oznacza eksport jako potencjalnie stratny. Sprawdź, czy zainstalowana u Ciebie wersja Inkscape udostępnia ten format; samo istnienie eksportera nie gwarantuje, że każda instalacja udostępnia go w identyczny sposób.

Wybierz sposób, który zachowuje potrzebny Ci wygląd i strukturę do edycji. SIF nie gwarantuje idealnej zgodności z SVG, a widoczna po imporcie grafika SVG nie jest jeszcze rigiem.

Zaplanuj ruchome części przed eksportem

Weź za przykład autorską ilustrację lampki biurkowej z podstawą, dolnym ramieniem, górnym ramieniem i kloszem. Podstawa pozostaje nieruchoma. Ramiona obracają się w przegubach, a klosz przechyla się w miejscu mocowania.

W edytorze źródłowym zachowaj te części oddzielnie i nadaj warstwom opisowe nazwy. Umieść elementy grafiki, które mają poruszać się razem, w tej samej części. Jeśli klosz ma wypełnienie i ozdobny obrys, oba powinny podążać za jego ruchem.

Narysuj też wystarczająco duży fragment każdej części, aby umożliwić planowane pozy. SVG zawierający jedynie widoczną krawędź ramienia nie dostarczy ukrytej grafiki, gdy odchylisz klosz. Może być konieczne ręczne dorysowanie zasłoniętego obszaru.

Schemat koncepcyjny lampki biurkowej z rozdzieloną podstawą, ramionami połączonymi przegubami i kloszem na potrzeby planowania animacji.
Ilustracja do planowania, a nie wynik importu ani rig w Synfig. Przed animowaniem sprawdź rzeczywiste warstwy i ustaw ich punkty obrotu.

Schemat przedstawia zamierzoną organizację. Nie przewiduje liczby warstw, które utworzy importer. Kod eksportera SIF w Inkscape może tworzyć osobne warstwy obszaru i obrysu z wypełnienia i obrysu ścieżki. Jedna część w pliku źródłowym może więc wymagać wspólnego poruszania kilkoma warstwami utworzonymi po konwersji.

Wektoryzacja oparta na kolorach również może uporządkować grafikę inaczej, niż zakłada Twój plan ruchu. Dwa ciemne ramiona mogą należeć do jednego kształtu złożonego. Rozdziel geometrię, której faktycznie potrzebujesz, zamiast zakładać, że każdy rozpoznawalny obiekt ma własną warstwę.

Wykonaj mały test bezpośredniego importu

Zapisz kopię do przeniesienia zawierającą tylko lampkę, a następnie zaimportuj ją do nowego dokumentu Synfig przez File → Import. Zanim dodasz animację, wykonaj cztery kontrole:

  1. Sprawdź ogólny kontur grafiki i porównaj jej rozmiar z obszarem roboczym.
  2. Rozwiń hierarchię warstw i znajdź jedno ramię lub klosz.
  3. Tymczasowo ukryj tę część, aby zobaczyć dokładnie, jakie elementy grafiki zawiera.
  4. Przywróć widoczność i wykonaj niewielki, tymczasowy ruch, a następnie go cofnij.

Jeśli ukrycie klosza ukrywa również ramię, sprawdź grupowanie. Jeśli przesunięcie klosza pozostawia jego obrys w miejscu, przed kontynuowaniem zbierz warstwy tworzące tę część. Takie proste próby ujawniają strukturę bez konieczności przygotowania gotowej animacji.

Sprawdzaj wypełnienia i obrysy oddzielnie od geometrii. Poprawny kontur z niewłaściwym wypełnieniem to inny problem niż brakująca grafika. Porównaj kolory, krycie, widoczne obrysy i otwory z plikiem źródłowym. Wprowadzaj wszelkie poprawki w kopii roboczej, aby móc wrócić do oryginału.

W przypadku formatów animacji o odmiennej geometrii natywnej praca z grafiką wektorową w OpenToonz pokazuje, dlaczego edytowalna granica wypełnionego obszaru i edytowalna linia środkowa dają różne możliwości kontroli. Nie zakładaj, że liczba warstw utworzonych przez importer mówi Ci, jaki rodzaj edycji obsługuje każda z nich.

Wypróbuj eksport SIF z Inkscape, gdy może pomóc

Jeśli Twoja instalacja Inkscape oferuje Synfig Animation (*.sif) w Save As, zapisz osobną kopię SIF i otwórz ją w Synfig. Zachowaj główny, edytowalny plik SVG. Przewodnik konwersji z Inkscape w dokumentacji Synfig opisuje ten sposób oraz związek między warstwami Inkscape a warstwami Group Layer w Synfig.

Obecna implementacja eksportera również traktuje warstwę Inkscape jako nazwany kontener na jej przekonwertowaną zawartość. Dzięki temu celowo przygotowane warstwy źródłowe są przydatne w przypadku lampki, ale nadal musisz sprawdzić wynik. Zwykłe grupy SVG i warstwy Inkscape nie dają takich samych gwarancji co do końcowej hierarchii.

Porównaj kopię SIF z bezpośrednim importem, wykonując te same kontrole. Czy możesz zaznaczyć klosz? Czy jego wypełnienie i obrys pozostają razem? Czy nakładające się fragmenty są zachowane? Wybierz na podstawie tych wyników, a nie tego, które rozszerzenie pliku brzmi bardziej jak format natywny.

Nie traktuj starej listy zgodności jako uniwersalnej reguły. Strona wiki Synfig zawiera starszą metodę konwersji XSLT z własnymi ograniczeniami. Te ograniczenia nie opisują automatycznie bezpośredniego importera SVG ani dzisiejszego eksportera Inkscape. W przypadku problematycznego pliku uprość kopię do prostych wypełnionych kształtów i przywracaj bardziej złożone elementy pojedynczo.

Ustaw środki transformacji grup przed testem ruchu

Dokumentacja Group Layer w Synfig opisuje kontener, który przekształca swoje warstwy podrzędne razem. Jego ustawienia przekształceń obejmują obrót, przesunięcie, pochylenie i skalę. Zgrupuj elementy należące do jednej ruchomej części lampki, zanim przetestujesz obrót tej części.

Umieść środek obrotu w planowanym przegubie. Opisany w dokumentacji Group Transformation Widget pozwala przytrzymać Ctrl podczas przeciągania środka przekształcenia, aby zmienić Origin niezależnie od grupy. Sprawdź wpływ tej zmiany na zaznaczoną grupę, zanim zaczniesz ją animować.

W przypadku klosza środek umieszczony pośrodku jego konturu daje inny ruch niż środek w miejscu mocowania do ramienia. Wypróbuj niewielki obrót w kopii roboczej. Sprawdź, czy obrysy się nie odrywają, czy w przegubie nie pojawiają się szczeliny i czy grafika nie obraca się wokół niewłaściwego punktu, a następnie cofnij test.

To tworzy punkt wyjścia do edycji. Ruch wynikający z relacji między elementami nadrzędnymi a podrzędnymi, kości, rozłożenie ruchu w czasie i interpolacja nadal wymagają osobnej konfiguracji. Import SVG lub eksport SIF nie odtwarza istniejącego wcześniej rigu z płaskiej ilustracji.

Jeśli po imporcie nic nie widać lub zmieniają się kolory

Wykorzystaj objaw, aby zawęzić poszukiwania:

ObjawCo sprawdzić najpierw
Nic nie jest widoczneWidoczność warstw, granice grafiki, skalę obszaru roboczego i to, czy plik źródłowy zawiera użyteczną geometrię
Kontur jest widoczny, ale wypełnienie jest nieprawidłoweWypełnienie i krycie w pliku źródłowym oraz zaimportowane warstwy odpowiadające za wypełnienie i obrys
Niektóre części znikająStrukturę lub efekt brakującej części, przetestowane w osobnej kopii
Wszystko porusza się razemKtóra grupa jest zaznaczona i jakie części zawiera
Obrys części pozostaje w miejscuCzy wypełnienie i obrys wymagają zgrupowania na potrzeby tego ruchu

Diagnostyka pustego SVG obejmuje kontrolę obszaru widoku, widoczności i nieobsługiwanej zawartości. Podczas diagnostyki zachowaj poprawne ścieżki. Konwersja całej grafiki do PNG i ponowna wektoryzacja powodują utratę struktury, która nadal może być przydatna.

Zapisz wersję Synfig, wersję Inkscape, jeśli go używasz, wybrany sposób importu oraz jeden mały plik, który odtwarza problem. Stare zgłoszenie na forum dotyczące kolorów lub grupowania to wskazówka do sprawdzenia, a nie dowód, że każda obecna instalacja ma ten sam problem.

Gdzie przydaje się PerfectVector

Jeśli jedynym źródłem jest płaska ilustracja PNG lub JPG, konwersja obrazu na grafikę wektorową w PerfectVector może odtworzyć edytowalne ścieżki SVG przed przeniesieniem do Synfig. Sprawdź kontur i rozdziel obszary, które planujesz poruszać, a następnie przetestuj jeden import. Wynik nadal wymaga uporządkowania warstw, rozmieszczenia przegubów i skonfigurowania animacji w Synfig.

Zachowaj istniejący, edytowalny SVG, zamiast wektoryzować jego zrzut ekranu. Malowane tła mogą pozostać obrazami rastrowymi, jeśli ich faktura ma znaczenie, a potrzebujesz jedynie umieścić lub przesuwać obraz. Dokumentacja Synfig opisuje osobną warstwę Import Image Layer przeznaczoną na obrazy. Inny natywny sposób wektoryzacji znajdziesz w artykule o wektoryzacji obrazów w Adobe Animate; szersze wyjaśnienie wektoryzacji odróżnia odtwarzanie ścieżek od odtwarzania oryginalnej struktury projektu.

Najczęściej zadawane pytania

Czy Synfig może importować pliki SVG? Tak. Użyj File → Import, a następnie sprawdź widoczną grafikę i utworzoną strukturę warstw. Dokumentacja Synfig opisuje też sposób przenoszenia z Inkscape przez SIF jako alternatywę, gdy bezpośredni import nie odtwarza pliku w użytecznej postaci.

Czy do animacji w Synfig użyć SVG czy SIF? Zachowaj główny plik SVG i porównaj bezpośredni import z osobnym eksportem SIF, jeśli ta opcja jest dostępna w Twojej instalacji Inkscape. Wybierz wynik, którego wygląd i edytowalne części pasują do animacji. Żaden ze sposobów nie tworzy rigu automatycznie.

Dlaczego mój SVG jest pusty lub ma niewłaściwe kolory w Synfig? Sprawdź widoczność, granice, skalę, wypełnienia, krycie i strukturę brakującej części. Przetestuj prostą kopię, aby odróżnić problem z elementem konkretnego pliku od szerszego problemu z importem. Zachowaj oryginał i zapisz wersje aplikacji oraz sposób importu.

Czy import SVG tworzy osobne ruchome części? Sprawdź rzeczywiste warstwy, zamiast zakładać, że tak jest. Jedna część źródłowa może utworzyć wiele warstw odpowiadających za wypełnienie i obrys, a kilka widocznych części może współdzielić geometrię. Uporządkuj każdą ruchomą część, ustaw jej środek transformacji i przetestuj niewielki ruch, zanim dodasz animację.

Źródła

  1. Synfig — SVG import and Inkscape conversion — Opisuje bezpośredni import i alternatywny sposób przenoszenia przez SIF, a także historyczne metody konwersji.
  2. Inkscape — Synfig output extension definition — Rejestruje format wyjściowy SIF i oznacza eksport jako potencjalnie stratny.
  3. Inkscape — Synfig exporter implementation — Pokazuje obsługę kontenerów warstw oraz osobną konwersję wypełnienia i obrysu.
  4. Synfig — Group Layer — Definiuje przekształcenia zgrupowanych warstw i ich parametry.
  5. Synfig — Group Transformation Widget — Opisuje zmianę parametru Origin grupy niezależnie od zawartej w niej grafiki.
  6. Synfig — Import Image Layer — Opisuje osobną warstwę przeznaczoną na importowane obrazy.

Zaczynasz od grafiki rastrowej? Przygotuj jej ścieżki SVG w PerfectVector, sprawdź obszary, które zamierzasz poruszać, i przetestuj jedną część w Synfig, zanim zbudujesz resztę animacji.

Więcej z bloga

Zacznij od czystszego SVG,
który łatwiej edytować