Gürültülü SVG Üretimi

SVG'ye gürültü efekti eklemek

• Web teknolojilerindeki gelişimin web tasarımını nasıl etkilediğine duyulan ilgi
• Ekranların piksel yoğunluğunun artmasının, fotoğraflardan vektör illüstrasyonlara geçişi hızlandırması
• Son tasarım trendlerinde dokulu gölgeler veya ışık efektleri kullanan gürültü dokularının ortaya çıkması

Studio Vellekoop & León

• Gürültü dokusu stiline yönelik kişisel beğeni ve bunu SVG ile yeniden üretmenin zorluğu
• SVG'ye duyulan ilgi ve çeşitli efektler üretme yollarına dair araştırma
• SVG optimizasyon aracı SVGO'nun ortaya çıkışı ve SVG'yi doğrudan yazma deneyiminin paylaşılması

Temel şekiller ve gradyanlar

• SVG'de daire veya dikdörtgen gibi temel şekillerin kolayca çizilebilmesi
• Gradyan uygulanırken bileşenlerin yeniden kullanılabilmesi için, taban renge göre değişen gradyan gereksinimi
• Maske kullanımı ile <defs> sayesinde bir şekli yalnızca bir kez tanımlayıp use öğesiyle referans verme yönteminin tanıtılması

Sonuç

• <feTurbulence> filtresi kullanılarak yapay bir gürültü dokusu oluşturulması
• Renk değişimlerini kaldırmak ve seçilen dolgu rengiyle doğal biçimde harmanlamak için filtre efektlerinin uygulanması
• Sonuçta tatmin edici bir illüstrasyon elde edilmesi, ancak Safari'de farklı şekilde render edilmesi

Ek bilgi 7 Aralık 2023

• Yazının Hacker News'e gönderilmesi ve bir miktar geri dönüş alınması
• Jimmy Chion'ın 2021'de CSS Tricks'te yazdığı benzer konulu makalenin tanıtılması
• Yazı yazılırken önceki makaleden haberdar olunmaması, ancak artık tamamlayıcı kaynak olarak bağlantı verilmesi

GN⁺ görüşü

Bu yazıdaki en önemli nokta, web tasarımındaki güncel trendlerden biri olan gürültü dokusunun SVG ile nasıl uygulanabileceğine yönelik araştırmadır. Bu içerik yalnızca web tasarımcıları ve geliştiriciler için ilgi çekici bir konu olmakla kalmıyor, aynı zamanda modern web tasarım tekniklerini öğrenmek isteyen başlangıç seviyesindeki yazılım mühendisleri için de faydalı bilgiler sunuyor. SVG ile tasarımın esnekliğine ve optimizasyon yöntemlerine dair pratik örnekler sayesinde, okurlar karmaşık tasarım efektlerini verimli biçimde nasıl uygulayabileceklerini öğrenebilir.

[ndrgrd]

Beklendiği gibi Safari yine hayal kırıklığına uğratmıyor! 2020'lerin IE'si denmesini sonuna kadar hak ediyor.

[GN⁺]

Hacker News görüşleri

• Canvas'ta yapılamayan gölge efektlerini SVG ile uygulamaya çalıştım, ancak Safari'de CSS gölgeleri çalışmadığı için SVG'nin yerel filtrelerini kullanmak zorunda kaldım. Diğer tarayıcılardan farklı göründüğü için Safari'yi tespit edip CSS sürümünü devre dışı bırakan bir JavaScript kullandım.

• "Özyinelemeli yin-yang" hakkındaki arka plan ilgili blogda açıklanıyor; dokularla oynamayı planlıyorum ama Safari'de farklı görünmesi gerçekten sinir bozucu. SVG yorumlamasında bir standardizasyon olup olmayacağını merak ediyorum.

• SVG ile belirli bir illüstrasyon stilini yeniden üretmek kolay değil, bu da insanı hayal kırıklığına uğratıyor. Bu stile "dithering" deniyor ve CSS-Tricks'teki "Grainy Gradients" sayfası aynı tekniği açıklıyor. Bunun tüm görsele CSS ile uygulanabildiği alternatif bir yöntem de var.

• SVG kullanarak karmaşık bir konferans posteri yaptım ama tarayıcılar ve programlar arasında farklı render ediliyor. Gömme/bağlantı yoluyla SVG ekleyebiliyorsunuz ama başka SVG'leri içeren SVG'ler çalışmıyor. Bazen tarayıcılar "güvenlik" nedeniyle gömülü/bağlantılı görselleri göstermiyor. Karmaşık SVG'leri PDF'ye dönüştürmek ise tutarsız biçimde bellek yetersizliği sorunlarına yol açıyor. SVG'den PDF'ye dönüştüren her araç farklı sonuç veriyor. Inkscape gibi araçlar bazen içe alınmış SVG'leri raster grafik olarak ele alıyor.

• Film fotoğrafçıları film grenini yok etmeye çalışırken, dijital fotoğrafçılar bunu yeniden eklemeye eğilimli. Dijitalin temizliği içinde bu tür örnekler çekici geliyor.

• Inkscape, çeşitli filtre efektleriyle bu tür gürültüyü ekleyebiliyor ve Plain SVG olarak dışa aktarınca kodda feTurbulence kullanımını görebiliyorsunuz. Ayrıca Affinity Designer 2'nin gürültüyü nasıl ele aldığını da karşılaştırdım. Dışa aktarılan SVG'de gürültü, base64 jpeg görseli olarak yer alıyor.

• "ApeFest" sitesi, CSS animasyonlarıyla (aslında JS ile hareket ettiriliyor) "rastgele" hareket eden döşemeli PNG overlay kullanarak dinamik gürültü üretiyor. Teknik olarak basit ama etkili.

• SVG filtrelerinin görünümü motor ve ölçekleme etkenlerine göre çok değiştiği için onları yalnızca ince dokunuşlarda ve hassasiyetin kritik olmadığı durumlarda kullanıyorum. feDisplacementMap gibi filtreler anti-aliasing'i bozuyor ve kullanmak isteyeceğim senaryoların yarısını mahvediyor.

• Sayfa arka planı olarak kullanılmasını önermem. Daha önce denediğimde çeşitli cihazlarda tuhaf hatalar ortaya çıktı; büyük sitelerde ise sayfa tamamen kilitlenebiliyor ya da SVG belirli bir boyutun üzerinde render edilmeyi bırakabiliyor.

• Perlin Noise ve onun devamı olan Fractal Noise, gerçekçilik katmak ya da "organik" bir his vermek için gerçekten çok etkili. Örneğin "Aladdin (1992)" filminde mağaradan kaçış sahnesinde etkili biçimde kullanılmıştı.

• Efektleri yakınlaştırma/uzaklaştırma düzeyinden bağımsız şekilde üretmenin bir yoluyla ilgileniyorum. Ayrıca rastgelelik ekleme bağlamında, belirli bir boyut için tek bir doğru render sonucunu tanımlayabilecek bir seed ayarlamanın mümkün olup olmadığını merak ediyorum.