PNG ke Android Vector Drawable: Daftar Pemeriksaan Impor

Android Studio tidak men-trace PNG menjadi path vektor. Vector Asset Studio mengimpor file SVG atau PSD dan mengonversi geometri yang didukung menjadi XML VectorDrawable. Karena itu, alur PNG yang andal memiliki dua tahap: trace piksel menjadi SVG sungguhan, lalu impor SVG itu ke Android Studio.

Konverter PNG langsung ke VectorDrawable mungkin menggabungkan kedua tahap. Ini bisa praktis untuk ikon sederhana, tetapi pemeriksaan yang sama tetap berlaku. Pastikan keluaran berisi path, sesuai dengan sumber, memakai viewport yang dimaksud, dan menghindari fitur yang tidak bisa direpresentasikan importer Android.

Untuk antarmuka Flutter, ikuti alur aset SVG Flutter. Alur tersebut mendeklarasikan dan merender SVG melalui flutter_svg, bukan mengonversinya menjadi XML Android VectorDrawable native.

Untuk proyek .NET MAUI, gunakan daftar pemeriksaan sumber daya gambar MAUI untuk memeriksa sumber, keluaran build, dan ukuran tampilan. Ikuti pipeline gambar proyek tersebut sebelum menerapkan langkah impor Android VectorDrawable native.

Alur singkat

1. Mulai dari PNG bersih yang menyerupai ikon, bukan foto atau tekstur.
2. Trace menjadi SVG dan pastikan file berisi path yang bisa diedit, bukan PNG tersemat.
3. Sederhanakan bentuk tersesat dan node berlebihan tanpa mengubah siluet.
4. Impor SVG melalui Vector Asset Studio Android Studio.
5. Periksa XML yang dihasilkan untuk perilaku viewport, path, isian, stroke, gradien, dan clipping.
6. Uji drawable pada ukuran sebenarnya di versi Android tertua yang didukung aplikasi.

Pilih konverter langsung atau cara melalui SVG

Kedua cara berakhir pada tujuan yang sama, tetapi menyediakan titik pemeriksaan berbeda.

Cara dengan SVG sebagai perantara biasanya lebih mudah diperiksa. Anda dapat membandingkan trace dengan PNG, memeriksa bentuk individual, memperbaiki lubang, dan mengurangi path yang berantakan sebelum Android Studio menerjemahkan file lagi.

Konverter langsung tidak otomatis salah. Misalnya, SVG2Vector saat ini mengiklankan konversi PNG ke VectorDrawable selain SVG dan input lainnya. Perlakukan XML-nya sebagai kandidat, bukan aset selesai: lihat pratinjau di Android Studio, periksa path, dan jalankan pemeriksaan perangkat yang sama seperti di bawah (SVG2Vector).

Tahap 1: ubah PNG menjadi path SVG sungguhan

Mulai dari sumber terbersih yang tersedia. Ikon datar dengan tepi jelas dan palet terbatas merupakan kandidat kuat. Foto, bayangan lembut, glow, dan tekstur dapat menghasilkan banyak bentuk kecil tanpa menjadi aset Android yang berguna.

Gunakan resolusi asli PNG. Memperbesar ikon buram menambahkan piksel, bukan informasi tepi yang hilang. Hapus persegi panjang latar yang tidak disengaja dan tentukan apakah aset yang dimaksud monokrom, multicolor, atau berbasis gradien sebelum tracing.

Trace pikselnya

Unggah sumber ke konverter PNG ke SVG PerfectVector atau gunakan alat tracing lain yang memungkinkan pemeriksaan hasil. Jika sumber berada di ponsel dan Anda memerlukan SVG standar terlebih dahulu, ikuti alur SVG di ponsel Android. Bandingkan SVG dengan PNG pada ukuran antarmuka yang dimaksud, lalu buka dalam editor vektor dan pilih bentuknya.

Periksa:

• siluet luar yang bersih;
• lubang dan ruang negatif yang terjaga;
• jumlah area warna yang diharapkan;
• tidak ada bintik tersesat atau kotak latar;
• kurva halus tanpa rantai titik padat;
• viewBox yang membingkai karya dengan benar.

Ekstensi .svg tidak membuktikan tracing telah dilakukan. SVG dapat berisi konten raster melalui elemen <image>, menurut spesifikasi konten tersemat W3C. Jika karya terpilih sebagai satu persegi panjang atau menjadi kotak-kotak pada zoom tinggi, gunakan diagnosis raster tersemat sebelum beralih ke Android Studio.

Sederhanakan hanya ketika membantu

Kerumitan path penting karena Android harus mem-parse dan menggambar geometri yang dihasilkan. Tidak ada target node universal. Kurva sederhana dengan puluhan titik sangat rapat patut diperiksa; tepi ilustrasi tidak beraturan mungkin memang membutuhkan lebih banyak.

Hapus pecahan terpisah dan sederhanakan rantai titik yang jelas berlebihan sambil membandingkan hasil dengan sumber. Jika perapian mengubah sudut atau menutup lubang kecil, batalkan. Panduan SVG dengan terlalu banyak node menjelaskan cara membedakan detail berguna dari path yang berantakan.

Dua konversi, tiga pemeriksaan

Tahap 2: impor SVG ke Android Studio

Alur Vector Asset Studio Android saat ini menerima file SVG atau PSD lokal, menampilkan pratinjau, dan menghasilkan vector drawable XML (Android Developers).

1. Dalam jendela Project, klik kanan folder res.
2. Pilih New > Vector Asset.
3. Pilih Local file (SVG, PSD) sebagai jenis aset.
4. Pilih SVG dan tinjau pratinjau untuk kesalahan atau perubahan yang terlihat.
5. Tetapkan nama sumber daya dan ukuran yang dimaksud.
6. Lanjutkan melalui Next, pastikan tujuan, dan pilih Finish.

Sumber daya yang dihasilkan berada dalam sumber daya drawable aplikasi sebagai XML. Simpan SVG yang sudah diperiksa sebagai master yang bisa diedit. Jika aset memerlukan perubahan visual nanti, edit SVG dan hasilkan ulang drawable alih-alih memelihara dua versi yang tidak terkait secara manual.

Apa yang bertahan saat impor SVG ke VectorDrawable?

VectorDrawable bukan renderer SVG lengkap. Vector Asset Studio mendukung subset tertentu, sehingga SVG bisa terlihat benar di browser tetapi berubah selama impor.

Batasan tersebut berasal dari tabel kompatibilitas Vector Asset Studio saat ini. Importer juga menjelaskan bahwa hanya stroke di tengah yang didukung. Jika sumber memakai stroke dalam atau luar, expand menjadi bentuk berisi atau gambar ulang tepi sebelum impor.

Gradien membutuhkan pemeriksaan versi tambahan. API VectorDrawable mendokumentasikan nilai gradien atau color-state-list untuk fillColor dan strokeColor mulai level API 24. API itu juga mendokumentasikan opsi fillType evenOdd dan nonZero mulai level API 24 (referensi API VectorDrawable). Jika aplikasi mendukung versi lebih lama, uji cara kompatibilitas yang benar-benar dipakai build Anda alih-alih menganggap pratinjau Android Studio menyelesaikan persoalan.

Baca XML yang dihasilkan sebelum menerimanya

Anda tidak perlu menulis XML VectorDrawable secara manual, tetapi pemeriksaan struktur singkat menemukan banyak masalah impor.

Lebar, tinggi, dan viewport

Elemen root <vector> memisahkan ukuran tampilan dari koordinat gambar:

• android:width dan android:height merupakan dimensi drawable bawaan, biasanya dalam dp;
• android:viewportWidth dan android:viewportHeight menentukan ruang koordinat yang dipakai path.

Mengubah hanya lebar dan tinggi menskalakan geometri yang sama. Mengubah viewport mengubah cara koordinat path dipetakan ke area tampilan itu. Jika ikon terlihat terpotong, memiliki ruang kosong berlebihan, atau teregang, bandingkan keempat nilai ini dengan viewBox SVG dan ukuran aset yang dimaksud.

Path dan pewarnaan

Setiap <path> berisi android:pathData, dengan perintah yang mengikuti sintaks path umum yang sama seperti atribut d SVG. Tinjau fillColor, strokeColor, strokeWidth, line cap, line join, dan fillType jika ada.

Jangan mengoptimalkan dengan menghapus perintah path yang tidak dikenal. Bandingkan pratinjau dengan sumber terlebih dahulu, lalu sederhanakan dalam master SVG, tempat bentuk tetap lebih mudah diperiksa.

Grup dan clipping

Grup dapat membawa nilai translasi, skala, rotasi, dan pivot. <clip-path> membatasi geometri yang terlihat. Jika hasil bergeser atau area yang di-mask hilang, periksa hierarki grup dan bandingkan dengan transformasi serta struktur clipping SVG sumber.

Uji drawable di tempat aplikasi akan menggunakannya

Pratinjau impor membuktikan Android Studio berhasil mem-parse file. Pratinjau itu tidak membuktikan aset benar saat runtime.

Gunakan daftar penerimaan ini:

• Drawable sesuai dengan siluet PNG yang dimaksud pada ukuran UI normal.
• Lubang, ruang dalam huruf, dan area tumpang tindih tetap benar.
• Isian solid dan stroke memakai warna yang dimaksud.
• Gradien dirender dengan benar pada versi Android tertua yang didukung.
• Viewport mempertahankan ruang kosong dan rasio aspek yang dimaksud.
• Ikon tetap terbaca dalam status terang, gelap, disabled, dan tinted yang dipakai aplikasi.
• XML tidak berisi pecahan tidak disengaja atau data path yang jelas berlebihan.
• Aset diuji pada komponen sebenarnya, bukan hanya pratinjau impor.
• PNG asli dan master SVG yang bisa diedit tetap diarsipkan.

Uji pada ukuran dp sebenarnya dalam setidaknya satu emulator atau perangkat yang mewakili versi minimum yang didukung. Periksa pula setiap status atau tema yang mengubah tint. Path yang valid secara teknis masih dapat gagal ketika ruang kosong, bobot visual, atau asumsi warnanya berbeda dari kumpulan ikon sekitarnya.

Jika Anda mengonversi satu keluarga aset, terapkan proses ini terlebih dahulu pada sampel perwakilan. Alur konversi UI kit membahas viewport bersama, ukuran optis, perilaku warna, dan pemeriksaan penyerahan seluruh set.

Kapan mempertahankan PNG

VectorDrawable bekerja paling baik untuk ikon dan ilustrasi sederhana. Panduan Android memperingatkan bahwa grafis detail, termasuk banyak gambar saat aplikasi diluncurkan, bisa lebih cocok menggunakan aset raster. Panduan itu juga menyebutkan bahwa biaya pemuatan awal vector drawable dapat lebih tinggi daripada gambar raster dan menyarankan aset vektor berukuran 200 kali 200 dp atau lebih kecil untuk menghindari waktu menggambar yang lama (Android Developers).

Pertahankan atau desain ulang raster ketika sumber bergantung pada:

• detail fotografis;
• tekstur lembut, blur, atau bayangan kompleks;
• banyak area warna mungil;
• efek tidak didukung yang menentukan tampilan;
• geometri begitu padat sehingga XML sulit diperiksa dan dipelihara.

Tujuannya bukan mengganti setiap PNG. Tujuannya menggunakan VectorDrawable ketika geometri path yang bisa diskalakan membuat aset Android lebih kecil, jelas, atau mudah mengikuti tema tanpa mengubah gambar detail menjadi tumpukan path yang mahal diproses.

Penerapannya dengan PerfectVector

PerfectVector menangani konversi pertama. Untuk ikon yang sesuai, konversikan PNG ke SVG, bandingkan bentuk hasil trace dengan sumber, dan unduh SVG yang ingin disimpan sebagai master yang bisa diedit. Kemudian impor file itu melalui Vector Asset Studio dan periksa XML yang dihasilkan.

Nilai hasil sepanjang seluruh rangkaian:

1. Apakah trace mempertahankan siluet dan lubang sumber?
2. Apakah bentuk SVG bisa diedit dan bebas dari raster tersemat?
3. Apakah Android Studio mengimpor isian, gradien, clip, dan transformasi yang diperlukan?
4. Apakah drawable dirender dengan benar pada ukuran sebenarnya dan level API minimum?

SVG bersih memperbaiki penyerahan, tetapi tidak membuat fitur Android yang tidak didukung bekerja. Sederhanakan desain atau pertahankan PNG ketika tujuan tidak dapat mereproduksi tampilan dengan setia.

FAQ

Bisakah Android Studio mengonversi PNG langsung ke VectorDrawable? Tidak. Vector Asset Studio saat ini mengimpor file SVG atau PSD lokal, bukan PNG. Trace PNG menjadi SVG sungguhan terlebih dahulu, atau gunakan konverter langsung dan periksa XML hasilnya di Android Studio.

Apakah SVG selalu merupakan vektor sungguhan? Tidak. SVG dapat menyematkan konten raster dengan elemen image. Buka file dalam editor vektor atau periksa markup-nya dan pastikan karya yang dimaksud terdiri dari path atau bentuk vektor lain sebelum impor.

Apakah gradien SVG bekerja dalam Android VectorDrawable? Vector Asset Studio mendukung gradien linear, radial, dan angular, tetapi dukungan runtime bergantung pada XML yang dihasilkan dan strategi versi Android Anda. API VectorDrawable mendokumentasikan warna isian dan stroke gradien mulai level API 24, jadi uji aset pada versi tertua yang didukung aplikasi.

Mengapa lubang, mask, atau teks berubah setelah impor? Importer mendukung subset SVG terbatas. Aturan isian memerlukan pengujian dengan memperhatikan versi, clipping terbatas, dan teks tidak didukung. Ubah teks yang diperlukan menjadi kontur, sederhanakan struktur clipping, dan bandingkan pratinjau Android dengan SVG sebelum menerima drawable.

Sebaiknya setiap PNG dalam aplikasi Android menjadi XML VectorDrawable? Tidak. Ikon serta ilustrasi sederhana merupakan kandidat terkuat. Pertahankan foto, gambar kaya tekstur, efek kompleks, dan karya terlalu detail sebagai aset raster kecuali gambar ulang yang disengaja menghasilkan geometri path lebih sederhana.

Sources

1. Android Developers — Add multi-density vector graphics — Mendokumentasikan alur impor SVG dan PSD Vector Asset Studio, subset SVG yang didukung, catatan performa, dan sumber daya drawable yang dihasilkan.
2. Android Developers — VectorDrawable API reference — Mendefinisikan atribut XML vector, path, group, dan clip-path, termasuk perilaku viewport, pewarnaan, aturan isian, dan level API.
3. W3C — SVG Embedded Content — Memastikan bahwa SVG dapat berisi konten gambar raster melalui elemen image.
4. Inkscape Manual — Tracing an Image — Menjelaskan perbedaan tracing piksel raster dengan bekerja menggunakan bitmap asli.
5. SVG2Vector — PNG to VectorDrawable conversion — Menyediakan cara konverter langsung saat ini yang dibahas dalam perbandingan alur.

---

Siap menguji ikon produksi? Konversikan PNG ke SVG, periksa path, lalu impor file yang sudah diperiksa ke Android Studio. Pertahankan drawable hanya setelah viewport, warna, lubang, dan rendering runtime-nya lolos daftar pemeriksaan.