SVG feColorMatrix: Warnai Ulang Tanpa Mengubah Fill

Filter feColorMatrix SVG mengubah warna yang ditampilkan renderer. Filter tidak menulis ulang nilai fill pada path Anda. Karena itu, filter berguna untuk efek visual yang dapat dibatalkan, tetapi pratinjau berfilter dan SVG dengan palet yang baru disunting adalah hasil penyerahan yang berbeda.

Jika Anda membutuhkan pratinjau web, pertahankan filter dan uji halaman tempat filter berjalan. Jika seseorang perlu memilih bentuk biru dan menyunting isian birunya, ubah pewarnaan sumber. Jika sumbernya PNG, filter maupun pembungkus SVG tidak membuat bentuk vektor yang bisa diedit; itu memerlukan langkah vektorisasi terpisah.

Contoh di bawah memakai motif dua daun yang sama untuk kedua jalur pewarnaan ulang. Anda dapat menyimpan kode, memeriksa sumber, dan menghapus filter untuk melihat dengan tepat apa yang berubah.

Pilih hasil pewarnaan ulang yang Anda perlukan

Panduan penyuntingan warna SVG membahas pencarian isian, stroke, dan aturan gaya. Di sini pertanyaannya lebih terbatas: apa yang ditinggalkan filter dalam file. MDN menjelaskan feColorMatrix sebagai transformasi kanal warna piksel, sementara panduan isian dan stroke-nya menjelaskan pewarnaan yang diterapkan pada bentuk.

Contoh dua warna yang dapat Anda periksa

Simpan sebagai filtered-leaves.svg dan buka di browser. Daun pertama diawali dengan isian oranye, #cc6633; daun kedua memiliki isian hijau, #339966, dengan setengah opacity. Matriks menukar kanal merah dan biru sambil mempertahankan hijau serta alfa.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 260 220" width="260" height="220">
  <defs>
    <filter id="swap-red-blue" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="
        0 0 1 0 0
        0 1 0 0 0
        1 0 0 0 0
        0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#swap-red-blue)">
    <path fill="#cc6633"
      d="M40 125 C25 35 105 15 150 35 C165 105 120 150 40 125Z" />
    <path fill="#339966" fill-opacity="0.5"
      d="M100 175 C90 90 180 65 225 90 C230 155 175 200 100 175Z" />
  </g>
</svg>

Kami merender empat versi motif asli ini di browser: pewarnaan asli, versi berfilter, suntingan langsung, dan salinan dengan filter dihapus. Suntingan langsung mengubah isian pertama menjadi #3366cc dan yang kedua menjadi #669933, tanpa filter. Kedua jalur pewarnaan ulang menghasilkan motif biru dan hijau zaitun. Pemeriksaan DOM versi berfilter masih mengembalikan atribut fill oranye dan hijau asli. Menghapus filternya mengembalikan palet asli.

Ini adalah demonstrasi browser kecil, bukan pengujian kompatibilitas setiap editor atau format ekspor. Pemeriksaan penyerahan yang berguna cukup sederhana: file berfilter masih bergantung pada efek yang dipertahankan dan dirender. Versi fill langsung membawa palet baru pada bentuk itu sendiri.

Untuk mengulangi pemeriksaan sumber, buka SVG di editor teks dan cari fill=. Lalu hapus hanya filter="url(#swap-red-blue)" dari grup dan muat ulang browser. Simpan file yang tidak diubah di sampingnya agar Anda dapat membandingkan hasilnya.

Baca empat baris tanpa menghafal matriks

Untuk type="matrix", atribut values berisi dua puluh angka: empat baris dengan lima angka masing-masing. Setiap baris menghitung satu kanal keluaran. Kolomnya memakai masukan merah, hijau, biru, alfa, dan offset konstan. Referensi matriks MDN menunjukkan persamaan dan matriks identitas.

Dalam contoh kami, baris pertama mengambil biru sebagai merah baru. Baris kedua mempertahankan hijau. Baris ketiga mengambil merah sebagai biru baru. Baris keempat mempertahankan alfa:

0 0 0 1 0

Baris terakhir itu berarti “gunakan alfa yang sudah ada, tanpa offset tambahan.” Menggantinya dengan semua nol membuat hasil transparan. Menambahkan konstanta di kolom terakhir mengubah transparansi bahkan pada bagian sumber yang transparan, sehingga dapat membuat persegi panjang yang tidak diinginkan dalam wilayah filter.

Matriks memproses masukan yang dirender ke filter. Matriks tidak mengetahui piksel mana yang berasal dari daun, huruf, stroke, atau foto tertanam. Terapkan pada grup atau objek yang memang ingin Anda pengaruhi. Jika Anda perlu mengubah hanya satu bagian desain berdasarkan maknanya, pilih bagian tersebut dan sunting pewarnaannya.

Tetapkan sRGB ketika angka berasal dari sampel warna RGB

Primitif filter SVG memakai linearRGB secara default. Sampel warna seperti rgb(128, 128, 128) biasanya ditetapkan dalam sRGB, sehingga konstanta matriks 0.5 dalam ruang filter default tidak berarti abu-abu tampilan yang sama dengan setengah skala sRGB. Gunakan color-interpolation-filters="sRGB" ketika matriks Anda dimaksudkan bekerja pada nilai kanal sRGB tersebut. Ini berbeda dari color-interpolation; mengubah atribut lain itu tidak memilih ruang warna filter. MDN mendokumentasikan default dan perbedaannya.

Untuk siluet solid #3366cc, nilai RGB ternormalisasi adalah 51/255, 102/255, dan 204/255, atau 0.2, 0.4, dan 0.8. Filter berikut membuang nilai RGB masukan dan menetapkan konstanta tersebut sambil mempertahankan alfa masukan:

<filter id="solid-blue" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="
    0 0 0 0 0.2
    0 0 0 0 0.4
    0 0 0 0 0.8
    0 0 0 1 0" />
</filter>

Rujuk filter ini dari objek dengan filter="url(#solid-blue)". Filter sengaja menghapus perbedaan di antara warna sumber yang opak. Filter cocok untuk siluet, bukan untuk mempertahankan detail tonal foto. Spesifikasi Filter Effects mendefinisikan transformasi kanal dan penanganan nilai warna yang belum dikalikan alfa.

Menetapkan sRGB adalah pilihan ruang perhitungan, bukan jaminan warna identik pada setiap layar atau dalam cetakan. Untuk ketidakcocokan hasil penyerahan yang lebih luas, gunakan daftar pemeriksaan warna ekspor SVG.

Periksa file yang diserahkan, bukan hanya pratinjau

Pewarnaan ulang berbasis filter tetap dapat dibatalkan selama karya asli dan definisi filter tetap utuh. Tangkapan layar atau ekspor raster merekam hasil yang terlihat sebagai piksel. Kedua operasi itu sendiri tidak membuat palet baru tersedia sebagai isian path yang bisa diedit.

Sebelum menyerahkan vektor, periksa aplikasi tujuan sebenarnya:

1. Buka SVG tersimpan melalui jalur impor atau ekspor yang sama dengan yang akan dipakai penerima.
2. Bandingkan warna dan tepi semitransparan dengan pratinjau browser.
3. Pilih bentuk dan periksa fill-nya. Apakah berisi nilai baru yang dimaksud, atau pewarnaan asli di bawah efek?
4. Simpan dan buka kembali sekali. Pastikan definisi filter dan referensinya bertahan jika efek diperlukan.
5. Jika penerima memerlukan warna datar biasa yang bisa diedit, gunakan versi fill langsung dan hapus filter yang tidak lagi diperlukan dari salinan penyerahan tersebut.

Untuk gradasi, stroke, opacity, atau tumpang tindih yang berbaur, matriks global bukan alat cari-dan-ganti umum. Membuat ulang tampilan yang dimaksud sebagai pewarnaan sumber mungkin membutuhkan penyuntingan lebih dari sepasang nilai heksadesimal. Jika hasil raster dapat diterima, mengekspor tampilan yang sudah diperiksa ke PNG adalah opsi lain. Simpan master vektor secara terpisah.

Peran PerfectVector dalam alur ini

Jika Anda sudah memiliki kedua path ini, sunting langsung. Tidak ada alasan untuk merasterkan dan men-trace ulang hanya demi menghapus filter warna.

PerfectVector menjadi relevan ketika karya awal Anda berupa PNG atau JPG dan Anda memerlukan wilayah yang bisa diedit. Gunakan konversi gambar ke vektor untuk menyiapkan kandidat vektor, lalu periksa batas bentuk dan detail kecil sebelum mewarnai ulang. Filter yang diterapkan pada bitmap dapat mengubah tampilannya, tetapi bitmap tetap berupa konten piksel. Pemeriksaan raster tertanam membantu membedakan kasus itu dari path yang bisa Anda pilih dan edit.

Untuk foto yang hanya perlu diberi tint, pertahankan alur raster. Untuk logo dengan master vektor yang tersedia, gunakan master. Ikhtisar vektorisasi menjelaskan kapan merekonstruksi geometri dari piksel menjadi langkah yang berguna.

FAQ

Apakah feColorMatrix mengubah nilai fill dalam SVG saya? Tidak. Filter mentransformasi kanal warna yang dirender. Atribut fill sumber tetap sama kecuali Anda menyuntingnya secara terpisah.

Mengapa abu-abu yang saya pilih lebih terang daripada perkiraan? Periksa ruang perhitungan filter. Primitif filter SVG memakai linearRGB secara default. Tetapkan color-interpolation-filters ke sRGB ketika konstanta matriks merepresentasikan nilai sampel sRGB yang ternormalisasi.

Bagaimana menjaga transparansi saat mewarnai ulang? Pertahankan baris alfa sebagai 0 0 0 1 0. Ini mempertahankan alfa masukan. Periksa tepi semitransparan dan hindari menambahkan offset alfa kecuali Anda memang ingin mengubah transparansi.

Bisakah PNG berfilter menjadi vektor yang bisa diedit? Filter warna mengubah tampilan, bukan geometri. Untuk menyunting bentuk vektor individual, dapatkan vektor asli atau vektorisasi raster dan periksa path hasilnya.

Sources

1. MDN: feColorMatrix — Mendefinisikan baris matriks, kanal, dan jenis transformasi yang tersedia.
2. MDN: color-interpolation-filters — Menjelaskan default linearRGB dan pemilihan sRGB eksplisit.
3. W3C: Filter Effects, feColorMatrix — Menetapkan perilaku transformasi warna dan alfa.
4. MDN: Isian dan stroke — Menjelaskan pewarnaan sumber yang dipakai bentuk SVG.

Jika karya Anda hanya berupa piksel dan memerlukan warna terpisah yang bisa diedit, konversikan gambar menjadi kandidat vektor. Periksa path, warnai ulang pewarnaan sumber, lalu buka kembali file yang diserahkan untuk memeriksa tampilan sekaligus kemampuan penyuntingannya.