SVG feMorphology: Yeni yol oluşturmadan dış çizgi

Çok renkli bir SVG'nin tüm siluetine dış çizgi eklemek için SourceAlpha kanalını genişletin, özgün alfayı bu daha büyük sonuçtan çıkarın, kalan halkayı renklendirin ve özgün çizimi en üste birleştirin. Filtre, özgün yol verilerini değiştirmeden çizimin ekranda görünen biçimini değiştirir.

Daha küçük bir alfa silueti istiyorsanız operator="erode" kullanın. Bu işlemlerin hiçbiri düzenlenebilir bir ofset yolu oluşturmaz. Morfoloji, dairesel bir kontur ofseti yerine dikdörtgen bir komşuluk kullandığından delikleri, dar boşlukları ve keskin köşeleri görsel olarak kontrol etmek gerekir.

Renk kanallarıyla değil, siluetle başlayın

W3C Filter Effects belirtimi, genişletmeyi dikdörtgen bir komşuluk içindeki bileşen bazında maksimum, aşındırmayı ise minimum olarak tanımlar. SourceAlpha kullanıldığında girdi, çizimin alfa kanalıdır. Böylece petrol yeşili ve mercan rengi kanallarını ayrı ayrı büyütmeden bir siluet elde edebiliriz.

Bu örnek, filtreyi iki yoldan oluşan çizimin tamamına uygular. Şeffaf kare delik, alfa siluetinin bir parçasıdır. Mercan renkli iç bölge zaten opak petrol yeşili alanın içinde olduğundan ayrı bir dış sınır oluşturmaz.

SVG'yi elle oluşturduk ve bağımsız beş çeşidini bir tarayıcıda açtık. Her dosya aynı iki özgün yol tanımını koruyor. Aşağıdaki karşılaştırma, bu dosyaların gerçek görüntüsüdür; vektörleştirilmiş çizim veya üretilmiş efekt önizlemesi içermez.

10 yarıçapında dış çizgi, görünür siluetin dışına ve deliğin içine doğru büyür. 22 değerinde altın renk, bu test çiziminin kare açıklığını doldurur. 18 4 sürümü yatayda dikeyden daha fazla büyür. Aşındırma, opak dış alanı küçültür ve şeffaf açıklığı büyütür; alt uç da değişir.

Bu gözlemler bu çizime ve bu ayarlara özgüdür. Başka logolar veya simgeler için genel bir güvenli yarıçap kuralı değildir.

Dış alfa halkasını oluşturun

Bu eksiksiz örneği outline.svg olarak kaydedip bir tarayıcıda açın. Bu, görüntü kaydında kullanılan 10 yarıçaplı SVG'nin aynısıdır:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="220" viewBox="0 0 300 220">
<defs>
<g id="artwork">
  <path fill="#173b40" fill-rule="evenodd"
    d="M50 60H250V170H170L150 195L130 170H50Z M105 90H145V130H105Z"/>
  <path fill="#f28567" d="M175 90H220V140H175Z"/>
</g>
<filter id="outline" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="dilate" radius="10" result="grown"/>
  <feComposite in="grown" in2="SourceAlpha" operator="out" result="ring"/>
  <feFlood flood-color="#e4b84c" result="paint"/>
  <feComposite in="paint" in2="ring" operator="in" result="coloredRing"/>
  <feMerge>
    <feMergeNode in="coloredRing"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</defs>
<use href="#artwork" filter="url(#outline)"/>
</svg>

Filtre dört adımda çalışır:

1. feMorphology, SourceAlpha kanalını genişleterek grown sonucunu üretir.
2. feComposite, grown sonucunun özgün alfanın dışında kalan kısmını tutarak ring oluşturur.
3. feFlood altın rengi sağlar; başka bir birleştirme işlemi bu rengi halkayla sınırlar.
4. feMerge, özgün SourceGraphic girdisini renkli halkanın üstüne yerleştirir.

Çıkarma işleminde girdi sırası önemlidir. Belirtimin birleştirme bölümü, in girdisini kaynak, in2 girdisini hedef olarak tanımlar. Burada in="grown", in2="SourceAlpha" ve operator="out", özgün opak alanı genişletilmiş alfadan çıkarır. Bu girdileri ters çevirmek bu dış halkayı üretmez.

Dışında sözcüğü, şeffaf bir deliğin içindeki boşluk da dahil olmak üzere opak alfa bölgesinin dışında anlamına gelir. Dış çizginin iç açıklıklara girmemesi gerekiyorsa bu filtre söz konusu ayrımı otomatik olarak yapmaz. Ayrı bir siluete veya amaçlanan dış sınırı tanımlayan başka bir yapıya ihtiyacınız vardır.

Değiştirilmemiş SourceGraphic girdisini en son birleştirdiğimiz için kaynak renkler görünür kalır. Bu, sıradan bir yol konturundan farklıdır. Ortalanmış, iç bölgeyle kırpılmış veya maske kullanılarak dış bölgeyle sınırlanmış konturlar için SVG kontur hizalaması yazısına bakın; boyama sırası yazısı daha basit olan kontur ve dolgu katmanlamasını açıklar.

Alfayı aşındırın ve kalan renkleri koruyun

Dış çizgi filtresini aşağıdaki tanımla değiştirin ve sondaki use öğesini filter="url(#erode)" kullanacak şekilde güncelleyin:

<filter id="erode" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="erode" radius="10" result="shrunken"/>
  <feComposite in="SourceGraphic" in2="shrunken" operator="in"/>
</filter>

Bu birleştirme, özgün çizimi yalnızca aşındırılmış alfanın kaldığı yerlerde tutar. Özgün çizimin tamamını yeniden üste birleştirmez; çünkü bu, amaçlanan incelmeyi gizlerdi. Bu test çiziminde dıştaki petrol yeşili alan küçülürken içindeki mercan rengi bölge korunur.

Çalışan örneklerde işleci açıkça belirtin. operator başvuru sayfası, feMorphology üzerindeki erode ve dilate değerlerini, feComposite üzerindeki in ve out değerlerinden ayırır. Aynı öznitelik adı, bu iki öğede farklı işler yapar. Morfolojinin varsayılan işleci erode olduğundan, bunu belirtmemek, amaçladığınız genişletmenin tam tersi bir etki elde etmenize kolayca yol açabilir.

Yarıçap birimlerini filtre bölgesinden ayırın

radius başvuru sayfasına göre bu öznitelik bir veya iki sayı kabul eder. Tek sayı her iki eksene uygulanır; iki sayı verildiğinde ilki x, ikincisi y yarıçapıdır. Diğer iki dış çizgi durumunu elde etmek için eksiksiz örnekte yalnızca radius="10" değerini radius="22" veya radius="18 4" olarak değiştirin.

Bunlar, primitiveUnits tarafından seçilen koordinat sistemindeki yarıçaplardır; her görüntüleme boyutunda sabit CSS piksel kalınlığında bir kenarlık garantisi vermezler. 0 0 300 220 viewBox ile açıkça primitiveUnits="userSpaceOnUse" kullanıyoruz. Görüntülenen SVG'nin boyutunu değiştirdiğinizde efekt de çizimle birlikte ölçeklenir.

Benzer adlı iki öznitelik farklı şeyleri kontrol eder:

MDN'nin primitiveUnits başvuru sayfası, filtre temel öğelerinin koordinat sistemini açıklar. filterUnits başvuru sayfası ise dış bölgeyi ayrı olarak açıklar. filterUnits varsayılan olarak objectBoundingBox, primitiveUnits ise userSpaceOnUse değerini kullanır. İkisini de açıkça ayarlamak örneği incelemeyi kolaylaştırır.

Kaynak çizim x=50 ile 250, y=60 ile 195 arasındadır. Her iki eksende eşit değerlerle test edilen en büyük yarıçap 22'dir ve 300 × 220 boyutundaki filtre bölgesi ile görüntü alanı bu sonuca yeterli yer bırakır. Çizimi veya yarıçapı değiştirirken her iki sınırı da yeniden kontrol edin. Belirtim, filtre bölgesini kesin bir kırpma sınırı olarak tanımlar: daha büyük bir yarıçap bu bölgenin dışına boyayamaz. SVG filtre ve görüntü alanı kırpma rehberi, bu iki ayrı sınırı gösterir.

Filtre çalışmıyor gibi görünüyorsa radius değerini de inceleyin. Varsayılan değeri 0'dır ve başvuru sayfası, negatif veya sıfır değerinin temel öğenin etkisini devre dışı bıraktığını belirtir. Yukarıdaki örnekler her iki eksende de açıkça pozitif değerler kullanır.

Teslim etmeden önce delikleri ve köşeleri inceleyin

Morfolojinin dikdörtgen komşuluğu, görünümünü geleneksel yuvarlak bir dış çizgiden farklı kılar. x ve y yarıçaplarının eşit olması bu komşuluğu bir daireye dönüştürmez. Karşılaştırmadaki basamaklı alt uç, bu farkı incelemek için yararlı bir noktadır.

Beş dosyanın tamamının hâlâ aynı d özniteliklerine sahip iki kaynak yol içerdiğini kontrol ettik. Filtre tanımları farklıdır; kaynak geometrileri ise aynıdır. Hedef uygulamanızda düzenleyebileceğiniz, ofset uygulayabileceğiniz veya üretime gönderebileceğiniz yollar gerekiyorsa gerçek SVG nesnelerini inceleyin. Bu ihtiyaç için bir düzenleyicinin geometri işlemini kullanın, ardından ortaya çıkan konturları inceleyin. Yalnızca bu filtreyi değiştirmek veya kaldırmak o konturları sağlamaz.

Filtresiz bir ana dosya ve ayrı bir teslim kopyası tutun. Teslim edilen dosyayı kullanılacağı gerçek ortamda açarak köşeleri, iç açıklıkları, renkleri ve sınırları karşılaştırın. Bu tarayıcı örneği, belirli bir tasarım uygulamasında, dışa aktarıcıda veya kesicide destek bulunduğunu kanıtlamaz.

Efekti eklemeden önce kaynağı hazırlayın

Başlangıç çizimi yalnızca PNG veya JPG olarak mevcutsa PerfectVector yardımcı olabilir. Bir SVG adayı hazırlayın, ardından filtreyi uygulamadan önce yeniden oluşturulan kaynak siluetini, küçük delikleri ve renk sınırlarını inceleyin. Morfolojik bir dış çizgi, amaçlanan geometriyi sizin yerinize onarmak yerine bu siluetteki sorunları büyütür.

Mevcut bir vektör ana dosyasını doğrudan kullanın. Basit bir sembolde elle yeniden çizim daha kolay kontrol edilebilir. Dış çizgisi görüntünün içine işlenmiş, katmanları birleştirilmiş bir görseli vektörleştirmek, özgün filtre ayarlarını geri getirmez veya hangi kısmın filtresiz şekil olduğunu belirlemez. Görüntü vektörleştirmeye genel bakış yazısı, bu yeniden oluşturma sınırını açıklar.

Sık sorulan sorular

feMorphology düzenlenebilir bir dış çizgi yolu oluşturur mu? Hayır. Filtrenin görüntülenen sonucunu değiştirir. Bu örnek aynı iki kaynak yolu koruduğundan, ayrı bir kontur gerektiren hedef uygulamada bir geometri işlemi ve içe aktarma kontrolü gerekir.

Altın renkli dış çizgi neden SVG'mdeki deliği dolduruyor? Halka, şeffaf açıklıkların içi dahil olmak üzere opak alfanın dışına doğru büyür. Bu test çiziminde 22 yarıçapı kare deliği doldurur. Başka çizimlerde boşluk ve yarıçap ayrıca kontrol edilmelidir.

Neden SourceGraphic yerine SourceAlpha kullanılıyor? SourceAlpha, filtrenin her özgün renk kanalını genişletmeden siluet üzerinde çalışmasını sağlar. Örnek, bu alfa halkasını ayrı olarak renklendirir ve özgün renkleri göstermek için SourceGraphic girdisini en son birleştirir.

Kaynaklar

1. W3C — Filter Effects Level 1 — Morfolojinin dikdörtgen komşuluğunu, birleştirme girdilerini ve filtre bölgesi kırpmasını tanımlar.
2. MDN — radius — Tek ve çift değerli yarıçap sözdizimini, birimleri ve efekti devre dışı bırakan değerleri tanımlar.
3. MDN — operator — Morfoloji işlemlerini birleştirme işlemlerinden ayırır.
4. MDN — primitiveUnits — Morfoloji yarıçapının koordinat sistemini belirler.
5. MDN — filterUnits — Dış filtre bölgesinin koordinat sistemini belirler.

Kaynağınız yalnızca raster biçimindeyse PerfectVector ile vektör çizim hazırlayın, filtresiz silueti ve açıklıkları doğrulayın, ardından dış çizgiyi ekleyerek son dosyayı onu görüntüleyecek uygulamada karşılaştırın.