> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG Gren Dokusu: Gürültüyü Çiziminizin İçinde Tutun > feTurbulence ile SVG greni ekleyin, tek renkli gürültüyü SourceAlpha içinde tutun, iki boyutta ayarlayın ve başka hedefler için temiz bir yol ana dosyası koruyun. Source: https://perfectvector.com/tr/blog/svg-feturbulence-grain Language: tr Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 SVG illüstrasyonuna gren eklemek için `feTurbulence` ile gürültü üretin, bunu hafif bir tek renkli kaplamaya dönüştürün ve kaplamayı `SourceAlpha` içinde birleştirin. Özgün dolgunun görünür kalması için `SourceGraphic` üzerine ekleyin. Bu, çizimin yol geometrisine dokunmadan işlenen bir doku ekler. Tek başına gürültü ilkeli farklı sonuç verir: şeklin dış hattını izlemek yerine kendi filtre ilkeli alt bölgesini doldurur. Yaprağın dikdörtgen bir gürültü alanına dönüşebilmesinin nedeni budur. [MDN feTurbulence başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) bu davranışı belgeler. Web illüstrasyonu için yararlı teslim çıktıları, dokulu görüntüleme sürümü ve temiz ana dosyadır. Bu filtrenin ürettiği gren, düzenlenebilir noktalar veya kesim konturları koleksiyonu değildir. ## Şekli yüzey işleminden ayırın Gren olmadan da doğru görünen basit, dolgulu bir yolla başlayın. Efekti eklemeden önce dış hattını, boşluklarını ve rengini düzeltin. Filtre bu geometriyi onarmaz. Aşağıdaki üç durum sınır sorununu açıklar: | Sürüm | Filtrenin çıktısı | Ne zaman kullanılır? | | -------------------- | ------------------------------------------------------ | ----------------------------------------------------- | | Sade şekil | Özgün dolgulu yol | Düzenleme ve temiz ana dosya | | Yalnız gürültü | Filtre bölgesinde üretilen dikdörtgen görüntü | Motifi teslim etmek yerine gürültü kaynağını inceleme | | İçeride tutulan gren | Özgün çizim ve alfasıyla sınırlanan tek renkli gürültü | Dokulu tarayıcı görüntüleme sürümü | **Sınır önemlidir** ![Temiz mercan rengi yaprak, yaprağın dışına taşan gren ve keskin yaprak silueti içinde tutulan greni gösteren illüstrasyon](https://perfectvector.com/blog/svg-feturbulence-grain/grain-boundary.webp) *İllüstrasyon: gürültü siluete sınırlandırılırken şekil temiz kalır. Bu kavramsal şema bir SVG işleyici ekran görüntüsü veya vektörleştirme sonucu değildir.* `SourceGraphic`, filtre uygulanan öğeyi sağlar. `SourceAlpha`, onun alfa kanalını sağlar. Filtre çizimin görüntüsü üzerinde çalışır; yol komutlarını yeniden yazmaz. Bu girdiler ve filtre grafiği [W3C Filter Effects belirtiminde](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) tanımlanır. Başlangıç çiziminizde zaten saydam alanlar varsa bunlar da sınırlamayı etkiler. SourceAlpha, tahmini bir dış sınırlama kutusunu değil, gerçekten işlenen opaklığı izler. ## Eksiksiz bir SVG gren örneğini kopyalayın Bunu `.svg` dosyası olarak kaydedip tarayıcıda açın. Özgün bir yaprak yolu, belirlenimci gürültü tohumu, koyu kaplama ve açık bir sınırlama adımı içerir. Çapraz açıklık yolun bir parçasıdır; bu nedenle dokulu sürümde saydam kalır. ```xml ``` Filtrenin dört görevi vardır: 1. `feTurbulence` gürültüyü oluşturup `noise` adını verir. 2. Matris kırmızı, yeşil ve maviyi sıfıra ayarlar. Son satırı gürültünün alfasını `0.28` ile çarparak `ink` adlı hafif siyah kaplama oluşturur. 3. `operator="in"` kullanan `feComposite`, bu kaplamayı `SourceAlpha` bulunan yerlerde tutar. 4. `feMerge` önce özgün çizimi, üzerine de içeride tutulan kaplamayı çizer. [MDN feColorMatrix başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix), beş sütunlu matrisin renk ve alfayı nasıl dönüştürdüğünü açıklar. Burada yaprağın dolgusunu değil, gürültü görüntüsünü değiştirir. [MDN feComposite başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite), kaplamayı ikinci girdiye sınırlamak için kullanılan `in` işlemini açıklar. `0.28` bu mercan rengi yaprak için başlangıç noktasıdır; evrensel bir gren ayarı değildir. Doku çizimi matlaştırıyorsa düşürün; gren hedef görüntüleme boyutunda kayboluyorsa artırın. Siyah kaplama greni dolguyu koyulaştırır. Siyah motif üzerinde görünür açık renkli benekler oluşturmaz. Mevcut çizimi yeniden renklendirmek için kullanılan renk ve alfa işlemleri için ayrı [feColorMatrix kılavuzuna](https://perfectvector.com/tr/blog/svg-fecolormatrix) bakın. Mevcut saydam kenarı keskinleştirmek için [SVG alfa eşiklerine](https://perfectvector.com/tr/blog/svg-alpha-threshold) bakın. Bu işlemlerin hiçbiri burada kullanılan üretilmiş gürültü kaynağını sağlamaz. ## Sonucu insanların göreceği boyutta kontrol edin Bu özgün yolun üç sürümünü oluşturduk: filtresiz sürüm, yalnızca gürültü ilkeli içeren filtre ve yukarıdaki eksiksiz, içeride tutulan gren grafiği. İşlenen sürümleri Chrome'da aynı `0 0 200 200` viewBox ile **120 × 120** ve **360 × 360 CSS pikselinde** inceledik. | Kontrol | 120 piksellik sürüm | 360 piksellik sürüm | | -------------------- | ---------------------------------------------- | ---------------------------------------------------------- | | Sade ana dosya | Pürüzsüz mercan rengi yaprak, saydam açıklık | Aynı dış hat ve açıklık | | Yalnız gürültü | Dikdörtgen gürültü görünür motifin yerini alır | Dikdörtgen gürültü yaprak siluetinin dışında görünür kalır | | İçeride tutulan gren | Yaprağın içinde hafif doku | Açıklık ve çevresi temiz kalırken daha görünür doku | Tarayıcı DOM'u her örnekte bir yol içeriyordu. Altı `d` özniteliğinin tamamı özdeşti. Bu, örneğin sınırını belirler: işlenen yüzey değişti ve benek yolları eklenmedi. Kendi oluşturduğumuz bir tarayıcı test örneğidir; PerfectVector veya yerel vektör düzenleyici çıktısı değildir. Büyük önizleme efekti incelemeyi kolaylaştırır, ancak çizimin hâlâ okunup okunmadığına küçük sürüm karar verir. İncelemenizde iki boyutu da tutun. Aynı viewBox ile görüntüleme boyutunu artırmak, dokunun görünür ölçeğini de değiştirir; tek önizlemenin her kullanımı temsil ettiğini varsaymayın. ## Greni her seferinde tek denetimle ayarlayın Küçük bir web kartı illüstrasyonu için örnekteki değerlerle başlayın. Ardından tek parametreyi değiştirin, aynı iki görüntüleme boyutunu karşılaştırın ve tercih ettiğiniz sürümün bir kopyasını saklayın. | Denetim | Karar verilecek konu | Pratik kontrol | | ------------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------- | | `baseFrequency` | SVG koordinatlarında daha kaba veya ince değişkenlik | `0.25` ile `0.65` değerlerini yan yana deneyin; gerçek görüntüleme boyutunda inceleyin | | `numOctaves` | Kaç gürültü ayrıntı katmanının birleştirileceği | Daha çok ayrıntı eklemeden önce `1` ve `2` değerlerini karşılaştırın | | `seed` | Hangi gürültü gerçekleşiminin kullanılacağı | Diğer ayarları karşılaştırırken sabit tutun | | Matris alfa çarpanı | Siyah kaplamanın dolguyu ne kadar koyulaştıracağı | Aynı çizimde `0.15` ile `0.28` değerlerini karşılaştırın | | Filtre bölgesi | Filtre grafiğine ayrılan dikdörtgen | Dikdörtgeni alfa sınırlamasının yerine kullanmadan eksik çıktıyı düzeltin | `baseFrequency`, her iki eksen için tek değer veya yatay ve dikey frekans için iki değer kabul eder. [MDN baseFrequency başvurusu](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) bu ayrımı belgeler. Bu yaprak için tek değerle başlayın; eşit olmayan değerler yönlü doku için bilinçli bir seçimdir. `numOctaves`, [MDN numOctaves başvurusunda](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) anlatıldığı gibi gürültü oktavlarının sayısını yönetir. Ek oktavlar ek vektör yolları değildir. Yalnızca gereken boyutta görünür yüzeyi iyileştiriyorlarsa kullanın. Örnek açıkça `color-interpolation-filters="sRGB"` ayarlar. Adayları karşılaştırırken bu ayarı koruyun; böylece renk işlemedeki değişiklik gren karşılaştırmasını karıştırmaz. ## Dikdörtgeni, kayıp dolguyu veya kirli kenarı düzeltin **Doku dikdörtgen bir alan oluşturuyor.** Filtrenin son çıktısını inceleyin. `feTurbulence` ile bitiyorsa gürültü görüntüsünü döndürüyordur. Matrisi, `SourceAlpha` bileşimini ve birleştirmeyi geri yükleyin. Filtre dikdörtgenini büyütmek yalnızca sınırlanmamış gürültüye daha fazla yer açar. **Yaprağın rengi kayboluyor.** İlk birleştirme düğümünün `SourceGraphic` kullandığını kontrol edin. Tek başına son `inside` sonucu, özgün mercan rengi dolguyu değil, koyu kaplamayı içerir. Her adlandırılmış `result` ve `in` başvurusunun yazımını ve büyük/küçük harflerini de kontrol edin. **Saydam açıklıkta gürültü kalıyor.** İkinci bileşim girdisinin dikdörtgen gürültü veya opak arka plan değil, `SourceAlpha` olduğunu doğrulayın. Filtreyi doku eklemek istediğiniz çizime uygulayın. Filtreli gruba opak arka plan eklemek alfa girdisini değiştirir. **Çıktının bir bölümü kırpılıyor.** Filtredeki `x`, `y`, `width` ve `height` değerlerini kontrol edin. Bunlar, [MDN filter başvurusunda](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) açıklandığı gibi kullanılabilir filtre bölgesini ayarlar. Örnek makul bir ek alan sağlar. Daha geniş bölge eksik sınırlama adımını onaramaz ve ayrı bir kapsayıcının uyguladığı kırpmayı düzeltmez. **Küçük çizim çamurlu görünüyor.** Önce kaplama alfasını azaltın, sonra frekans ve oktav sayısını karşılaştırın. Doku siluete hâlâ zarar veriyorsa o boyutta temiz sürümü teslim edin. ## Teslim için temiz ana dosya tutun Filtresiz ana dosya için yoldan `filter="url(#grain)"` özniteliğini ve artık kullanılmayan filtre tanımını kaldırın. Yolun `d` değerini, dolgusunu ve viewBox'ı koruyun. Dosyayı ayrı açın ve yaprak ile açıklığın özgün temiz sürümle eşleştiğini doğrulayın. Web uygulaması için dokulu sürümü, yayımlayacağınız tarayıcılarda ve tam yerleştirme yöntemiyle kontrol edin. Bu satır içi SVG'yi tek sayfada yineliyorsanız her filtreye benzersiz kimlik verin ve `url(#...)` başvurusunu güncelleyin. Bağımsız örnek tek örnek içerdiği için tek kimlik kullanır. Tam raster görünüm gerektiren hedef için gereken boyutta raster önizleme dışa aktarın ve orada inceleyin. Düzenlenebilir veya kesilebilir geometri gerektiren iş akışında temiz yolları teslim edin ve grenin görüntüleme efekti olduğunu açıklayın. Filtre gürültüsünü vektör benekleri olarak tanımlamayın; sonraki düzenleyicinin, PDF dışa aktarıcının veya kesicinin bunu yeniden üreteceğini vaat etmeyin. Gerçek hedefi sınayın. Bilerek ayrı ayrı düzenlenebilir beneklere ihtiyacınız varsa bu ayrı bir geometri işidir. Temizleme kararı da gerektirir; dokuyu çok sayıda küçük kontura izlemeden önce [SVG'de neden çok fazla düğüm olduğunu](https://perfectvector.com/tr/blog/svg-too-many-nodes) okuyun. Raster resimden greni korumak başka bir başlangıç sorunudur ve [sulu boyadan vektöre](https://perfectvector.com/tr/blog/watercolor-to-vector) yazısında ele alınır. ## Vektörleştirme ne zaman yardımcı olur? Temiz motif yalnızca PNG veya JPG olarak kaldıysa tarayıcı filtresi eklemeden önce [bu kaynağı düzenlenebilir SVG çizimine dönüştürün](https://perfectvector.com/tr/image-to-vector). Önce temiz sürümde geri kazanılan silueti ve açıklığı inceleyin. PerfectVector rasterden vektöre adımını sağlar; bu kılavuzdaki işlemsel gren grafiği sonradan eklediğiniz ayrı bir SVG işlemidir. Yol tabanlı ana dosyanız zaten var mı? Doğrudan kullanın. Filtre işi için ikinci dönüşüm gereksizdir. Gerek duyarsanız [görüntü vektörleştirme kılavuzu](https://perfectvector.com/tr/blog/what-is-image-vectorization) bu kaynak geri kazanma adımını açıklar. ## Sık sorulan sorular **feTurbulence neden şeklimi izlemek yerine dikdörtgen oluşturuyor?** Gürültü kendi filtre ilkeli alt bölgesini doldurur. Kaplamayı çizime sınırlarken dolguyu korumak için SourceAlpha içinde bileştirin ve SourceGraphic üzerine ekleyin. **SVG greni yoluma düğüm ekler mi?** Bu filtre benek yolları eklemez. Özgün tarayıcı testinde altı örneğin tamamı özdeş d verili tek yolu korudu; filtre işlenen yüzeyi değiştirdi. **Hangi gren ayarlarıyla başlamalıyım?** Özgün yaprak örneğinde fractalNoise, baseFrequency 0.65, iki oktav, seed 8 ve siyah kaplama alfa çarpanı 0.28 ile başlayın. Gerçek görüntüleme boyutunda karşılaştırın ve her seferinde tek ayar değiştirin. **Gren efektini kesim dosyası olarak kullanabilir miyim?** Üretilen doku düzenlenebilir kesim geometrisi değildir. Ayrı bir filtresiz yol ana dosyası tutun ve gerçek kesim iş akışında geometriyi kontrol edin. ## Kaynaklar 1. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Gürültü üretimi ve ilkel alt bölgesi. 2. [W3C: Filtre ilkeli ağacı](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) — SourceGraphic, SourceAlpha ve filtre görüntü işleme. 3. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Renk ve alfa matris işlemleri. 4. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — in işleciyle sınırlama. 5. [MDN: baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) — Tek ve iki eksenli frekans değerleri. 6. [MDN: numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) — Gürültü ayrıntı katmanları. 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Filtre bölgesi öznitelikleri. Web illüstrasyonunuz için rasterden geri kazanılmış temiz ana dosya gerekiyorsa [görüntüden vektöre dönüşümle başlayın](https://perfectvector.com/tr/image-to-vector), yolları inceleyin ve greni ayrı bir görüntüleme kopyasına ekleyin. ## Explore - [Read the HTML article](https://perfectvector.com/tr/blog/svg-feturbulence-grain) - [FontForge SVG içe aktarma: Çizimden glif konturuna](https://perfectvector.com/tr/blog/fontforge-import-svg.md) - [Vektörleştirme kalitesini değerlendirme: puan cetveli](https://perfectvector.com/tr/blog/evaluate-vector-trace-quality.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)