Impor SVG Rive: Siapkan Grafis yang Bisa Diedit untuk Animasi

Anda bisa mengimpor SVG ke Rive dengan menyeret file ke editor atau menggunakan panel Assets. Rive mengubah grafis menjadi objek vektor native yang bisa diedit. Hasil impor membutuhkan dua pemeriksaan: apakah tampilannya benar, dan bisakah Anda memilih bagian yang akan dianimasikan? Dokumentasi SVG Rive menjelaskan konversi dan batasannya.

Mulailah dari file vektor asli jika Anda memilikinya. Jika sumber berupa PNG atau JPG, pilih antara mempertahankannya sebagai gambar, menggambar bentuk yang dibutuhkan, atau melakukan tracing menjadi SVG terlebih dahulu. Tracing berguna untuk memulihkan kontur yang bisa diedit; Anda tetap harus mengorganisasikan kontur itu untuk animasi.

Apa yang terjadi pada SVG di dalam Rive?

Setelah impor, Anda bekerja dengan objek Rive. SVG sumber tidak disertakan dalam file .riv yang diekspor, dan runtime Rive saat ini tidak mengonversi aset SVG saat runtime. Selesaikan persiapan dan impor SVG dalam editor sebelum mengekspor file Rive. Perilaku ekspor Rive menjelaskan batas ini.

Perbedaan itu juga penting saat memilih grafis. Layer shape mengontrol fill dan stroke-nya, sedangkan path di dalamnya menentukan geometri. Buka shape dalam Hierarchy untuk memeriksa path tersebut. Memilih grup induk bisa membuat seluruh ilustrasi bergerak meskipun anak-anaknya bisa diedit. Panduan shape dan path Rive menunjukkan struktur itu.

Jika SVG sumber sendiri tidak bisa dipisahkan, gunakan diagnosis objek dan pemisahan grup SVG untuk mengenali grup, compound path, atau gambar tertanam sebelum mengubahnya.

Siapkan bagian sebelum ekspor

Catat gerakan yang diinginkan sebelum menggabungkan atau meratakan grafis. Bayangkan lampu meja: kap harus mengangguk, lengan harus condong, dan dasar tetap diam. Gerakan itu mengisyaratkan potongan terpisah yang bisa dipilih dan ditata.

Metode yang sama berlaku untuk kelopak mata karakter, tangan melambai, atau elemen logo: sebutkan gerakannya, lalu periksa apakah sumber memiliki potongan yang dibutuhkan untuk membuatnya.

Rencanakan bagian bergerak

Beri nama bagian bermakna dalam dokumen sumber dan pertahankan salinan master. Simpan detail terkait bersama jika harus bergerak bersama. Hindari menggabungkan seluruh ilustrasi menjadi satu path hanya untuk mempersingkat daftar objek.

Setelah diimpor, gunakan grup Rive untuk mengorganisasikan potongan itu dan memberi kontrol transformasi terpisah. Rive memungkinkan Anda membuat grup dan memasukkan objek ke dalamnya di Hierarchy. Anda juga bisa mengelompokkan pilihan dengan Command+G di macOS atau Ctrl+G di Windows. Dokumentasi grup Rive membahas kontrol tersebut.

Impor dari SVG, Figma, atau Illustrator

File SVG yang disimpan

1. Simpan ekspor SVG terpisah agar master yang bisa diedit tetap tersedia.
2. Seret file ke Rive, atau klik + di panel Assets dan pilih file untuk diimpor.
3. Tempatkan grafis sesuai kebutuhan dan buka strukturnya dalam Hierarchy.
4. Pilih satu bagian kecil, ubah fill-nya, lalu batalkan perubahan. Periksa apakah hanya area tujuan yang berubah.

Kedua jalur impor file didokumentasikan dalam ikhtisar Assets Rive. Impor berhasil merupakan awal pemeriksaan pengeditan.

Figma

Gunakan Copy as SVG untuk grafis tujuan di Figma, lalu tempel ke editor Rive. Periksa bentuk dan tampilan impor sebelum menyalin sisa komposisi besar. Ini jalur impor Figma yang didokumentasikan Rive.

Illustrator

Tetapkan styling SVG menjadi Presentation Attributes. Rive mendokumentasikan label yang sedikit berbeda untuk jalur ekspor Illustrator:

• Save As: dalam SVG Options, tetapkan CSS Properties menjadi Presentation Attributes.
• Export As: dalam SVG Options, tetapkan Styling menjadi Presentation Attributes.
• Salin dan tempel langsung: periksa opsi styling Export As SVG, karena Illustrator memakai pengaturan itu untuk jalur ini.

Nonaktifkan juga Preserve Illustrator Editing Capabilities dalam SVG serah. Simpan master Illustrator secara terpisah. Rive memperingatkan opsi ini menambahkan data Illustrator ekstra, meningkatkan ukuran file, dan mungkin menyertakan data yang tidak dikenali importernya. Panduan Illustrator Rive merupakan sumber pengaturan tersebut.

Cocokkan gejala impor dengan pemeriksaan pertama

Rive mendukung gradien linear dan radial, tetapi tidak mereproduksi setiap fitur SVG. Tabel berikut menerjemahkan daftar fitur yang tidak didukung menjadi urutan perbaikan. Kolom pemeriksaan pertama merupakan saran diagnosis, bukan jaminan tentang file Anda.

Jika SVG Illustrator tampak hitam, mulailah dari pengaturan ekspor Presentation Attributes, lalu periksa pewarnaan shape yang terpengaruh. Grafis hitam saja tidak menunjukkan penyebabnya. Itu tidak boleh disamakan dengan fallback putih Rive yang didokumentasikan untuk inherit.

Untuk konten gambar yang hilang, panduan SVG raster tertanam menjelaskan cara memeriksa apakah file berisi path nyata atau gambar di dalam wadah SVG. Rive bisa mengimpor JPEG, PNG, dan WebP sebagai aset gambar tersendiri, menurut daftar jenis asetnya. Mempertahankan latar bertekstur sebagai raster terpisah bisa menjadi pilihan tepat.

Jika impor tidak pernah selesai

Coba SVG kecil dan sederhana dalam sesi yang sama. Jika itu juga gagal, simpan pekerjaan dan mulai ulang editor sebelum membangun ulang grafis. Jika hanya satu file gagal, isolasi grupnya dalam salinan ekspor terpisah sampai menemukan bagian yang terpengaruh. Ini membedakan masalah sesi dari masalah khusus file; ini tidak menetapkan batas kerumitan universal.

Kapan PerfectVector berguna dalam alur ini

PerfectVector berguna ketika sumber grafis berupa raster dan Anda membutuhkan kontur vektor yang bisa diedit untuk Rive. Untuk ilustrasi PNG atau JPG datar, konversikan gambar menjadi path SVG, lalu periksa hasil di editor vektor sebelum impor. Periksa siluet, celah kecil, dan batas antarbagian yang membutuhkan gerakan terpisah. Trace merekonstruksi area yang terlihat; proses itu tidak memulihkan nama layer asli atau menentukan tempat sendi animasi.

Kembali ke contoh lampu. Jika lengan dan dasar menjadi satu bentuk terhubung, pisahkan atau gambar ulang batas itu. Jika bagian bergerak menampakkan area yang tersembunyi dalam gambar sumber, gambar sendiri area yang hilang. Lakukan ini sebelum membangun animasi berdasarkan struktur impor.

Gunakan SVG asli jika sudah berisi path yang sesuai. Gunakan alat menggambar native untuk beberapa bagian geometris sederhana. Pertahankan foto dan tekstur lukisan sebagai aset raster jika tampilannya lebih penting daripada kontur yang bisa diedit. Ikhtisar vektorisasi gambar kami menjelaskan kompromi gambar sumber; panduan tracing Adobe Animate membahas alur terpisah jika tujuan Anda Animate.

Uji satu gerakan sebelum membangun animasi

Pada salinan kerja, pilih kap lampu dan putar sedikit. Pastikan detail yang diinginkan mengikutinya sementara dasar tetap diam. Batalkan, pilih lengan, dan ulangi. Jika bagian yang salah bergerak, periksa susunan induk-anak sebelum mengedit lebih banyak path.

Periksa pivot juga. Di Rive, anak mewarisi transformasi induk, dan origin menentukan tempat rotasi atau penskalaan terjadi. Freeze memungkinkan Anda memindahkan induk tanpa memindahkan anaknya; aktifkan dengan Y dan nonaktifkan setelah menyesuaikan origin. Ikuti panduan Freeze dan Origin Rive untuk kontrolnya.

Sebelum melanjutkan animasi, pastikan:

• setiap potongan yang dibutuhkan bisa dipilih secara terpisah;
• fill, outline, lubang, dan gradien masih cocok dengan tampilan tujuan;
• raster yang diimpor terpisah ada di tempat yang Anda pilih untuk mempertahankannya;
• gerakan tidak menampakkan celah tidak disengaja atau grafis tersembunyi yang hilang;
• setiap potongan bergerak berputar pada sendi tujuan;
• sumber asli dan salinan impor yang bersih tetap tersedia.

FAQ

Apakah mengimpor SVG membuatnya bisa diedit di Rive? Ya, untuk fitur SVG yang didukung Rive. Buka grafis impor di Hierarchy untuk memilih bagian yang dibutuhkan. Jika beberapa area masih berperilaku sebagai satu objek, periksa pengelompokan dan struktur path-nya.

Mengapa gambar di dalam SVG saya hilang? Rive mengabaikan gambar tertanam selama impor SVG. Cari raster asli dan impor sebagai aset gambar, atau trace grafis yang sesuai menjadi path jika membutuhkan kontur yang bisa diedit.

Apakah Rive mendukung gradien SVG? Gradien linear dan radial didukung. Transformasi gradien diabaikan, sehingga penempatan gradien mungkin perlu disesuaikan setelah impor.

Apakah tracing PNG membuat animasi Rive? Tracing bisa membuat geometri SVG dari grafis raster yang sesuai. Anda tetap perlu memeriksa dan memisahkan bagian bergerak, menetapkan hierarki dan origin-nya, serta membangun animasi di Rive.

Sources

1. Rive — SVG & Vector Assets — Konversi objek native, impor Illustrator dan Figma, perilaku ekspor runtime, serta fitur SVG yang tidak didukung.
2. Rive — Assets — Kontrol impor file dan aset gambar raster terpisah.
3. Rive — Shapes and Paths Overview — Styling shape dan geometri path di dalam layer shape.
4. Rive — Groups — Organisasi bagian dan kontrol pengelompokan dalam Hierarchy.
5. Rive — Freeze and Origin — Transformasi induk-anak dan pemindahan origin tanpa memindahkan grafis anak.

---

Jika grafis bermula sebagai PNG atau JPG dan membutuhkan kontur yang bisa diedit, siapkan SVG dengan PerfectVector. Periksa bagian hasil tracing, impor file ke Rive, dan uji satu gerakan mandiri sebelum membangun sisa animasi.