Membuat SVG yang Berisik

Menambahkan efek noise ke SVG

• Ketertarikan pada bagaimana perkembangan teknologi web memengaruhi desain web
• Peningkatan kepadatan piksel layar mendorong peralihan dari fotografi ke ilustrasi vektor
• Dalam tren desain terbaru, muncul tekstur noise yang menggunakan bayangan bertekstur atau efek pencahayaan

Studio Vellekoop & León

• Selera pribadi terhadap gaya tekstur noise dan sulitnya mereproduksinya dengan SVG
• Ketertarikan pada SVG dan eksplorasi berbagai cara untuk menghasilkan beragam efek
• Munculnya SVGO sebagai alat optimasi SVG dan berbagi pengalaman menulis SVG secara langsung

Bentuk dasar dan gradien

• Di SVG, bentuk dasar seperti lingkaran atau persegi panjang dapat digambar dengan mudah
• Saat menerapkan gradien, diperlukan gradien yang berubah sesuai warna dasar agar komponen dapat digunakan ulang
• Memperkenalkan cara menggunakan mask dan memanfaatkan <defs> untuk mendefinisikan bentuk hanya sekali lalu merujuknya dengan elemen use

Hasil

• Menggunakan filter <feTurbulence> untuk membuat tekstur noise buatan
• Menerapkan efek filter untuk menghilangkan perubahan warna dan membaurkannya secara alami dengan warna isian yang dipilih
• Pada akhirnya berhasil membuat ilustrasi yang memuaskan, tetapi dirender berbeda di Safari

Informasi tambahan 7 Desember 2023

• Mengirim tulisan ini ke Hacker News dan mendapat beberapa tanggapan
• Memperkenalkan artikel CSS Tricks dengan topik serupa yang ditulis Jimmy Chion pada 2021
• Saat menulis artikel ini belum mengetahui artikel sebelumnya, tetapi kini menautkannya sebagai bahan pelengkap

Opini GN⁺

Hal terpenting dalam tulisan ini adalah eksplorasi cara mengimplementasikan tekstur noise dengan SVG, salah satu tren terbaru dalam desain web. Isi seperti ini bukan hanya topik menarik bagi desainer web dan pengembang, tetapi juga memberikan informasi bermanfaat bagi insinyur perangkat lunak pemula yang ingin mempelajari teknik desain web terbaru. Melalui contoh praktis tentang fleksibilitas desain dengan SVG dan cara mengoptimalkannya, pembaca dapat mempelajari cara mengimplementasikan efek desain yang kompleks secara efisien.

[ndrgrd]

Seperti biasa, Safari memang tidak pernah mengecewakan! Julukan IE-nya era 2020-an memang sangat pantas.

[GN⁺]

Opini Hacker News

• Pernah mencoba menggunakan SVG untuk mewujudkan efek bayangan yang tidak bisa dibuat di canvas, tetapi karena bayangan CSS tidak berfungsi di Safari, akhirnya harus memakai filter native SVG. Karena tampilannya berbeda dengan browser lain, digunakan JavaScript yang mendeteksi Safari lalu menonaktifkan versi CSS.

• Latar belakang tentang "yin-yang rekursif" dijelaskan di blog tersebut, dan ada rencana untuk bereksperimen dengan tekstur, tetapi perbedaan tampilan di Safari terasa menjengkelkan. Jadi penasaran apakah standardisasi interpretasi SVG akan tercapai.

• Mereproduksi gaya ilustrasi tertentu dengan SVG terasa tidak mudah dan cukup membuat frustrasi. Gaya ini disebut "dithering", dan teknik yang sama dijelaskan di halaman "Grainy Gradients" milik CSS-Tricks. Ada juga alternatif untuk menerapkannya ke seluruh gambar menggunakan CSS.

• Pernah membuat poster konferensi yang kompleks dengan SVG, tetapi hasil render berbeda-beda tergantung browser dan program. SVG bisa di-embed dengan include/link, tetapi jika memasukkan SVG lain, itu tidak berfungsi. Kadang browser tidak menampilkan gambar yang di-embed/ditautkan karena masalah "keamanan". Mengonversi SVG kompleks ke PDF juga secara tidak konsisten memicu masalah kehabisan memori. Setiap alat untuk mengonversi SVG ke PDF menghasilkan keluaran yang berbeda. Alat seperti Inkscape terkadang memperlakukan SVG yang disertakan sebagai grafik raster.

• Para fotografer film dulu berusaha keras menghilangkan grain pada film, tetapi fotografer digital cenderung menambahkannya kembali. Contoh-contoh seperti ini terasa menarik di tengah kebersihan visual digital.

• Inkscape bisa menambahkan noise semacam ini melalui berbagai efek filter, dan jika diekspor sebagai Plain SVG, penggunaan feTurbulence bisa dilihat di dalam kodenya. Ada juga perbandingan tentang bagaimana Affinity Designer 2 menangani noise. SVG hasil ekspornya menyertakan noise sebagai gambar jpeg base64.

• Situs web "ApeFest" menciptakan noise dinamis dengan menggunakan overlay PNG bertile yang bergerak "secara acak" memakai animasi CSS (sebenarnya dipindahkan dengan JS). Secara teknis sederhana, tetapi efektif.

• Karena tampilan filter SVG bisa sangat berbeda tergantung engine dan faktor scaling, filter itu hanya dipakai pada bagian yang halus dan hanya ketika presisi tidak terlalu penting. Filter seperti feDisplacementMap merusak anti-aliasing, sehingga menggagalkan sekitar setengah dari situasi saat ingin memakainya.

• Disarankan untuk tidak menggunakannya sebagai latar belakang halaman. Saat pernah mencobanya sebelumnya, muncul bug aneh di berbagai perangkat, dan untuk situs besar halaman bisa benar-benar macet atau SVG berhenti dirender setelah melewati ukuran tertentu.

• Perlin Noise dan penerusnya, Fractal Noise, sangat efektif untuk menambah kesan realistis atau nuansa "organik". Misalnya, teknik ini digunakan dengan sangat efektif pada adegan melarikan diri dari gua di "Aladdin (1992)".

• Ada ketertarikan pada cara membuat efek yang independen dari tingkat zoom. Selain itu, terkait penambahan unsur acak, muncul pertanyaan apakah ada cara menetapkan seed yang dapat mendefinisikan satu hasil render yang benar pada ukuran tertentu.