Mask CSS SVG: Pertahankan Siluet, Tetapkan Warna

Mask CSS SVG mengendalikan bagian elemen mana yang tetap terlihat. Untuk ikon satu warna, gunakan siluet SVG sebagai mask dan warnai elemen dengan background-color: currentColor. Ikon kemudian mengambil warna terlihatnya dari CSS alih-alih menampilkan palet asli SVG.

Mulailah dengan transparansi sumber. Persegi panjang opak di belakang artwork dapat mengubah ikon yang dimaksudkan menjadi blok solid. Bukaan transparan harus tetap transparan jika Anda ingin halaman di bawahnya terlihat menembusnya.

Referensi mask-image MDN menjelaskan bagaimana gambar sumber dan mode masking menentukan visibilitas. Tugas praktisnya adalah menyiapkan siluet yang berguna, memilih interpretasinya, dan memeriksanya pada ukuran yang digunakan antarmuka Anda.

Gunakan mask ketika tujuannya satu siluet berwarna

Pertimbangkan ikon penanda buku dengan bukaan berbentuk belah ketupat dan garis koral kecil. Sebagai gambar SVG biasa, ikon memiliki dua warna. Sebagai mask alpha di atas elemen biru, artwork opak menampilkan biru; garis koral tidak lagi muncul sebagai warna terpisah.

Itu berguna untuk ikon antarmuka yang dapat mengikuti tema. Itu akan menjadi pilihan penyerahan buruk untuk ilustrasi yang perbedaan warnanya membawa makna.

Jika Anda perlu mengedit fill dan stroke SVG satu per satu, gunakan panduan pengeditan warna SVG. Masking berguna ketika siluet sendiri merupakan bagian yang dapat digunakan ulang. Untuk batas geometris tegas, sesuaikan clip SVG khusus dengan targetnya dan pilih antara meregangkan siluet atau mempertahankan proporsinya.

Siapkan sumber kecil dengan bukaan sungguhan

Simpan contoh orisinal ini sebagai bookmark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#087f8c" fill-rule="evenodd"
    d="M5 3H19V21L12 17L5 21Z M12 6L15 9L12 12L9 9Z"/>
  <rect x="9" y="13" width="6" height="2" fill="#e76f51"/>
</svg>

Path pertama berisi bagian luar penanda buku dan bukaan belah ketupatnya. Tidak ada persegi panjang latar belakang ukuran penuh. Persegi panjang kedua yang kecil adalah garis koral.

Buka SVG di atas latar belakang kontras sebelum menggunakannya sebagai mask. Pastikan Anda dapat melihat menembus belah ketupat dan di sekitar batas luar. Belah ketupat putih yang digambar di atas penanda buku solid akan terlihat mirip pada halaman putih, tetapi tetap opak dalam mask alpha.

Untuk aset yang sudah ada, periksa bentuk latar belakang serta motif terlihat. Panduan latar belakang SVG transparan membahas perbedaan antara ruang kosong dan persegi panjang putih.

Warnai elemen ikon dengan CSS

Letakkan icon.css di samping SVG dan gunakan aturan ini:

.bookmark-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: url("./bookmark.svg");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #175cd3;
}

Gunakan label terlihat pada tombol:

<button class="save-button" type="button">
  <span class="bookmark-icon" aria-hidden="true"></span>
  Save article
</button>

Di sini ikon menyertai “Save article”, sehingga disembunyikan dari pohon aksesibilitas alih-alih mengulang label itu. Contoh hanya menunjukkan presentasi; hubungkan tombol ke tindakan simpan aplikasi Anda secara terpisah.

Elemen membutuhkan kotak untuk diwarnai, sehingga CSS menetapkan lebar, tinggi, dan display-nya. currentColor menggunakan warna teksnya. Mengubah color tombol mengubah pewarnaan ikon tanpa menulis ulang bookmark.svg.

Referensi mask-size mendefinisikan contain sebagai penyesuaian seluruh gambar mask sambil mempertahankan proporsinya. Digabungkan dengan pemusatan dan tanpa pengulangan, pengaturan itu membuat sumber menempati satu kotak ikon yang dapat diperkirakan. Panduan masking web.dev membahas kontrol ukuran dan pengulangan tersebut.

Sajikan contoh melalui HTTP, termasuk ketika menguji secara lokal. Deskripsi mask-image MDN memperingatkan bahwa sumber gambar file:// lokal tidak diterima untuk penggunaan ini. Gambar mask yang hilang atau gagal dimuat dapat membuat elemen yang dimask tidak terlihat.

Bedakan gambar SVG dari elemen mask SVG

File SVG yang digunakan sebagai gambar dan referensi ke elemen <mask> SVG adalah input berbeda. Jangan memilih mode hanya karena nama file berakhiran .svg.

Referensi mask-mode menetapkan default bergantung sumber ini. Dalam interpretasi alpha, hitam opak dan putih opak sama-sama menampilkan elemen. Dalam interpretasi luminans, putih opak menampilkannya dan hitam menyembunyikannya; nilai antara dapat menghasilkan visibilitas parsial.

mask-type berlaku untuk elemen <mask> SVG dan secara default menggunakan luminans, menurut referensi mask-type. Menambahkannya ke span ikon biasa tidak akan mengubah interpretasi mask gambar. Gunakan mask-mode pada elemen yang dimask ketika Anda perlu menentukan perilaku tersebut.

Contoh penanda buku menggunakan gambar SVG eksternal biasa dan secara eksplisit memilih alpha. Uji properti yang Anda gunakan dalam browser yang didukung; dukungan untuk fitur masking yang lebih luas tidak membuktikan dukungan untuk setiap kombinasi mode dan sumber.

Diagnosiskan persegi, ikon hilang, atau bukaan terisi

Pengujian negatif yang berguna adalah menempatkan persegi panjang putih opak ukuran penuh di belakang salinan bookmark.svg. Dengan interpretasi alpha, salinan itu menampilkan seluruh area mask. Mengubah persegi panjang dari putih menjadi hitam tidak memulihkan siluet karena kedua warna tetap opak.

Hapus latar belakang yang tidak diinginkan dari sumber alih-alih menyesuaikan warna elemen. Pertahankan file asli agar Anda dapat membandingkan salinan yang diperbaiki.

Pisahkan pengujian ini. Permintaan gambar yang berhasil tidak membuktikan bahwa sumber memiliki transparansi yang benar, dan transparansi yang benar tidak memberikan lebar atau tinggi yang hilang pada elemen.

Nilai hasil pada ukuran komponen

Perbesar penanda buku untuk memeriksa konturnya, lalu kembalikan ke ukuran antarmuka sebenarnya. Periksa bukaan belah ketupat, lekukan bawah, dan ruang antara ikon dan labelnya. Versi diperbesar membantu menemukan cacat; versi kecil memberi tahu apakah desain berguna.

Coba dua latar belakang halaman kontras dan dua warna ikon. Bukaan seharusnya menunjukkan warna halaman dalam setiap kasus. Jika tetap putih, kembali ke struktur sumber.

Untuk keluarga ikon, bandingkan simbol tetangga pada ukuran CSS yang sama. ViewBox-nya mungkin berisi jumlah ruang kosong berbeda, membuat kotak setara terlihat tidak rata. Panduan persiapan ikon kit UI membahas pekerjaan konsistensi itu.

Pulihkan siluet raster hanya ketika sumber membutuhkannya

PNG transparan sudah dapat menjadi mask CSS; konversi SVG bukan persyaratan masking. Pertahankan sumber vektor bersih yang sudah ada ketika Anda memilikinya.

Jika ikon berguna hanya tersisa sebagai gambar raster kasar, alur kerja PNG-ke-SVG PerfectVector dapat membantu menyiapkan kandidat yang dapat diedit. Crop ke motif, periksa pratinjau vektor untuk wilayah latar belakang dan bukaan hilang, lalu unduh SVG. Gunakan file tersebut dalam mask dan ulangi pemeriksaan ukuran komponen.

Untuk penanda buku, nilai lekukan luar dan bukaan belah ketupat sebelum mengkhawatirkan garis koral asli. Pewarnaan mask seragam akan menyerap warna garis itu. Ilustrasi multicolor rumit mungkin membutuhkan perlakuan berbeda; pilih siluet secara sengaja alih-alih menelusuri setiap detail.

Ikhtisar vektorisasi gambar menjelaskan pemulihan sumber lebih luas. File vektor tetap membutuhkan bentuk berguna dan transparansi yang sesuai untuk alur kerja CSS ini.

FAQ

Apakah mask SVG mempertahankan warna asli? Mask mengendalikan visibilitas. Dalam contoh latar belakang seragam, elemen menyediakan satu warna, sehingga warna terpisah sumber tidak dipertahankan.

Mengapa ikon saya menjadi persegi solid? Periksa latar belakang opak ukuran penuh dalam sumber mask. Dalam interpretasi alpha, putih dan hitam opak sama-sama menampilkan elemen.

Apakah mask SVG selalu merupakan mask luminans? Tidak. Gambar SVG biasa biasanya menggunakan alpha dalam match-source. Elemen mask SVG menggunakan luminans secara default kecuali interpretasinya diubah.

Apakah saya harus mengonversi PNG transparan menjadi SVG? Tidak. PNG dapat menyediakan gambar mask. Vektorisasi opsional ketika Anda perlu memulihkan atau mengedit siluet yang sesuai dari sumber raster.

Sources

1. MDN — mask-image — Sumber gambar, pemuatan gagal, persyaratan server lokal, dan visibilitas.
2. MDN — mask-mode — Alpha, luminans, dan default bergantung sumber.
3. MDN — mask-type — Interpretasi elemen mask SVG.
4. MDN — mask-size — Ukuran contain dan proporsi gambar.
5. web.dev — Terapkan efek pada gambar dengan mask-image CSS — Mask gambar, ukuran, dan pengulangan.

Mulailah dengan satu ikon dan periksa siluet, bukaan, dan ukuran UI akhirnya. Jika sumber raster membutuhkan pemulihan, siapkan kandidat SVG, periksa transparansinya, dan uji dengan pewarnaan CSS yang akan digunakan antarmuka Anda.