Hal-Hal Keren yang Dibuat dengan SVG

• SVG adalah alat yang kuat untuk merepresentasikan grafik vektor di web
• Melalui animasi, elemen SVG bisa dibuat lebih menarik
• Mask dapat digunakan untuk menonjolkan atau menyembunyikan bagian tertentu dari elemen SVG
• Dengan server-side rendering, TOC dapat diimplementasikan tanpa JavaScript sisi klien
• Menggabungkan CSS dan SVG memungkinkan pembuatan elemen yang interaktif

---

Animasi SVG

• SVG digunakan untuk menampilkan grafik vektor di web
• Termasuk contoh kode yang ditulis dengan JSX(React)
• Garis dapat dibuat menggunakan line atau path, lalu digunakan sebagai mask untuk menambahkan animasi
• Animasi dapat didefinisikan dengan @keyframes, dan posisi elemen dapat diubah melalui properti transform
• Bagian yang didesain di Figma atau editor SVG lainnya dapat dimanfaatkan untuk memproses blok animasi sebagai mask

Daftar Isi bergaya Clerk

• Daftar isi bergaya Clerk diimplementasikan di Fumadocs
• Daftar isi dirender di server agar kompatibel dengan SSR tanpa JavaScript sisi klien
• Daftar isi dirender di lingkungan server yang tidak dapat mengetahui posisi elemen secara tepat, dengan menggunakan posisi absolut
• Ditambahkan bagian animasi bernama thumb untuk menonjolkan item yang aktif
• Informasi posisi yang dirender di klien dimanfaatkan untuk menyusun "peta mask" menggunakan SVG
• Properti mask-image digunakan untuk memask div yang dianimasikan guna merender bagian daftar isi yang disorot

Terinspirasi dari Clerk, daftar isi situs dokumentasi dibuat menjadi lebih menarik.

[ndrgrd]

Memang keren, tapi rasanya lebih mudah terlihat kalau cukup menonjolkan satu item saat ini dengan jelas.

[GN⁺]

Opini Hacker News

• Presentasi Sarah Drasner, "SVG Can Do That?", meski sudah berusia 8 tahun, masih membuat banyak orang takjub. CSS sudah banyak berkembang sejak saat itu, tetapi saya kurang yakin SVG sendiri ikut berkembang sejauh itu. Bagaimanapun, sangat direkomendasikan

  • Slide: slides.com/sdrasner/svg-can-do-that
  • Video: youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte

• Salah satu hal menarik yang bisa dilakukan dengan file SVG adalah mendefinisikan konstanta yang bisa dipakai bersama di beberapa bagian file dengan menggunakan entitas dalam DTD inline. Contoh yang bagus bisa dilihat di halaman "Squares in Squares" karya David Ellsworth

  • Browser utama tidak memiliki masalah terkait ini, tetapi beberapa alat seperti Inkscape tidak mem-parsing DTD atau memperluas entitas
  • kingbird.myphotos.cc/packing/squares_in_squares.html

• SVG animasi yang kompleks memang menyenangkan, tetapi juga sulit karena kerumitan SMIL dan masalah seperti Safari yang bermasalah jika angka pecahan tidak diawali dengan 0

• "A Deep Dive Into SVG Path Commands" karya Nanda Syahrasyad sangat membantu untuk memahami bagaimana path SVG disusun. Meski materi ini hampir berusia 2 tahun, isinya tetap membuka wawasan tentang semua hal yang bisa dilakukan SVG dan caranya

  • nan.fyi/svg-paths

• Jika ada yang menggunakan JS secara kreatif untuk menghasilkan SVG secara dinamis, saya ingin mereka mengirim DM kepada saya

• Saya pernah mengerjakan hal yang menyenangkan dengan SVG dalam proyek yang dibangun dengan React. Ada serangkaian ilustrasi statis dan elemen animasi, dan warnanya dikendalikan lewat CMS

  • Frontend pada dasarnya memanggil API untuk mendapatkan gambar SVG dengan warna yang sesuai sudah diterapkan, dan animasinya dilakukan dengan cara menyembunyikan dan menampilkan elemen SVG
  • Contoh: web.archive.org/web/20221020133516im_/https://uncrowd.uk/illustrations/friction/bright_yellow.svg

• SVG+CSS sangat kuat. Fitur sederhana yang saya sukai adalah membuat diagram yang menghormati mode gelap/terang tanpa JavaScript. Contoh diagram: blog.davidv.dev/posts/ipvs-lb/

• Saya penasaran apakah ada ekstensi SVG yang memungkinkan kepadatan garis. Saya punya plotter yang bisa mengangkat dan menurunkan pena, dan alat itu digerakkan dari file SVG. Akan bagus jika pena bisa diturunkan saat menggambar garis

  • Oh, itu Axidraw dari Evil Mad Scientist Labs. Perangkat yang hebat dan orang-orangnya juga keren

• Postingan yang keren, dan desain situsnya juga keren. SVG sudah ada sejak lama, tetapi terasa seperti potensinya masih belum sepenuhnya dimanfaatkan. Saya tidak bisa memikirkan elemen lain yang dapat mengenkapsulasi HTML, CSS, dan JS secara fungsional. Pada dasarnya ini bisa digunakan dengan mudah seperti dokumen HTML yang sepenuhnya berbeda

• SVG terasa seperti wilayah yang sangat jarang dieksplorasi dan kurang dimanfaatkan. Banyak hal bisa dilakukan tergantung imajinasi. Namun, mungkin banyak hal juga harus dilakukan dengan cara yang cukup "hardcore", jadi tergantung pada kasus penggunaannya