> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG Kenar Algılama: feConvolveMatrix Önizlemesi > SVG feConvolveMatrix kenar önizlemesi oluşturun, alfa ve sınır bozulmalarını tanılayın, keskinleştirme çekirdeğini karşılaştırın ve kaynakta gerçek yollar olup olmadığını kontrol edin. Source: https://perfectvector.com/tr/blog/svg-convolution-edge-preview Language: tr Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 SVG `feConvolveMatrix` kenar algılaması, renk sınırlarının çevresindeki işlenmiş pikselleri değiştirir. SVG içindeki PNG'den kenar önizlemesi üretebilir, ancak düzenlenebilir yol konturları oluşturmaz. Sonraki işiniz logo düzenlemek, çizgi sanatı hazırlamak veya web çizimi oluşturmaksa bu ayrımı net tutun. Yararlı bir ilk test, bilinen şekle sahip küçük gri tonlamalı görüntüdür. Simetrik kenar çekirdeği uygulayın, alfasını koruyun ve değişmemiş kaynakla karşılaştırın. Ardından SVG öğelerini inceleyin. Daha keskin görünen sınır, görüntünün vektör geometrisine dönüştüğünü kanıtlamaz. ## Kontrollü bir kenar önizlemesiyle başlayın [`feConvolveMatrix` başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix), evrişimi bir girdi pikseliyle komşularını içeren hesaplama olarak açıklar. Bu 3 × 3 çekirdek, merkezin sekiz katından sekiz komşuyu çıkarır: ```text -1 -1 -1 -1 8 -1 -1 -1 -1 ``` Katsayıları toplamı sıfırdır. Tekdüze alanda tepki sıfırdır; parlaklık değişiminde pozitif veya negatif olabilir. `bias="0"` ile negatif sonuçlar alt renk sınırında kırpılır. Bu nedenle önizleme her sınırın iki tarafını eşit göstermez. Örnek açık `divisor="1"` kullanır. [divisor başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor), bu değerle normalleştirmeyi ve sıfır toplamlı çekirdekte varsayılanın 1 olduğunu belgeler. Ayrıca örneğin ilkelin varsayılan linearRGB işlemesi yerine sRGB kanal değerlerini kullanması için `color-interpolation-filters="sRGB"` ayarlar. Bu eksiksiz, bağımsız dosyayı `edge-preview.svg` olarak kaydedip tarayıcıda açın. Gömülü PNG, opak beyaz kâğıt üzerinde özgün 48 × 48 gri tonlamalı eşkenar dörtgendir. Merkezi saydam değil beyazdır. ```xml ``` Filtre tanımı yalnızca görsel `filter="url(#effect)"` ile ona başvurduğu için etkili olur. [SVG filter başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter), tanımın kendisinin çizilmediğini açıklar. Açık bölge bu 48 × 48 kaynağı kapsar; başka çizimlerin kendi bölge kontrolüne ihtiyacı vardır. ## Tarayıcı testinde ne değişti? Altı özgün örneği Chrome'da 48 ve 192 CSS pikselinde inceledik. Beş dosya tek gömülü PNG görsel içerir ve hiç yol içermez. Altıncısı bağımsız olarak elle oluşturulmuş vektör karşılığıdır. Geometri kontrolüdür; filtre uygulamasının veya PNG izlemesinin sonucu değildir. | Örnek | Gözlenen görünüm | Tekdüze örnekte geri okuma | | ------------------------------------ | ------------------------------------------------------------------ | ------------------------------------------- | | SVG içinde özgün PNG | Beyaz merkez ve kâğıt üzerinde gri eşkenar dörtgen | Düz gri: RGBA 64, 64, 64, 255 | | Kenar çekirdeği, alfa korundu | Kenar tepkili siyah alan; büyük gösterimde dış hat silik | Merkez ve köşe: RGBA 0, 0, 0, 255 | | Kenar çekirdeği, alfa da filtrelendi | Bu testte saydam sonuç | Merkez, köşe ve dolu örnek: RGBA 0, 0, 0, 0 | | Keskinleştirme kontrolü | Sınır pikselleri değişirken dolgulu eşkenar dörtgen korundu | Düz gri RGBA 64, 64, 64, 255 olarak kaldı | | Kenar çekirdeği, sıfır değerli sınır | Parlak dış çerçeve oluştu | Köşe: RGBA 255, 255, 255, 255 | | Elle oluşturulan yol kontrolü | Beyaz kâğıt üzerinde temiz geometrik eşkenar dörtgen ve iç açıklık | Bir path öğesi, image öğesi yok | RGBA örnekleri, işlenen her SVG'nin 48 × 48 Canvas geri okumasından geldi. Gösterilen örnekler iki boyutta da ayrı kontrol edildi. Bunlar bu kaynak ve tarayıcı için gözlemlerdir; uyumluluk veya okunabilirlik garantisi değildir. Raster tabanlı önizlemeyi büyütmek daha temiz kontur geri kazandırmadı. **Piksel tepkisi ve düzenlenebilir geometri** ![Gri tonlamalı piksel kenar tepkisi eşkenar dörtgeni ile bağımsız çizilmiş mercan rengi eşkenar dörtgen halka ve düzenleme düğümlerini karşılaştıran kavramsal illüstrasyon](https://perfectvector.com/blog/svg-convolution-edge-preview/pixels-and-paths.webp) *İllüstrasyon: piksel kenar önizlemesi ve düzenlenebilir yol farklı temsillere sahiptir. Bu bir tarayıcı ekran görüntüsü veya dönüşüm sonucu değildir.* ## Kâğıdı silmeden kaybolan sonucu düzeltin `preserveAlpha` varsayılan olarak false değerindedir. Bu ayarda çekirdek alfayı da işler. Opak girdimizin her yerinde alfa 1 olduğundan sıfır toplamlı kenar çekirdeği tekdüze renkle birlikte tekdüze alfasını da yok eder. İncelenen testte sonuç kayboldu. `preserveAlpha="true"` ayarı, rengi işlerken kaynak alfayı korur. [preserveAlpha başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) bu ayrımı belgeler. Bu testte opak kenar önizlemesini geri getirir. Filtrelenmiş renkleri siyaha dönse bile opak kâğıdı ve beyaz merkezi opak tutar. Alfayı korumak arka planı kaldırmaz veya logoda delik bulmaz. Önizleme çoğunlukla siyahsa önce bilinen tekdüze alanı bilinen sınırla karşılaştırın. Siyah, geçerli sıfır tepki olabilir. Orta ton çevresindeki işaretli parlaklık değişimlerini incelemek için `bias="0.5"` deneyin; [bias başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias), bölmeden sonra eklenen ofseti açıklar. Bu, SVG geometrisini değil görüntüleme aralığını değiştirir. ## Sınırları çizimden ayrı kontrol edin İlk karşılaştırma için `edgeMode="duplicate"` ayarını koruyun. Komşu örnekler girdinin dışına düştüğünde kenar piksel değerlerini uzatır. `none` sıfır değerli RGBA örnekleri kullanır; `wrap` karşı kenardan örnek alır. Bunlar [edgeMode başvurusundaki](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) ayrı kurallardır. Opak beyaz kartımızda yalnızca `duplicate` değerini `none` yapmak, kartın dışında parlak çerçeve üretti. Bu sınır eşkenar dörtgene değil görsel dikdörtgenine aittir. Çerçeveyi çizim konturu saymadan önce filtresiz dosyayla karşılaştırın. [Filter Effects belirtimi](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement), çekirdek hedefini ve örnekleme davranışını tanımlar. Burada `targetX="1"` ve `targetY="1"`, 3 × 3 çekirdeği ortalar. Bu başlangıçta `kernelUnitLength` ayarlanmamıştır. Komşu örneğin her görüntüleme boyutunda daima bir SVG kullanıcı birimi uzaklıkta olduğunu varsaymayın; teslim edilen işlemeyi inceleyin. ## Keskinleştirmeyi bulanıklık kurtarma değil, kontrol olarak kullanın Yerel değişimleri vurgularken dolgulu çizimi korumak için yalnızca `kernelMatrix` değerini şununla değiştirin: ```text 0 -1 0 -1 5 -1 0 -1 0 ``` Toplam 1'dir. Tekdüze `c` kanal değeri, divisor 1 ve bias 0 ile `5c - 4c = c` döndürür. Testimizde düz gri örnek 64'te kalırken sınır pikselleri değişti. Bu karşılaştırma için `preserveAlpha="true"` ve `edgeMode="duplicate"` ayarlarını koruyun. Keskinleştirme, yararlı sınırlarla birlikte gürültüyü ve haleleri vurgulayabilir. Görüntü filtreye ulaşmadan kaybolmuş kaynak ayrıntısını geri getirmez. Büyütülmüş önizleme kötü görünüyorsa daha güçlü çekirdeği kaynak çözünürlüğünün yerine koymak yerine özgün görüntüye dönün. ## Vektör izleme demeden önce dosyayı inceleyin Yayımlanan başlangıç, `href` değeri `data:image/png` ile başlayan bir `` içerir. [image öğesi başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image), bu öğenin gösterebildiği raster ve SVG kaynaklarını açıklar. Burada medya türü gömülü rasteri belirtir; kenar filtresi öğeyi yerinde bırakır. Karşılaştırma için bağımsız oluşturulmuş ana dosya beyaz dikdörtgen üzerinde şu bileşik yolu kullanır: ```xml ``` Bu koordinatlar ayrı yazılmıştır. Filtrelenmiş görüntüden geri kazanılmamıştır; piksel çizimi ve geometri kontrolünün her sınır örneğinde eşleşmesi gerekmez. [Gömülü raster inceleme kılavuzu](https://perfectvector.com/tr/blog/svg-contains-raster-image), yalnızca yakınlaştırmaya güvenmeden karışık SVG'yi kontrol etmeyi açıklar. Web çiziminde filtresiz SVG ana dosyasını koruyun ve efekt tasarıma hizmet ediyorsa filtreli görüntüleme kopyası kullanın. Düzenleme veya üretim yolları için gerçek kaynak konturlarını ve iç açıklığı inceleyin. [Çizgi sanatından SVG'ye kılavuzu](https://perfectvector.com/tr/blog/line-art-to-svg) bu geometri işini ele alır. Başlangıç çiziminiz düz PNG veya JPG ise ve düzenlenebilir kaynak şekillerine ihtiyacınız varsa PerfectVector uygundur. [Özgün görseli SVG'ye dönüştürün](https://perfectvector.com/tr/image-to-vector), konturu ve iç açıklığı inceleyin ve temiz sonucu ana dosya olarak koruyun. Başarılı kenar önizlemesi bu kontrolün yerini almaz. [Vektörleştirme kılavuzu](https://perfectvector.com/tr/blog/what-is-image-vectorization), yolları yeniden oluşturmanın görsel efekti uygulamaktan nasıl farklı olduğunu açıklar. ## Sık sorulan sorular **SVG feConvolveMatrix kenar algılaması vektör yolları oluşturur mu?** Hayır. İşlenmiş piksel efekti hesaplar. Bu örnekte gömülü PNG, image öğesi olarak kalır; düzenlenebilir konturlar ayrı çizilmiş veya izlenmiş geometri gerektirir. **Kenar filtrem çizimi neden kaybettiriyor?** preserveAlpha ayarını kontrol edin. Varsayılan false ayarı alfayı da filtreler. Bu opak testte sıfır toplamlı çekirdek incelenen sonucu saydam yaptı. Alfayı korumak opak önizlemeyi geri getirdi. **preserveAlpha beyaz arka planı kaldırır mı?** Hayır. Kaynak alfayı korur. Opak beyaz arka plan, filtrelenmiş rengi siyah olsa bile opak kalır. Arka plan kaldırma ve yol yeniden oluşturma ayrı işlerdir. **Kenar filtresi neden görselin çevresine çerçeve çiziyor?** edgeMode ve girdi dikdörtgenini inceleyin. Opak beyaz kartımızın dışında sıfır değerli örnek kullanmak parlak dış sınır oluşturdu. Duplicate kenar işleme bu testte o sınırı önledi. ## Kaynaklar 1. [MDN: feConvolveMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) — piksel komşuluğu evrişimi ve varsayılan renk işleme. 2. [MDN: divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) — normalleştirme ve sıfır toplam varsayılanı. 3. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — filtre efekti tanımlama ve uygulama. 4. [MDN: preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) — yalnız renk işleme ve alfayı içeren işleme. 5. [MDN: bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) — bölmeden sonra tepkiyi kaydırma. 6. [MDN: edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) — duplicate, wrap ve sıfır sınır işleme. 7. [W3C: Filter Effects, feConvolveMatrix](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) — hedef ve örnekleme kuralları. 8. [MDN: image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — başvurulan raster ve SVG görsel içeriği. ## Explore - [Read the HTML article](https://perfectvector.com/tr/blog/svg-convolution-edge-preview) - [MapLibre SVG Simgeleri: Piksel ve Sembol Boyutunu Denetleyin](https://perfectvector.com/tr/blog/maplibre-svg-symbol-image.md) - [Satori SVG Logoları: Çizimi Markalı Kartta Koruyun](https://perfectvector.com/tr/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)