SVG Gren Dokusu: Gürültüyü Çiziminizin İçinde Tutun

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 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ınır önemlidir

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 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.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="grain" x="-10%" y="-10%" width="120%" height="120%"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.65"
                    numOctaves="2" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 0.28 0" result="ink"/>
      <feComposite in="ink" in2="SourceAlpha" operator="in" result="inside"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="inside"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M36 142C40 70 104 26 164 30C164 100 120 150 60 156L38 180L28 170L52 146C80 112 112 78 146 46C104 78 74 110 54 140Z" fill="#e76b50" filter="url(#grain)"/>
</svg>

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, 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, 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 bakın. Mevcut saydam kenarı keskinleştirmek için SVG alfa eşiklerine 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.

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.

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 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 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 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 okuyun. Raster resimden greni korumak başka bir başlangıç sorunudur ve sulu boyadan vektöre 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. Ö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 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 — Gürültü üretimi ve ilkel alt bölgesi.
2. W3C: Filtre ilkeli ağacı — SourceGraphic, SourceAlpha ve filtre görüntü işleme.
3. MDN: feColorMatrix — Renk ve alfa matris işlemleri.
4. MDN: feComposite — in işleciyle sınırlama.
5. MDN: baseFrequency — Tek ve iki eksenli frekans değerleri.
6. MDN: numOctaves — Gürültü ayrıntı katmanları.
7. MDN: 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, yolları inceleyin ve greni ayrı bir görüntüleme kopyasına ekleyin.