Mengapa Warna SVG Berubah Setelah Ekspor: Temukan Penyebabnya

SVG berubah warna setelah ekspor ketika tampilan sumber dan berkas yang diserahkan ditafsirkan dengan cara berbeda. Pengekspor mungkin mengonversi nilai warna. Situs web mungkin menimpa fill melalui CSS atau menentukan currentColor dari induk. Gradien, pengaturan opacity, mode blend, atau filter mungkin bergantung pada fitur yang ditangani secara berbeda oleh aplikasi tujuan. Terkadang markup hasil ekspor sudah benar dan satu pengimpor menjadi pengecualian.

Jangan mulai dengan mengganti setiap nilai hex. Temukan terlebih dahulu titik ketika tampilannya berubah. Itu memberi tahu Anda apakah perlu memperbaiki SVG, mengubah ekspor, menyederhanakan salinan untuk diserahkan, atau mempertahankan karya dalam format lain.

Cocokkan gejala dengan pemeriksaan pertama

Tempat pemeriksaan pertama

Isolasi masalah dalam lima menit

1. Biarkan master yang dapat diedit tetap utuh

Simpan duplikat untuk pengujian. Jangan meratakan efek, mengubah setiap objek menjadi outline, atau mengganti warna dalam satu-satunya salinan yang dapat diedit. Perubahan tersebut dapat menyembunyikan penyebab dan membuat berkas lebih sulit direvisi nanti.

2. Buka SVG hasil ekspor di dua tempat

Gunakan browser terkini sebagai kontrol netral, lalu buka atau impor berkas yang sama dalam aplikasi tujuan sebenarnya. Bandingkan keduanya dengan karya sumber pada latar belakang yang sama.

• Jika kedua tampilan hasil ekspor salah, selidiki pengekspor atau SVG yang diserialisasi.
• Jika browser mandiri benar dan aplikasi tujuan salah, selidiki penyematan, CSS, atau dukungan pengimpor.
• Jika hanya area transparan atau blended yang berbeda, uji latar dan efek sebelum mengubah fill solid.

Browser merupakan kontrol yang berguna, bukan bukti bahwa setiap aplikasi desain atau produksi akan mengimpor kumpulan fitur yang sama.

3. Periksa instruksi paint

Buka SVG dalam editor teks dan cari:

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

Anda sedang mencari struktur, belum menulis ulang. Nilai literal fill="#2F6BFF" mengarah ke cabang pemeriksaan berbeda dari fill="currentColor" atau fill="url(#paint0)".

Jika ini pertama kalinya Anda membuka markup SVG, panduan pengeditan SVG yang lebih luas menjelaskan cara melalui kode dan editor visual.

4. Sederhanakan satu objek yang gagal

Salin objek terkecil yang masih berubah ke dokumen baru dan ekspor. Hapus satu fitur setiap kali: pertama filter, lalu mode blend, lalu gradien, lalu opacity grup. Penghapusan pertama yang memperbaiki hasil mengidentifikasi fitur yang tidak didukung atau bergantung pada konteks.

Pengujian pengurangan ini lebih aman daripada meratakan seluruh ilustrasi karena memberi Anda batas penyerahan yang spesifik.

Penyebab 1: pengekspor mengonversi ruang warna

Warna hex dan sintaks rgb() yang umum menjelaskan warna sRGB. CSS modern juga dapat mengekspresikan ruang dengan gamut lebih luas seperti Display P3 melalui color(), sebagaimana didefinisikan oleh CSS Color Module Level 4. Karena itu, aplikasi desain dapat menyimpan warna sumber yang perlu dikonversi sebelum menjadi nilai hex sRGB, dan konversi tersebut dapat mengubah angka atau memangkas warna di luar gamut.

Periksa masalah dalam urutan berikut:

1. catat ruang warna dokumen sumber dan nilai numerik objek terpilih;
2. ekspor satu objek datar tanpa opacity atau efek;
3. buka SVG sebagai teks dan baca fill atau stroke yang diserialisasi;
4. bandingkan angka hasil ekspor dengan sumber;
5. uji berkas yang sama dalam aplikasi tujuan.

Jika nilainya berubah dalam berkas, konversi terjadi saat ekspor. Pilih ruang warna tujuan dengan sengaja dan ekspor kembali. Jika nilai tidak berubah tetapi tampilannya berbeda, lanjutkan ke CSS, efek, latar belakang, atau perilaku pengimpor.

Untuk pekerjaan cetak yang membutuhkan separasi CMYK, warna spot, atau komposisi hitam tertentu, simpan master yang menjadi acuan cetak dalam format asli aplikasi desain dan serahkan format yang diminta percetakan, sering kali PDF. SVG masih dapat berguna untuk penggunaan layar, tetapi jangan diam-diam menjadikannya acuan warna untuk alur kerja yang tidak dapat dijelaskannya secara andal.

Penyebab 2: currentColor atau CSS mengganti paint

SVG dapat diberi gaya dengan CSS. Spesifikasi styling SVG 2 menyatakan bahwa atribut presentasi seperti fill berpartisipasi dalam cascade CSS dengan specificity nol, sehingga CSS yang ditulis pembuat dapat menimpanya. SVG inline juga berbagi dokumen dengan halaman di sekitarnya, sehingga nama class umum dapat berbenturan dengan gaya situs.

currentColor merupakan rujukan tidak langsung yang disengaja. Referensi color SVG MDN menjelaskan bahwa nilai ini menyediakan nilai untuk fill, stroke, stop gradien, dan properti paint lainnya. Ini berguna untuk ikon yang harus mengikuti teks di sekitarnya, tetapi juga berarti berkas tidak memiliki warna tetap pada bagian tersebut.

Gunakan salah satu dari dua strategi penyerahan:

• Untuk ikon web yang mengikuti tema, pertahankan currentColor dan tetapkan color eksplisit pada SVG atau induk yang dimaksud.
• Untuk aset mandiri yang harus mempertahankan paletnya sendiri, tulis fill dan stroke eksplisit, serta batasi class internal dengan nama yang tidak akan berbenturan.

Ketika beberapa SVG inline memuat ID seperti paint0, clip0, atau gradient1, jadikan ID tersebut unik dan perbarui referensinya secara bersamaan. Jangan hanya mengubah id; setiap url(#id) harus tetap dapat diselesaikan.

Jika tujuan Anda adalah pewarnaan ulang yang disengaja, bukan memulihkan perubahan saat ekspor, gunakan panduan terpisah untuk mengubah warna SVG dengan aman.

Penyebab 3: gradien atau referensi paint rusak

Gradien dan pola SVG merupakan paint server. Bentuk merujuknya melalui referensi seperti fill="url(#brandGradient)", sementara definisi gradien biasanya berada dalam <defs>. Spesifikasi paint server SVG 2 juga mendefinisikan bagaimana koordinat gradien dan transformasi memengaruhi hasil.

Tiga pemeriksaan menemukan sebagian besar kegagalan struktural:

1. setiap url(#id) memiliki definisi yang cocok;
2. ID tetap unik setelah beberapa SVG digabungkan menjadi satu halaman atau dokumen;
3. aplikasi tujuan mempertahankan jenis paint, satuan, transformasi, dan stop gradien yang digunakan berkas.

Jika fill solid sederhana diimpor dengan benar tetapi gradien tidak, pertahankan gradien dalam master dan buat salinan penyerahan untuk aplikasi tujuan. Coba gradien linear atau radial yang lebih sederhana terlebih dahulu. Jika aplikasi tujuan tetap tidak dapat mereproduksinya dan tampilan persis lebih penting daripada paint yang dapat diedit, gunakan format atau aset yang diratakan dan didukung alur kerja penerima. Beri label jelas pada salinan tersebut agar tidak menggantikan sumber yang dapat diedit.

Penyebab 4: opacity dan blending mengubah hasil yang terlihat

Piksel yang terlihat tidak selalu sama dengan fill yang tersimpan. fill-opacity memengaruhi fill bentuk, opacity grup diterapkan setelah anak-anak grup digabungkan, dan mode blend mencampur sumber dengan latarnya. Spesifikasi Compositing and Blending W3C mendefinisikan urutan rendering dan rumus blend yang bergantung pada latar.

Ada dua konsekuensi praktis:

• SVG yang sama dapat tampak berbeda di atas halaman putih, hitam, atau berwarna tanpa perubahan nilai warna.
• Memindahkan opacity dari grup ke setiap anak dapat mengubah tumpang tindih karena urutan compositing berbeda.

Uji pada latar belakang sebenarnya. Lalu hapus mix-blend-mode, filter, mask, dan opacity grup satu per satu pada duplikat. Jika aplikasi tujuan tidak dapat mempertahankan efek penting, pilih antara perlakuan vektor yang disederhanakan dan aset penyerahan yang diratakan. Jangan meratakan bagian desain yang tidak terkait.

Persegi panjang putih atau berwarna di belakang karya merupakan kasus terpisah. Panduan SVG berlatar transparan menunjukkan cara membedakan bentuk latar nyata dari kanvas kosong.

Penyebab 5: aplikasi tujuan hanya mengimpor sebagian SVG

SVG merupakan standar web, tetapi banyak alat desktop, cetak, pemotongan, presentasi, dan pembuatan situs menerjemahkannya ke model objek sendiri. Dukungan dapat berbeda menurut aplikasi dan rilis. Hindari aturan seperti “aplikasi ini tidak pernah mendukung gradien” kecuali dokumentasi resmi terkini menyatakannya dan versi Anda yang tepat cocok dengannya.

Gunakan pengujian impor terkontrol:

1. impor satu path dengan fill solid;
2. tambahkan gradien asli;
3. tambahkan opacity;
4. tambahkan blend atau filter;
5. berhenti pada versi pertama yang berubah.

Kini Anda mengetahui batas aplikasi tujuan tersebut. Pertahankan master lengkap dan ekspor salinan penyerahan yang berada dalam batas yang diuji. Jika stroke merupakan bagian yang hilang, ikuti diagnosis ekspor khusus stroke alih-alih mengonversi setiap garis menjadi fill.

Pilih perbaikan aman yang paling kecil

Peran PerfectVector

PerfectVector berguna ketika sumber vektor sudah hilang atau tidak dapat digunakan dan karya terbaik yang tersisa merupakan gambar raster. Anda dapat mengubah gambar tersebut menjadi bentuk vektor yang dapat diedit, lalu memeriksa palet, transparansi, dan path sebelum membuka hasil dalam aplikasi tujuan.

PerfectVector tidak memperbaiki CSS yang diwariskan, memulihkan definisi gradien yang hilang, memulihkan profil warna aplikasi desain, mempertahankan mode blend yang tidak didukung, atau mengubah parser pengimpor. Jika SVG masih memuat path dan instruksi paint yang baik, perbaiki berkas alih-alih menjiplak ulang tangkapan layar. Itu mempertahankan lebih banyak struktur asli.

Daftar pemeriksaan penyerahan

• Simpan master yang dapat diedit dan lakukan perbaikan pada duplikat.
• Bandingkan berkas hasil ekspor dalam browser dan aplikasi tujuan sebenarnya pada latar belakang yang sama.
• Periksa apakah nilai fill dan stroke yang diserialisasi berubah.
• Cari currentColor, class umum, dan ID berulang.
• Cocokkan setiap referensi url(#id) dengan definisinya.
• Uji opacity grup, mode blend, filter, dan mask secara terpisah.
• Sederhanakan hanya fitur yang tidak dapat direproduksi aplikasi tujuan.
• Buka atau impor kembali berkas akhir yang akan diserahkan sebelum mengganti versi sebelumnya.

FAQ

Mengapa SVG saya tampak benar di browser tetapi salah setelah impor? Berkas kemungkinan menggunakan fitur atau konteks gaya yang diterjemahkan berbeda oleh aplikasi tujuan. Impor satu path solid, lalu tambahkan kembali gradien, opacity, blend, atau filter satu per satu. Langkah pertama yang gagal mengidentifikasi batas aplikasi tujuan tanpa merusak master.

Apakah berkas SVG selalu RGB? Warna hex dan rgb() yang umum merupakan sRGB, sedangkan CSS modern juga dapat mengekspresikan ruang seperti Display P3. Aplikasi desain dan cetak mungkin mengonversi warna tersebut saat ekspor atau impor. Periksa warna yang diserialisasi dan gunakan format produksi yang diminta percetakan untuk pekerjaan CMYK atau warna spot.

Mengapa SVG saya menjadi hitam setelah ekspor? Periksa apakah berkas menggunakan currentColor, kehilangan aturan CSS, atau merujuk gradien maupun ID paint yang hilang. Hitam dapat merupakan warna yang diwariskan atau gejala fallback, bukan penggantian fill asli. Bandingkan berkas mandiri dengan versi yang disematkan atau diimpor.

Haruskah saya mengganti setiap nilai hex ketika warna tampak salah? Tidak. Tentukan terlebih dahulu apakah nilainya berubah saat ekspor. Jika angka tetap utuh, menggantinya dapat menyembunyikan masalah CSS, referensi paint, blend, latar belakang, atau pengimpor dan membuat berkas kurang akurat di tempat lain.

Dapatkah PerfectVector memperbaiki SVG yang warnanya berubah setelah ekspor? Tidak jika SVG hanya membutuhkan perbaikan CSS, gradien, opacity, profil, atau perilaku pengimpornya. PerfectVector sesuai ketika vektor asli hilang dan Anda perlu membangun ulang karya raster datar yang sesuai menjadi bentuk vektor yang dapat diedit.

Sources

1. W3C — SVG 2 Styling — Mendefinisikan styling CSS, atribut class dan style, atribut presentasi, perilaku cascade, dan pewarisan dalam SVG.
2. MDN — SVG color attribute — Menjelaskan bagaimana currentColor menyediakan nilai paint untuk fill, stroke, stop gradien, dan properti terkait.
3. W3C — SVG 2 Paint Servers — Mendefinisikan gradien linear dan radial, referensi paint, sistem koordinat, transformasi, dan interpolasi warna.
4. W3C — CSS Color Module Level 4 — Mendefinisikan sintaks warna sRGB dan ruang terdefinisi yang lebih luas termasuk Display P3.
5. W3C — Compositing and Blending Level 1 — Mendefinisikan grup opacity, urutan compositing, latar, dan mode blend untuk SVG dan CSS.

Jika sumber terbaik yang tersisa adalah PNG atau JPG, bangun ulang menjadi SVG dengan PerfectVector, lalu bandingkan hasil dalam browser mandiri dan aplikasi tujuan akhir sebelum mengganti berkas lama.