Cara Mengedit SVG (dan Mengapa File yang Bersih Jauh Lebih Mudah)

Ada dua cara untuk mengedit SVG. Anda bisa membukanya di editor visual lalu mengeklik bentuk untuk mengubah warna, ukuran, atau posisinya, atau membuka kodenya dan mengubahnya langsung, karena SVG pada dasarnya hanyalah file teks. Kebanyakan orang menginginkan cara pertama, biasanya untuk mengganti warna atau mengubah ukuran ikon, dan editor visual bisa menanganinya dalam hitungan detik.

Bagian yang jarang disebutkan tutorial: seberapa mudah semua ini sangat bergantung pada bagaimana SVG itu dibuat. File yang bersih dengan beberapa bentuk rapi bisa diedit dalam hitungan detik. File yang berantakan, jenis yang sering dihasilkan konverter cepat, bisa membawa ribuan titik liar dan satu warna yang terpecah menjadi ratusan serpihan; setelah itu, "tinggal klik bentuknya lalu ganti warnanya" tidak lagi berlaku. Panduan ini membahas kedua metode pengeditan, serta cara mengenali jenis file yang sedang Anda pegang.

Versi singkat

• Dua cara mengedit: secara visual di editor (ubah warna, ukuran, bentuk) atau langsung di kode SVG (karena ini hanya teks).
• Editor visual gratis: Inkscape. Pro: Illustrator. Di browser: Figma atau editor SVG online gratis. Kode: VS Code atau editor teks apa pun.
• Pekerjaan paling umum, mengganti warna: pilih bentuk, ubah fill-nya. Cepat pada file yang bersih, menyakitkan pada file yang terfragmentasi.
• Edit kode saat Anda perlu menjaga nama class dan ID tetap utuh, mengubah viewBox, atau membuat penyesuaian cepat tanpa membuka aplikasi.
• Jika bentuk yang Anda inginkan tidak bisa dipilih, masalahnya ada pada file, bukan editornya. Konversi yang lebih bersih sering kali menjadi perbaikan yang sebenarnya.

Pertama, apa sebenarnya isi SVG

SVG bisa diedit karena sifat dasarnya: sekumpulan bentuk yang dideskripsikan sebagai matematika, ditulis dalam teks biasa (tepatnya XML). Lingkaran disimpan sebagai pusat dan radius, logo sebagai rangkaian path, masing-masing dengan warna fill sendiri. (Ini versi yang lebih panjang jika vektor masih baru bagi Anda.)

Itulah mengapa Anda bisa mengubah warna atau ukurannya tanpa membuatnya buram, dan mengapa SVG bisa dibuka ke dua jenis pengeditan yang benar-benar berbeda. Buka di editor visual, Anda bekerja dengan bentuknya. Buka di editor teks, Anda bekerja dengan kode yang mendeskripsikan bentuk tersebut. File yang sama, dua pintu masuk.

Periksa satu hal sebelum apa pun: buka SVG dan coba klik satu bentuk. Jika Anda bisa memilih dan menggesernya sendiri, itu vektor sungguhan yang bisa diedit. Jika seluruh gambar terpilih sebagai satu blok dan pecah saat diperbesar, kemungkinan itu gambar raster yang dibungkus dalam file .svg, vektor "palsu" yang sebenarnya tidak bisa diedit. Tidak ada editor yang memperbaiki itu; filenya harus dikonversi dengan benar terlebih dahulu.

Dua cara mengedit SVG, dan kapan memakai masing-masing

Anda ingin...	Metode terbaik
Mengubah warna, ukuran, atau posisi bentuk	Editor visual (Inkscape, Illustrator, Figma)
Mengedit teks atau mengganti beberapa warna dengan cepat	Editor visual, atau kode untuk perubahan sekali pakai
Menjaga nama class / ID untuk CSS atau animasi	Edit kode secara langsung
Mengubah viewBox, dimensi, atau nilai hex	Edit kode secara langsung
Menggambar ulang atau membentuk ulang path dengan tangan	Editor visual

Sebagian besar pengeditan dilakukan secara visual. Gunakan kode saat Anda seorang pengembang yang membutuhkan markup tetap persis seperti semula, sesuatu yang tidak selalu dijaga oleh editor visual (lebih lanjut tentang itu di bawah).

Mengedit SVG secara visual

Ini jalur yang diinginkan kebanyakan orang, dan mencakup mengubah warna, ukuran, bentuk, serta menghapus bagian.

Pilih editor

• Inkscape gratis, sumber terbuka, dan berjalan di Mac, Windows, serta Linux. Ini jawaban paling umum untuk "saya mengedit SVG pakai apa," dan memang layak.
• Adobe Illustrator adalah standar profesional berbayar, dan memberi Anda kontrol paling besar jika Anda sudah memilikinya.
• Figma berjalan di browser dan bagus untuk pengeditan ringan serta penggantian warna, itulah mengapa banyak tim produk memakainya.
• Editor online gratis seperti Boxy SVG, atau editor SVG web cepat, cukup untuk perubahan kecil tanpa perlu memasang apa pun.

Lakukan edit

Langkah-langkahnya sama di semua editor:

1. Buka file di editor Anda (File -> Open, atau seret masuk).
2. Ungroup jika perlu. SVG hasil konversi dan ekspor sering datang sebagai satu grup terkunci. Pilih semua lalu Ungroup (di Illustrator dan Inkscape) supaya Anda bisa menjangkau bentuk individual.
3. Pilih bentuk yang Anda inginkan dengan alat selection atau direct-selection.
4. Ubah. Tetapkan warna fill baru, seret handle untuk mengubah ukuran, pindahkan, edit teks, atau hapus bagian yang tidak diperlukan.
5. Simpan atau ekspor sebagai SVG setelah selesai.

Edit paling umum: mengganti warna

Sebagian besar pertanyaan "bagaimana cara mengedit SVG" sebenarnya berarti "bagaimana cara mengganti warnanya." Pada file yang bersih, ini cepat: klik bentuknya, pilih fill baru, selesai. Setiap warna adalah bentuk tersendiri yang bisa diedit, jadi mengubah biru merek Anda menjadi hijau hanya butuh satu klik per bentuk.

Ini juga persis titik di mana file yang berantakan mulai runtuh, yang akan kita bahas di bagian berikutnya.

Mengedit kode SVG secara langsung

Karena SVG adalah teks, Anda bisa membukanya di VS Code, Notepad, atau editor teks apa pun dan mengubahnya langsung. Ini jalur pengembang, dan untuk beberapa pekerjaan justru lebih cepat dan lebih aman daripada aplikasi visual:

• Mengganti warna: cari fill="#3b82f6" pada bentuknya lalu ubah nilai hex.
• Mengubah ukuran kanvas: edit width, height, atau viewBox.
• Menjaga hook tetap utuh: ini yang besar. Editor visual seperti Illustrator sering menulis ulang markup saat menyimpan, mengganti nama atau menghapus atribut class dan id yang dibutuhkan CSS atau JavaScript Anda. Jika SVG Anda sudah dihubungkan untuk styling atau animasi, mengedit kode dengan tangan adalah satu-satunya cara andal untuk menjaga hook tersebut.

Tradeoff-nya sederhana: mengedit kode sangat bagus untuk perubahan kecil dan presisi, serta apa pun yang menyentuh class, ID, atau animasi. Ini alat yang keliru untuk membentuk ulang kurva atau mengganti warna ilustrasi yang ramai. Untuk itu, gunakan editor visual.

Mengapa beberapa SVG sangat sulit diedit (dan cara memperbaikinya)

Inilah yang tidak diberi tahu halaman alat mana pun: masalahnya jarang ada pada editor. Masalahnya ada pada file.

Buka SVG yang bersih dan proses pengeditan terasa tenang. Ada segelintir bentuk bernama, satu fill per bentuk, dan jumlah node rendah, sehingga Anda bisa mengeklik tepat pada bagian yang dimaksud dan mengubah warnanya dalam sedetik.

Buka file yang berantakan, biasanya hasil auto-trace dari konverter gratis cepat, dan edit yang sama berubah menyiksa:

• Satu warna terpecah menjadi ratusan serpihan kecil, sehingga tidak ada satu "bentuk biru" yang bisa diklik. Yang ada ratusan.
• Kurva halus dijejali ribuan titik anchor, sehingga membentuk ulang apa pun hampir mustahil dan editor menjadi lambat. (Ini adalah masalah terlalu banyak node secara lengkap.)
• Persegi panjang latar yang tersisa dan tepi yang terpotong menghalangi pekerjaan.

Saat Anda menemui ini, solusinya biasanya bukan editor yang lebih baik atau kesabaran lebih banyak. Solusinya adalah file awal yang lebih bersih. Mengonversi ulang gambar asli menjadi SVG yang rapi memberi Anda sesuatu yang benar-benar bisa diedit.

Seperti apa ini dengan PerfectVector

SVG yang paling mudah diedit adalah SVG yang bersih, dan itulah bagian yang dirancang PerfectVector untuk dilakukan dengan benar. PerfectVector membangun ulang gambar Anda sebagai path bersih dengan jumlah node rendah dan menjaga setiap warna sebagai bentuk tersendiri yang bisa diedit, sehingga saat hasilnya dibuka di Illustrator, Figma, atau Inkscape, Anda bisa memilih dan mengganti warna seperti yang diasumsikan tutorial.

PerfectVector juga memiliki editor warna bawaan, sehingga Anda bisa mengganti atau menggabungkan warna segera setelah konversi, berdasarkan warna alih-alih berburu path individual. Warna yang lebih sedikit berarti lebih sedikit bentuk untuk dikelola dan file yang lebih mudah diedit setelahnya. Anda bisa mengonversi gambar menjadi SVG yang bersih dan bisa diedit lalu memeriksa path-nya sendiri. Konversi gambar pertama Anda gratis, tanpa kartu kredit.

Ganti warna berdasarkan warna, bukan path

Checklist singkat sebelum mengedit

• Pastikan itu vektor sungguhan. Klik satu bentuk. Jika bentuk itu terpilih sendiri, Anda siap. Jika seluruh gambar terpilih sebagai satu blok dan buram saat diperbesar, konversikan dulu menjadi SVG sungguhan.
• Simpan file asli. Simpan salinan sebelum mulai, terutama jika Anda akan menyentuh kode.
• Pilih metodenya. Editor visual untuk bentuk dan warna; kode untuk class, ID, viewBox, dan penyesuaian kecil.
• Ungroup jika file datang sebagai satu grup terkunci.
• Jika Anda tidak bisa memilih yang Anda inginkan, berhenti melawannya. Filenya terlalu terfragmentasi, dan konversi yang lebih bersih akan menghemat lebih banyak waktu daripada pembersihan manual.

FAQ

Bagaimana cara mengedit SVG secara gratis? Gunakan Inkscape, editor gratis dan sumber terbuka untuk Mac, Windows, dan Linux, untuk pengeditan visual penuh. Untuk perubahan cepat, gunakan editor SVG online gratis di browser, atau buka file di editor teks seperti VS Code dan ubah kodenya langsung. Ketiganya tidak berbayar.

Bagaimana cara mengubah warna SVG? Di editor visual, pilih bentuk lalu tetapkan warna fill baru. Di kode, cari nilai fill bentuk tersebut (seperti fill="#3b82f6") lalu ubah hex-nya. Jika satu warna terpecah ke banyak bentuk, ubah berdasarkan warna alih-alih mengeklik setiap potongan, menggunakan alat yang mengelompokkan warna untuk Anda.

Bisakah saya mengedit SVG di VS Code? Bisa. SVG adalah teks XML, jadi VS Code atau editor teks apa pun dapat membukanya dengan baik. Ini jalur yang tepat untuk mengubah warna hex, viewBox, atau dimensi, serta menjaga atribut class dan id tetap utuh untuk CSS atau animasi. Ini tidak cocok untuk membentuk ulang kurva dengan tangan.

Mengapa saya tidak bisa memilih bentuk individual di SVG saya? Biasanya karena salah satu dari dua alasan. Bentuk-bentuknya masih digrup, jadi pilih semua lalu ungroup terlebih dahulu. Atau filenya adalah gambar raster yang dibungkus dalam .svg, sehingga tidak ada bentuk terpisah untuk dipilih. Jika gambar pecah saat diperbesar, itu kasus kedua, dan Anda perlu mengonversinya menjadi vektor sungguhan.

Bisakah saya mengedit SVG di Canva? Bisa, untuk edit dasar. Canva memungkinkan Anda mengubah warna, ukuran, dan posisi SVG, yang mencakup sebagian besar kebutuhan ringan. Untuk pengeditan path yang presisi, memisahkan bentuk kompleks, atau perubahan level kode, gunakan Inkscape, Illustrator, atau editor teks.

Bagaimana cara mengedit SVG di Windows atau Mac? Alat yang sama bekerja di keduanya. Inkscape berjalan di Windows, Mac, dan Linux; Figma dan editor online berjalan di browser apa pun; VS Code mengedit kode di keduanya. Anda tidak perlu perangkat lunak berbeda untuk sistem operasi berbeda.

---

Pengeditan berjalan lancar saat file sudah bersih sejak awal. Jika file Anda berupa kusut path liar, konversi gambar aslinya menjadi SVG yang bersih dan bisa diedit, lalu mulai dari sesuatu yang benar-benar bisa Anda kerjakan.