Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator Efek Filter SVG

WarnaPengembangGambar

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Tipe Filter

Filtrasi

ID Filter

Digunakan sebagai ID SVG filter dan referensi URL dalam CSS

Pengaturan Blur

stdDeviation (px): 4

Pengaturan Rotasi Warna

Sudut (derajat): 90

Pengaturan Penuh

Jumlah (0 = grayscale, 1 = asli): 1.6

Turbulensi & Distorsi

Frekuensi Dasar: 0.04

Lapisan: 3

Jenis Kebisingan

Skala Perpindahan: 25

Pengaturan Bayangan

Offset X (px): 4

Offset Y (px): 4

Radius Blur (px): 6

Warna Bayangan

Kecerahan Bayangan: 0.6

Pengaturan Emboss

Gaya

Target Pratinjau

Tampilkan pada

KELUARAN

Sisi klien

Pratinjau Langsung

XML Filter SVG

Penggunaan CSS

IKLAN · HAPUS?

Memandu

Generator Efek Filter SVG

Desain SVG <filter> efek secara visual. Pilih satu primitif filter — blur Gaussian, variasi matriks warna (rotasi warna, penuh, luminansi ke alpha), turbulensi dengan perpindahan, bayangan, atau preset matriks konvolusi (emboss, engrave, perjelas, deteksi sisi) — dan atur parameter-nya dengan slider sambil melihat pratinjau SVG langsung pada teks, bentuk, atau foto yang diunggah. Salin blok XML yang dihasilkan <filter> dan potongan penggunaan CSS yang siap dipasang.

Cara Penggunaan

Pilih satu primitif filter dari Filtrasi Tujuh primitif filter
Atur satu ID Filter — menjadi id pada elemen <filter> dan menjadi target dari url(#…).
Atur parameter yang muncul untuk primitif yang dipilih (slider, pilih warna, jenis noise, dll.).
Beralihkan Target Pratinjau antara teks, bentuk, atau foto — unggah gambar Anda sendiri untuk melihat efeknya pada konten nyata.
Salin yang dihasilkan XML Filter SVG ke halaman Anda (dapat ditempatkan di mana saja — bahkan di dalam SVG tersembunyi dengan ukuran nol).
Terapkan dengan CSS menggunakan potongan yang disediakan: baik singkatan bawaan (jika tersedia) maupun filter: url(#filterId) Apa itu properti CSS bawaan?

Fitur

Tujuh bentuk filter — blur Gaussian, rotasi warna, penuh, luminansi ke alpha, turbulensi dengan perpindahan, bayangan, dan preset matriks konvolusi (emboss, engrave, perjelas, deteksi sisi).
Pratinjau SVG secara langsung — umpan balik visual langsung saat Anda menarik slider; tidak ada langkah pembangunan, tidak ada guncangan.
Tiga target pratinjau — terapkan pada teks tajam, bentuk dasar, atau foto yang diunggah untuk melihat bagaimana filter berperilaku pada konten nyata.
Dua output — blok XML lengkap (siap dipasang ke dalam SVG) dan potongan penggunaan CSS dengan singkatan bawaan jika tersedia. <filter> Blok XML (siap dipasang ke dalam SVG apa pun) dan contoh penggunaan CSS dengan singkatan bawaan jika tersedia.
Bayangan dengan kecerahan — menggabungkan feDropShadow dengan flood-opacity, yang tidak dapat diungkapkan oleh singkatan CSS bawaan.
ID filter yang disanitasi — menjaga nilai id Anda aman untuk url(#…) referensi.

 Tanya Jawab Umum

Apa perbedaan antara filter CSS dan filter SVG?

Singkatan filter CSS (blur, hue-rotate, drop-shadow, dll.) adalah katalog efek tetap yang di-mapping oleh browser ke primitif filter SVG bawah. Filter SVG memberi akses langsung ke primitif-primitif tersebut — feGaussianBlur, feColorMatrix, feTurbulence, feDisplacementMap, feConvolveMatrix, dan lainnya — dan memungkinkan Anda menggabungkannya menjadi efek (distorsi, noise, emboss, manipulasi saluran) yang tidak dapat diungkapkan oleh singkatan. Apapun yang bisa Anda lakukan dalam CSS, Anda bisa lakukan dalam SVG, tetapi kebalikannya tidak benar.
Apa arti atribut stdDeviation pada feGaussianBlur?

stdDeviation adalah deviasi standar dari distribusi Gaussian yang digunakan untuk menimbang piksel tetangga. Nilai yang lebih besar menyebar penimbangan ke lebih banyak piksel, menghasilkan hasil yang lebih kabur. Anda dapat mengirimkan satu angka (blur seragam pada kedua sumbu) atau dua angka yang dipisahkan spasi (jumlah blur yang berbeda pada sumbu X dan Y) untuk kelembutan arah.
Bagaimana feTurbulence bekerja, dan mengapa harus dipasangkan dengan feDisplacementMap?

feTurbulence menghasilkan secara otomatis noise berbentuk Perlin ke dalam gambar SVG, dikendalikan oleh baseFrequency (skala noise) dan numOctaves (tingkat detail). Noise tersebut sendiri hanya merupakan tekstur berwarna. feDisplacementMap menggunakan noise tersebut sebagai in2 dan menggunakan saluran R/G untuk menggeser piksel pada grafik sumber Anda, menghasilkan efek distorsi organik, asap, gelombang air, dan distorsi. Atribut scale mengontrol seberapa jauh setiap piksel dapat digeser.
Apa itu matriks kernel, dan bagaimana feConvolveMatrix menghasilkan efek emboss atau edge?

feConvolveMatrix memindahkan matriks kecil (kernel) ke setiap piksel, mengalikan setiap sel dengan piksel tetangga yang sesuai dan menjumlahkan hasilnya. Matriks yang berbeda menghasilkan efek yang berbeda: matriks yang mengurangi piksel kiri-atas dari piksel bawah-kanan menciptakan pencahayaan arah yang kita baca sebagai emboss; matriks dengan -1 di sekitar pusat positif memperkuat perbedaan dan menghasilkan deteksi sisi atau perjelasan. Atribut order menentukan ukuran kernel (biasanya 3 untuk matriks 3x3), dan divisor/bias menormalisasi output.
Mengapa filter SVG saya tidak bekerja saat diterapkan dengan CSS filter: url(#id)?

Tiga penyebab umum: (1) elemen tidak ada di DOM saat aturan CSS diterapkan — pastikan filter SVG diembed dalam halaman secara langsung, bukan diunduh dari file eksternal yang diblokir oleh browser. (2) ID yang Anda acu tidak sesuai dengan ID pada elemen (sensitif terhadap huruf besar-kecil, harus unik). (3) Elemen yang difilter memiliki ukuran nol atau dipotong oleh daerah filter default — atur x, y, lebar, tinggi pada elemen (sering kali x="-30%" y="-30%" lebar="160%" tinggi="160%") sehingga efek seperti blur atau bayangan yang melampaui batas sumber tidak dipotong.