Deteksi Tepi SVG: Pratinjau feConvolveMatrix

Deteksi tepi SVG feConvolveMatrix mengubah piksel yang dirender di sekitar batas warna. Filter ini dapat menghasilkan pratinjau tepi dari PNG di dalam SVG, tetapi tidak membuat kontur path yang bisa diedit. Bedakan keduanya dengan jelas saat pekerjaan berikutnya adalah mengedit logo, menyiapkan line art, atau membuat gambar web.

Pengujian awal yang berguna adalah gambar skala abu-abu kecil dengan bentuk yang diketahui. Terapkan kernel tepi simetris, pertahankan alfanya, dan bandingkan dengan sumber yang tidak diubah. Lalu periksa elemen SVG. Batas yang terlihat lebih tajam tidak membuktikan gambar telah menjadi geometri vektor.

Mulai dengan pratinjau tepi yang terkontrol

Referensi feConvolveMatrix menjelaskan konvolusi sebagai perhitungan yang melibatkan piksel masukan dan tetangganya. Kernel 3 × 3 ini mengurangi delapan tetangga dari delapan kali nilai pusat:

-1 -1 -1
-1  8 -1
-1 -1 -1

Jumlah koefisiennya nol. Pada area seragam, responsnya nol; pada perubahan kecerahan, respons bisa positif atau negatif. Dengan bias="0", hasil negatif dipotong pada batas bawah warna. Karena itu, pratinjau tidak memperlihatkan kedua sisi setiap batas secara seimbang.

Contoh memakai divisor="1" eksplisit. Referensi divisor menjelaskan normalisasi dengan nilai itu dan nilai bawaan 1 untuk kernel berjumlah nol. Contoh juga menetapkan color-interpolation-filters="sRGB" agar memakai nilai kanal sRGB alih-alih pemrosesan linearRGB bawaan primitive.

Simpan berkas mandiri lengkap ini sebagai edge-preview.svg dan buka di peramban. PNG tertanamnya adalah wajik skala abu-abu asli 48 × 48 di atas kertas putih buram. Bagian tengahnya putih, bukan transparan.

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <defs>
    <filter id="effect" filterUnits="userSpaceOnUse" x="0" y="0" width="48" height="48" color-interpolation-filters="sRGB">
      <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" bias="0" targetX="1" targetY="1" edgeMode="duplicate" preserveAlpha="true"/>
    </filter>
  </defs>
  <image width="48" height="48" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOklEQVR4nNWZQQ7EIAwDU7+seTlPo1ppTyvRhcQGxYeeGuNpEZT06r13KyxYccGKC1ZcsOKCFRfUA7h7XQD/hldCQGX8G1oFAYXpKKwCAmzDfyHZEGCazYZjQoBltBqKBQGGSTSMEyDSANkQnqxPAbCmgSd8wgDs1cSDflAP1lqT+IYBIuGVENj15FUQUJiOwiogwDSbCcmGAMNkNRwTApniaKjV+/0lB06Ej9T5IA9Ord+rdW2Q53UKKSFYbxiZ4mgo5vQEw0R1ImsT405vZAwIxcKAacckhGpVw/SdAfNIX6gtLslX9P+AokXSAvtJ+EAT3bzYfjgxKNMHJwdn1FPaKju+heSNLeXX6LbWouI8sL25yzyRHWuvM87Ex39wZLoSS+pi3fct9b8+FyssWHHBigtWXDgdIKsHsU1cbk4FPAgAAAAASUVORK5CYII=" filter="url(#effect)"/>
</svg>

Definisi filter hanya berlaku karena gambar merujuknya melalui filter="url(#effect)". Referensi filter SVG menjelaskan bahwa definisinya sendiri tidak digambar. Wilayah eksplisit meliputi sumber 48 × 48 ini; gambar lain memerlukan pemeriksaan wilayahnya sendiri.

Perubahan dalam pengujian peramban

Kami memeriksa enam spesimen asli di Chrome pada 48 dan 192 piksel CSS. Lima berkas berisi satu gambar PNG tertanam tanpa path. Berkas keenam adalah padanan vektor yang dibuat terpisah secara manual. Ini kontrol geometri, bukan hasil penerapan filter atau penjiplakan PNG.

Sampel RGBA berasal dari pembacaan kembali Canvas 48 × 48 untuk setiap SVG yang dirender. Spesimen yang ditampilkan diperiksa secara terpisah pada kedua ukuran. Ini pengamatan untuk sumber dan peramban ini, bukan jaminan kompatibilitas atau keterbacaan. Memperbesar pratinjau berbasis raster tidak memulihkan kontur yang lebih bersih.

Respons piksel dan geometri yang bisa diedit

Perbaiki hasil yang menghilang tanpa menghapus kertas

Nilai bawaan preserveAlpha adalah false. Dengan pengaturan itu, kernel juga memproses alfa. Masukan buram kami memiliki alfa 1 di mana-mana, sehingga kernel tepi berjumlah nol meniadakan alfa seragamnya bersama warna seragam. Hasilnya menghilang dalam contoh uji yang diperiksa.

Menetapkan preserveAlpha="true" mempertahankan alfa sumber sambil memproses warna. Referensi preserveAlpha menjelaskan perbedaannya. Untuk pengujian ini, pengaturan itu memulihkan pratinjau tepi buram. Pengaturan itu juga menjaga kertas buram dan bagian tengah putih tetap buram, meskipun warna hasil filternya menjadi hitam. Mempertahankan alfa tidak menghapus latar atau menemukan lubang dalam logo.

Jika pratinjau sebagian besar hitam, pertama bandingkan area seragam yang diketahui dengan batas yang diketahui. Hitam bisa menjadi respons nol yang sah. Untuk memeriksa perubahan kecerahan bertanda di sekitar nada tengah, coba bias="0.5"; referensi bias menjelaskan offset yang ditambahkan setelah pembagian. Ini mengubah rentang tampilan, bukan geometri SVG.

Periksa batas secara terpisah dari gambar

Pertahankan edgeMode="duplicate" untuk perbandingan awal. Pengaturan ini memperpanjang nilai piksel tepi saat sampel tetangga berada di luar masukan. none memakai sampel RGBA bernilai nol; wrap mengambil sampel dari tepi berlawanan. Ketiganya merupakan aturan berbeda dalam referensi edgeMode.

Pada kartu putih buram kami, hanya mengganti duplicate menjadi none menghasilkan bingkai terang di bagian luar kartu. Batas itu milik persegi panjang gambar, bukan wajiknya. Bandingkan berkas tanpa filter sebelum menganggap bingkai sebagai kontur gambar.

Spesifikasi Filter Effects mendefinisikan target kernel dan perilaku pengambilan sampel. Di sini targetX="1" dan targetY="1" menempatkan pusat kernel 3 × 3. Kode awal ini membiarkan kernelUnitLength tidak ditetapkan. Jangan menganggap sampel tetangga selalu berjarak satu satuan pengguna SVG pada setiap ukuran tampilan; periksa rendering yang diserahkan.

Gunakan penajaman sebagai kontrol, bukan pemulihan blur

Untuk mempertahankan gambar ber-fill sambil menonjolkan perubahan lokal, ganti hanya kernelMatrix dengan:

0 -1  0
-1 5 -1
0 -1  0

Jumlahnya 1. Nilai kanal seragam c mengembalikan 5c - 4c = c dengan divisor 1 dan bias 0. Dalam contoh uji kami, sampel abu-abu solid tetap 64, sedangkan piksel batas berubah. Pertahankan preserveAlpha="true" dan edgeMode="duplicate" untuk perbandingan ini.

Penajaman dapat menonjolkan noise dan halo bersama batas yang berguna. Penajaman tidak memulihkan detail sumber yang hilang sebelum gambar mencapai filter. Jika pratinjau yang diperbesar terlihat buruk, kembali ke gambar asli alih-alih menganggap kernel lebih kuat sebagai pengganti resolusi sumber.

Periksa berkas sebelum menyebutnya hasil penjiplakan vektor

Kode awal yang diterbitkan memuat <image> dengan href yang diawali data:image/png. Referensi elemen image menjelaskan sumber daya raster dan SVG yang dapat ditampilkan elemen ini. Di sini jenis media mengidentifikasi raster tertanam; filter tepi membiarkan elemen itu tetap ada.

Sebagai pembanding, master yang dibuat secara independen memakai path majemuk berikut di atas persegi panjang putih:

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <rect width="48" height="48" fill="white"/>
  <path d="M24 6 L42 24 L24 42 L6 24 Z M24 17 L31 24 L24 31 L17 24 Z"
        fill="#404040" fill-rule="evenodd"/>
</svg>

Koordinat itu ditulis secara terpisah. Koordinatnya tidak dipulihkan dari gambar berfilter, dan gambar piksel serta kontrol geometri tidak harus cocok pada setiap sampel batas. Panduan pemeriksaan raster tertanam menjelaskan cara memeriksa SVG campuran tanpa mengandalkan zoom saja.

Untuk gambar web, simpan master SVG tanpa filter dan gunakan salinan tampilan berfilter ketika efeknya mendukung desain. Untuk path pengeditan atau produksi, periksa kontur sumber yang sebenarnya dan bukaan dalam. Panduan line art ke SVG membahas tugas geometri tersebut.

PerfectVector sesuai ketika gambar awal adalah PNG atau JPG datar dan Anda membutuhkan bentuk sumber yang bisa diedit. Ubah gambar asli menjadi SVG, periksa kontur dan bukaan dalamnya, lalu simpan hasil bersih sebagai master. Pratinjau tepi yang berhasil tidak menggantikan pemeriksaan itu. Panduan vektorisasi menjelaskan perbedaan rekonstruksi path dan penerapan efek gambar.

Pertanyaan umum

Apakah deteksi tepi feConvolveMatrix SVG membuat path vektor? Tidak. Filter menghitung efek piksel yang dirender. PNG tertanam dalam contoh ini tetap menjadi elemen image; kontur yang bisa diedit membutuhkan geometri yang digambar atau dijiplak secara terpisah.

Mengapa filter tepi membuat gambar saya menghilang? Periksa preserveAlpha. Pengaturan false bawaannya juga memfilter alfa. Dalam contoh uji buram ini, kernel berjumlah nol membuat hasil yang diperiksa transparan. Mempertahankan alfa memulihkan pratinjau buram.

Apakah preserveAlpha menghapus latar putih? Tidak. Pengaturan itu mempertahankan alfa sumber. Latar putih buram tetap buram meski warna hasil filternya menjadi hitam. Penghapusan latar dan rekonstruksi path merupakan tugas terpisah.

Mengapa filter tepi menggambar bingkai di sekitar gambar? Periksa edgeMode dan persegi panjang masukan. Menggunakan sampel bernilai nol di luar kartu putih buram kami menciptakan batas luar terang. Penanganan tepi duplicate menghindari batas itu dalam contoh uji ini.

Sumber

1. MDN: feConvolveMatrix — konvolusi lingkungan piksel dan pemrosesan warna bawaan.
2. MDN: divisor — normalisasi dan nilai bawaan untuk jumlah nol.
3. MDN: filter — mendefinisikan dan menerapkan efek filter.
4. MDN: preserveAlpha — pemrosesan hanya warna dibanding yang menyertakan alfa.
5. MDN: bias — menggeser respons setelah pembagian.
6. MDN: edgeMode — penanganan batas duplicate, wrap, dan nol.
7. W3C: Filter Effects, feConvolveMatrix — aturan target dan pengambilan sampel.
8. MDN: image — konten gambar raster dan SVG yang dirujuk.