- Hình ảnh SVG chuyển động giữ được độ phân giải cao trong khi kích thước tệp rất nhỏ (49KB)
- Mang lại hiệu ứng thị giác tương tự GIF truyền thống, nhưng thực tế tận dụng tính năng hoạt ảnh SVG
- Có thể dùng trực tiếp ngay cả trong tệp Github README.md
- Có thể dùng các công cụ asciinema và svg-term-cli để ghi lại phiên terminal → chuyển đổi thành hoạt ảnh SVG
- Tận dụng các phần tử hoạt ảnh của SVG (
<animate>, <animateTransform>, <animateMotion>)
Đặc điểm của SVG chuyển động
- Hình ảnh chuyển động được tạo bằng SVG trông giống GIF thông thường, nhưng thực chất sử dụng tính năng hoạt ảnh dựa trên vector của SVG
- Cách này có kích thước tệp rất nhỏ và có thể thay đổi kích thước hay phóng to/thu nhỏ mà không bị giảm chất lượng
- Một ưu điểm lớn là có thể dùng ngay ở những nơi như README.md của Github
- Ví dụ, bài viết giới thiệu một SVG con vẹt chuyển động độ phân giải cao với dung lượng 49KB
Cách tạo
- Ghi lại phiên terminal bằng asciinema
- Chuyển tệp asciinema đã ghi bằng công cụ svg-term-cli để tạo thành tệp hoạt ảnh SVG
- Tệp SVG được tạo ra có thể dễ dàng thêm vào README.md
- Tác giả đang tích cực sử dụng cách này trong nhiều dự án như bespoken
Nguyên lý hoạt động của hoạt ảnh SVG
- Trong đặc tả SVG đã có sẵn tính năng hoạt ảnh
<animate>: tạo hoạt ảnh cho từng thuộc tính theo thời gian<animateTransform>: áp dụng hoạt ảnh biến đổi như xoay, thay đổi kích thước, di chuyển<animateMotion>: di chuyển đối tượng theo một đường dẫn
- svg-term-cli hoạt động bằng cách tận dụng các tính năng hoạt ảnh tích hợp sẵn này của SVG
1 bình luận
Ý kiến trên Hacker News
Tôi đang rất ấn tượng vì chỉ với SVG thôi mà cũng có thể tạo ra rất nhiều thứ đa dạng và ấn tượng. Một vài ví dụ tìm thấy trên Wikipedia gồm có ảnh động bản sao Missile Command, bản đồ London Tube, và ảnh động rolling shutter, tất cả đều rất bắt mắt
SVG ban đầu có lịch sử là một đối thủ mở của Shockwave/Flash Player, đồng thời đóng vai trò như định dạng ứng dụng cho PDA. Cũng từng có lúc người ta thực sự cân nhắc việc bổ sung hỗ trợ mạng
Lý do bản đồ London Tube gây ấn tượng mạnh là vì nó có đánh dấu các "ga không có cầu thang" dành cho người dùng xe lăn và những người yếu thế khi di chuyển. Nhìn ví dụ tên lửa đầu tiên là tôi đã nghĩ ngay ra cách lập trình để bấm vào đầu đạn và có cảm giác như vừa cứu cả thế giới
Tôi thắc mắc vì sao liên kết Missile Command đầu tiên lại không hoạt động đúng trên Safari. Bấm nút thì được, nhưng bấm vào đầu đạn thì không phản hồi. Trên Firefox còn hiện cả con trỏ hình chữ thập, còn Safari thì có gì đó không chạy
Tính năng checkbox trong bản đồ Tube là một điểm cực kỳ hay. Tôi thấy có động lực phải luyện kỹ năng SVG thêm nữa. Đã bookmark
Chỉ nhìn tiêu đề bài viết thì tôi lại tưởng đây là một công cụ hiển thị trực quan hash của file README, nhưng tôi cũng hy vọng kiểu trực quan hóa đó có thể giúp người dùng dễ phát hiện khi TOS hoặc EULA bị thay đổi một cách âm thầm
Tôi từng làm một dự án nhúng SVG động vào README, và SVG đó cập nhật thông tin thời tiết cùng thứ trong tuần mỗi ngày một lần. Tham khảo. Thực ra đây là dự án tôi làm trong thời gian bị triệu tập làm bồi thẩm đoàn cách đây vài năm
Nếu đích đến là Github README thì cũng có thể nhúng video trực tiếp. Ví dụ là README của git-recent. Tuy vậy, nếu chỉ là quay terminal đơn giản thì cách làm SVG của OP có thể là lựa chọn thông minh hơn
Điểm hay của việc dùng video là có sẵn UI phát/tạm dừng/thanh trượt. Một số nền tảng còn thêm UI điều khiển cho GIF bằng JavaScript, nhưng việc này không được trình duyệt hỗ trợ mặc định nên vẫn có giới hạn. Vì thế tôi thường thích video hơn. Khi làm ảnh động SVG cho RevealJS thì tôi sẽ điều khiển bằng CSS/JS khi cần
Nếu thêm file video, thì chỉnh sửa README trực tiếp trên Github để tệp tải lên được lưu ở githubusercontent cũng là lựa chọn tốt hơn cho dung lượng kho lưu trữ
SVG khác video ở chỗ nó có thể phản hồi màu sắc theo thiết lập sáng/tối của người dùng. Nó cũng hỗ trợ thay đổi kích thước linh hoạt, điều mà video không làm được. Có bản demo liên quan. Tuy nhiên tính năng này cũng vẫn hoạt động tốt trên Firefox/Chrome hơn, còn Safari thì vẫn khá khó triển khai nên hơi đáng tiếc
Lâu rồi mới thấy nhắc đến Paul, làm tôi nhớ lại sự yêu thích dành cho những công việc trước đây của anh ấy với Echo Nest và API của Rdio
Theo tôi, nếu là quay terminal thì cách SVG không thực tế lắm vì thiếu khả năng điều khiển. Nó có thể ổn cho mục đích demo phần mềm bằng các chuyển động ngắn khoảng 5 giây, nhưng tùy trường hợp thì video vẫn có thể tốt hơn
Việc có thể sao chép văn bản trực tiếp từ ảnh động là điểm ngầu nhất, dù ban đầu không hẳn là điều dễ nghĩ ra
Lưu ý là có lỗi khiến một số file SVG làm treo cả trang. Vì thế nên tránh nhúng liên kết SVG từ bên thứ ba. Cả Google Chrome lẫn Firefox hiện đều không có kế hoạch sửa lỗi này. Cũng đính kèm ví dụ SVG nguy hiểm để thử nghiệm, nhưng bấm vào có thể làm trình duyệt sập
Theo tôi, việc trang hay trình duyệt bị treo không hẳn là vấn đề bảo mật mà là hiện tượng khá phổ biến khi lạm dụng nhiều hàm tích hợp sẵn. Ví dụ nếu dùng chuỗi bộ lọc blur quá dài thì quá tải render có thể làm chính Chrome bị treo. Nếu ảnh hưởng vượt ra ngoài tab thì sẽ nghiêm trọng hơn, nhưng về cơ bản tôi xem đây là vấn đề khả dụng của UI
Có người thắc mắc liệu các lỗ hổng liên quan đến SVG như tấn công XXE có thể xảy ra ngay cả trong môi trường bị giới hạn như Github README hay không. Nếu có thì không rõ họ đang chặn bằng cách nào
Việc nhận ra rằng "SVG về bản chất đã là ảnh động" mang lại cảm giác rất mới mẻ và khiến tôi nghĩ ra nhiều ý tưởng. Tôi cũng tò mò không biết nó có hỗ trợ lặp vô hạn hay không
Có thể lặp vô hạn bằng cách đặt thuộc tính repeatCount hoặc repeatDur của thẻ
<animate>thànhindefinite. Vì đây là lặp theo từng thuộc tính riêng lẻ nên mỗi thành phần trong ảnh có thể chuyển động theo chu kỳ khác nhauCó chia sẻ mã ví dụ có thể xem trong tài liệu chính thức về ảnh động SVG
Ngoài ảnh động dựa trên thuộc tính, SVG còn có thể nhúng Ecmascript(Javascript), nên nếu cần thì có thể dùng script để bổ sung hầu như bất cứ chức năng nào. Tham khảo tài liệu script của W3C
Cũng có chia sẻ mã mẫu và ví dụ ảnh động SVG. Một số ví dụ có thể xem khi tải lại trang
Tôi đang mơ về một hệ thống mà một ngày nào đó trên trình duyệt, bất kỳ engine thực thi nào như WASM, JVM, CLR... cũng có thể được cắm vào như tiêu chuẩn, và đầu ra là SVG (text/binary). Theo hướng đó, lập trình viên có thể tự do chọn mô hình thực thi và cách hiển thị, không còn bị trói vào DOM nữa
Các ứng dụng như AutoCAD Web, Photopea, Figma, Google Docs, Google Earth Web, Flutter for Web(CanvasKit) thực tế đã khá gần với hướng này rồi, khi bỏ qua DOM hoặc chọn engine render khác. Tức là thời đại chỉ bị ép dùng DOM không còn nữa
Trước đây web từng bị chi phối bởi các runtime bên thứ ba như Flash, Java, Silverlight, ActiveX, nhưng hiện tại tôi tin lợi thế nằm ở môi trường ngôn ngữ/nền tảng chung. Trong bối cảnh rủi ro bảo mật, những công nghệ bổ sung kiểu cũ cũng khó mà tồn tại tiếp
Ưu điểm của DOM (HTML) là được thiết kế để phản hồi tốt với nhiều môi trường hiển thị khác nhau. SVG thì không có cùng mức độ tự do đó
Nghe có thể rất kỳ quặc, nhưng tôi bỗng muốn làm một video trong đó sơ đồ kiến trúc SVG được tạo ảnh động, với các node có những hiệu ứng đầy kịch tính như phóng to kiểu battle animation, khựng khung hình, các đường sáng lóe lên, v.v.
Những bài viết kiểu TIL như thế này đóng góp rất lớn cho việc kích thích sáng tạo, vì chia sẻ trực tiếp trải nghiệm với công cụ mới và cả cách vượt qua hạn chế của Github Markdown. Nhìn sản phẩm SVG (ví dụ), tôi thấy cấu trúc SVG inline lồng SVG inline bên trong là điều lần đầu bắt gặp nên rất mới mẻ và đáng cảm ơn
Đây là một ý tưởng cực hay, tôi muốn thử xem nó khớp với các hiệu ứng được triển khai trong terminaltexteffects trên README đến đâu. Tôi không quá rành về SVG, nhưng cũng hiểu rằng nếu lưu cả văn bản thật thì tệp dữ liệu có thể sẽ rất lớn. Dù vậy, vẫn rất muốn thử cho vui