> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Deteksi Tepi SVG: Pratinjau feConvolveMatrix > Buat pratinjau tepi SVG dengan feConvolveMatrix, diagnosis artefak alfa dan batas, bandingkan kernel penajaman, serta periksa apakah sumber berisi path asli. Source: https://perfectvector.com/id/blog/svg-convolution-edge-preview Language: id Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 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`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) menjelaskan konvolusi sebagai perhitungan yang melibatkan piksel masukan dan tetangganya. Kernel 3 × 3 ini mengurangi delapan tetangga dari delapan kali nilai pusat: ```text -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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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. ```xml ``` Definisi filter hanya berlaku karena gambar merujuknya melalui `filter="url(#effect)"`. [Referensi filter SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) 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. | Spesimen | Tampilan yang diamati | Pembacaan kembali pada sampel seragam | | ------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ | | PNG asli di dalam SVG | Wajik abu-abu dengan bagian tengah dan kertas putih | Abu-abu solid: RGBA 64, 64, 64, 255 | | Kernel tepi, alfa dipertahankan | Bidang hitam dengan respons tepi; kontur samar pada tampilan lebih besar | Tengah dan sudut: RGBA 0, 0, 0, 255 | | Kernel tepi, alfa juga difilter | Hasil transparan pada contoh uji ini | Tengah, sudut, dan sampel solid: RGBA 0, 0, 0, 0 | | Kontrol penajaman | Wajik ber-fill tetap ada, dengan piksel batas berubah | Abu-abu solid tetap RGBA 64, 64, 64, 255 | | Kernel tepi, batas bernilai nol | Muncul bingkai luar terang | Sudut: RGBA 255, 255, 255, 255 | | Kontrol path buatan tangan | Wajik geometris bersih dan bukaan dalam di atas kertas putih | Satu elemen path, tanpa elemen image | 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** ![Ilustrasi konseptual yang membandingkan wajik respons tepi piksel skala abu-abu dengan cincin wajik koral yang digambar terpisah dan node pengeditannya](https://perfectvector.com/blog/svg-convolution-edge-preview/pixels-and-paths.webp) *Ilustrasi: pratinjau tepi piksel dan path yang bisa diedit memiliki representasi berbeda. Ini bukan tangkapan layar peramban atau hasil konversi.* ## 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) 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: ```text 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 `` dengan `href` yang diawali `data:image/png`. [Referensi elemen image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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: ```xml ``` 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](https://perfectvector.com/id/blog/svg-contains-raster-image) 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](https://perfectvector.com/id/blog/line-art-to-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](https://perfectvector.com/id/image-to-vector), periksa kontur dan bukaan dalamnya, lalu simpan hasil bersih sebagai master. Pratinjau tepi yang berhasil tidak menggantikan pemeriksaan itu. [Panduan vektorisasi](https://perfectvector.com/id/blog/what-is-image-vectorization) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) — konvolusi lingkungan piksel dan pemrosesan warna bawaan. 2. [MDN: divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) — normalisasi dan nilai bawaan untuk jumlah nol. 3. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — mendefinisikan dan menerapkan efek filter. 4. [MDN: preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) — pemrosesan hanya warna dibanding yang menyertakan alfa. 5. [MDN: bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) — menggeser respons setelah pembagian. 6. [MDN: edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) — penanganan batas duplicate, wrap, dan nol. 7. [W3C: Filter Effects, feConvolveMatrix](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) — aturan target dan pengambilan sampel. 8. [MDN: image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — konten gambar raster dan SVG yang dirujuk. ## Explore - [Read the HTML article](https://perfectvector.com/id/blog/svg-convolution-edge-preview) - [Ikon SVG MapLibre: Periksa Piksel dan Ukuran Simbol](https://perfectvector.com/id/blog/maplibre-svg-symbol-image.md) - [Logo SVG Satori: Simpan Gambar dalam Kartu Bermerek](https://perfectvector.com/id/blog/satori-svg-logo.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)