SVG Işık Filtreleri: Amblemi Gölgeleyin, Açıklığı Koruyun

Kabartma görünümlü SVG logo için SourceAlpha öğesini yumuşatın, bu alfayı feDiffuseLighting veya feSpecularLighting içine verin, ışığı kaynak rengiyle birleştirin ve özgün SourceAlpha ile in bileşimi yaparak bitirin. Son adım efekti amblemin içinde tutar ve açıklığını korur. Yolun filtresiz kopyasını düz ana dosyanız olarak kaydedin.

Efekt işlenen görünümü değiştirir. Yükseltilmiş katı cisim, yeni kontur veya üretim dosyası oluşturmaz. Bu anlatım, aydınlatma aşamalarını ve alfalarını karşılaştırmak için doğrudan SVG olarak oluşturulmuş, özgün eşkenar dörtgen halka amblem kullanır.

Aydınlatma yüzeyi olarak alfayı kullanın

feDiffuseLighting, girdi alfasını kabartı haritası olarak kullanır ve opak ışık haritası üretir. Görünümü ışığa ve girdi yüzeyine bağlıdır. MDN yayınık aydınlatma başvurusu bu davranışı açıklar. Örnekte halkanın opak bölümleri yüksek alanı, açıklığı ise alçak alanı sağlar.

Yalnızca SourceAlpha öğesini bulanıklaştırıyor, özgün renkli yolu SourceGraphic olarak hazır tutuyoruz. Yumuşatılmış alfa, aydınlatma hesabına iç ve dış kenarlarda kademeli geçiş verir. feGaussianBlur, bu yumuşatmayı stdDeviation ile yönetir; başlangıç örneği açık kullanıcı uzayı filtresinde 2.5 kullanır.

Ham yayınık harita, özgün yolun saydam olduğu yerler dâhil filtre bölgesi boyunca boyar. Bu, ışık hesabını incelemek için yararlıdır; ancak delikli amblemimiz için yanlış son siluettir. Son sınırlama adımı için özgün alfayı hazır tutun.

Eksiksiz gölgeli amblem başlangıcını kopyalayın

Bunu emblem-lighting.svg olarak kaydedip tarayıcıda açın. Tek bileşik yol içerir ve harici görsel bağımlılığı yoktur.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="relief" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" color-interpolation-filters="linearRGB">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="bump"/>
      <feDiffuseLighting in="bump" surfaceScale="4" diffuseConstant="1" lighting-color="#ffffff" result="diffuse">
      <feDistantLight azimuth="225" elevation="45"/>
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit"/>
      <feSpecularLighting in="bump" surfaceScale="4" specularConstant=".7" specularExponent="18" lighting-color="#ffffff" result="shine">
      <feDistantLight azimuth="225" elevation="45"/>
      </feSpecularLighting>
      <feComposite in="lit" in2="shine" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="paint"/>
      <feComposite in="paint" in2="SourceAlpha" operator="in"/>
    </filter>
  </defs>
  <path d="M100 20 L180 100 L100 180 L20 100 Z M100 58 L142 100 L100 142 L58 100 Z" fill="#dc795f" fill-rule="evenodd" filter="url(#relief)"/>
</svg>

Filtre, rolünü inceleyebilmeniz için her ara sonuca ad verir:

Aritmetik çarpma, diğer katsayılar sıfırken k1="1" kullanır. Toplama, diğerleri sıfırken k2="1" k3="1" kullanır. feComposite, bu piksel işlemlerini ve in işlecini tanımlar. Özgün sınırı istediğinizde son bileşimin ikinci girdisini bulanık bump değil, SourceAlpha tutun.

Filtre açıkça SVG filtre işlemlerinin varsayılanı olan color-interpolation-filters="linearRGB" kullanır. Bu, normal boyama enterpolasyonundan ayrıdır. MDN color-interpolation-filters başvurusu ayrımı belgeler. Burada ölçülen tüm aydınlatma varyantları aynı ayarı kullanır.

Yayınık gölgeyi aynasal parlaklıkla karşılaştırın

Yayınık aydınlatma, ışık haritasına göre özgün rengi koyulaştırır ve açar. Aynasal aşama yansıma bileşeni ekler. feSpecularLighting, ışığa bağlı çıktısını ve parametrelerini belgeler. Başlangıç, ölçülü .7 sabiti ve 18 üssünü kullanır; işe yarar yayınık efekt oluşturduktan sonra ayarlayın.

Yalnızca yayınık etkiyi incelemek için bulanıklaştırma, yayınık ve çarpma aşamalarını koruyun; son bileşimin ilk girdisini paint yerine lit yapın. Aynasal ve toplama aşamalarını kaldırın.

Düz renk üzerinde yalnızca aynasal etkiyi incelemek için bulanıklaştırma ve aynasal aşamalarını koruyun. Toplamanın ilk girdisini lit yerine SourceGraphic yapın, yayınık ve çarpma aşamalarını kaldırın ve son paint in SourceAlpha bileşimini koruyun. İki karşılaştırma da aynı özgün yolu ve ışık yönünü korur.

Uzak ışığımız azimuth="225" elevation="45" kullanır. feDistantLight, iki aydınlatma ilkeli için de ışık kaynağı öğesidir. Bu açılar piksel konumu değil, derece cinsindendir. Birleşik efekti karşılaştırırken iki aydınlatma aşamasında yönü birlikte değiştirin.

Özgün tarayıcı kontrolleri ne gösterdi?

Altı özgün SVG örneğini Chrome'da 80 × 80 ve 160 × 160 CSS pikselinde açtık. Düz ana dosya, yayınık, aynasal ve birleşik efektler görsel olarak farklı kaldı. Daha yüksek yayınık surfaceScale, bu testte kenar kontrastını güçlendirdi. Ham yayınık kontrolü, saydam siluet yerine açıklığı dolu gri dikdörtgen gösterdi.

Ayrı piksel geri okumalarında 200 × 200 kaynak tuvali boyutu kullanıldı. Bant örneği (100, 38), kenar örneği (101, 22), açıklık (100, 100) ve dış örnek (10, 10) konumundaydı.

Her dosya aynı d değerini, bir yolu ve sıfır image öğesini korudu. Ekran efekti ek kaynak geometrisi üretmedi. Bunlar başka işleyici veya düzenleyicinin içe aktarma davranışına dair garanti değil, bu tarayıcı ve kaynakla ilgili gözlemlerdir.

Aydınlatma ve düz ana dosya

Konturu değiştirmeden önce yükseklik alanını ayarlayın

surfaceScale, aydınlatma hesabında kullanılan yüzey yüksekliği ölçeğini ayarlar. Yolu genişletmez. Yayınık 4 ve 12 kontrollerimiz yalnızca bu değeri değiştirdi: örneklenen düz bant aynı renkte kaldı, kenar örneği ise 12 değerinde koyulaştı.

Kontrollü bir sıra kullanın:

1. Özgün saydam silueti ve açıklığı filtresiz doğrulayın.
2. Alfa yumuşatmasını ve ışık yönünü seçin.
3. Diğer her şey sabitken küçük ve daha büyük surfaceScale karşılaştırın.
4. Aynasal parlaklık ekleyin, ardından son işlem olarak boyayı özgün alfayla sınırlayın.
5. Teslim edilen çizimi gerçek görüntüleme boyutunda ve kontrast arka planda kontrol edin.

Güncel Filter Effects belirtimi, yayınık çıktı alfasını her yerde bir, aynasal çıktı alfasını ise renk bileşenlerinden tanımlar. İki çıktının da özgün açıklığı koruduğu varsayılmamalıdır. Komşu alfa örneklerinden normal hesabını da tanımlar. Bu başlangıçta kernelUnitLength ayarlanmamıştır; iki boyutlu incelememiz boyuttan bağımsız aydınlatma örneklerini kanıtlamaz.

Bir aydınlatma aşamasının ara tamponu son sonuç olarak görünüyorsa adlandırılmış girdileri ve son ilkeli kontrol edin. Bu halkada opak gri dikdörtgeni, yayınık ışık haritasını doğrudan döndürerek yeniden ürettik. Önceki çarpma saydamlığı zaten koruyor gibi görünse bile son in SourceAlpha adımı bilinçlidir.

Bulanıklık veya efekt beklenmeyen dikdörtgende kesiliyorsa SVG kırpılma kılavuzuyla filtre bölgesini inceleyin. Bu bölgeyi son kaynak alfa sınırlamasından ayrı tutun: biri efektin çalışma alanını sınırlar, diğeri amaçlanan silueti geri getirir.

Ekran efektini düz ana dosyayla teslim edin

Düz ana dosyayı incelemek için yolun filter özniteliğini kaldırın. Aynı dış konturu, iç açıklığı ve düz mercan rengi dolguyu korur. Sonraki düzenlemelerin özgün geometriden başlayabilmesi için bu kopyayı gölgeli web sürümüyle saklayın.

Fiziksel son işlem için kabartma için vektör çizim gibi ayrı hazırlık iş akışı kullanın. Ekran aydınlatma ön ayarı, kalıp geometrisi veya ölçülmüş kabartma derinliği yerine görünüm sağlar. SVG morfoloji dış hat kılavuzu, yeniden oluşturulmuş yollar saymadan başka bir filtre tabanlı sınır işlemini açıklar.

Logonuz yalnızca PNG veya JPG olarak mevcutsa logoyu PerfectVector ile vektörleştirin, geri kazanılan dış konturu ve açıklığı inceleyin ve SVG iş akışınıza ışık eklemeden önce temiz düz ana dosyayı koruyun. Hizmet vektör geometrisini geri kazanır; bu yayınık/aynasal işlem hattı ayrı oluşturulmuş görüntüleme efektidir. Vektör ana dosyanız zaten varsa filtreyi doğrudan uygulayıp inceleyin.

Sık sorulan sorular

SVG aydınlatma filtreleri logoyu kabartma gibi gösterebilir mi? Alfa tabanlı yükseklik alanından gölge ve parlaklık benzetimi yapabilirler. İşlenen efekt fiziksel kabartma, ek yol konturları veya üretim kalıbı dosyası oluşturmaz.

SVG aydınlatma efektim saydam açıklığı neden dolduruyor? Ham yayınık ışık haritası filtre bölgesi boyunca opaktır. Işığı kaynak rengiyle birleştirin ve işlemi özgün siluete sınırlamak için özgün SourceAlpha ile in bileşimi yaparak bitirin.

Yayınık ve aynasal SVG aydınlatması arasındaki fark nedir? Yayınık aydınlatma, özgün rengi gölgelemek için genel ışık sağlar. Aynasal aydınlatma, parlaklık olarak eklenecek yansıma bileşeni sağlar. İkisi de girdi alfasını kabartı haritası olarak kullanır ve seçilen ışık ve yüzey ayarlarına bağlıdır.

surfaceScale logomun yolunu değiştirir mi? Hayır. Aydınlatma hesabında kullanılan yükseklik ölçeğini değiştirir. İki yayınık kontrolümüzde yol verileri özdeş kalırken işlenen kenar kontrastı değişti.

Kaynaklar

1. MDN feDiffuseLighting — Alfa kabartı haritası girdisi ve opak yayınık ışık çıktısı.
2. MDN feGaussianBlur — Yumuşatılmış girdi ve filtre bölgesi hususları.
3. MDN feComposite — Aritmetik çarpma/toplama ve kaynak alfa sınırlaması.
4. MDN color-interpolation-filters — Filtre işlemlerinin linearRGB varsayılanı.
5. MDN feSpecularLighting — Yansıma bileşeni ve denetimleri.
6. MDN feDistantLight — İki aydınlatma ilkeli için ışık kaynağı.
7. MDN surfaceScale — Hesaplama için yüzey yüksekliği ölçeği.
8. Filter Effects aydınlatma belirtimi — Aydınlatma alfası, açı birimleri ve komşu örnek hesaplamaları.