Chuyển đổi SVG sang Base64

SVG dưới dạng data URI

SVG (Scalable Vector Graphics, kiểu MIME image/svg+xml) mô tả các hình dạng bằng văn bản XML, nên luôn sắc nét ở mọi kích thước. Chuỗi Base64 của SVG thường bắt đầu bằng PHN2Zy (tức <svg đã mã hóa) hoặc PD94bWw khi tệp mở đầu bằng khai báo XML.

Khi SVG được dùng như một ảnh, phần tử gốc phải có xmlns="http://www.w3.org/2000/svg". Nhiều đoạn SVG nội tuyến sao chép từ HTML bỏ qua thuộc tính này, và khi đó data URI không hiển thị gì cả. Ở chế độ ảnh, tài nguyên bên ngoài cũng bị chặn, nên phông chữ web và ảnh liên kết bên trong SVG sẽ không tải được; hãy chuyển văn bản thành đường path hoặc nhúng các tài nguyên đó trước.

Base64 hay mã hóa URL?

Vì SVG vốn đã là văn bản, data URI có thể chứa trực tiếp mã SVG, chỉ cần mã hóa phần trăm một vài ký tự (<, >, #, % và dấu ngoặc kép). Với một biểu tượng thông thường trong CSS, cách này ngắn hơn Base64 và nén bằng gzip tốt hơn. Base64 là lựa chọn an toàn hơn khi chuỗi đi qua các hệ thống làm hỏng dấu ngoặc kép hoặc ký tự đặc biệt, hoặc khi API yêu cầu Base64.

/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");

/* Mã hóa phần trăm */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");

Để tạo dạng mã hóa phần trăm, hãy dùng công cụ Tạo Data URI và chọn Mã hóa phần trăm.

Làm sạch SVG từ nguồn không đáng tin cậy

SVG có thể chứa phần tử <script>, các thuộc tính xử lý sự kiện như onload và liên kết đến tài liệu khác. Trình duyệt không chạy script trong SVG hiển thị qua <img> hoặc nền CSS, nhưng cùng tệp đó khi được nhúng trực tiếp vào HTML hoặc mở riêng thì có thể chạy. Nếu người dùng có thể tải tệp SVG lên ứng dụng của bạn, hãy làm sạch chúng, chẳng hạn bằng DOMPurify, trước khi lưu trữ hoặc nhúng. Base64 chỉ che mã SVG khỏi cái nhìn lướt qua chứ không làm nó trở nên an toàn.