Konversi Ikon PNG ke SVG untuk UI Kit yang Konsisten

Jangan mengonversi seluruh folder sekaligus. Mulailah dengan kelompok kecil yang mencakup ikon paling sederhana, ikon paling padat, bentuk melengkung, dan ikon yang memiliki lubang. Tetapkan aturan SVG dengan sampel tersebut, lalu terapkan pada seluruh kumpulan. Ini menangkap keputusan penjiplakan yang buruk sebelum menyebar ke puluhan berkas.

Konversi sendiri hanya satu langkah. UI kit yang dapat digunakan juga membutuhkan sistem koordinat bersama, ukuran optis konsisten, perilaku warna yang dapat diprediksi, path yang dapat diedit, dan pemeriksaan penyerahan dalam produk yang akan menggunakan ikon.

Alur kerja singkat

1. Inventarisasi kumpulan PNG dan temukan duplikat atau sumber yang hilang.
2. Pilih ikon representatif dan tetapkan grid bersama, padding, model fill atau stroke, serta aturan warna.
3. Konversikan ikon sampel menjadi path nyata.
4. Periksa siluet, node, ruang negatif, dan area warna.
5. Seragamkan kumpulan dalam satu editor vektor, lalu konversikan dan periksa ikon lainnya.
6. Uji SVG hasil ekspor dalam UI dan pipeline aset yang sebenarnya.

Tentukan ikon PNG mana yang sebaiknya menjadi SVG

Ikon datar dengan batas jelas merupakan kandidat penjiplakan yang baik. Gambar lain membutuhkan cara berbeda. Pilah folder sebelum membuka konverter.

Jika sumber yang tersisa berupa wadah ikon, bukan PNG, pulihkan melalui alur kerja ICO ke SVG atau ICNS ke SVG yang sesuai terlebih dahulu. Lalu seragamkan karya hasilnya berdasarkan aturan UI kit yang sama di bawah.

Nama berkas SVG tidak membuktikan bahwa piksel menjadi path vektor. Format ini secara sah dapat memuat gambar raster tertanam melalui elemen <image>, sebagaimana dijelaskan spesifikasi konten tertanam SVG. Jika berkas hasil ekspor masih terpilih sebagai satu gambar persegi panjang atau menjadi berkotak pada pembesaran tinggi, gunakan pemeriksaan raster tertanam sebelum menambahkannya ke kit.

Tetapkan aturan UI kit sebelum menjiplak

Folder yang berisi ikon bersih secara individual tetap dapat tampak tidak konsisten saat digunakan bersama. Tuliskan aturan kumpulan terlebih dahulu, meskipun PNG asli belum mengikutinya.

Pilih satu ruang koordinat

Gunakan satu viewBox untuk ikon yang harus memiliki ukuran komponen yang sama. Angkanya tidak harus 24 kali 24 atau 16 kali 16; angkanya perlu sesuai dengan sistem Anda. SVG memetakan persegi panjang viewBox ke viewport yang ditampilkan, sehingga dimensi luar identik hanya membantu ketika karya ditempatkan secara konsisten di dalamnya. Spesifikasi sistem koordinat SVG 2 mendefinisikan pemetaan tersebut.

Catat:

• viewBox bersama;
• pusat visual dan baseline yang dimaksud;
• padding internal minimum;
• bagian mana yang boleh sengaja melampaui batas optis biasa.

Pilih model fill atau stroke

Tentukan apakah keluarga ikon dibangun dari siluet dengan fill, stroke aktif, atau campuran yang didokumentasikan. Kumpulan outline berbasis stroke membutuhkan ujung, sambungan, dan bobot tampak yang konsisten. Kumpulan dengan fill membutuhkan ruang negatif dan perlakuan tepi yang konsisten. Penjiplakan dapat mengubah stroke tipis menjadi outline tertutup, jadi periksa geometrinya alih-alih bergantung pada pratinjau.

Tentukan cara mengontrol warna

Untuk sistem satu warna, gunakan aturan warna yang dapat diterapkan secara konsisten dan dipetakan oleh tujuan ke token ikonnya. Untuk ikon multicolor, tentukan palet yang diizinkan dan area mana yang boleh berubah. Jangan pertahankan fragmen kecil dengan warna yang hampir sama akibat antialias kecuali memiliki tujuan visual.

Konversikan sampel representatif terlebih dahulu

Pilih empat hingga enam ikon yang menampilkan kasus sulit. Sertakan lingkaran atau busur, diagonal, ruang dalam atau lubang kecil, dan ikon terpadat dalam keluarga. Jika kumpulan menggunakan beberapa warna, sertakan salah satunya juga.

1. Siapkan PNG

Gunakan ekspor paling bersih yang tersedia. Hapus persegi panjang latar yang tidak disengaja, potong secara konsisten, dan hindari memperbesar sumber kecil yang buram hanya untuk menambah piksel. Panduan persiapan sumber untuk mengonversi PNG ke SVG tanpa kehilangan kualitas membahas detail khusus penjiplakan.

Simpan salinan setiap sumber asli yang belum diubah. Pembersihan lebih mudah dinilai ketika Anda dapat membandingkan SVG dengan sumber alih-alih mengandalkan ingatan.

2. Jiplak ikon sampel

Gunakan vectorizer otomatis atau alat penjiplakan dalam perangkat lunak desain. Alur Image Trace Illustrator saat ini menyediakan kontrol untuk warna, path, sudut, dan noise. Fitur Vectorize Figma saat ini menawarkan mode warna setelah penjiplakan dan menyatakan bahwa gambar kompleks atau beresolusi rendah mungkin tidak dapat divektorisasi dengan baik (Adobe Image Trace; Figma Vectorize).

Untuk cara berbasis browser, unggah sampel ke konverter PNG-ke-SVG PerfectVector. Bandingkan pratinjau dengan sumber asli, periksa bentuk dan area warna, lalu unduh SVG yang ingin Anda seragamkan dalam editor vektor. Proses kelompok representatif sebelum mengerjakan seluruh folder.

Jika Figma merupakan editor master kit Anda, alur Figma Vectorize versus SVG eksternal membantu membandingkan kedua cara pada sampel yang sama. Nilai bentuk setelah impor, termasuk lubang dan area warna yang perlu Anda edit.

3. Periksa path, bukan hanya pratinjau

Buka setiap hasil dalam editor vektor dan pilih bentuknya. Path SVG dibangun dari perintah dan koordinat, termasuk segmen garis dan kurva yang didefinisikan dalam spesifikasi path SVG 2. Anda membutuhkan node yang cukup untuk mempertahankan siluet, tanpa satu angka target universal.

Cari:

• rangkaian node padat di sekitar kurva sederhana;
• bintik tersisa atau persegi panjang latar;
• salinan tepi yang sama yang bertumpang tindih;
• fragmen warna kecil akibat antialias;
• lubang atau ruang dalam yang tertutup selama penjiplakan;
• satu persegi panjang raster, bukan path yang dapat dipilih.

Jika bentuk sederhana memiliki terlalu banyak titik, gunakan diagnosis terlalu banyak node sebelum menyederhanakannya. Pembersihan agresif dapat menggeser sudut dan menutup ruang kecil, jadi bandingkan path yang diedit dengan PNG.

Seragamkan ikon sebagai satu keluarga

Setelah struktur hasil penjiplakan sampel baik, tempatkan pada grid bersama dan periksa bersama. Di sinilah kumpulan menjadi sistem.

Pemeriksaan seluruh kumpulan

Periksa kumpulan pada ukuran antarmuka sebenarnya dan pembesaran pengeditan yang lebih besar:

Koreksi optis diperbolehkan. Lingkaran mungkin perlu sedikit melampaui kotak yang memuat persegi agar keduanya tampak sama besar. Aturannya adalah persepsi konsisten, didukung grid yang didokumentasikan, alih-alih memaksa setiap bentuk ke batas geometris identik. Alur kerja kartu jadwal visual yang dapat dicetak menerapkan pembedaan ini pada kotak gambar, label terpisah, dan halaman PDF yang diukur.

Untuk kumpulan gambar rutinitas yang membutuhkan pengeditan bentuk sebelum tata letak kartu, gunakan konverter karya dukungan visual pada satu gambar representatif. Pisahkan label dan periksa bahwa gambar hasil konversi masih menyampaikan makna yang dimaksud.

Penerapannya dengan PerfectVector

PerfectVector sesuai untuk tahap penjiplakan antara persiapan sumber dan penyeragaman kumpulan. Gunakan untuk membangun ulang sampel PNG representatif sebagai bentuk vektor yang dapat diedit, lalu nilai keluaran berdasarkan kriteria yang penting bagi kit ini:

1. Apakah setiap ikon mempertahankan siluet dan ruang negatifnya?
2. Dapatkah Anda memilih dan mewarnai ulang area yang dimaksud?
3. Apakah kurva menggunakan kumpulan node yang dapat dikelola?
4. Apakah hasil lebih mudah diseragamkan daripada penjiplakan manual atau bawaan aplikasi?

Jika sampel lulus, konversikan PNG lain yang sesuai dan masukkan ke berkas master yang sama untuk pemeriksaan seluruh kumpulan. Jika gagal, ubah sumber atau metode penjiplakan sebelum memproses lebih banyak ikon. PerfectVector tidak menggantikan keputusan perataan optis dan penamaan yang menjadi tanggung jawab sistem desain.

Bersihkan tanpa kehilangan sumber

Simpan dua lapisan berkas:

• Arsip sumber: PNG yang belum diubah, berkas desain asli yang tersedia, dan catatan asal-usul.
• Master yang dapat diedit: ikon vektor yang sudah diseragamkan pada grid bersama.
• Ekspor penyerahan: SVG yang dioptimalkan dan digunakan produk.

Lakukan pengeditan bentuk dalam master, lalu hasilkan ulang berkas penyerahan. Hindari mengedit ekspor terpisah secara manual karena perbaikan akan berbeda antar salinan. Jika SVG membutuhkan pewarnaan ulang, perubahan bentuk, atau koreksi kanvas, gunakan alur pengeditan SVG dan kembalikan geometri yang diperbaiki ke kumpulan master.

Ketika penyerahan menggunakan ikon web yang dapat digunakan kembali, ikuti alur sprite symbol SVG setelah karya disetujui. Alur tersebut memeriksa ID symbol, referensi bersarang, batas koordinat, aturan paint, dan nama instans sebelum kumpulan masuk ke aplikasi. Jika antarmuka menggambar ikon pada canvas, petakan path SVG ke canvas dengan Path2D dan verifikasi transformasi koordinat, warna, bukaan, serta resolusi buffer gambar terhadap master SVG.

Ketika Penpot merupakan tujuan pustaka desain, sisipkan sampel SVG ke kanvas dan uji satu area warna serta satu kontur sebelum menambahkan seluruh kit. Panduan impor SVG Penpot membedakan impor berkas proyek dari penyisipan karya dan menjelaskan cara memeriksa bentuk bawaan, konten SVG mentah, dan label yang dapat diedit. Ini menangkap ikon yang tampak benar tetapi tidak mendukung pengeditan yang dibutuhkan kit.

Sebelum penyerahan, uji beberapa ikon di setiap lingkungan yang penting: pustaka desain, komponen aplikasi, dan langkah build atau optimasi apa pun. Periksa keadaan nonaktif dan warna terbalik jika sistem menggunakannya. Berkas yang bersih secara struktur tetap dapat gagal dalam kit jika asumsi warna atau ukurannya tidak sesuai dengan komponen. Jika Android merupakan tujuan, gunakan daftar pemeriksaan impor PNG-ke-VectorDrawable untuk memverifikasi ukuran viewport, fill, kompleksitas path, dan dukungan pengimpor sebelum aset masuk ke aplikasi. Untuk proyek Godot, gunakan daftar pemeriksaan impor SVG Godot untuk memilih jenis impor tekstur dan memverifikasi ukuran raster, oversampling, serta karya yang didukung. Untuk proyek Unity, gunakan daftar pemeriksaan impor SVG Unity untuk memilih pengimpor yang kompatibel dengan editor dan memverifikasi tujuan UI Toolkit atau sprite.

Untuk proyek SwiftUI, periksa alur katalog aset dan rendering SVG untuk mengonfirmasi sumber daya gambar bernama, perilaku warna original atau template, dan ukuran tampilan akhir.

Daftar pemeriksaan penyerahan UI kit

• Setiap ikon hasil penjiplakan berasal dari sumber paling bersih yang tersedia.
• Ikon menggunakan viewBox, padding, dan aturan perataan bersama yang didokumentasikan.
• Ukuran optis dan bobot tampak konsisten pada ukuran UI sebenarnya.
• Ikon berisi maupun ikon ber-stroke mengikuti model yang dinyatakan sistem.
• Area warna dipetakan secara dapat diprediksi ke palet atau aturan token yang disetujui.
• Kurva menggunakan node yang cukup untuk kesetiaan tanpa kepadatan path yang jelas.
• Tidak ada SVG yang memuat raster tertanam, kotak latar, atau tepi duplikat yang tidak disengaja.
• Nama berkas dan komponen unik dan stabil.
• Kumpulan hasil ekspor telah diuji setelah langkah optimasi normal produk.
• Arsip sumber, master yang dapat diedit, dan berkas penyerahan disimpan terpisah.

FAQ

Dapatkah saya mengonversi semua ikon PNG secara batch sebelum membersihkannya? Bisa, tetapi sampel representatif lebih aman. Konversikan beberapa ikon yang mencakup bentuk tersulit dalam kumpulan, tetapkan aturan grid dan path, lalu proses sisanya. Jika tidak, satu pilihan penjiplakan yang buruk dapat menghasilkan pembersihan berulang di seluruh folder.

Haruskah setiap ikon SVG menggunakan viewBox yang sama? Ikon yang menggunakan satu komponen UI biasanya mendapat manfaat dari viewBox yang sama, tetapi karya di dalamnya mungkin membutuhkan penyesuaian optis. Pertahankan ruang koordinat konsisten sambil mengizinkan lingkaran, bentuk runcing, atau ikon sangat padat menggunakan pelampauan batas atau perubahan padding yang didokumentasikan.

Berapa banyak node yang seharusnya dimiliki ikon UI? Tidak ada angka universal. Gunakan node sesedikit mungkin yang mempertahankan siluet, sudut, dan ruang negatif yang dimaksud. Bandingkan ikon dengan kompleksitas serupa dan selidiki kurva sederhana yang memuat rangkaian titik padat.

Haruskah saya menyimpan ikon PNG setelah kumpulan SVG selesai? Ya. Simpan PNG asli dan sumber desain sebelumnya dalam arsip. Berkas tersebut menyediakan asal-usul dan referensi visual ketika penjiplakan perlu diulang. Gunakan master vektor yang sudah diseragamkan untuk pengeditan dan hasilkan SVG penyerahan dari master tersebut.

Sources

1. W3C — SVG Coordinate Systems, Transformations and Units — Mendefinisikan viewport SVG, sistem koordinat, viewBox, dan pemetaan karya ke area yang ditampilkan.
2. W3C — SVG Paths — Mendefinisikan perintah garis dan kurva yang membentuk geometri path SVG yang dapat diedit.
3. W3C — SVG Embedded Content — Mengonfirmasi bahwa SVG dapat memuat konten gambar raster, bukan path vektor.
4. Adobe Illustrator — Vectorize images using Image Trace — Mendokumentasikan alur penjiplakan raster saat ini dan keluaran path yang dapat diedit.
5. Figma Learn — Convert static images to vector layers — Mendokumentasikan alur Vectorize Figma saat ini, mode warna, dan keterbatasan gambar sumber.

---

Mulailah dengan beberapa ikon tersulit, bukan seluruh folder. Konversikan PNG sampel ke SVG, periksa path dan area warnanya, lalu seragamkan hasil terbaik berdasarkan aturan UI kit Anda sebelum memperluas alur kerja.