> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Tekstur Grain SVG: Batasi Noise di Dalam Gambar Anda > Tambahkan grain SVG dengan feTurbulence, batasi noise monokrom di dalam SourceAlpha, sesuaikan pada dua ukuran, dan simpan master path bersih untuk tujuan lain. Source: https://perfectvector.com/id/blog/svg-feturbulence-grain Language: id Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) 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: | Versi | Keluaran filter | Kapan digunakan | | -------------- | ----------------------------------------------------------- | ----------------------------------------------- | | Bentuk polos | Path ber-fill asli | Pengeditan dan master bersih | | Noise saja | Gambar persegi panjang yang dihasilkan dalam wilayah filter | Memeriksa sumber noise, bukan menyerahkan motif | | Grain terbatas | Gambar asli ditambah noise monokrom yang dibatasi alfanya | Versi tampilan peramban bertekstur | **Batas itu penting** ![Ilustrasi daun koral bersih, grain yang meluber keluar daun, dan grain yang dibatasi di dalam siluet daun tegas](https://perfectvector.com/blog/svg-feturbulence-grain/grain-boundary.webp) *Ilustrasi: bentuk tetap bersih sementara noise dibatasi pada siluetnya. Diagram konseptual ini bukan tangkapan layar renderer SVG atau hasil vektorisasi.* `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](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree). 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. ```xml ``` 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) menjelaskan cara matriks lima kolom mengubah warna dan alfa. Di sini matriks mengubah gambar noise, bukan fill daun. [Referensi feComposite MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) 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](https://perfectvector.com/id/blog/svg-fecolormatrix) terpisah. Untuk mempertegas tepi transparan yang ada, lihat [ambang alfa SVG](https://perfectvector.com/id/blog/svg-alpha-threshold). 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. | Pemeriksaan | Versi 120 piksel | Versi 360 piksel | | -------------- | ------------------------------------------------------ | ------------------------------------------------------------------- | | Master polos | Daun koral mulus, bukaan transparan | Kontur dan bukaan yang sama | | Noise saja | Noise persegi panjang menggantikan motif yang terlihat | Noise persegi panjang tetap terlihat di luar siluet daun | | Grain terbatas | Tekstur tipis di dalam daun | Tekstur lebih terlihat, dengan bukaan dan area sekitar tetap bersih | 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. | Kontrol | Yang perlu diputuskan | Pemeriksaan praktis | | -------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------ | | `baseFrequency` | Variasi lebih kasar atau halus dalam koordinat SVG | Coba `0.25` berdampingan dengan `0.65`; periksa pada ukuran tampilan sebenarnya | | `numOctaves` | Jumlah lapisan detail noise yang digabung | Bandingkan `1` dan `2` sebelum menambah detail | | `seed` | Realisasi noise yang dipakai | Pertahankan tetap saat membandingkan pengaturan lain | | Pengali alfa matriks | Seberapa kuat overlay hitam menggelapkan fill | Bandingkan `0.15` dan `0.28` pada gambar yang sama | | Wilayah filter | Persegi panjang yang tersedia untuk rangkaian filter | Perbaiki keluaran yang hilang tanpa mengganti pembatasan alfa dengan persegi panjang | `baseFrequency` menerima satu nilai untuk kedua sumbu atau dua nilai untuk frekuensi horizontal dan vertikal. [Referensi baseFrequency MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves). 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter). 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](https://perfectvector.com/id/blog/svg-too-many-nodes) sebelum menjiplak tekstur menjadi kumpulan kontur kecil. Mempertahankan grain dari lukisan raster merupakan masalah awal berbeda, yang dibahas dalam [cat air menjadi vektor](https://perfectvector.com/id/blog/watercolor-to-vector). ## Kapan vektorisasi membantu Jika motif bersih hanya tersisa sebagai PNG atau JPG, [ubah sumber itu menjadi gambar SVG yang bisa diedit](https://perfectvector.com/id/image-to-vector) 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](https://perfectvector.com/id/blog/what-is-image-vectorization) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Pembuatan noise dan subwilayah primitive. 2. [W3C: Pohon primitive filter](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) — SourceGraphic, SourceAlpha, dan pemrosesan gambar filter. 3. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Operasi matriks warna dan alfa. 4. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — Pembatasan memakai operator in. 5. [MDN: baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) — Nilai frekuensi satu sumbu dan dua sumbu. 6. [MDN: numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) — Lapisan detail noise. 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Atribut wilayah filter. Jika ilustrasi web Anda membutuhkan master bersih yang dipulihkan dari raster, [mulailah dengan konversi gambar-ke-vektor](https://perfectvector.com/id/image-to-vector), tinjau path-nya, dan tambahkan grain pada salinan tampilan terpisah. ## Explore - [Read the HTML article](https://perfectvector.com/id/blog/svg-feturbulence-grain) - [Impor SVG FontForge: Ubah Gambar Menjadi Outline Glyph](https://perfectvector.com/id/blog/fontforge-import-svg.md) - [Cara Menilai Kualitas Penjiplakan Vektor: Kartu Penilaian](https://perfectvector.com/id/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)