SVG sang Data URI CSS
Biến mã SVG thành một URI data: để dán thẳng vào CSS, HTML hoặc JSX. Trình duyệt vẽ icon mà không cần thêm request nào — rất hợp với icon nhỏ, hoa văn nền, ô carô, mũi tên của <select> và những thứ bạn không muốn phải ship thành file riêng.
Mọi thứ chạy ngay trên máy bạn; không có gì được tải lên.
Các bước
- Dán mã SVG vào ô bên trái, hoặc bấm Tải file để mở một file
.svg. - Chọn Kiểu mã hóa (xem bên dưới —
Tối ưulà lựa chọn mặc định hợp lý). - Chọn dạng muốn lấy ở Xuất dạng: URI thuần, khai báo
background-image, biến CSS, hoặc thẻ<img>. - Bấm Sao chép.
- Xem dải Xem trước: ô thứ ba được tô bằng chính
url()vừa tạo. Nếu nó hiện ra thì URI hợp lệ.
Các kiểu mã hóa
Tối ưu (mặc định)
Chỉ percent-encode đúng những ký tự làm hỏng url() trong CSS — %, #, <, >, [, ], \, ^, `, {, |, } — và đổi nháy kép bên trong SVG thành nháy đơn.
Kết quả vẫn đọc được, diff sạch, và thường nhỏ hơn base64 khoảng 30–40%, vì base64 luôn làm phình dữ liệu thêm chừng một phần ba.
url("data:image/svg+xml,…"). Bọc bằng nháy đơn sẽ làm chuỗi bị đứt giữa chừng.
Base64
Dạng kinh điển data:image/svg+xml;base64,…. To hơn và không đọc được, nhưng miễn nhiễm với chuyện nháy và chỗ nào cũng nhận. Dùng khi công cụ build hay CMS cứ làm hỏng dạng đọc được.
encodeURIComponent
Escape đúng những gì encodeURIComponent escape. An toàn nhất trong ba kiểu và cũng là dạng to nhất trong nhóm không base64 — phương án dự phòng hợp lý khi dạng tối ưu gặp một trình phân tích khó tính.
Rút gọn
Xóa comment, gộp khoảng trắng giữa các thẻ và ép các chuỗi khoảng trắng trước khi mã hóa. Cứ để bật, trừ khi bạn đang cần soi chính mã SVG đó.
Dán kết quả vào đâu
/* Xuất dạng: CSS */
.icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…");
background-size: contain;
}
/* Xuất dạng: Biến CSS */
:root {
--icon: url("data:image/svg+xml,…");
}
.button::after { content: ""; background-image: var(--icon); }<!-- Xuất dạng: HTML -->
<img src="data:image/svg+xml,…" alt="" />Câu hỏi thường gặp
File của tôi có bị tải lên đâu không?
Không. Toàn bộ việc chuyển đổi chỉ là xử lý chuỗi ngay trong trình duyệt.
Sao data URI lại to hơn file SVG gốc?
Mã hóa luôn thêm ký tự. Base64 thêm khoảng 33%; dạng tối ưu thường chỉ chênh vài phần trăm so với bản gốc. Thẻ kích thước cạnh kết quả cho biết tỉ lệ chính xác.
Khi nào thì không nên nhúng SVG?
Khi cùng một icon xuất hiện ở nhiều trang — file thật được cache một lần, còn data URI bị tải lại trong từng file CSS hay từng trang HTML lặp nó. Kinh nghiệm: dưới ~5 KB thì nhúng, trên mức đó nên cân nhắc.
Icon không hiện trong CSS thì lỗi ở đâu?
Ba nguyên nhân hay gặp: url() bọc bằng nháy đơn trong khi URI có chứa nháy đơn (hãy dùng nháy kép); SVG thiếu thuộc tính xmlns (công cụ đã tự thêm, nên kiểm tra xem bạn đã copy đủ output chưa); hoặc SVG không có kích thước nội tại — hãy thêm viewBox và đặt background-size.
Dùng được cho <img> và mask-image không?
Được. Cùng một URI dùng được cho src, background-image, mask-image, border-image và content.
Có dùng được với SVG chứa ảnh raster nhúng bên trong không?
Được, nhưng ảnh bitmap base64 sẽ bị kéo theo và URI phình rất to. Hãy chạy những file như vậy qua Tối Ưu SVG trước.