SVG alfa eşiği: Şeffaflığa kesin bir sınır koyun

0.5 değerinde bir alfa eşiği için feComponentTransfer içinde <feFuncA type="discrete" tableValues="0 1"/> kullanın. 0.5 değerinin altındaki girdi alfası şeffaf, bu değere eşit veya üzerindeki alfa ise opak olur. RGB kanallarının aktarım eşlemelerinin özdeşlik olarak kalmasını istiyorsanız RGB işlevlerini belirtmeyin.

Bu filtre, alttaki çizimin yapısını değil, görüntülenen alfayı değiştirir. Opak beyaz bir arka planı kaldıramaz; çünkü alfası 1 olan beyaz pikseller, opak renkli piksellerle aynı eşikten geçer. SVG'nin içine gömülmüş bir PNG de raster görüntü olarak kalır.

Eşiği seçmeden önce bilinen kaynak piksellerini karşılaştırın

Kademeli alfa değişimi, şeffaf bir kare delik, opak beyaz bir alan ve kontrollü altı renk örneği içeren küçük bir 8 bit RGBA PNG oluşturduk. Bu testteki her SVG, aynı PNG baytlarını tek bir image öğesine gömer. Filtresiz, discrete ve enterpolasyonlu table çeşitleri yalnızca filtre ayarları bakımından farklıdır.

Aşağıdaki dama deseni, SVG'nin dışındaki sayfaya aittir. Görüntünün alfa kanalının bir parçasıymış gibi görünmek yerine şeffaflığı ortaya çıkarır.

Sayfamız gerçek SVG çeşitlerini yükledi, bunları tarayıcıdaki bir canvas üzerine çizdi ve altı renk örneğinin içinden örnekler aldı. Çıktı alfa baytları şöyleydi:

Normalize edilmiş alfa değerleri, bu baytların 255 değerine bölünmesiyle elde edilir. Dolayısıyla 127/255, 0.5 değerinin biraz altında; 128/255 ise biraz üzerindedir. Bu örnekler matematiksel eşiğin iki yanında yer alır; 8 bit PNG baytı tam olarak 0.5 değerini temsil etmez.

Kaynak delikte her sürümde alfa 0 ölçüldü. Beyaz alanda ise her sürümde 255 ölçüldü. Bunlar bu kontrollü test görseline ait gözlemlerdir; herhangi bir çizimin eşikleme sonrasında istenen her ayrıntıyı koruyacağı iddiası değildir.

Aktarımı alfaya uygulayın

Temel filtre kısadır:

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

Görüntüye filter="url(#alpha)" ile uygulayın. Bu örneğin filtre bölgesi, 320 × 240 boyutundaki kaynağın ve görüntü alanının tamamını kapsar. Bu boyutları ilgisiz bir dosyaya kopyalamak yerine kendi çiziminize uygun sınırlar kullanın.

MDN feFuncA başvuru sayfası, bunu feComponentTransfer içindeki alfa aktarım işlevi olarak tanımlar. Bileşen aktarımı başvuru sayfası, kanal bazında yeniden eşlemeyi ve alfa ile önceden çarpılmamış renk değerleri üzerinde yapılan hesaplamaları açıklar.

Güncel Filter Effects belirtimi, belirtilmeyen kanal işlevlerine özdeşlik eşlemesi verir. Kodumuzda feFuncR, feFuncG ve feFuncB yoktur; yalnızca alfa aktarım işlevi değiştirilir. Bu, arka plan üzerindeki görünür renklerin aynı görüneceği anlamına gelmez: alfayı değiştirmek, birleştirme sonucundaki görünümlerini değiştirir.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

Eksiksiz test örneği PNG baytlarını korur. Filtre, kayıtlı kaynak dosyanın renklerini değiştirmez veya onu yollarla değiştirmez. Gömülü raster görüntü teşhisi yazısı, dıştaki .svg dosya adının neden vektör geometrisini kanıtlamadığını açıklar.

Basamaklı aktarımı enterpolasyonlu tablodan ayırın

Her iki aktarım türü de tableValues kullanır, ancak girdileri farklı yorumlar. type başvuru sayfası, kullanılabilir aktarım işlevlerini listeler; tableValues başvuru sayfası ise arama tablosundaki değer listesini açıklar.

discrete için her girdi, eşit uzunlukta bir girdi aralığını kaplar. 0 1 şeklindeki iki girdide ilk aralık 0 ≤ A < 0.5, ikinci aralık ise 0.5 ≤ A ≤ 1 olur. Çıktı bu iki değer arasında sıçrar.

table için girdiler, doğrusal enterpolasyon bölgelerinin uç noktalarıdır. 0 1 ile enterpolasyon, her girdi alfasını yine kendisine eşler. Bu bir özdeşlik aktarımıdır; örneklenen table sütunumuzun filtresiz sütunla aynı olmasının nedeni budur.

Belirtimdeki aralık formülleri, belgelenmiş şu alternatifleri de açıklar:

Ekran görüntümüz, iki girdili discrete ve table durumlarını test eder. Dört girdili satırlar, belirtimdeki eşlemeleri açıklar; ölçülmüş ek çizim çeşitleri değildir. Yalnızca sıfırlar ve birler içeren bir listenin mutlaka ikili eşik üreteceğini varsaymak yerine type değerini bilinçli seçin.

Girdi alfasını daha sonra uygulanan opaklıktan ayrı tutun

Filtreye gerçek kaynak alfasını verin. Test örneğimizde bu alfa PNG piksellerinde saklanır. Vektör testi için filtreyi uygulamadan önce dolgunun alfa değerini veya fill-opacity kullanın.

Filter Effects birleştirme modeli, filtreleri opaklıktan önce uygular. Bu nedenle öğe veya onu çevreleyen grup üzerindeki genel opaklık, filtreden sonra görüntülenen sonucu azaltabilir. Kaynağa eşik uygulayıp ardından sonucu daha düşük opaklıkla birleştirirseniz yeniden yarı şeffaf görünebilir. Kontrollü bir eşik testine bu sonraki opaklığı dahil etmeyin.

Kesin bir eşik, kaynağın yarı şeffaf geçişini de ortadan kaldırır. Silik pikseller kaybolur, korunan yarı şeffaf pikseller ise tamamen opak olur. Bu, korumak istediğiniz yumuşak bir parlamayı veya ince bir kenarı kaldırabilir. Sonucu kullanılacağı boyutta ve birden fazla arka plan üzerinde inceleyin. İkili çıktı alfası, son görüntülenen kenarın örnekleme veya birleştirme etkilerinden arınmış olacağını garanti etmez.

Yarı şeffaflık tasarımın bir parçasıysa bunu koruyun veya kesin bir eşik dayatmak yerine kademeli aktarım kullanın. Bilinçli olarak tek renkli bir görünürlük maskesi oluşturmak istiyorsanız SVG CSS maske rehberi farklı bir sunum iş akışını ele alır.

Opak beyaz için farklı bir teşhis gerekir

Beyaz alan, alfası tamamen opak olduğu için korunur. Bu işlem, pikselin beyaz görünmesine göre değil, alfaya göre seçim yapar. Tamamen opak arka plan pikselleri, bu 0 1 discrete eşlemesi altında şeffaflaşmaz.

Dosya istenmeyen beyaz bir arka plan içeriyorsa önce bunun ayrı bir SVG şekli mi, yoksa raster görüntünün parçası mı olduğunu belirleyin. İstenmeyen vektör arka plan şeklini doğrudan silin veya düzenleyin. Beyazın piksellere işlenmiş olduğu bir PNG için vektör olarak yeniden oluşturmadan önce raster kaynağı temizleyin veya uygun bir arka plan kaldırma iş akışı kullanın. Şeffaf arka planlı SVG rehberi, bu durumları açıklar.

Arka planı renge göre kaldırmadan önce çizimdeki nesnenin gerçekten beyaz olan kısımlarını da göz önünde bulundurun. Bu alfa filtresi, hangi beyaz bölgenin arka plan, hangisinin çizimin parçası olduğunu çıkaramaz; kaynak tek katmanda birleştirilirken kaybolan renk bilgilerini de geri getiremez.

Vektör olarak yeniden oluşturmadan önce şeffaf raster hazırlayın

Tamamlanmış tasarım yalnızca raster biçimindeyse ve SVG geometrisine ihtiyacınız varsa PerfectVector yardımcı olabilir. Önce gerçek şeffaflığa sahip bir PNG hazırlayın, ardından PNG'yi SVG'ye dönüştürün. Önizlemeyi zıt renkli bir arka plan üzerinde karşılaştırın, silueti ve açıklıkları inceleyin, indirilen dosyada istenmeyen arka plan geometrisi olup olmadığını kontrol edin.

Filtre örneğimiz bir görüntüleme deneyidir. Filtrelenmiş bir SVG'yi vektörleştirmeye göndermez ve yeni bir vektörleştirme sonucu göstermez. Eşik uygulanmış raster görünümünü korumanız gerekiyorsa vektör olarak yeniden oluşturmayı düşünmeden önce düzenleyicinizde gerçek bir raster teslim kopyası hazırlayıp doğrulayın. Tarayıcı önizlemesine güvenmek yerine bu kopyanın alfasını inceleyin.

Mevcut bir vektör ana dosyasını doğrudan kullanın. Yarı şeffaflık yararlı tasarım bilgisi taşıyorsa koruyun; basit bir sembolü yeniden çizmek bakımı kolaylaştırıyorsa bunu tercih edin. Görüntü vektörleştirmeye genel bakış, raster kaynağı yeniden oluşturmayı mevcut bir SVG'nin sunumunu değiştirmekten ayırır.

Sık sorulan sorular

discrete tableValues 0 1 hangi alfa eşiğini kullanır? 0.5 değerinin altındaki girdi alfası 0'a; 0.5 değerine eşit veya üzerindeki alfa 1'e eşlenir. Test edilen 8 bit PNG renk örneklerinde 127 baytı şeffaf, 128 baytı opak olur.

tableValues 0 1 neden şeffaflığımı değiştirmiyor? type table kullanıldığında bu girdiler, 0'dan 1'e doğrusal enterpolasyon tanımlar; bu, özdeşliktir. Burada gösterilen iki basamaklı eşleme için type discrete kullanın.

Bu işlem beyazı kaldırır veya PNG'yi vektör yollarına dönüştürür mü? Hayır. Tamamen opak beyaz bu alfa eşiğinden geçer. SVG çeşitlerimiz hâlâ tek bir image öğesinde aynı PNG'yi içerir ve hiçbir yol içermez; arka plan temizliği ile vektör olarak yeniden oluşturma ayrı işlerdir.

Kaynaklar

1. W3C — Filter Effects Level 1 — Varsayılan özdeşlik eşlemelerini, alfa ile önceden çarpılmamış kanal aktarımını ve table/discrete aralık formüllerini tanımlar.
2. MDN — feComponentTransfer — Filtre temel öğesinin yaptığı kanal eşlemesini açıklar.
3. MDN — feFuncA — Alfa kanalı aktarım işlevini tanımlar.
4. MDN — type — Bileşen aktarımı işlev türlerini ve kullanıldıkları öznitelik bağlamını listeler.
5. MDN — tableValues — table ve discrete aktarımlarında kullanılan arama tablosu girdilerini açıklar.

Raster bir tasarımdan vektör geometrisi mi elde etmek istiyorsunuz? Şeffaf bir PNG hazırlayıp dönüştürün, ardından önizlemedeki silueti ve delikleri inceleyin ve indirilen SVG'yi renkli bir arka plan üzerinde doğrulayın.