Antarmuka

Cara Mengubah Ikon Menjadi Vektor

6 mnt baca · Diterbitkan 2 Agu 2026 · Diperbarui 2 Okt 2026

Ikon hidup di semua ukuran sekaligus. File yang sama adalah butir berukuran 16 piksel di menu, tombol 24 piksel, ikon aplikasi 512 piksel, dan kadang-kadang, poster. Itu hanya berlaku kalau geometri di baliknya jujur: node sedikit, jalur tertutup, dan tanpa sisa pinggiran dari antialiasing raster apa pun yang menjadi titik awal Anda.

Karena itu, mengubah ikon menjadi vektor lebih soal apa yang Anda berikan padanya dan apa yang Anda pangkas setelahnya daripada soal konversinya sendiri. Panduan ini membahas keduanya.

Mulai dari raster terbesar yang Anda punya, lalu ratakan

Antialiasing adalah musuh di sini. Pada ikon 32 piksel, piksel abu-abu lembut di sepanjang tiap diagonal adalah bagian besar dari gambar, dan mesin vektorisasi tak punya cara mengetahui bahwa piksel itu dimaksudkan sebagai tepi tegas, bukan nada tengah sungguhan. Berikan versi 512 piksel dan tepi yang sama menjadi transisi satu piksel berdampingan dengan empat puluh sembilan piksel bersih — bentuknya tak mungkin salah baca.

Kalau ikonnya monokrom, jadikan benar-benar monokrom sebelum mengonversi: hitam murni di atas transparan, atau hitam murni di atas putih, tanpa bayangan jatuh dan tanpa cahaya dalam yang samar. Masing-masing efek itu berubah menjadi bentuk di keluaran, dan bentuk di keluaran berarti node yang harus Anda cari dan hapus.

Nilai hasilnya dari jumlah node, bukan dari tampilannya pada 100%

Pada ukuran yang Anda lihat, hampir semua hasil penelusuran tampak baik. Ujian yang sesungguhnya adalah jumlah node: buka jalurnya dan hitung titik-titiknya. Ikon yang digambar baik hanya punya titik di tempat kurva benar-benar berubah arah — persegi membulat punya delapan, lingkaran empat, chevron tiga atau enam. Kalau bentuk sederhana kembali dengan enam puluh titik, mesin vektorisasi sedang mengejar derau piksel, dan bentuk itu akan dirender lambat, sulit diedit, dan tampak salah diam-diam saat diskalakan.

Pada paket Lite ke atas, pengaturan detail-lah yang mengatur hal ini secara langsung: detail lebih rendah berarti penggabungan lebih agresif dan node lebih sedikit serta lebih bersih. Turunkan sampai sudut-sudut baru saja mulai mengendur, lalu naikkan kembali satu langkah. Pada Free, levelnya dipilih otomatis, dan cara memengaruhinya adalah kualitas sumbernya.

Selaraskan ke kisi piksel setelahnya, bukan sebelumnya

Set ikon punya kisi — biasanya 24×24 dengan margin aman dua piksel, atau 16×16 untuk antarmuka yang padat. Jalur hasil penelusuran mendarat di mana pun pikselnya berada, yang dekat dengan kisi itu tetapi tidak tepat di atasnya, dan pada ukuran render kecil, 'dekat'-lah yang membuat satu ikon dalam satu baris tampak setebal setengah piksel lebih berat daripada tetangganya.

Pasang (snap) jalur jadi ke koordinat bulat di editor Anda dan atur viewBox SVG ke kisi Anda. Ini merepotkan pada kali pertama dan mekanis setelahnya, dan justru inilah yang membedakan set ikon yang tampak dirancang dari yang tampak sekadar dikonversi.

Satu ketebalan, satu gaya, satu batch

Kalau Anda membangun ulang satu set penuh, konversikan semuanya dalam satu batch agar melewati pengaturan yang identik, lalu samakan tebal garis secara manual di seluruh set. Keluarga ikon terasa sebagai keluarga karena garis-garisnya serasi; set yang ditelusuri satu per satu sepanjang beberapa sesi tidak akan serasi, dan ketidakseraan itu terlihat bahkan saat tak satu pun ikon tampak salah.

Konversi batch tersedia mulai paket Pro, yang menerima 30 file sekaligus. Di bawahnya, file dikonversi satu per satu — untuk satu set berisi dua puluh, itu beberapa menit klik, bukan penghalang.

Langkah demi langkah

  1. 01

    Dapatkan versi raster terbesar

    512 piksel atau lebih kalau ada. Sumber 32 piksel sebagian besar adalah antialiasing, dan antialiasing-lah yang selalu salah dibaca mesin vektorisasi.

  2. 02

    Ratakan ke satu warna

    Hapus bayangan jatuh, cahaya dalam, dan gradien sebelum mengonversi. Masing-masing menjadi bentuk ekstra di keluaran.

  3. 03

    Konversi ke SVG

    Unggah dan unduh hasilnya. SVG adalah format native untuk ikon web maupun aplikasi.

  4. 04

    Periksa jumlah node

    Buka jalurnya di editor Anda. Bentuk sederhana seharusnya punya segelintir titik, bukan belasan. Kalau belasan, sumbernya mengandung derau.

  5. 05

    Pasang ke kisi ikon Anda

    Selaraskan jalur ke koordinat bulat dan atur viewBox ke ukuran kisi Anda, agar ikon terrender tajam pada 16 dan 24 piksel.

Masalah umum

Ikonnya tampak buram pada 16 piksel padahal sudah vektor
Jalurnya tidak selaras dengan kisi piksel, sehingga perender mengantialiasi tiap tepi. Pasang koordinat ke angka bulat dan atur viewBox agar cocok dengan kisi Anda.
Bentuk sederhana kembali dengan belasan node
Sumbernya mengandung antialiasing atau derau JPEG yang dibaca mesin sebagai detail. Pakai sumber yang lebih besar dan bersih; pada paket Lite ke atas, turunkan level detail.
Sudut yang seharusnya tajam menjadi membulat
Penghalusannya terlalu tinggi. Pada paket Lite ke atas, turunkan satu tingkat — sudut sungguhan tetap tajam hingga Strong, dan hanya Maximum yang membulatkan segalanya.
Ikonnya punya garis luar samar berwarna berbeda
Itu pinggiran antialiasing dari gambar asli yang tertelusur sebagai bentuk tipis tersendiri. Hapus di editor, dan lain kali ratakan dulu sumbernya ke satu warna bertepi tegas.

Pertanyaan yang sering diajukan

Seberapa besar ukuran ikon sumber seharusnya?
Sebesar yang ada — 512 piksel atau lebih sudah nyaman. Di bawah sekitar 64 piksel, antialiasing menjadi bagian besar gambar dan mesin vektorisasi tak bisa membedakan tepi lembut dari tepi sungguhan; dari situlah kurva bergelombang berasal.
Bisakah saya mengonversi satu set ikon sekaligus?
Konversi batch tersedia mulai paket Pro, yang menerima 30 file sekali jalan; Studio 50 dan Agency 100. Mengonversi satu set dalam satu batch penting bukan hanya untuk kecepatan — setiap file melewati pengaturan yang identik, sehingga ikon-ikonnya keluar konsisten satu sama lain.
Apakah transparansi bertahan?
Bertahan, asalkan sumbernya memilikinya. Area transparan PNG atau WebP tetap kosong di SVG. JPEG tidak punya transparansi sama sekali, jadi ikon dari JPEG datang dengan latarnya sebagai bentuk solid yang bisa Anda hapus.
Sebaiknya ikon berupa SVG atau font?
SVG. Icon font adalah solusi dadakan untuk era browser yang sudah berakhir: tidak bisa menampilkan banyak warna, rusak saat file font hilang, dan dibaca pembaca layar sebagai teks. Konversikan ke SVG dan pakai secara inline atau sebagai sprite.

Panduan terkait

Cookie

Kami memakai cookie Google Analytics untuk mengetahui halaman mana yang dikunjungi dan di mana pengunjung tersendat — tanpa iklan, tanpa pembuatan profil, tidak ada yang dijual. Tolak, dan situs tetap berfungsi sama persis. Rinciannya ada di Kebijakan Privasi.