SVG → Base64
Biến SVG thành data URI để dán thẳng vào HTML hoặc CSS — Base64 và dạng URL-encoded thường nhẹ hơn, đặt cạnh nhau.
hoặc nhấp để chọn — chỉ nhận SVG
Dùng được ở bất cứ đâu URL dùng được. Luôn lớn hơn tệp gốc khoảng một phần ba.
Cùng một ảnh, thường nhẹ hơn Base64 — và vẫn đọc được, rất tiện khi gỡ lỗi CSS.
bớt một lượt yêu cầu
Data URI đặt hình ảnh ngay trong HTML hoặc CSS, nên trình duyệt không bao giờ phải gửi thêm một yêu cầu nữa để lấy nó. Với các biểu tượng nhỏ, đó là khác biệt giữa hiện ra tức thì và hiện ra chậm một nhịp.
Đổi lại là chuyện bộ nhớ đệm: biểu tượng đã nhúng sẽ được tải lại cùng mọi trang chứa nó và không thể lưu đệm riêng. Hãy nhúng vài biểu tượng thật sự quan trọng cho lần vẽ đầu tiên, còn lại cứ để dạng tệp.
ba bước
Chọn một tệp .svg — nó vẫn nằm trên thiết bị của bạn.
Sao chép data URI Base64 hoặc URL-encoded.
Dùng thẻ img hoặc quy tắc nền CSS đã dựng sẵn.
giải đáp nhanh
Với SVG, URL-encoded thường nhẹ hơn, vì SVG vốn là văn bản còn Base64 làm phình thêm khoảng 33% cho bất cứ thứ gì nó chạm tới. URL-encoded lại đọc được, nên bạn nhận ra ngay hình mình muốn ngay trong tệp kiểu. Hãy dùng Base64 khi có khâu nào đó trong quy trình làm hỏng ký tự thô.
Base64 mã hóa ba byte thành bốn ký tự, nên một phần ba phần phình ra là không thể tránh. Hãy cho tệp qua bộ tối ưu SVG trước — siêu dữ liệu của phần mềm thiết kế và tọa độ quá nhiều chữ số thường chiếm nhiều hơn cả phần mã hóa.
Được — khối CSS đã sẵn sàng để dán. Nó dùng dạng URL-encoded bên trong dấu nháy kép, và đó là lý do bộ mã hóa đổi dấu nháy kép trong chính SVG thành nháy đơn.
Gần như luôn là do một dấu `#` chưa được mã hóa. Một mã màu như `#fff` sẽ cắt URL ngay tại đó, và mọi thứ phía sau bị coi là phần định danh trong trang. Kết quả ở đây đã thoát ký tự sẵn — vấn đề thường phát sinh khi data URI bị sửa tay về sau.
Không. Việc mã hóa chỉ là xử lý chuỗi ký tự thuần túy diễn ra trong trình duyệt của bạn.