SVG Encoder
Mã hóa SVG thành Data URI để sử dụng trực tiếp trong CSS — nhanh, gọn và dễ kiểm tra. Dán SVG, xem trước kết quả và sao chép đoạn mã chỉ với một lần nhấn.
Công cụ chuyển mã SVG thành chuỗi data:image/svg+xml để nhúng vào thuộc tính CSS như background-image. Bạn cũng có thể dán Data URI đã mã hóa để giải mã, chỉnh sửa SVG và xem hình ảnh trước khi sử dụng.
SVG Encoder hoạt động như thế nào?
SVG (Scalable Vector Graphics) là định dạng đồ họa vector dựa trên XML. Thay vì lưu thành một tệp ảnh riêng, bạn có thể mã hóa nội dung SVG thành Data URI rồi nhúng trực tiếp vào CSS. Cách này hữu ích với icon nhỏ, họa tiết nền và các hình minh họa đơn giản.
Encode SVG
Chuyển markup SVG thành chuỗi URI có thể nhúng trong CSS.
Decode Data URI
Đưa chuỗi đã mã hóa trở lại SVG để kiểm tra hoặc chỉnh sửa.
Live preview
Kiểm tra hình ảnh và độ tương phản trên nhiều màu nền.
Cách sử dụng
- Dán toàn bộ mã SVG vào ô SVG đầu vào, bao gồm thẻ mở
<svg>và thẻ đóng</svg>. - Công cụ tự tạo Data URI và đoạn CSS tương ứng. Bạn cũng có thể nhấn Mã hóa SVG để chạy lại thủ công.
- Kiểm tra hình trong khu vực xem trước. Đổi màu nền để kiểm tra icon sáng, tối hoặc trong suốt.
- Nhấn Copy URI hoặc Copy CSS để sao chép nội dung cần dùng.
- Muốn giải mã, hãy dán Data URI vào ô URI hoặc ô đầu vào rồi nhấn Giải mã.
Ví dụ CSS sau khi mã hóa
Đoạn CSS có thể được sử dụng trực tiếp trong stylesheet. Data URI dài được đặt trong dấu nháy để tránh các ký tự đặc biệt làm hỏng cú pháp.
.icon {
width: 48px;
height: 48px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg..."); /* Vị trí được đặt tại đây */
}
<pre><code class="language-css"> để thư viện hiện tại có thể tô màu cú pháp. Hãy bảo đảm bộ highlight đang quét các khối mã được thêm vào bài viết.Lợi ích của SVG Data URI
- Giảm số lượng tệp ảnh riêng lẻ cần tải cho các icon nhỏ.
- Dễ nhúng vào
background-image, mask hoặc các thuộc tính CSS phù hợp. - Giữ đồ họa vector sắc nét khi hiển thị ở nhiều kích thước.
- Quy trình xử lý trong công cụ này diễn ra cục bộ trên trình duyệt; nội dung SVG không được gửi lên máy chủ bởi đoạn JavaScript này.
Lưu ý khi mã hóa SVG
- Data URI không phải lúc nào cũng nhỏ hơn tệp SVG gốc. Với hình lớn hoặc SVG dùng lại ở nhiều nơi, tệp riêng có thể phù hợp hơn.
- SVG có thể chứa script, liên kết hoặc nội dung bên ngoài. Chỉ dùng SVG từ nguồn đáng tin cậy; bản xem trước được chèn dưới dạng SVG đã phân tích trong trình duyệt.
- Việc thu gọn khoảng trắng ở đây chỉ là bước tối giản cơ bản, không thay thế công cụ tối ưu SVG chuyên dụng.
- Nếu CSP của website hạn chế
data:, hãy kiểm tra chính sáchimg-srchoặcdefault-srctrước khi sử dụng.
Câu hỏi thường gặp
SVG Encoder có tải dữ liệu của tôi lên máy chủ không?
Không. Đoạn mã của công cụ xử lý nội dung ngay trong trình duyệt và không thực hiện yêu cầu mạng để mã hóa.
Tại sao SVG đã mã hóa không hiển thị?
Hãy kiểm tra SVG đầu vào có hợp lệ không, có thẻ <svg> ở gốc không, và trang web có cho phép Data URI trong CSS theo Content Security Policy hay không.
Tôi có thể dùng kết quả trong HTML không?
Có. Data URI có thể dùng trong CSS hoặc trong thuộc tính phù hợp của HTML. Khi nhúng trực tiếp vào HTML, cần tuân theo quy tắc trích dẫn và escape của ngữ cảnh đó.
Công cụ có thay thế SVGO không?
Không. Công cụ tập trung vào mã hóa, giải mã, xem trước và tạo CSS. Để tối ưu sâu như loại bỏ metadata hoặc rút gọn path, hãy dùng trình tối ưu SVG chuyên dụng.