Tekstur Grain SVG: Batasi Noise di Dalam Gambar Anda

Untuk menambahkan grain pada ilustrasi SVG, buat noise dengan feTurbulence, ubah menjadi overlay monokrom tipis, lalu kompositkan overlay itu di dalam SourceAlpha. Gabungkan di atas SourceGraphic agar fill asli tetap terlihat. Ini menambahkan tekstur yang dirender tanpa mengubah geometri path gambar.

Primitive noise saja memberi hasil berbeda: primitive itu mengisi subwilayah primitive filternya, bukan mengikuti kontur bentuk. Itulah sebabnya daun dapat berubah menjadi bidang noise persegi panjang. Referensi feTurbulence MDN menjelaskan perilaku tersebut.

Untuk ilustrasi web, hasil yang berguna adalah versi tampilan bertekstur dan master bersih. Grain yang dibuat filter ini bukan kumpulan titik yang bisa diedit atau kontur pemotongan.

Pisahkan bentuk dari perlakuan permukaan

Mulailah dengan path ber-fill sederhana yang sudah terlihat benar tanpa grain. Perbaiki kontur, celah, dan warnanya sebelum menambahkan efek. Filter tidak akan memperbaiki geometri tersebut.

Tiga keadaan berikut menjelaskan masalah batasnya:

Batas itu penting

SourceGraphic menyediakan elemen yang difilter. SourceAlpha menyediakan kanal alfanya. Filter bekerja pada gambar dari karya tersebut; filter tidak menulis ulang perintah path. Masukan dan rangkaian filter ini didefinisikan dalam spesifikasi Filter Effects W3C.

Jika gambar awal sudah memiliki area transparan, area tersebut juga memengaruhi pembatasan. SourceAlpha mengikuti opasitas yang benar-benar dirender, bukan perkiraan kotak pembatas luar.

Salin contoh grain SVG yang lengkap

Simpan sebagai berkas .svg dan buka di peramban. Contoh ini berisi satu path daun asli, seed noise deterministik, overlay gelap, dan langkah pembatasan eksplisit. Bukaan diagonal merupakan bagian dari path, sehingga tetap transparan pada versi bertekstur.

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

Filter memiliki empat tugas:

1. feTurbulence membuat noise dan memberinya nama noise.
2. Matriks menetapkan merah, hijau, dan biru ke nol. Baris terakhirnya mengalikan alfa noise dengan 0.28, menciptakan overlay hitam tipis bernama ink.
3. feComposite dengan operator="in" mempertahankan overlay di tempat SourceAlpha ada.
4. feMerge menggambar karya asli terlebih dahulu dan overlay terbatas di atasnya.

Referensi feColorMatrix MDN menjelaskan cara matriks lima kolom mengubah warna dan alfa. Di sini matriks mengubah gambar noise, bukan fill daun. Referensi feComposite MDN menjelaskan operasi in yang digunakan untuk membatasi overlay pada masukan kedua.

Nilai 0.28 merupakan titik awal untuk daun koral ini, bukan pengaturan grain universal. Turunkan jika tekstur membuat gambar kusam; naikkan jika grain menghilang pada ukuran tampilan yang dimaksud. Grain overlay hitam menggelapkan fill. Ini tidak akan menciptakan bintik pucat yang terlihat pada motif hitam.

Untuk operasi warna dan alfa yang dipakai mewarnai ulang gambar yang ada, lihat panduan feColorMatrix terpisah. Untuk mempertegas tepi transparan yang ada, lihat ambang alfa SVG. Kedua operasi itu tidak menyediakan sumber noise yang dihasilkan di sini.

Periksa hasil pada ukuran yang akan dilihat orang

Kami membuat tiga versi path asli ini: tanpa filter, filter yang hanya berisi primitive noise, dan rangkaian grain terbatas lengkap di atas. Kami memeriksa versi yang dirender di Chrome pada 120 × 120 dan 360 × 360 piksel CSS, dengan viewBox 0 0 200 200 yang sama.

DOM peramban berisi satu path pada setiap spesimen. Keenam atribut d identik. Itu menetapkan batas contoh ini: permukaan yang dirender berubah, dan tidak ada path bintik yang ditambahkan. Ini contoh uji peramban yang kami buat sendiri, bukan keluaran PerfectVector atau editor vektor asli.

Pratinjau lebih besar membantu memeriksa efek, tetapi versi kecil menentukan apakah gambar masih terbaca. Pertahankan kedua ukuran dalam tinjauan. Memperbesar ukuran tampilan dengan viewBox yang sama juga mengubah skala tekstur yang tampak; jangan menganggap satu pratinjau mewakili semua penggunaan.

Sesuaikan grain satu kontrol setiap kali

Untuk ilustrasi kartu web kecil, mulailah dengan nilai dalam contoh. Lalu ubah satu parameter, bandingkan dua ukuran tampilan yang sama, dan simpan salinan versi yang Anda sukai.

baseFrequency menerima satu nilai untuk kedua sumbu atau dua nilai untuk frekuensi horizontal dan vertikal. Referensi baseFrequency MDN menjelaskan perbedaannya. Mulailah dengan satu nilai untuk daun ini; nilai yang tidak sama adalah pilihan sengaja untuk tekstur berarah.

numOctaves mengendalikan jumlah oktaf noise, seperti dijelaskan dalam referensi numOctaves MDN. Oktaf tambahan bukan path vektor tambahan. Gunakan hanya jika meningkatkan permukaan yang terlihat pada ukuran yang Anda butuhkan.

Contoh menetapkan color-interpolation-filters="sRGB" secara eksplisit. Pertahankan pengaturan itu saat membandingkan kandidat agar perubahan pemrosesan warna tidak membingungkan perbandingan grain.

Perbaiki persegi panjang, fill hilang, atau tepi kotor

Tekstur membentuk bidang persegi panjang. Periksa keluaran akhir filter. Jika berakhir dengan feTurbulence, filter mengembalikan gambar noise. Pulihkan matriks, komposit SourceAlpha, dan penggabungan. Memperbesar persegi panjang filter hanya memberi noise yang tidak dibatasi lebih banyak ruang.

Warna daun menghilang. Pastikan node penggabungan pertama memakai SourceGraphic. Hasil akhir inside saja berisi overlay gelap, bukan fill koral asli. Periksa juga ejaan serta huruf besar-kecil setiap nama result dan referensi in.

Noise tetap ada dalam bukaan transparan. Pastikan masukan komposit kedua adalah SourceAlpha, bukan noise persegi panjang atau latar buram. Terapkan filter pada gambar yang ingin diberi tekstur. Menyertakan latar buram dalam grup berfilter mengubah masukan alfa.

Sebagian keluaran terpotong. Periksa x, y, width, dan height pada filter. Atribut ini menetapkan wilayah filter yang tersedia, seperti dijelaskan dalam referensi filter MDN. Contoh memberikan sedikit ruang tambahan. Wilayah yang lebih lebar tidak bisa memperbaiki langkah pembatasan yang hilang, dan tidak mengatasi pemotongan oleh wadah terpisah.

Gambar kecil terlihat keruh. Kurangi alfa overlay terlebih dahulu, lalu bandingkan frekuensi dan jumlah oktaf. Jika tekstur masih merusak siluet, serahkan versi bersih pada ukuran tersebut.

Simpan master bersih untuk penyerahan

Untuk master tanpa filter, hapus filter="url(#grain)" dari path dan hapus definisi filter yang kini tidak dipakai. Pertahankan d path, fill, dan viewBox. Buka berkas itu secara terpisah dan pastikan daun serta bukaannya sesuai dengan versi bersih asli.

Untuk aplikasi web, periksa versi bertekstur pada peramban dan metode penyematan persis yang akan Anda rilis. Jika mengulang SVG inline ini pada satu halaman, beri setiap filter ID unik dan perbarui referensi url(#...)-nya. Contoh mandiri memakai satu ID karena berisi satu instans.

Untuk tujuan yang membutuhkan tampilan raster persis, ekspor pratinjau raster pada ukuran yang diperlukan dan periksa di sana. Untuk alur yang membutuhkan geometri yang bisa diedit atau dipotong, serahkan path bersih dan jelaskan bahwa grain adalah efek tampilan. Jangan menyebut noise filter sebagai bintik vektor, dan jangan menjanjikan editor, pengekspor PDF, atau mesin pemotong berikutnya akan mereproduksinya. Uji tujuan sebenarnya.

Jika Anda memang membutuhkan bintik yang bisa diedit satu per satu, itu tugas geometri terpisah. Itu juga memerlukan keputusan pembersihan; lihat mengapa SVG memiliki terlalu banyak node sebelum menjiplak tekstur menjadi kumpulan kontur kecil. Mempertahankan grain dari lukisan raster merupakan masalah awal berbeda, yang dibahas dalam cat air menjadi vektor.

Kapan vektorisasi membantu

Jika motif bersih hanya tersisa sebagai PNG atau JPG, ubah sumber itu menjadi gambar SVG yang bisa diedit sebelum menambahkan filter peramban. Periksa siluet dan bukaan yang dipulihkan pada versi bersih terlebih dahulu. PerfectVector menyediakan tahap raster-ke-vektor; rangkaian grain prosedural dalam panduan ini adalah perlakuan SVG terpisah yang ditambahkan sesudahnya.

Sudah memiliki master berbasis path? Gunakan langsung. Konversi kedua tidak diperlukan untuk pekerjaan filter. Panduan vektorisasi gambar menjelaskan tahap pemulihan sumber jika Anda memerlukannya.

Pertanyaan umum

Mengapa feTurbulence membuat persegi panjang alih-alih mengikuti bentuk saya? Noise mengisi subwilayah primitive filternya. Kompositkan di dalam SourceAlpha dan gabungkan di atas SourceGraphic untuk membatasi overlay pada gambar sambil mempertahankan fill-nya.

Apakah grain SVG menambahkan node pada path saya? Filter ini tidak menambahkan path bintik. Pada contoh uji peramban asli, keenam spesimen mempertahankan satu path dengan data d identik; filter mengubah permukaan yang dirender.

Pengaturan grain mana yang sebaiknya saya pakai sebagai awal? Untuk contoh daun asli, mulailah dengan fractalNoise, baseFrequency 0.65, dua oktaf, seed 8, dan pengali alfa overlay hitam 0.28. Bandingkan pada ukuran tampilan sebenarnya dan sesuaikan satu pengaturan setiap kali.

Bisakah saya memakai efek grain sebagai berkas pemotongan? Tekstur yang dihasilkan bukan geometri potong yang bisa diedit. Simpan master path tanpa filter secara terpisah dan periksa geometrinya dalam alur pemotongan sebenarnya.

Sumber

1. MDN: feTurbulence — Pembuatan noise dan subwilayah primitive.
2. W3C: Pohon primitive filter — SourceGraphic, SourceAlpha, dan pemrosesan gambar filter.
3. MDN: feColorMatrix — Operasi matriks warna dan alfa.
4. MDN: feComposite — Pembatasan memakai operator in.
5. MDN: baseFrequency — Nilai frekuensi satu sumbu dan dua sumbu.
6. MDN: numOctaves — Lapisan detail noise.
7. MDN: filter — Atribut wilayah filter.

Jika ilustrasi web Anda membutuhkan master bersih yang dipulihkan dari raster, mulailah dengan konversi gambar-ke-vektor, tinjau path-nya, dan tambahkan grain pada salinan tampilan terpisah.