SVG Saja Sudah Cukup

 (jon.recoil.org)
2 poin oleh GN⁺ 2025-12-13 | 1 komentar | Bagikan ke WhatsApp
  • SVG adalah format grafis vektor sederhana berbasis XML, didukung di hampir semua platform, dan dapat menanamkan skrip untuk mewujudkan visualisasi interaktif
  • Ketahanan format ini terbukti melalui alat visualisasi SVG yang dibuat dalam riset jaringan miselium di masa lalu, yang masih berjalan sempurna di browser modern meski sudah 20 tahun berlalu
  • Dengan satu berkas SVG mandiri, pemuatan data, pemrosesan, visualisasi, dan interaksi semuanya dapat dilakukan di sisi klien
  • Dalam kaitannya dengan konsep 'empat P' milik Anil (Permanence, Provenance, Permission, Placement), SVG menonjolkan keberlanjutan, kompatibilitas dengan pengelolaan versi, pemisahan izin, dan daya representasi spasial
  • Seiring meningkatnya kemampuan komputasi browser modern, terbuka kemungkinan untuk mengimplementasikan seluruh pipeline analisis data di dalam SVG, yang menjadikannya alat penting untuk berbagi riset dan meningkatkan reproduktibilitas

Potensi SVG dan idealisme publikasi ilmiah

  • SVG adalah grafis vektor berformat XML sederhana yang tampil tajam di semua perangkat dan dapat menanamkan skrip untuk membuat konten interaktif
    • SVG memiliki kemampuan kuat yang tidak disadari oleh kebanyakan pengguna, dan potensi ini bisa dimanfaatkan lebih aktif
  • Diajukan sebuah ideal bahwa makalah ilmiah seharusnya menyediakan lingkungan interaktif yang lengkap untuk eksplorasi data dan reproduksi eksperimen
    • Beberapa eksperimen memang sulit direproduksi segera karena keterbatasan biaya dan waktu, tetapi untuk makalah di bidang ilmu komputer, hal ini sangat mungkin diwujudkan

Penemuan kembali alat visualisasi SVG dari 20 tahun lalu

  • Saat menjadi peneliti postdoktoral di Departemen Ilmu Tumbuhan Cambridge, dibuat alat visualisasi berbasis SVG untuk riset sinergi jaringan miselium
    • Dirancang agar data jaringan miselium yang tumbuh di cawan petri nyata dapat dieksplorasi
    Iklan
  • Ketika SVG tersebut baru-baru ini dijalankan kembali, ternyata kode dari masa ketika Firefox 1.5 atau plugin Adobe SVG masih dibutuhkan tetap berjalan sempurna di browser modern
    • Ini menjadi contoh yang menunjukkan kompatibilitas jangka panjang dan stabilitas format SVG

Struktur SVG yang sepenuhnya mandiri

  • Dengan satu berkas SVG saja, pemuatan data, pemrosesan, visualisasi, dan interaksi semuanya dapat dilakukan
    • Data bisa diambil dari repositori versi eksternal atau langsung disertakan di dalam berkas
    • Seluruh komputasi berjalan di browser sisi klien, sehingga logika sisi server tidak diperlukan
    • Dapat didistribusikan dan dibagikan dengan mudah melalui server web statis
Iklan

Keterkaitan dengan 'empat P' milik Anil

  • Permanence: SVG dapat diberi DOI seperti makalah atau dataset, dan fakta bahwa berkas yang dibuat 20 tahun lalu masih tetap berfungsi membuktikan hal ini
  • Provenance: Karena SVG berbasis teks, ia kompatibel dengan sistem kontrol versi seperti Git; strategi pelacakan yang sama juga bisa diterapkan saat menggunakan data eksternal
  • Permission: Karena data dan logika pemrosesan dipisahkan, model izin yang sama seperti pada data biasa dapat diterapkan
  • Placement: SVG secara inheren memiliki ekspresi spasial, sehingga misalnya mudah digunakan untuk membuat visualisasi peta dunia

Peningkatan daya komputasi browser dan kemungkinan baru

  • SVG yang dibuat 20 tahun lalu hanyalah alat visualisasi sederhana, tetapi dengan meningkatnya kemampuan komputasi browser modern, kini seluruh pipeline analisis data dapat diimplementasikan di dalam SVG
    • Pemrosesan ini cukup ringan hingga kipas laptop pun tidak perlu berputar

SVG dalam ekosistem berbagi riset

  • Bersama Jupyter notebooks, Marimo botebooks, kombinasi slipshow/x-ocaml, Forester, dan proyek notebook pribadi
    • SVG ditambahkan sebagai alat yang mendukung berbagi dan perakitan ulang hasil riset dengan mudah
  • Alat-alat ini merupakan bagian dari upaya berkelanjutan untuk membangun lingkungan riset kolaboratif dan dapat direproduksi

Bacaan terkait

1 komentar

 
GN⁺ 2025-12-13
Opini Hacker News
  • Topik utamanya memang soal visualisasi, tetapi dulu saya pernah membuat perangkat lunak koreografi tari
    Seluruh UI dirender dengan SVG, dan hasilnya bekerja jauh lebih baik dari yang saya duga
    Nama proyeknya StageKeep, awalnya dibuat dengan React Three Fiber lalu direfaktor ke SVG
    Saya terinspirasi dari konsep Signed Distance Function, dan menyukai ide fungsi atomik yang menerima input lalu menghasilkan SVG
    • Dulu pernah ada masa ketika SVG diperhatikan sebagai pengganti Flash
      Dengan SVG + CSS + JavaScript, hampir semua hal yang dulu dilakukan dengan Flash bisa dibuat, tetapi tidak ada alat authoring yang sebagus Flash
      Pada akhirnya Flash menghilang, dan tidak ada yang benar-benar menggantikan posisinya sepenuhnya
    • Di bagian bawah situs tertulis “Start free tiral”, sepertinya itu salah ketik dari “trial” :)
    • Sebagai sutradara panggung yang menangani koreografi, akan sangat keren jika alat seperti ini bisa dipakai untuk merencanakan pergerakan di atas panggung sebelumnya
    • Proyek yang sangat keren. Saya jadi penasaran apakah mungkin juga ada fitur mengekstrak koreografi otomatis dari video dengan AI
      Misalnya menganalisis dan mengimpor koreografi dari video Project21 atau Avantgardey
    • Saya penasaran apakah Anda sendiri juga seorang penari
  • Saya mencoba merangkum kekurangan SVG
    • Tidak bisa line wrapping teks
    • Tidak bisa menyematkan glyph font — kalau pengguna tidak punya font-nya, teksnya tidak bisa dibaca
    • Dukungan versi dan fitur berbeda di tiap browser
    • Karena bisa memuat JS atau resource eksternal, SVG sulit dilihat dalam lingkungan terisolasi demi keamanan
      Salah satu solusinya adalah menyiapkan dua versi: SVG sumber untuk Inkscape, dan SVG distribusi dengan teks yang sudah diubah menjadi kurva
    • Masih banyak masalah lain
      Rendering berbeda-beda antar-browser sehingga sulit mendapatkan hasil yang konsisten, dan SVG yang kompleks rentan mengalami kebocoran memori atau penurunan kecepatan rendering yang parah
      Selain Inkscape, hampir tidak ada editor yang layak dipakai di Linux
      Meski begitu, karena tidak ada alternatif yang benar-benar memadai, saya tetap memakai SVG, hanya saja saya berusaha menjaganya sesederhana mungkin
    • Dengan <foreignObject>, HTML bisa di-embed sehingga line wrapping teks memang jadi mungkin
      Di SVG 2, ini direncanakan selesai lewat properti inline-size
      Penyematan font juga sudah ada lewat elemen <font> atau dengan memasukkan WOFF sebagai data URI
      Namun, hal-hal seperti baseline teks atau kontrol scaling tetap merupakan spesifikasi yang belum matang
      Dokumentasi terkait: SVG2 InlineSizeProperty, SVG11 Fonts
    • Di Safari, font base64-encoded bisa di-embed dengan @font-face di dalam <style>
      Tetapi ukuran file jadi membesar, jadi tidak direkomendasikan
    • Jika teks diubah menjadi kurva, muncul masalah tidak bisa dipilih
      Di Safari, pemilihan tetap dimungkinkan lewat elemen <text>, jadi dalam kedua pendekatan pun tidak ada solusi yang benar-benar sempurna
  • Saya menyukai visi di mana paper ilmiah disajikan bersama lingkungan interaktif, sehingga pembaca bisa memanipulasi data sendiri dan mereproduksi eksperimen
    Blog NVIDIA Illustrated Evo2 juga sangat mengesankan
    • Ini mengingatkan saya pada paper CloudSpecs yang dibuat rekan-rekan saya
      Semua gambarnya terhubung ke situs web, dan bisa direproduksi di browser dengan DuckDB + WebR + ggplot
      Contoh: demo Figure 1
    • Menjalankan ulang eksperimen di browser tampaknya hanya realistis untuk riset berbasis pemodelan
      Tetapi memungkinkan data dieksplorasi dari berbagai sudut pandang tetap merupakan ide yang menarik
    • Tidak banyak format yang cocok sebagai pengganti SVG
      PDF memiliki fitur interaktif yang terbatas, dan baik Word maupun PDF sama-sama lemah untuk penyematan multimedia
    • Bahkan kalau hanya bisa menyisipkan GIF atau video pun rasanya akan sangat bernilai
    • SVG butuh waktu untuk rendering yang kompleks sehingga kurang cocok untuk interaktivitas
      Jika yang dibutuhkan hanya grafis vektor, PostScript juga bisa menjadi alternatif
  • Dua tahun lalu, saat memperbarui proyek “Spurious Correlations”, saya membuat generator chart SVG sendiri dengan Python
    Karena saya tidak menyukai alat chart JS/PHP yang ada (pCharts, HighCharts, dll.), saya membuatnya sendiri, dan ternyata hasilnya cukup bagus
    Dengan matematika saja kita bisa menghasilkan SVG yang rapi, dan bonus tambahannya adalah skalabilitas tak terbatas
    • Jika mencari framework chart JS, saya merekomendasikan Observable Plot
      Ini alat buatan kreator D3, ringkas, dan usability API-nya sangat baik
      Tidak ada animasi, tetapi untuk chart paper itu sudah lebih dari cukup
    • Sayang sekali Postscript tidak dipakai lebih luas
      Di garis dunia lain, mungkin Postscript-lah yang menjadi standar alih-alih HTML atau SVG
    • Berkat situs itu, saya memakainya di hari pertama kelas statistik sebagai contoh korelasi yang menyesatkan
    • Saya pikir industri perlu melepaskan ketakutan bahwa “kalau bikin sendiri pasti berantakan”
  • Paper pertama Distill, Augmented RNNs, sangat berkesan
    Itu contoh interaksi minimal dengan D3.js di atas SVG, dan setelah pertama kali melihat gaya Shan Carter, saya jadi ingin bergabung dengan timnya
  • Lima belas tahun lalu saya membuat controller barbecue, memakai 4 sensor suhu dan algoritma kontrol PID
    Lewat HTTP server bawaan, saya menampilkan grafik suhu dan dial melalui web UI berbasis SVG, dan itu bekerja baik bersama JS
    • Proyek yang benar-benar keren. Saya penasaran apakah Anda pernah merekam video saat itu sedang bekerja
  • Sebagai penulis, hal yang ingin saya tekankan lagi saat menyunting tulisan ini adalah fakta bahwa SVG yang berusia 20 tahun masih tetap berfungsi
    Sebagian besar kode lain yang saya tulis pada masa itu harus diperbaiki, tetapi SVG tetap sama
    • Di masa awal, kompatibilitas SVG antar-browser rendah sehingga sulit dipakai,
      tetapi sekarang bahkan SVG dari 20 tahun lalu tetap berjalan tanpa masalah di kebanyakan browser
  • Saya menyukai SVG, tetapi masalah performa tetap ada
    Untuk hal seperti kode QR atau peta kompleks, jika elemen DOM melebihi 100 maka mulai melambat, dan animasi juga lebih lambat dibanding canvas atau Lottie
    • Saya pernah menanamkan engine catur ke dalam SVG papan catur agar bisa bermain otomatis
      Tautan proyek
      Dalam instalasi seni teman saya, puluhan SVG catur diproyeksikan sekaligus, dan batas kemampuan browser ternyata cukup rendah
    • Saya juga pernah membuat viewer peta dengan SVG+JS untuk game, tetapi saat kepadatan objek meningkat, performanya jadi terlalu lambat sehingga akhirnya saya beralih ke canvas
      Hanya saja, dalam proses itu saya kehilangan beberapa fitur SVG
  • Saya penasaran apakah ada format ringan mirip SVG untuk 3D
    Saat memvisualisasikan model CAD, saya sedang mencari cara untuk hanya menerapkan perubahan parsial tanpa harus mengekspor seluruh file .step
  • Dulu saat membuat panduan perakitan Shapeoko v2 CNC, saya memakai SVG agar saat pengguna mengklik komponen, komponen terkait di gambar teknik akan disorot
    Contoh tautan
    Dibuat dengan Inkscape, dan langsung berjalan di browser
    • Implementasi yang sangat keren