Ambang Alfa SVG: Jadikan Transparansi Batas Tegas

Untuk batas alfa pada 0.5, gunakan feComponentTransfer dengan <feFuncA type="discrete" tableValues="0 1"/>. Alfa masukan di bawah 0.5 menjadi transparan; alfa pada atau di atasnya menjadi opak. Hilangkan fungsi RGB jika Anda ingin pemetaan transfernya tetap identitas.

Filter itu mengubah alfa yang dirender, bukan struktur karya yang mendasarinya. Filter tidak dapat menghapus latar putih opak, karena piksel putih dengan alfa 1 melewati batas yang sama dengan piksel berwarna opak. PNG yang disematkan dalam SVG juga tetap berupa gambar raster.

Bandingkan piksel sumber yang diketahui sebelum memilih ambang

Kami membuat PNG RGBA 8-bit kecil dengan perubahan alfa bertahap, lubang persegi transparan, bidang putih opak, dan enam sampel warna terkontrol. Setiap SVG dalam pengujian ini menyematkan byte PNG yang sama dalam satu elemen image. Varian tanpa filter, discrete, dan table terinterpolasi hanya berbeda pada pengaturan filter.

Pola papan catur di bawah adalah bagian dari halaman di sekitarnya, di luar SVG. Pola ini memperlihatkan transparansi, bukan seolah-olah menjadi bagian dari kanal alfa gambar.

Halaman kami memuat varian SVG yang sebenarnya, menggambarnya ke canvas browser, dan mengambil sampel bagian dalam keenam bidang warna. Byte alfa keluarannya adalah:

Nilai alfa ternormalisasi adalah byte tersebut dibagi 255. Jadi 127/255 sedikit di bawah 0.5, sedangkan 128/255 sedikit di atasnya. Sampel ini berada di kedua sisi batas matematis; byte PNG 8-bit tidak merepresentasikan tepat 0.5.

Alfa lubang sumber terukur 0 pada setiap versi. Bidang putih terukur 255 pada setiap versi. Ini adalah pengamatan dari contoh terkontrol ini, bukan klaim bahwa sembarang karya akan mempertahankan setiap detail yang diinginkan setelah penerapan ambang.

Terapkan transfer pada alfa

Filter intinya singkat:

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

Terapkan pada gambar dengan filter="url(#alpha)". Wilayah filter contoh ini mencakup seluruh sumber dan viewport berukuran 320 kali 240. Gunakan batas yang sesuai dengan karya Anda sendiri, bukan menyalin dimensi itu ke file yang tidak terkait.

Referensi feFuncA MDN mengidentifikasinya sebagai fungsi transfer alfa di dalam feComponentTransfer. Referensi component-transfer menjelaskan pemetaan ulang per kanal dan perhitungan pada nilai warna yang belum dikalikan dengan alfa.

Spesifikasi Filter Effects saat ini memberi fungsi kanal yang tidak ditetapkan pemetaan identitas. Markup kami tidak menyertakan feFuncR, feFuncG, dan feFuncB; markup hanya mengubah fungsi transfer alfa. Itu tidak berarti warna yang terlihat di atas latar tampak identik: mengubah alfa mengubah tampilannya setelah compositing.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

Contoh lengkap mempertahankan byte PNG. Filter tidak mewarnai ulang file sumber yang tersimpan atau menggantinya dengan path. Diagnosis raster tertanam menjelaskan mengapa nama file luar .svg tidak membuktikan adanya geometri vektor.

Bedakan fungsi bertingkat dari table terinterpolasi

Kedua jenis transfer memakai tableValues, tetapi menafsirkan entrinya secara berbeda. Referensi type mencantumkan fungsi transfer yang tersedia; referensi tableValues menjelaskan daftar nilai pencarian.

Untuk discrete, setiap entri menempati interval masukan yang sama besar. Dengan dua entri 0 1, interval pertama adalah 0 ≤ A < 0.5, dan yang kedua 0.5 ≤ A ≤ 1. Keluaran melompat di antara kedua nilai itu.

Untuk table, entri menjadi titik ujung wilayah interpolasi linear. Dengan 0 1, interpolasi memetakan setiap alfa masukan kembali ke nilainya sendiri. Ini adalah transfer identitas, sehingga kolom table hasil sampel kami cocok dengan kolom tanpa filter.

Rumus interval dalam spesifikasi juga menjelaskan alternatif yang didokumentasikan berikut:

Tangkapan layar kami menguji kasus discrete dan table dengan dua entri. Baris empat entri menjelaskan pemetaan dalam spesifikasi; baris itu bukan varian karya tambahan yang diukur. Pilih type dengan sengaja, jangan menganggap daftar yang hanya berisi nol dan satu pasti menghasilkan ambang biner.

Pisahkan alfa masukan dari opacity setelahnya

Berikan alfa sumber yang sebenarnya sebagai masukan filter. Dalam contoh kami, alfa tersebut tersimpan pada piksel PNG. Untuk pengujian vektor, gunakan alfa isian atau fill-opacity sebelum menerapkan filter.

Model compositing Filter Effects menerapkan filter sebelum opacity. Karena itu, opacity keseluruhan pada elemen atau grup yang melingkupinya dapat mengurangi hasil render setelah filter. Jika Anda menerapkan ambang pada sumber lalu mengomposisikan hasil dengan opacity yang lebih rendah, hasilnya dapat tampak semitransparan lagi. Jangan sertakan opacity lanjutan itu dalam pengujian ambang terkontrol.

Batas tegas juga membuang transisi semitransparan sumber. Piksel samar hilang, dan piksel semitransparan yang dipertahankan menjadi sepenuhnya opak. Ini dapat menghapus cahaya lembut atau tepi tipis yang ingin Anda pertahankan. Periksa hasil pada ukuran penggunaan akhirnya dan di atas lebih dari satu latar. Alfa keluaran biner tidak menjamin tepi yang akhirnya ditampilkan bebas dari efek sampling atau compositing.

Jika semitransparansi merupakan bagian desain, pertahankan atau gunakan transfer bertahap alih-alih memaksakan batas. Untuk mask visibilitas yang sengaja monokrom, panduan mask CSS SVG membahas alur presentasi yang berbeda.

Putih opak memerlukan diagnosis berbeda

Bidang putih bertahan karena alfanya sepenuhnya opak. Operasi ini memilih berdasarkan alfa, bukan berdasarkan apakah piksel terlihat putih. Piksel latar yang sepenuhnya opak tidak menjadi transparan dengan pemetaan discrete 0 1 ini.

Jika file berisi latar putih yang tidak diinginkan, tentukan dulu apakah latar itu bentuk SVG terpisah atau bagian gambar raster. Hapus atau sunting langsung bentuk latar vektor yang tidak diinginkan. Untuk PNG dengan putih yang sudah menyatu pada pikselnya, bersihkan sumber raster sebelum rekonstruksi atau gunakan alur penghapusan latar yang sesuai. Panduan SVG berlatar transparan menjelaskan kasus tersebut.

Ingat bagian subjek yang memang berwarna putih sebelum menghapus latar berdasarkan warna. Filter alfa ini tidak dapat menyimpulkan wilayah putih mana yang merupakan latar dan mana yang merupakan bagian karya, serta tidak dapat memulihkan informasi warna yang hilang saat sumber diratakan.

Siapkan raster transparan sebelum rekonstruksi vektor

PerfectVector dapat membantu ketika desain akhir hanya berupa raster dan Anda memerlukan geometri SVG. Siapkan PNG dengan transparansi nyata terlebih dahulu, lalu konversikan PNG ke SVG. Bandingkan pratinjau di atas latar kontras, periksa siluet dan bukaan, lalu periksa file unduhan untuk menemukan geometri latar yang tidak diinginkan.

Contoh filter kami adalah eksperimen tampilan. Contoh ini tidak mengirim SVG berfilter untuk vektorisasi dan tidak memperagakan hasil tracing baru. Jika Anda perlu mempertahankan tampilan raster dengan ambang yang diterapkan, siapkan dan verifikasi salinan raster nyata untuk diserahkan dalam editor sebelum mempertimbangkan rekonstruksi vektor. Periksa alfa salinan itu, bukan mengandalkan pratinjau browser.

Gunakan master vektor yang tersedia secara langsung. Pertahankan semitransparansi ketika membawa informasi desain yang berguna, dan gambar ulang simbol sederhana jika itu lebih mudah dirawat. Ikhtisar vektorisasi gambar membedakan rekonstruksi raster dari perubahan presentasi SVG yang sudah ada.

FAQ

Batas alfa apa yang dipakai discrete tableValues 0 1? Alfa masukan di bawah 0.5 dipetakan ke 0; alfa pada atau di atas 0.5 dipetakan ke 1. Pada sampel PNG 8-bit yang diuji, byte 127 menjadi transparan dan byte 128 menjadi opak.

Mengapa tableValues 0 1 tidak mengubah transparansi saya? Dengan type table, entri tersebut menentukan interpolasi linear dari 0 ke 1, yaitu identitas. Gunakan type discrete untuk pemetaan dua tingkat yang ditampilkan di sini.

Apakah ini menghapus putih atau mengubah PNG menjadi path vektor? Tidak. Putih yang sepenuhnya opak lolos batas alfa ini. Varian SVG kami masih berisi PNG yang sama dalam satu elemen image dan tanpa path; pembersihan latar dan rekonstruksi vektor adalah pekerjaan terpisah.

Sources

1. W3C — Filter Effects Level 1 — Mendefinisikan default identitas, transfer kanal pada nilai yang belum dikalikan alfa, dan rumus interval table/discrete.
2. MDN — feComponentTransfer — Menjelaskan pemetaan ulang kanal oleh primitif filter.
3. MDN — feFuncA — Mengidentifikasi fungsi transfer kanal alfa.
4. MDN — type — Mencantumkan jenis fungsi component-transfer beserta konteks atributnya.
5. MDN — tableValues — Menjelaskan entri pencarian yang digunakan oleh transfer table dan discrete.

Memerlukan geometri vektor dari desain raster? Siapkan dan konversikan PNG transparan, lalu periksa siluet dan lubang dalam pratinjau serta verifikasi SVG unduhan di atas latar berwarna.