clipPath vs Mask SVG: Tepi Tegas atau Pudar Lembut

Gunakan <clipPath> SVG ketika Anda ingin gambar berhenti pada kontur yang ditentukan. Gunakan <mask> SVG ketika gambar harus memudar melalui transparansi parsial. Mask juga dapat membuat potongan tegas, tetapi clipping path menyatakan maksud lebih sederhana untuk tepi geometris tegas. Spesifikasi CSS Masking mendefinisikan keduanya sebagai operasi visibilitas terpisah.

Pilihan ini penting ketika gambar berbentuk logo akan masuk ke editor lain. Kedua metode mengendalikan apa yang terlihat; keduanya tidak mengubah piksel tersembunyi menjadi geometri yang dihapus atau mengonversi gambar menjadi path vektor. Panduan ini memakai satu adegan raster asli dan satu kontur, lalu mengubah hanya aturan visibilitas. Anda dapat menerapkan pengujian sama pada karya sendiri sebelum ekspor.

Pilih berdasarkan tepi yang Anda perlukan

Tepi clip yang terlihat masih dapat memiliki antialiasing rendering biasa. Yang tidak dapat dinyatakannya adalah pita visibilitas parsial yang disengaja dari gradasi grayscale atau opacity di dalam bentuk yang di-clip. Tutorial clipping dan masking MDN menjelaskan perbedaan itu dengan contoh SVG kecil.

Bandingkan satu gambar dengan tiga aturan visibilitas

Untuk pengujian ini, saya menggambar pemandangan kecil, merasterkannya menjadi PNG 400 × 240, dan menempatkan piksel yang sama di bawah kontur mirip daun yang sama pada setiap panel. Panel kiri melakukan clip mengikuti kontur itu. Panel tengah memakai mask luminance putih-ke-hitam; panel kanan memakai mask alfa opak-ke-transparan. Kedua gradasi dipilih untuk menghasilkan pemudaran kiri-ke-kanan yang sama. Setiap hasil muncul pada latar terang dan gelap, sehingga tepi yang menghilang lebih mudah dinilai.

Kedua kolom mask terlihat serupa di sini karena alasan tertentu: gradasi luminance putih-ke-hitam dan gradasi opacity putih mengodekan nilai mask yang sebanding. Keduanya bukan masukan yang dapat saling menggantikan. Hitam opak menyembunyikan dengan masking luminance, sementara hitam opak tetap terlihat dengan masking alfa. Dalam mode alfa, opacity piksel menentukan hasil; warna hitam atau putihnya tidak. Definisi pemrosesan mask CSS Masking menetapkan kedua perhitungan.

Buat clip dan mask dari satu kontur

Simpan kode berikut sebagai clip-or-mask.svg, letakkan photo.png Anda sendiri di sampingnya, dan sajikan kedua file dari folder yang sama melalui HTTP. Kedua image memakai satu sistem koordinat 400 × 240. Perbedaannya hanya clip-path versus mask.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

ID referensi harus unik dalam SVG. Clip dan mask sama-sama memakai userSpaceOnUse agar koordinat motif sejajar dengan area lokal 400 × 240 setiap image. Referensi <clipPath> MDN menjelaskan clipping sebagai pembatasan pewarnaan tanpa mengubah geometri bawaan target. Referensi <mask> MDN memisahkan maskUnits, yang menempatkan wilayah mask, dari maskContentUnits, yang menempatkan karyanya.

Untuk mencoba luminance, duplikat mask dengan ID berbeda, tetapkan mask-type="luminance", dan ubah stop gradasi menjadi putih opak di awal serta hitam opak di akhir. Sesuaikan referensi mask dengan ID baru. Secara default, <mask> SVG memakai luminance; contoh ini menyebut mode agar suntingan berikutnya tidak diam-diam mengubah arti hitam. Lihat referensi mask-type MDN.

Periksa hasil sebelum mengekspor

1. Render SVG pada latar pucat dan gelap. Pemudaran yang tampak tidak terlihat pada putih mungkin jelas pada gelap.
2. Pastikan image dan motif memakai koordinat yang sama. Jika Anda mengubah ukuran image saja, kontur mungkin tidak lagi sejajar. Untuk clip yang digunakan ulang pada target berbeda ukuran, panduan satuan clipPath menjelaskan pilihan koordinat.
3. Jika tepi lembut berakhir mendadak, periksa x, y, width, dan height mask selain gradasi. Wilayah mask dapat memotong karya di luar batasnya; memperlebar gradasi saja tidak memperbaiki wilayah sempit. MDN mencantumkan default wilayah mask, tetapi batas eksplisit lebih mudah ditinjau dalam file penyerahan.
4. Buka kembali SVG tersimpan dalam aplikasi yang akan memakainya. Render browser yang benar tidak membuktikan bahwa pengimpor lain mempertahankan clip, mask, image tertaut, atau kemampuan edit yang Anda perlukan.
5. Periksa struktur file. Jika masih berisi <image>, file masih berisi piksel raster meskipun kontur clipping berupa vektor. Pemeriksaan raster tertanam menunjukkan cara mengenali perbedaan itu.

Image dalam contoh ini tetap PNG. Clipping dan masking tidak men-trace-nya. Jika pekerjaan memerlukan geometri potong nyata atau lubang transparan permanen, buat path yang sesuai dalam editor dan periksa ekspor. Panduan masalah lubang terisi membantu membedakan bukaan nyata dari bidang putih yang hanya tampak kosong di atas kanvas putih.

Peran PerfectVector

Jika kontur yang diperlukan hanya tersisa dalam logo PNG atau JPG, alur gambar ke vektor PerfectVector dapat memberikan kandidat SVG yang bisa diedit. Periksa path luar, celah kecil, dan bentuk latar tak diinginkan sebelum menyalin kontur ke <clipPath> atau <mask>. Anda tetap memilih metode visibilitas dan membuat efek dalam editor SVG. Pertahankan master vektor bersih yang ada jika tersedia.

Anda tidak perlu memvektorisasikan foto hanya untuk menempatkannya di belakang mask. Pertahankan piksel fotografis sebagai image ketika detailnya penting. Untuk ikon satu warna yang dikendalikan CSS alih-alih image di dalam SVG, panduan mask CSS SVG membahas alur terpisah itu.

FAQ

Bisakah clipPath SVG membuat pemudaran bertahap? Tidak. Clipping path menentukan bagian target mana yang terlihat, di luar antialiasing biasa pada batasnya. Gunakan mask dengan nilai opacity atau luminance menengah untuk pemudaran yang disengaja.

Apakah hitam menyembunyikan image dalam setiap mask SVG? Tidak. Hitam opak menyembunyikan dalam masking luminance, tetapi memperlihatkan dalam masking alfa karena pikselnya masih opak. Karya sepenuhnya transparan menyembunyikan dalam kedua mode.

Apakah clipping atau masking mengubah PNG menjadi karya vektor? Tidak. Keduanya mengubah visibilitas saat rendering. SVG masih dapat berisi <image> raster dan mungkin membutuhkan tracing atau penyuntingan path terpisah untuk file penyerahan yang hanya berisi vektor.

Sources

1. W3C — CSS Masking Module Level 1 — Definisi clipping, masking, serta nilai mask alfa versus luminance.
2. MDN — Clipping dan masking — Contoh clipping tegas dan mask lembut.
3. MDN — <clipPath> — Perilaku clip, pilihan koordinat, dan geometri yang mendasari tetap sama.
4. MDN — <mask> — Wilayah mask, sistem koordinat konten, dan perilaku referensi.
5. MDN — mask-type — Interpretasi alfa dan luminance terhadap karya mask SVG.

Jika logo raster memerlukan kontur yang bisa diedit terlebih dahulu, buat kandidat SVG dengan PerfectVector, periksa path hasil rekonstruksi, lalu terapkan clip atau mask dan buka kembali file ekspor dalam aplikasi tujuan.