Cara Mengubah Warna SVG dan Mengatasi Masalah Umum

Ada tiga cara untuk mengubah warna file SVG, dan semuanya gratis. Unggah ke pengubah warna SVG online lalu klik contoh warna yang ingin diganti. Buka di aplikasi vektor seperti Inkscape, pilih bentuknya, lalu pilih isian baru. Atau buka file di editor teks dan ganti kode heksadesimalnya, karena SVG hanyalah teks. Mengubah warna vektor juga tidak menurunkan kualitas: Anda menulis ulang instruksi, bukan mengecat ulang piksel, sehingga tidak ada yang menjadi buram atau rusak.

Metode yang dipilih bergantung pada isi file. Ketika SVG tidak mau berubah warna, penyebabnya hampir selalu isi file, bukan alat yang digunakan. Panduan ini membahas tiga metode dahulu, lalu diagnosis: enam penyebab umum perubahan warna tidak berhasil, termasuk satu penyebab yang tidak dapat diperbaiki alat warna apa pun.

Tempat SVG menyimpan warnanya

File SVG merupakan daftar bentuk yang ditulis sebagai teks. Setiap bentuk dapat memiliki fill untuk bagian dalam dan stroke untuk garis tepi, seperti dijelaskan dalam panduan isian dan garis tepi SVG MDN. Tidak ada satu “warna gambar” yang dapat Anda ganti di satu tempat. Desain yang terlihat satu warna di layar bisa berupa satu path rapi, atau empat puluh path terpisah yang kebetulan memiliki isian sama.

Itulah inti prosesnya. Setiap metode pewarnaan ulang di bawah hanyalah cara berbeda untuk menemukan bentuk dan menulis ulang fill atau stroke-nya. Itu juga menjelaskan mengapa hasil sangat berbeda antarfile: semakin sedikit dan bersih bentuknya, semakin mudah warnanya diubah.

Pilih metode Anda

Metode 1: pengubah warna SVG online

1. Buka alat warna SVG gratis di browser dan unggah file (alat yang baik juga menerima kode SVG yang ditempel).
2. Alat mencantumkan warna yang ditemukan. Alat yang berguna mengelompokkan isian identik, sehingga “warna biru” menjadi satu contoh warna meskipun digunakan pada puluhan bentuk.
3. Klik contoh warna, pilih penggantinya, dan lihat pratinjau.
4. Unduh hasilnya dan buka sekali di tab browser untuk memastikan.

Ini merupakan metode yang tepat bagi kebanyakan orang dalam kebanyakan situasi. Periksa dua hal sebelum mempercayakan pekerjaan nyata pada sebuah alat: apakah warna garis tepi juga dicantumkan, dan bagaimana gradien ditangani. Jika alat menampilkan lebih sedikit warna daripada yang terlihat di layar, sebagian file merupakan gradien atau gambar yang disematkan, dan penggantian contoh warna biasa tidak akan menjangkaunya.

Metode 2: aplikasi desain vektor

Inkscape gratis dan menyediakan semua yang dibutuhkan untuk pekerjaan ini; Illustrator dan Figma bekerja dengan cara serupa.

1. Buka SVG dan klik bagian yang ingin diubah. Jika seluruh desain terpilih sebagai satu blok, elemen dikelompokkan: klik dua kali untuk masuk ke grup, atau pisahkan grupnya.
2. Ubah isian di panel Fill & Stroke (Inkscape) atau contoh warna isian (Illustrator, Figma).
3. Ketika satu warna visual tersebar pada banyak bentuk, jangan klik satu per satu. Klik kanan sebuah bentuk lalu gunakan Select Same → Fill Color di Inkscape, atau gunakan Select → Same → Fill Color yang didokumentasikan Illustrator. Semua bentuk dengan isian tersebut kini terpilih, dan satu perubahan mewarnai ulang semuanya.
4. Ekspor atau simpan sebagai SVG biasa.

Aplikasi desain juga digunakan untuk pekerjaan selain warna, seperti memindahkan bentuk atau mengubah kurva. Untuk perangkat yang lebih lengkap itu, lihat panduan mengedit SVG.

Metode 3: editor teks

Karena SVG berupa teks, editor apa pun dapat digunakan: Notepad, TextEdit, VS Code.

1. Buka file .svg dan cari fill=.
2. Ubah nilainya, misalnya fill="#1e3a5f" menjadi fill="#c2410c", lalu simpan.
3. Muat ulang file di tab browser untuk memeriksa hasilnya.

Ada tiga hal yang perlu diperhatikan. Warna dapat ditulis sebagai nama (fill="black") maupun nilai heksadesimal. Garis tepi berada di stroke=, bukan fill=. Banyak file hasil ekspor juga tidak menempatkan warna pada bentuk: file menggunakan kelas, dengan nilai heksadesimal sebenarnya dalam blok <style> di dekat bagian atas (.st0{fill:#1e3a5f;}). Edit nilai heksadesimal di blok gaya, dan semua bentuk dengan kelas tersebut akan mengikuti.

Metode ini sangat berguna untuk ikon satu warna, ketika satu operasi cari dan ganti menyelesaikan pekerjaan, serta untuk pemrosesan satu folder. Untuk ilustrasi empat puluh warna, cara ini lambat.

Jika SVG Anda berada di situs web

Bisakah warna SVG diubah dengan CSS? Cara paling langsung adalah markup SVG inline dalam HTML. Dengan itu, fill bekerja sebagai properti CSS, dan mengatur isian menjadi currentColor memungkinkan ikon mewarisi warna teks di sekitarnya. SVG yang dimuat sebagai <img> eksternal diperlakukan sebagai gambar; MDN menyatakan bahwa JavaScript tidak dapat memanipulasi struktur SVG dalam pengaturan tersebut, dan gaya halaman tidak memilih path internalnya secara langsung.

Jika Anda tidak dapat menempatkan file secara inline, gunakan kembali metode pengeditan file di atas: ubah warna dalam SVG itu sendiri lalu muat ulang. Untuk memilih cara penyajian, bandingkan SVG inline dengan gambar eksternal menggunakan gambar yang sama dan uji CSS halaman.

Untuk siluet antarmuka satu warna, mask SVG CSS dan bentuk ikon transparan menawarkan cara lain: warnai elemen ikon melalui CSS sambil membiarkan warna path gambar sumber tetap sama.

Untuk efek warna yang dapat dibatalkan, bandingkan feColorMatrix dengan pengeditan isian langsung. Filter mengubah warna yang dirender sambil mempertahankan warna sumber, yang penting saat menyerahkan gambar yang dapat diedit.

Mengapa SVG Anda tidak mau berubah warna

Inilah bagian yang dilewatkan tutorial, dan tempat sebagian besar perubahan warna sebenarnya gagal. Periksa tabel dari atas ke bawah.

Dua di antaranya perlu dibahas lebih dekat.

Kejutan kotak latar belakang

Beberapa SVG memiliki persegi panjang latar seukuran penuh yang tidak terlihat di atas halaman putih. Warnai ulang “semuanya” dan kotak itu muncul sebagai blok berwarna di belakang desain; beberapa aplikasi juga memilihnya saat Anda mengklik. Itu bentuk biasa, jadi pilih lalu hapus, atau beri warna yang benar-benar Anda inginkan. Jika kotak muncul putih di perangkat lunak lain, itu masalah terkait tetapi berbeda, yang dibahas dalam panduan mempertahankan latar belakang transparan.

SVG yang bukan vektor

Kasus yang sulit terlihat seperti ini: tidak ada bentuk yang dapat dipilih, semua pengeditan isian tidak berpengaruh, dan ketika diperbesar, tepinya memperlihatkan piksel. Buka file di editor teks, dan alih-alih elemen <path>, Anda menemukan satu tag <image> berisi deretan panjang teks base64. Itu gambar raster yang dibungkus sebagai .svg. Konverter yang tidak benar-benar menelusuri menghasilkan file seperti ini, dan alat warna apa pun tidak bisa membantu karena tidak ada bentuk untuk diwarnai ulang. Filter yang “mewarnai” hanya memberi tint pada piksel, biasanya dengan hasil buruk. Kedua file terlihat sama di layar, tetapi perbedaannya jelas dalam kode:

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

Solusinya adalah kembali ke gambar itu sendiri, idealnya PNG atau JPG asli, lalu mengonversinya menjadi vektor sebenarnya dengan path nyata. Panduan SVG yang masih terlihat berpiksel membahas bagaimana file semacam ini muncul dan cara mengenalinya sebelum mengandalkannya. Setelah bentuk nyata tersedia, semua metode dalam panduan ini mulai berfungsi.

Mewarnai ulang file potong: setiap warna adalah lapisan

Cricut atau Silhouette memperlakukan setiap warna dalam SVG sebagai lapisan, dan setiap lapisan berarti satu proses tambahan, satu lembar bahan tambahan, dan lebih banyak sisa potongan yang harus dibuang. Jadi, mengubah warna file potong sebenarnya merupakan perencanaan lapisan: memberikan isian sama pada dua elemen menggabungkannya menjadi satu proses potong, sedangkan memisahkan warna membuat lapisan baru.

Karena itu, satu langkah pengeditan sangat berguna bagi perajin: menggabungkan warna yang hampir sama. Gambar hasil penelusuran sering memiliki tiga warna biru yang hampir identik, yang menambah lapisan tanpa menambah perbedaan terlihat. Gabungkan menjadi satu agar file dipotong lebih cepat dan sisa potongannya jauh lebih mudah dibuang. Alur kerja pengurangan palet SVG menunjukkan cara menggabungkan berdasarkan peran visual tanpa menghilangkan kontras atau makna operasi. Jika Anda sengaja membuat desain berlapis, panduan SVG berlapis kami membahas seluruh alur kerja, dan halaman SVG Cricut membahas penyiapan gambar untuk mesin potong dari awal hingga akhir.

Jika Anda membutuhkan unduhan terpisah setelah mengubah warna, simpan setiap warna yang sama persis sebagai file SVG dengan posisi selaras.

Bagaimana proses ini berjalan dengan PerfectVector

Satu batasan perlu dijelaskan dahulu: PerfectVector tidak mengedit file SVG yang sudah Anda miliki. Alat ini mengonversi gambar (PNG, JPG, WebP) menjadi SVG. Namun, banyak kesulitan “bagaimana cara mewarnai ulang SVG ini” berasal dari langkah konversi tersebut: file yang menyulitkan biasanya merupakan penelusuran berantakan, atau sama sekali bukan vektor sebenarnya.

Jadi, ketika SVG berasal dari gambar, atau Anda masih memiliki gambar asli, perubahan warna paling bersih dilakukan dari sumber. Konversikan gambar menjadi SVG yang dibuat agar mudah diedit: path bersih, jumlah node rendah, dan setiap warna dipertahankan sebagai bentuk tersendiri yang dapat diedit. Kemudian gunakan editor warna bawaan sebelum mengunduh untuk mengganti warna atau menggabungkan warna serupa, berdasarkan warna tanpa harus mencari path. Anda mendapatkan palet yang diinginkan sekaligus file lebih sederhana, dan konversi awal Anda gratis tanpa kartu kredit.

Yang tidak dapat dilakukan perubahan warna

• Gradien bukan satu contoh warna. Gradien merupakan peralihan antara titik warna. Anda dapat mengedit titik tersebut, tetapi operasi “ganti warna ini” biasa mungkin hanya mengubah sebagian peralihan, sehingga gambar gradien terlihat aneh setelah penggantian sederhana.
• Warna layar berbeda dari warna cetak. SVG menyimpan instruksi warna yang berorientasi layar, sementara pekerjaan cetak mungkin membutuhkan warna merek, warna spot, atau komposisi hitam yang tepat. Jika ekspor mengubah tampilan, temukan penyebab pergeseran warna SVG sebelum mengganti palet; format produksi yang diminta percetakan tetap menjadi acuan warna.
• Perubahan warna tidak membersihkan geometri. Isian baru tidak menggabungkan serpihan, menutup celah, atau mengurangi node. Penelusuran berantakan dengan warna baru tetaplah penelusuran berantakan.

Sebelum menyimpan

• Buka file yang sudah diwarnai ulang di tab browser baru dan bandingkan dengan aslinya.
• Periksa garis tepi: apakah stroke ikut berubah bersama isian di bagian yang seharusnya?
• Cari persegi panjang latar yang mungkin tidak sengaja Anda warnai ulang.
• Untuk file potong, hitung lapisan setelah menggabungkan warna; lebih sedikit hampir selalu lebih baik.
• Simpan salinan file asli yang belum disentuh.

FAQ

Bagaimana cara mengubah warna file SVG tanpa Illustrator atau Photoshop? Gunakan pengubah warna SVG online gratis (unggah, klik contoh warna, unduh), atau Inkscape, editor vektor desktop gratis. Untuk ikon satu warna, membuka file di editor teks mana pun dan mengubah nilai heksadesimal setelah fill= juga berhasil. Semua cara ini tidak membutuhkan biaya.

Mengapa SVG saya tetap hitam apa pun yang dicoba? Jika berada di situs web, CSS tidak dapat mengubah gaya SVG yang dimuat melalui tag img; tempatkan secara inline atau edit file. Jika berada di editor, periksa apakah grup menghalangi, warna berasal dari stroke, atau warna ditentukan dalam blok gaya. Jika tidak ada yang dapat dipilih dan pembesaran menunjukkan piksel, file merupakan raster yang dibungkus sebagai .svg dan tidak memiliki bentuk untuk diwarnai ulang.

Bisakah SVG diwarnai ulang di Canva? Editor SVG khusus Canva menyatakan bahwa Anda dapat mengunggah, mengubah warna, dan mengunduh SVG secara gratis tanpa watermark. Fitur SVG yang kompleks tetap dapat dirender berbeda antareditor, jadi periksa file yang diunduh sebelum mengganti aslinya.

Bisakah satu file SVG menggunakan lebih dari satu warna? Ya. Setiap bentuk dalam file memiliki isian dan garis tepi sendiri, sehingga SVG dapat memiliki warna sebanyak jumlah bentuknya, ditambah gradien. Itulah juga sebabnya mengubah warna gambar berwarna-warni berarti mengubah beberapa isian, bukan satu pengaturan global.

Bagaimana cara mengubah warna SVG untuk proyek Cricut? Anda dapat mengubah warna lapisan dalam Cricut Design Space, tetapi perubahan berlaku per lapisan, bukan per bentuk. Untuk mengatur ulang bagian yang berbagi warna, dan dengan demikian dipotong bersama, edit SVG sebelum mengunggah: gabungkan warna yang diinginkan pada satu lapisan, dan berikan isian terpisah pada bagian yang harus dipotong sendiri.

Apakah mengubah warna SVG menurunkan kualitas? Tidak. Warna vektor merupakan instruksi dalam teks, sehingga mengubahnya menulis ulang instruksi tanpa menyentuh geometri. Berbeda dengan mengedit PNG, Anda dapat mengubah warna SVG sesering yang diinginkan tanpa kehilangan kualitas.

Sources

1. MDN: Isian dan garis tepi SVG — Menjelaskan fill, stroke, opasitas, dan properti pewarnaan SVG terkait.
2. MDN: Menambahkan grafis vektor ke web — Membandingkan SVG inline dengan SVG yang dimuat melalui <img>.
3. Adobe Illustrator: Memilih objek dengan isian dan garis tepi yang sama — Mendokumentasikan pemilihan gambar berdasarkan atribut pewarnaan yang sama.
4. W3C: Konten tersemat SVG 2 — Mendefinisikan konten raster <image> di dalam dokumen SVG.
5. Canva: Editor SVG — Sumber terkini untuk klaim unggahan, perubahan warna, dan unduhan SVG Canva.

Mengubah warna SVG cepat dilakukan ketika filenya mendukung: pilih metode yang sesuai dengan file Anda dan temukan penyebabnya sebelum kesulitan dengan alat. Jika masalahnya file itu sendiri, konversikan gambar asli menjadi SVG yang bersih dan dapat diedit lalu pilih warna selagi prosesnya masih mudah.