Geekly articles weekly

Efek penyaringan SVG. Bagian 7. Maju

Rangkaian artikel yang diusulkan, " Efek Penyaringan SVG, " oleh Sara Soueidan, pengembang antarmuka UI / UX lepas dan penulis banyak artikel teknis yang berbasis di Lebanon, berfokus pada karya filter SVG dan terdiri dari artikel berikut:


Efek Penyaringan SVG


  1. Efek penyaringan SVG. Bagian 1. Filter SVG 101
  2. Efek penyaringan SVG. Bagian 2. Garis besar teks dengan feMorphology
  3. Efek penyaringan SVG. Bagian 3. Efek posterisasi gambar menggunakan feComponentTransfer
  4. Efek penyaringan SVG. Bagian 4. Gambar dua warna dengan feComponentTransfer .
  5. Efek penyaringan SVG. Bagian 5. Mencocokkan teks dengan tekstur permukaan dengan feDisplacementMap
  6. Efek penyaringan SVG. Bagian 6. Membuat tekstur dengan feTurbulence
  7. Efek penyaringan SVG. Bagian 7. Maju

Dalam artikel terakhir dari seri ini, penulis akan membagikan daftar sumber daya yang bermanfaat bagi mereka yang ingin mempelajari lebih lanjut tentang efek dari penyaringan SVG.




Selama enam minggu, kami menerbitkan enam artikel tentang berbagai efek filter SVG dan filter primitif yang digunakan untuk membuatnya.


Terlepas dari kenyataan bahwa kami telah membahas banyak bidang, saya dapat dengan yakin mengatakan bahwa kami nyaris tidak menggores permukaan yang mungkin dengan filter SVG. Dalam artikel singkat ini, saya ingin berbagi beberapa sumber daya favorit saya untuk mempelajari lebih lanjut tentang filter SVG.


Bergerak Maju: Sumber Belajar dan Eksperimen Penyaringan SVG


  1. Untuk mendapatkan pemahaman yang lebih luas tentang kemungkinan luar biasa yang dibawa oleh filter SVG ke Internet, saya sangat merekomendasikan untuk melihat profil Codepen dari Lucas Beber . Lucas adalah orang yang menciptakan Gooey Effect (efek lengket) yang terkenal menggunakan filter SVG. Eksperimennya mencakup efek yang lebih mengesankan yang dijamin akan menginspirasi Anda dan senang dengan kemampuan yang dibawa SVG ke Internet.




  2. Michael Mullany adalah sumber transisi saya untuk studi saya ketika saya pertama kali membenamkan diri dalam dunia filter SVG. Saya belajar banyak dari artikelnya , kontribusinya terhadap penetrasi filter SVG ke dokumentasi platform web dan eksperimennya pada Codepen , yang secara harfiah merupakan tambang emas filter SVG! Lihat logo aneh ini sepenuhnya dibuat ulang dengan filter SVG:



  3. David Daily memiliki pengantar yang luar biasa untuk filter SVG di mana ia menunjukkan berbagai kemungkinan efek yang ia buat dengan feTurbulence , termasuk tetapi tidak terbatas pada awan tebal dan efek seperti bokeh.


    Di bawah ini adalah hasil dari menyesuaikan hasil feTurbulence dengan filter primitif lainnya. Penyesuaian warna dan saturasi dilakukan menggunakan feColorMatrix , dan amplifikasi dilakukan menggunakan feColvMverix .


    Contoh apa yang bisa dilakukan dengan noise yang dihasilkan
    Fig_1. Contoh apa yang bisa dilakukan dengan noise yang dihasilkan.


  4. Dirk Weber juga menciptakan beberapa efek filter SVG yang baik, yang secara pribadi banyak mengajarkan saya. Dia berbagi eksperimennya dalam sebuah artikel di Majalah Smashing lebih dari tiga tahun yang lalu! Ini berbagi berbagai efek teks yang dibuat menggunakan filter SVG. Anda akan menemukan contoh tekstur grunge, teks yang menonjol dan tiga dimensi, efek percikan air menggunakan feTurbulence , dan banyak lainnya. Dirk menggunakan dua filter primitif dalam percobaannya, yang tidak kami bahas dalam seri kami:


    • feTile , yang merupakan primitif berguna yang mengisi persegi panjang target dengan pola ubin berulang dari gambar input. Yoksel juga memiliki contoh hebat yang diciptakan melalui serangkaian operasi, termasuk feTile , yang perlu ditelusuri;
    • dan feConvolveMatrix , yang merupakan salah satu primitif yang lebih kompleks dan lebih kuat. Ini menerapkan efek filter konvolusi matriks. Konvolusi menggabungkan piksel dari gambar input dengan piksel tetangga untuk menghasilkan gambar yang dihasilkan. Berbagai macam operasi akuisisi gambar dapat dicapai melalui konvolusi, termasuk pengaburan, pengenalan tepi, amplifikasi, ekstrusi, dan chamfering. Saya pribadi belum bereksperimen dengan primitif ini, tetapi saya tahu orang lain yang telah mencoba.

    Beberapa efek teks yang dibahas Dirk Weber dalam artikelnya di Smashing Magazine
    Fig_2. Beberapa efek teks yang dibahas Dirk Weber dalam artikelnya di Smashing Magazine.


  5. Eksperimen Yoksel SVG pada Codepen juga merupakan sumber yang bagus untuk belajar. Dia bahkan menciptakan alat penyaringan SVG visual yang fantastis ini yang dapat Anda gunakan untuk membuat efek dan menyalin-tempel kode yang dihasilkan untuk digunakan dalam proyek Anda sendiri.


    Editor Filter SVG Yoksel Visual
    Fig_3. Editor Filter SVG Yoksel Visual.


  6. Terakhir, Anda dapat menemukan semua yang perlu Anda ketahui tentang elemen, properti, dan atribut filter SVG dalam spesifikasi filter SVG .



Mengapa filter SVG?


SVG sekarang jauh lebih kuat daripada CSS ketika membuat efek grafis untuk web. Dan ada beberapa alasan mengapa membuat efek visual di Internet lebih baik daripada mengimpornya sebagai gambar dari editor gambar seperti Photoshop atau Illustrator :


  • selama web adaptif, kami tidak lagi berurusan dengan satu gambar. Untuk setiap gambar yang kami gunakan di Internet, kami harus menyediakan versi adaptif dari gambar tersebut yang dioptimalkan untuk konteks dan kinerja pengguna yang berbeda. Ini berarti bahwa jika Anda membuat gambar dan kemudian memutuskan untuk mengubah sesuatu di dalamnya, Anda harus mengubah efek di beberapa gambar sekaligus, yang dengan mudah akan berubah menjadi mimpi buruk pemeliharaan. Di sisi lain, membuat efek pada peramban berarti mereka tidak tergantung pada resolusi dan lebih mudah diedit;
  • kemampuan untuk menerapkan efek penyaringan di Internet membantu mempertahankan struktur semantik dokumen, daripada beralih ke gambar yang, di samping resolusi tetap umum, cenderung mengaburkan semantik asli dari elemen yang mereka ganti. Ini terutama berlaku untuk efek yang diterapkan pada teks. Ketika efek diterapkan ke teks nyata di Internet, teks itu akan tersedia untuk pencarian, pemilihan dan akses;
  • efek yang dibuat di Internet lebih mudah untuk diedit, dimodifikasi, dan diperbarui tanpa beralih antara editor grafis dan editor kode atau browser.
  • dan last but not least, efek yang dibuat di Internet dapat dianimasikan dan berinteraksi dengan. Ini adalah salah satu momen terpenting dari kekuatan mereka.

Kesimpulan


Terima kasih telah bergabung dengan saya dalam perjalanan penyaringan SVG ini selama beberapa minggu terakhir. Saya harap seri ini menginspirasi Anda untuk mulai bereksperimen dengan filter SVG dan menggunakannya lebih sering. Ada banyak efek yang dapat Anda buat sebagai percobaan, tetapi ada banyak kegunaan praktis untuk filter.


Saya berharap seri ini memberi Anda gambaran tentang apa yang sudah mungkin dilakukan dengan pemfilteran SVG, yang telah membangkitkan imajinasi Anda dan mendorong Anda untuk membuat aplikasi praktis sendiri.


Akhirnya, saya harap Anda menikmati seri ini dan, yang paling penting, Anda merasa bermanfaat. Terima kasih untuk waktu anda

Source: https://habr.com/ru/post/id442004/

More articles:


All Articles