SVG Kenar Algılama: feConvolveMatrix Önizlemesi

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, 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:

-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, 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.

<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>

Filtre tanımı yalnızca görsel filter="url(#effect)" ile ona başvurduğu için etkili olur. SVG filter başvurusu, 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.

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

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 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, 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 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, ç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:

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 <image> içerir. image öğesi başvurusu, 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:

<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>

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, 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 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, 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, 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 — piksel komşuluğu evrişimi ve varsayılan renk işleme.
2. MDN: divisor — normalleştirme ve sıfır toplam varsayılanı.
3. MDN: filter — filtre efekti tanımlama ve uygulama.
4. MDN: preserveAlpha — yalnız renk işleme ve alfayı içeren işleme.
5. MDN: bias — bölmeden sonra tepkiyi kaydırma.
6. MDN: edgeMode — duplicate, wrap ve sıfır sınır işleme.
7. W3C: Filter Effects, feConvolveMatrix — hedef ve örnekleme kuralları.
8. MDN: image — başvurulan raster ve SVG görsel içeriği.