Nâng cấp công cụ Markdown-SVG: Giải pháp hiển thị tài liệu trực quan

Ngày 16 tháng 8 năm 2026

Tôi bắt đầu xây dựng công cụ markdown-svg-renderer của mình từ tháng 5, nhưng kể từ đó tôi đã bổ sung thêm đủ tính năng để thấy rằng việc nhắc lại nó ở đây là hoàn toàn xứng đáng.

Nó đã phát triển thành công cụ lý tưởng của tôi để chia sẻ các bản ghi Markdown có chứa tài liệu SVG. Với sở thích vẽ những chú bồ nông đi xe đạp, đây là vấn đề mà tôi cần phải giải quyết!

Công cụ này rất đơn giản. Hãy truy cập markdown-svg-renderer trên trình duyệt của bạn và dán một đoạn Markdown vào để xem kết quả hiển thị... hoặc lưu đoạn Markdown đó vào một URL hỗ trợ CORS hoặc GitHub Gist rồi dán URL của tài liệu đó vào.

Tùy chọn URL sẽ cung cấp cho bạn một trang có thể đánh dấu (bookmark), ví dụ như https://tools.simonwillison.net/markdown-svg-renderer#url=https%3A%2F%2Fgist.github.com%2Fsimonw%2F6f9e48293be5c916652d29f0dc0b0657 - đường dẫn này đã được tích hợp sẵn URL của Gist đó.

Nếu bạn truy cập vào Gist, bạn sẽ thấy mã SVG thô:

Trong công cụ đã hiển thị, kết quả sẽ trông như thế này:

Như bạn có thể thấy, khối SVG trong Markdown đã được chuyển đổi thành một SVG hiển thị (trong trường hợp này là ảnh động) cùng với một vài tab.

Các tab chính là phần thú vị nhất. Các tab PNG và JPEG sẽ kết xuất SVG đó sang các định dạng hình ảnh tương ứng ngay trên trình duyệt, cho phép bạn sao chép hoặc tải chúng về - rất hữu ích khi chia sẻ trên các nền tảng không hỗ trợ trực tiếp SVG.

Tab MP4 là tính năng mới ra mắt hôm nay - nó kiểm tra SVG để xem liệu có chứa hoạt ảnh nào không, cố gắng đoán thời lượng video lặp lại, sau đó kết xuất hàng loạt khung hình của hoạt ảnh và tải hơn 30MB ffmpeg.wasm để có thể biên dịch các khung hình đó thành video MP4, tận dụng toàn bộ sức mạnh của FFMPEG được biên dịch sang WebAssembly và chạy ngay trên trình duyệt.

Việc có thể chuyển đổi một SVG động thành MP4 giúp việc chia sẻ trên các nền tảng không hỗ trợ hoạt ảnh SVG gốc trở nên dễ dàng hơn. Đó là một thủ thuật rất hay!