Chỉ cần SVG là đủ

 (jon.recoil.org)
2 điểm bởi GN⁺ 2025-12-13 | 1 bình luận | Chia sẻ qua WhatsApp
  • SVG là định dạng đồ họa véc-tơ dựa trên XML đơn giản, được hỗ trợ trên gần như mọi nền tảng và có thể nhúng script để triển khai trực quan hóa tương tác
  • Một công cụ trực quan hóa SVG được tạo trong nghiên cứu mạng lưới sợi nấm trước đây cho thấy rằng sau 20 năm, nó vẫn hoạt động hoàn hảo trên các trình duyệt mới nhất, qua đó chứng minh độ bền của định dạng
  • Chỉ với một tệp SVG tự cung tự cấp có thể thực hiện toàn bộ quá trình nạp dữ liệu, xử lý, trực quan hóa và tương tác ở phía máy khách
  • Trong bối cảnh khái niệm 4P của Anil (Permanence, Provenance, Permission, Placement), bài viết nhấn mạnh độ bền, khả năng tương thích quản lý phiên bản, phân tách quyền và sức biểu đạt không gian của SVG
  • Với sức mạnh tính toán của trình duyệt hiện đại, đã mở ra khả năng triển khai toàn bộ pipeline phân tích dữ liệu bên trong SVG, điều này có ý nghĩa quan trọng như một công cụ tăng cường chia sẻ và tái lập nghiên cứu

Tiềm năng của SVG và lý tưởng của xuất bản khoa học

  • SVG là đồ họa véc-tơ với định dạng XML đơn giản, hiển thị sắc nét trên mọi thiết bị và có thể tạo nội dung tương tác bằng cách nhúng script
    • Nó sở hữu một khả năng mạnh mẽ mà phần lớn người dùng chưa nhận ra, và có thể được tận dụng sâu hơn
  • Đưa ra một lý tưởng rằng các bài báo khoa học nên cung cấp một môi trường tương tác đầy đủ để hỗ trợ việc khám phá dữ liệu và tái hiện thí nghiệm
    • Một số thí nghiệm khó thực hiện lại ngay lập tức do hạn chế chi phí và thời gian, nhưng trong bài báo khoa học máy tính, điều này hoàn toàn khả thi

Tái phát hiện công cụ trực quan hóa SVG 20 năm trước

  • Trong thời gian làm nghiên cứu sau tiến sĩ tại ngành Khoa học Thực vật Cambridge, tôi đã tạo công cụ trực quan hóa dựa trên SVG cho nghiên cứu về sự cộng sinh của mạng lưới sợi nấm
    • Được thiết kế để khám phá dữ liệu mạng lưới sợi nấm phát triển trong đĩa Petri thực tế
  • Khi chạy lại SVG này gần đây, thấy rằng mã từ thời kỳ cần Firefox 1.5 hoặc plugin SVG của Adobe vẫn hoạt động hoàn hảo trên trình duyệt hiện đại
    • Đây là một ví dụ cho thấy tính tương thích dài hạn và độ ổn định của định dạng SVG

Cấu trúc của SVG tự cấp tự túc hoàn chỉnh

  • Một tệp SVG đơn lẻ có thể xử lý việc nạp dữ liệu, xử lý, trực quan hóa và tương tác
    • Dữ liệu có thể được lấy từ kho phiên bản bên ngoài hoặc nhúng trực tiếp trong tệp
    • Mọi tính toán đều được thực thi trong trình duyệt phía máy khách, nên không cần logic phía máy chủ
    • Có thể triển khai và chia sẻ dễ dàng trên máy chủ web tĩnh

Liên kết với 4P của Anil

  • Permanence (Tính bền vững): SVG có thể nhận DOI như một bài báo hoặc bộ dữ liệu, và việc một tệp được tạo ra cách đây 20 năm vẫn hoạt động đã chứng minh điều đó
  • Provenance (Nguồn gốc): SVG là dựa trên văn bản, nên tương thích với các hệ thống quản lý phiên bản như Git; cùng một chiến lược truy vết có thể áp dụng khi dùng dữ liệu bên ngoài
  • Permission (Quyền): Dữ liệu và logic xử lý được tách rời, cho nên có thể áp dụng cùng mô hình quyền như dữ liệu thông thường
  • Placement (Không gian): SVG có bản chất biểu hiện không gian, cho thấy sự dễ dàng khi tạo các ví dụ trực quan hóa bản đồ thế giới

Nâng cao năng lực tính toán trình duyệt và khả năng mới

  • Công cụ trực quan hóa SVG được tạo 20 năm trước chỉ là một công cụ trực quan hóa đơn giản, nhưng với nâng cấp năng lực tính toán của trình duyệt hiện đại, giờ đây có thể thực hiện được toàn bộ pipeline phân tích dữ liệu ngay bên trong SVG
    • Ngay cả các phép tính nhẹ đến mức quạt của máy tính xách tay không quay đều đủ xử lý

SVG trong hệ sinh thái chia sẻ nghiên cứu

  • Cùng với Jupyter Notebook, Marimo botebooks, slipshow/x-ocaml, Forester, và dự án sổ tay cá nhân
    • SVG được bổ sung như một công cụ hỗ trợ chia sẻ và tái tổ hợp kết quả nghiên cứu một cách dễ dàng
  • Những công cụ này là một phần của nỗ lực liên tục nhằm xây dựng môi trường nghiên cứu hợp tác và có thể tái lập

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-12-13
Ý kiến trên Hacker News
  • Dù chủ đề chính là trực quan hóa, trước đây tôi từng làm phần mềm biên đạo múa
    Tôi render toàn bộ UI bằng SVG, và nó hoạt động tốt hơn mong đợi
    Tên dự án là StageKeep, ban đầu được làm bằng React Three Fiber rồi sau đó refactor sang SVG
    Tôi lấy cảm hứng từ khái niệm Signed Distance Function, và rất thích ý tưởng về các hàm nguyên tử nhận đầu vào rồi xuất ra SVG
    • Trước đây đã từng có thời kỳ SVG được chú ý như một phương án thay thế Flash
      Với SVG + CSS + JavaScript, gần như có thể làm mọi thứ từng làm bằng Flash, nhưng lại không có công cụ biên soạn tốt như Flash
      Cuối cùng Flash đã biến mất, và cũng không có gì thực sự thay thế hoàn toàn vị trí đó
    • Ở cuối trang có ghi “Start free tiral”, chắc là lỗi chính tả của “trial” :)
    • Với tư cách là đạo diễn sân khấu làm việc với biên đạo, nếu có thể dùng công cụ như thế này để lên kế hoạch đường di chuyển trên sân khấu trước thì sẽ rất tuyệt
    • Dự án thật sự rất hay. Tôi tự hỏi liệu có thể có thêm tính năng tự động trích xuất biên đạo từ video bằng AI không
      Ví dụ như phân tích và nhập biên đạo từ các video của Project21 hoặc Avantgardey
    • Tôi cũng tò mò không biết bạn có phải là người trực tiếp nhảy múa không
  • Tôi đã thử tổng hợp các nhược điểm của SVG
    • Không thể xuống dòng văn bản tự động
    • Không thể nhúng glyph font — nếu người dùng không có font đó thì sẽ không đọc được
    • Mức hỗ trợ phiên bản và tính năng khác nhau giữa các trình duyệt
    • Có thể chứa JS hoặc tài nguyên bên ngoài nên khó xem trong môi trường cô lập bảo mật
      Một cách khắc phục là duy trì hai phiên bản: SVG gốc cho Inkscape, và SVG để phân phối với văn bản đã được chuyển thành đường cong
    • Còn rất nhiều vấn đề khác
      Việc render khác nhau giữa các trình duyệt khiến khó có được kết quả nhất quán, và SVG phức tạp thì dễ gặp rò rỉ bộ nhớ hoặc giảm tốc độ render nghiêm trọng
      Ngoài Inkscape ra thì gần như không có editor nào thật sự dùng được trên Linux
      Dù vậy, vì không có lựa chọn thay thế nên tôi vẫn dùng SVG, chỉ là cố giữ nó đơn giản nhất có thể
    • Nếu nhúng HTML bằng <foreignObject> thì vẫn có thể xuống dòng văn bản
      Trong SVG 2, việc này dự kiến sẽ được giải quyết bằng thuộc tính inline-size
      Việc nhúng font bằng phần tử <font> hoặc đưa WOFF vào data URI đã tồn tại từ lâu
      Tuy nhiên, các phần như đường cơ sở văn bản hay điều khiển scaling vẫn là đặc tả chưa hoàn thiện
      Tài liệu liên quan: SVG2 InlineSizeProperty, SVG11 Fonts
    • Trên Safari, có thể nhúng font mã hóa base64 bằng @font-face trong <style>
      Nhưng không được khuyến khích vì kích thước tệp sẽ tăng lên nhiều
    • Nếu chuyển văn bản thành đường cong thì lại phát sinh vấn đề không thể chọn văn bản
      Trên Safari, có thể chọn bằng phần tử <text>, nên dù chọn cách nào thì cũng chưa phải giải pháp hoàn hảo
  • Tôi thích viễn cảnh các bài báo khoa học được cung cấp kèm môi trường tương tác, để người đọc có thể trực tiếp thao tác dữ liệu và tái hiện thí nghiệm
    Bài Illustrated Evo2 blog của NVIDIA cũng rất ấn tượng
    • Tôi nhớ đến bài CloudSpecs do các đồng nghiệp thực hiện
      Mọi hình đều được gắn với website, và có thể tái hiện ngay trên trình duyệt bằng DuckDB + WebR + ggplot
      Ví dụ: demo Figure 1
    • Việc chạy lại thí nghiệm trong trình duyệt có lẽ chỉ khả thi với nghiên cứu dựa trên mô hình
      Nhưng cho phép khám phá dữ liệu từ nhiều góc nhìn khác nhau vẫn là một ý tưởng thú vị
    • Không có nhiều định dạng thực sự phù hợp để thay thế SVG
      PDF có tính tương tác hạn chế, còn cả Word lẫn PDF đều yếu ở phần nhúng multimedia
    • Chỉ cần có thể chèn GIF hoặc video thôi cũng đã rất có giá trị rồi
    • SVG tốn thời gian cho render phức tạp nên không thật sự hợp với tính tương tác
      Nếu chỉ cần đồ họa vector thì PostScript cũng có thể là một lựa chọn thay thế
  • Hai năm trước, khi làm mới dự án “Spurious Correlations”, tôi đã tự viết trình tạo biểu đồ SVG bằng Python
    Vì không thích các công cụ biểu đồ JS/PHP có sẵn (pCharts, HighCharts, v.v.) nên tôi tự làm, và bất ngờ là nó hoạt động khá tốt
    Chỉ với toán học là có thể tạo ra SVG gọn gàng, và thêm vào đó là khả năng mở rộng vô hạn
    • Nếu đang tìm framework biểu đồ JS, tôi khuyên dùng Observable Plot
      Đây là công cụ do tác giả D3 tạo ra, ngắn gọn và có API rất dễ dùng
      Không có animation, nhưng với biểu đồ dùng trong bài báo thì là quá đủ
    • Thật tiếc khi Postscript không được dùng rộng rãi hơn
      Ở một dòng thời gian khác, có lẽ Postscript đã trở thành tiêu chuẩn thay vì HTML hay SVG
    • Nhờ website đó mà tôi đã dùng nó trong buổi học thống kê đầu tiên như một ví dụ về tương quan sai lệch
    • Tôi nghĩ ngành này cần bỏ đi nỗi sợ kiểu “tự làm thì sẽ thất bại”
  • Bài báo đầu tiên của Distill là Augmented RNNs thật sự rất ấn tượng
    Đây là một ví dụ dùng D3.js để thêm mức tương tác tối thiểu lên trên SVG, và cũng là lần đầu tôi thấy phong cách của Shan Carter khiến tôi muốn gia nhập đội của anh ấy
  • Cách đây 15 năm tôi từng làm một bộ điều khiển BBQ, dùng 4 cảm biến nhiệt độ và thuật toán điều khiển PID
    Thông qua HTTP server nhúng, nó hiển thị biểu đồ nhiệt độ và núm xoay bằng web UI dựa trên SVG, và hoạt động tốt cùng với JS
    • Dự án thật sự rất tuyệt. Tôi tò mò không biết bạn có từng quay video nó hoạt động không
  • Với tư cách là tác giả bài viết, điều tôi muốn nhấn mạnh khi chỉnh sửa lần này là: SVG đã 20 năm tuổi mà vẫn còn hoạt động
    Phần lớn những đoạn mã khác viết vào thời đó đều phải sửa, nhưng SVG thì vẫn nguyên vẹn
    • Ở giai đoạn đầu, khả năng tương thích SVG giữa các trình duyệt rất kém nên khó sử dụng,
      nhưng giờ thì ngay cả SVG từ 20 năm trước cũng chạy ổn trên hầu hết trình duyệt
  • Tôi thích SVG, nhưng vấn đề tốc độ vẫn còn tồn tại
    Nếu có hơn 100 phần tử DOM như QR code hay bản đồ phức tạp thì nó sẽ chậm, còn animation cũng chậm hơn canvas hoặc Lottie
    • Tôi từng nhúng một engine cờ vua vào SVG bàn cờ để nó có thể tự chơi
      Liên kết dự án
      Trong một tác phẩm sắp đặt nghệ thuật của bạn tôi, hàng chục SVG cờ vua được chiếu cùng lúc, và giới hạn mà trình duyệt chịu được hóa ra khá thấp
    • Tôi cũng từng làm trình xem bản đồ bằng SVG+JS cho game, nhưng khi mật độ đối tượng tăng cao thì nó quá chậm nên cuối cùng phải chuyển sang canvas
      Dù vậy, trong quá trình đó tôi cũng mất đi một số tính năng của SVG
  • Tôi tự hỏi liệu có định dạng nhẹ tương tự SVG nhưng cho 3D hay không
    Khi trực quan hóa mô hình CAD, tôi đang tìm cách phản ánh chỉ những thay đổi từng phần thay vì export toàn bộ tệp .step
  • Trước đây khi làm hướng dẫn lắp ráp Shapeoko v2 CNC, tôi đã dùng SVG để khi người dùng bấm vào linh kiện thì linh kiện tương ứng trong bản vẽ sẽ được tô sáng
    Liên kết ví dụ
    Được tạo bằng Inkscape, và chạy trực tiếp trong trình duyệt
    • Cách triển khai này thật sự rất hay