> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG Işık Filtreleri: Amblemi Gölgeleyin, Açıklığı Koruyun > Delikli amblemin alfasından yayınık ve aynasal SVG aydınlatması oluşturun, sonucu silueti içinde tutun ve ayrı bir düz vektör ana dosyası koruyun. Source: https://perfectvector.com/tr/blog/svg-lighting-relief Language: tr Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting) 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`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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 ``` Filtre, rolünü inceleyebilmeniz için her ara sonuca ad verir: | Aşama | Girdi ve sonuç | Amaç | | --------------- | ----------------------------- | --------------------------------------- | | Bulanıklaştırma | SourceAlpha → bump | Yükseklik geçişini yumuşatmak | | Yayınık | bump → diffuse | Genel aydınlatmayı hesaplamak | | Çarpma | SourceGraphic × diffuse → lit | Özgün rengi gölgelemek | | Aynasal | bump → shine | Yansıma bileşenini hesaplamak | | Toplama | lit + shine → paint | Gölge ve parlaklığı birleştirmek | | Sınırlama | paint in SourceAlpha | Özgün silueti ve açıklığı geri getirmek | 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`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) 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`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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ı. | Örnek | Bant RGB | Kenar RGB | Açıklık / dış alfa | | ----------------------------------------------- | ------------- | ------------- | ------------------ | | Düz ana dosya | 220, 121, 95 | 220, 121, 95 | 0 / 0 | | Ham yayınık ışık haritası, ölçek 4 | 219, 219, 219 | 214, 214, 214 | 255 / 255 | | Yayınık renk, ölçek 4, sınırlanmış | 189, 102, 81 | 185, 101, 79 | 0 / 0 | | Yayınık renk, ölçek 12, sınırlanmış | 189, 102, 81 | 155, 83, 64 | 0 / 0 | | Düz renk üzerinde aynasal, ölçek 4, sınırlanmış | 242, 162, 145 | 221, 122, 96 | 0 / 0 | | Birleşik efekt, ölçek 4, sınırlanmış | 214, 149, 137 | 185, 102, 81 | 0 / 0 | 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** ![Düz boyama, genel gölgeleme ve yoğun bir parlaklıkla gösterilen, eşleşen delikli eşkenar dörtgen amblemlerin kavramsal illüstrasyonu.](https://perfectvector.com/blog/svg-lighting-relief/lighting-and-master.webp) *İllüstrasyon: yayınık gölge ve aynasal parlaklık, açıklığı temiz kalırken aynı konturu işleyebilir. Bu tarayıcı örneği, izleme sonucu veya fiziksel kabartma değildir.* ## Konturu değiştirmeden önce yükseklik alanını ayarlayın [`surfaceScale`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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](https://www.w3.org/TR/filter-effects-1/#feDiffuseLightingElement), 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](https://perfectvector.com/tr/blog/svg-shadow-clipped) 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](https://perfectvector.com/tr/blog/vector-artwork-for-embossing) 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](https://perfectvector.com/tr/blog/svg-femorphology-outline), 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](https://perfectvector.com/tr/vectorize-logo), 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting) — Alfa kabartı haritası girdisi ve opak yayınık ışık çıktısı. 2. [MDN feGaussianBlur](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur) — Yumuşatılmış girdi ve filtre bölgesi hususları. 3. [MDN feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — Aritmetik çarpma/toplama ve kaynak alfa sınırlaması. 4. [MDN color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — Filtre işlemlerinin linearRGB varsayılanı. 5. [MDN feSpecularLighting](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting) — Yansıma bileşeni ve denetimleri. 6. [MDN feDistantLight](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDistantLight) — İki aydınlatma ilkeli için ışık kaynağı. 7. [MDN surfaceScale](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/surfaceScale) — Hesaplama için yüzey yüksekliği ölçeği. 8. [Filter Effects aydınlatma belirtimi](https://www.w3.org/TR/filter-effects-1/#feDiffuseLightingElement) — Aydınlatma alfası, açı birimleri ve komşu örnek hesaplamaları. ## Explore - [Read the HTML article](https://perfectvector.com/tr/blog/svg-lighting-relief) - [SVG Yer Değiştirme Haritaları: Logo Önizlemesini Çarpıtın](https://perfectvector.com/tr/blog/svg-fedisplacementmap-artwork.md) - [SVG kontur hizalama: İç ve dış kenarlıkları ayarlayın](https://perfectvector.com/tr/blog/svg-stroke-alignment.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)