Cách dùng SVG sang CSS
- Dán mã SVG, mở file
.svghoặc tải mẫu có sẵn. - Bật Clean up SVG để xóa comment, metadata và thuộc tính của trình chỉnh sửa, rồi chọn URL-encoded hoặc Base64.
- Kiểm tra cả hai bản xem trước: ảnh nền thông thường và phiên bản mask một màu.
- Sao chép data URI hoặc toàn bộ quy tắc CSS rồi dán vào stylesheet của bạn.
SVG data URI là gì?
Data URI nhúng trực tiếp một file vào CSS thay vì liên kết tới nó: background-image: url("data:image/svg+xml,…"). Với icon nhỏ, đường kẻ, hoa văn và checkbox tùy chỉnh, cách này giúp tiết kiệm một HTTP request, tránh tình trạng nhấp nháy khi ảnh chưa tải kịp và giữ tài nguyên nằm cạnh các style sử dụng nó.
Mã hóa URL hay Base64?
SVG là văn bản nên không cần Base64. Base64 làm file to thêm khoảng 33% và biến nó thành một khối không đọc được, nén kém với gzip hay Brotli. SVG mã hóa URL giữ kích thước gần với bản gốc và vẫn đọc được. Chỉ một vài ký tự cần được escape:
| Ký tự | Đã mã hóa | Lý do |
|---|---|---|
# | %23 | Nếu không sẽ bắt đầu một URL fragment — các màu như #fff làm hỏng ảnh. |
% | %25 | Chính ký tự escape. |
< > | %3C %3E | Nên dùng để tương thích với các bộ phân tích nghiêm ngặt. |
" | ' hoặc %22 | Dấu nháy trong thuộc tính được đổi thành nháy đơn để CSS có thể bao URI bằng nháy kép. |
Chỉ dùng Base64 khi một công cụ hoặc framework từ chối các dạng khác. Các thẻ kích thước dưới khung xem trước hiển thị cả hai kết quả để bạn so sánh.
Icon đổi màu được với mask-image
SVG dùng làm ảnh nền được render độc lập: CSS trên trang không thể thay đổi màu fill của nó, và currentColor bên trong sẽ không theo màu chữ của bạn. Đoạn mask-image giải quyết việc này bằng cách chỉ dùng SVG như một khuôn tô và tô bằng background-color: currentColor, nên một icon có thể dùng với mọi màu, trạng thái hover hay chế độ tối. Dòng -webkit-mask vẫn cần cho một số trình duyệt.
Làm sạch và giới hạn
Làm sạch sẽ xóa khai báo XML, comment, <metadata>, <title> (vô nghĩa với ảnh nền), các thuộc tính của Inkscape/Sodipodi/Sketch và khoảng trắng thừa, đồng thời thêm xmlns bắt buộc nếu thiếu — không có nó trình duyệt sẽ không hiển thị ảnh. Chỉ nhúng SVG nhỏ (vài KB): data URI lớn làm nặng mọi lần tải CSS và không thể cache riêng. Với đồ họa phức tạp, hãy liên kết tới file. Cần component React thay vì CSS? Dùng SVG sang JSX; với ảnh raster, xem Ảnh sang Base64.
Dùng trong Webflow
Bảng Backgrounds của Webflow yêu cầu ảnh đã tải lên, nên hãy dán quy tắc được tạo vào thẻ <style> trong phần tử Embed hoặc trong custom code của trang/site, rồi gán cho phần tử class tương ứng (ví dụ icon).
Cũng được tìm dưới tên: svg data uri, chuyển svg sang data url, mã hóa url svg, svg background image, svg sang base64, mask-image, icon css từ svg.
Các công cụ dùng kèm tốt với SVG sang CSS
- Mã hóa / Giải mã URL — Mã hóa văn bản để dùng an toàn trong URL, giải mã chuỗi đã mã hóa về dạng dễ đọc và tách mọi URL thành các phần cùng tham số truy vấn.
- Mã hóa / Giải mã Base64 — Chuyển văn bản sang Base64 và ngược lại với hỗ trợ đầy đủ UTF-8 (dấu tiếng Việt, emoji), chuyển sang Base64 an toàn cho URL, hoặc thả tệp vào để lấy chuỗi Base64 hay data URI.
- Nén CSS — Dán stylesheet vào để thu nhỏ ngay lập tức.
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.
Câu hỏi thường gặp
Vì sao data URI SVG của tôi không hiển thị?
# chưa được mã hóa (trong các màu như #fff), thiếu thuộc tính xmlns="http://www.w3.org/2000/svg", hoặc dấu nháy không khớp giữa url("…") trong CSS và các thuộc tính của SVG. Công cụ này xử lý cả ba lỗi đó.Với SVG trong CSS, nên dùng mã hóa URL hay Base64?
Có thể đổi màu ảnh nền SVG bằng CSS không?
mask-image và đặt background-color, giá trị này có thể đổi khi hover hoặc ở chế độ tối.Có cần thêm charset=utf-8 vào data URI không?
data:image/svg+xml, là đủ.