SVG yang Terasa Seperti GIF

 (koaning.io)
33 poin oleh GN⁺ 2025-07-09 | 1 komentar | Bagikan ke WhatsApp
  • Gambar SVG bergerak mempertahankan resolusi tinggi sambil tetap memiliki ukuran file yang sangat kecil (49KB)
  • Memberikan efek visual mirip GIF yang sudah ada, tetapi sebenarnya memanfaatkan fitur animasi SVG
  • Bisa langsung digunakan bahkan di file Github README.md
  • Dengan alat asciinema dan svg-term-cli, rekaman sesi terminal dapat diubah menjadi animasi SVG
  • Memanfaatkan elemen animasi SVG (<animate>, <animateTransform>, <animateMotion>)

Karakteristik SVG bergerak

  • Gambar bergerak yang dibuat dengan SVG terlihat seperti GIF biasa, tetapi sebenarnya menggunakan fitur animasi berbasis vektor milik SVG
  • Pendekatan ini membuat ukuran file sangat kecil, serta memungkinkan pengubahan ukuran dan zoom tanpa kehilangan kualitas gambar
  • Keunggulan besar lainnya adalah bisa langsung digunakan di tempat seperti README.md milik Github
  • Sebagai contoh, diperkenalkan SVG burung beo bergerak beresolusi tinggi dengan ukuran hanya 49KB

Cara membuatnya

  • Rekam sesi terminal melalui asciinema
  • Ubah file asciinema yang direkam menjadi file animasi SVG dengan alat svg-term-cli
  • File SVG yang dihasilkan dapat dengan mudah ditambahkan ke README.md
  • Penulis secara aktif menggunakan pendekatan ini di berbagai proyek seperti bespoken

Cara kerja animasi SVG

  • Spesifikasi SVG sudah memiliki fitur animasi bawaan
    • <animate>: menganimasikan atribut individual seiring waktu
    • <animateTransform>: dapat menerapkan animasi transformasi seperti rotasi, penskalaan, dan perpindahan
    • <animateMotion>: menggerakkan objek mengikuti jalur tertentu
  • svg-term-cli bekerja dengan memanfaatkan fitur animasi bawaan SVG tersebut

Bacaan terkait

1 komentar

 
GN⁺ 2025-07-09
Komentar Hacker News

  • Saya kagum bahwa hanya dengan SVG saja ternyata bisa membuat begitu banyak karya yang beragam dan mengesankan. Contoh yang ditemukan di Wikipedia antara lain animasi klon Missile Command, peta London Tube, dan animasi rolling shutter, semuanya sangat menarik perhatian

    • SVG awalnya punya sejarah sebagai pesaing terbuka bagi Shockwave/Flash Player sekaligus format aplikasi untuk PDA. Disebut juga bahwa dukungan jaringan sempat benar-benar dipertimbangkan untuk ditambahkan

    • Alasan peta London Tube terasa sangat mengesankan adalah karena ada penanda 'stasiun tanpa tangga' untuk pengguna kursi roda dan kelompok penumpang lain yang membutuhkan aksesibilitas. Begitu melihat contoh misil pertama, saya langsung terpikir cara memrogram klik pada hulu ledak dan merasa seperti baru saja menyelamatkan dunia

    • Penasaran kenapa tautan Missile Command pertama tidak berfungsi dengan benar di Safari. Tombolnya bisa diklik, tetapi klik pada hulu ledaknya tidak merespons. Di Firefox bahkan kursor bidik silang muncul, jadi sepertinya ada sesuatu yang memang tidak jalan di Safari

    • Fitur checkbox pada peta Tube itu sangat keren. Jadi makin terdorong untuk mengasah kemampuan SVG. Sudah saya bookmark

    • Saat melihat judul artikelnya, saya sempat mengira ini alat untuk menampilkan hash file README secara visual, tetapi visualisasi seperti itu justru bisa membantu pengguna lebih mudah menyadari ketika TOS atau EULA diam-diam berubah

  • Ada yang membagikan pengalaman mengembangkan tugas yang menyisipkan SVG animasi ke dalam README, lalu SVG itu memperbarui informasi cuaca dan hari dalam seminggu sekali sehari. Referensi. Ternyata itu proyek yang dibuat beberapa tahun lalu saat masa panggilan juri

  • Jika targetnya adalah README Github, video juga sebenarnya bisa di-embed langsung. Sebagai contoh diperkenalkan tautan README git-recent. Namun, jika hanya sekadar tangkapan terminal, pendekatan SVG dari OP mungkin pilihan yang lebih cerdas

    • Kelebihan video adalah adanya UI putar/jeda/slider. Beberapa platform memang menambahkan UI kontrol ke GIF dengan JavaScript, tetapi itu bukan dukungan bawaan browser, jadi tetap ada batasannya. Karena itu, saya sering lebih memilih video. Saat membuat animasi SVG untuk RevealJS, saya memanipulasinya dengan CSS/JS sesuai kebutuhan

    • Jika menambahkan file video, mengunggahnya lewat edit README langsung di Github sehingga file unggahan disimpan di githubusercontent juga lebih baik untuk kapasitas repositori

    • SVG berbeda dari video karena warnanya bisa merespons pengaturan terang/gelap pengguna. Ukurannya juga responsif, sesuatu yang tidak bisa dilakukan video. Diperkenalkan demo terkait. Hanya saja, fitur ini tetap mudah berjalan di Firefox/Chrome, sementara di Safari implementasinya masih merepotkan dan itu cukup disayangkan

    • Senang melihat nama Paul disebut lagi setelah sekian lama, dan langsung teringat rasa suka pada pekerjaan lamanya dengan Echo Nest dan API Rdio

    • Menurut saya, untuk tangkapan terminal, pendekatan SVG kurang praktis karena minim fitur kontrol. Untuk demo perangkat lunak berupa penjelasan gerak singkat sekitar 5 detik, ini masih cocok, tetapi dalam beberapa kasus video bisa jadi pilihan yang lebih baik

  • Fakta bahwa teks bisa langsung disalin dari dalam animasi terasa tidak terlalu intuitif, tetapi justru itu mungkin fitur paling keren

    • Jika animasinya bisa dijeda saat mouse diarahkan ke atasnya, tingkat ketertarikannya akan naik drastis. Tetapi jika terminalnya ikut menggulir, fungsi salin/tempel menjadi lebih menantang dari sisi kegunaan

  • Sebagai catatan, ada bug di mana beberapa file SVG bisa membuat halaman macet. Karena itu ada peringatan untuk menghindari menyisipkan tautan SVG pihak ketiga. Baik Google Chrome maupun Firefox tampaknya belum berencana memperbaiki bug ini. Turut dilampirkan contoh SVG berbahaya untuk pengujian, tetapi mengkliknya berisiko membuat browser crash

    • Masalah halaman atau browser macet ini tampaknya bukan isu keamanan semata, karena penyalahgunaan berbagai fungsi bawaan juga bisa menyebabkannya secara umum. Misalnya, memakai rantai filter blur yang panjang bisa membuat beban render berlebihan hingga Chrome sendiri macet. Jika dampaknya meluas melampaui satu tab tentu lebih bermasalah, tetapi pada dasarnya ini terasa lebih seperti isu kegunaan UI

    • Ada yang penasaran apakah kerentanan SVG seperti ini, misalnya serangan XXE, juga mungkin terjadi dalam lingkungan yang dibatasi seperti README Github. Jika memang bisa, jadi ingin tahu bagaimana pencegahannya diterapkan

  • Fakta bahwa "SVG pada dasarnya memang animasi" terasa sangat segar dan memunculkan banyak ide. Muncul juga pertanyaan apakah loop tanpa akhir didukung

    • Pada tag <animate>, loop tak terbatas bisa dilakukan dengan mengatur atribut repeatCount atau repeatDur ke indefinite. Karena perulangannya berlaku per atribut, setiap elemen dalam gambar bisa bergerak dengan ritme berbeda

    • Dibagikan contoh kode yang bisa dilihat di dokumentasi resmi animasi SVG

    • Selain animasi berbasis atribut, SVG juga bisa menyematkan Ecmascript (Javascript), jadi bila perlu hampir fungsi apa pun bisa diisi lewat skrip. Lihat dokumentasi skrip W3C

    • Turut dibagikan contoh dan sampel kode animasi SVG. Beberapa di antaranya bisa dilihat saat halaman dimuat ulang

  • Ada yang memimpikan suatu hari nanti browser menyediakan standar untuk mencolokkan mesin eksekusi apa pun seperti WASM, JVM, CLR, dan sebagainya, dengan output berupa SVG (teks/biner). Harapannya, pengembang bebas memilih kombinasi model eksekusi dan tampilan, tidak lagi terikat pada DOM

    • Aplikasi seperti AutoCAD Web, Photopea, Figma, Google Docs, Google Earth Web, dan Flutter for Web(CanvasKit) sebenarnya sudah mendekati pendekatan ini, dengan melewati DOM atau memilih mesin render lain. Artinya, kita tidak lagi hidup di masa ketika hanya DOM yang dipaksakan

    • Dulu runtime pihak ketiga seperti Flash, Java, Silverlight, dan ActiveX pernah menguasai web, tetapi sekarang keunggulan ada pada lingkungan bahasa/platform bersama. Ditekankan juga bahwa di tengah ancaman keamanan saat ini, teknologi tambahan model lama seperti itu makin sulit bertahan

    • Kelebihan DOM (HTML) adalah desainnya yang responsif terhadap berbagai lingkungan tampilan. SVG tidak punya tingkat keleluasaan yang sama dalam hal ini

  • Mungkin terdengar sangat nyeleneh, tetapi ada keinginan untuk menganimasikan diagram arsitektur SVG agar node-node tampil dengan animasi dramatis, misalnya seperti animasi pertarungan: zoom, freeze frame, garis berkilau, dan sejenisnya

  • Postingan gaya TIL seperti ini sangat membantu memicu kreativitas karena membagikan pengalaman langsung dengan alat baru sekaligus cara mengatasi batasan Github Markdown. Setelah melihat hasil SVG-nya (contoh), saya baru pertama kali melihat struktur SVG inline di dalam SVG inline, dan itu terasa sangat segar, jadi saya berterima kasih untuk itu

    • Secara teori, mungkin saja membuat SVG quine yang menganimasikan dirinya sendiri sedang mengetikkan source code-nya ke editor

  • Ide ini benar-benar keren, dan saya ingin mencoba mengujinya di README untuk melihat bagaimana ia cocok dengan efek yang diimplementasikan di terminaltexteffects. Saya memang tidak terlalu paham SVG, tetapi saya sadar kalau teks aslinya benar-benar disimpan, ukuran datanya bisa menjadi besar. Tetap saja, ini terdengar menyenangkan untuk dicoba