Mã hóa mã SVG thành data URI dạng URL-encoded hoặc base64, kèm các dòng CSS background-image và <img> sẵn để dán. Rút gọn tùy chọn.
— kết quả hiển thị ở đây —
— kết quả hiển thị ở đây —
— kết quả hiển thị ở đây —
Về công cụ này
Dán mã SVG thô và nhận một data URI mà bạn có thể thả thẳng vào CSS hoặc HTML. Nó tạo ra hai kiểu mã hóa và mọi thứ được tạo trong trình duyệt của bạn, nên không có gì được tải lên.
Đầu ra URL-encoded đổi dấu ngoặc kép thành dấu ngoặc đơn, chạy encodeURIComponent, rồi khôi phục một vài ký tự an toàn (khoảng trắng, dấu hai chấm, dấu gạch chéo, dấu bằng) để giữ nó gọn và dễ đọc cho con người. Đầu ra base64 mã hóa SVG theo UTF-8 và chạy qua btoa, cho ra data:image/svg+xml;base64,… . Một so sánh theo byte cho biết kiểu mã hóa nào nhỏ hơn; với hầu hết biểu tượng, dạng URL-encoded thắng.
Bật rút gọn để loại bỏ chú thích và thu gọn khoảng trắng giữa các thẻ trước khi mã hóa. Sao chép dòng background-image cho CSS hoặc dòng <img src> cho HTML. Lưu ý rằng dấu ngoặc kép bên trong SVG được chuẩn hóa thành dấu ngoặc đơn để data URI có thể được bọc trong dấu ngoặc kép một cách an toàn.
Câu hỏi thường gặp
URL-encoded hay base64 — tôi nên dùng cái nào?
URL-encoded thường nhỏ hơn và vẫn dễ đọc, điều này giúp gỡ lỗi. Base64 mờ đục hơn nhưng được chấp nhận phổ quát; phần so sánh kích thước cho bạn biết cái nào nhỏ hơn ở đây.
Tại sao dấu ngoặc kép của tôi bị đổi thành dấu ngoặc đơn?
Dấu ngoặc thuộc tính được chuyển thành dấu ngoặc đơn để toàn bộ data URI có thể nằm trong url("…") hoặc src="…" có ngoặc kép mà không cần thoát ký tự. Cả hai đều hợp lệ trong SVG.
Rút gọn có làm đổi cách SVG hiển thị không?
Không. Nó chỉ loại bỏ chú thích và thu gọn khoảng trắng giữa và bên trong các thẻ; hình vector hiển thị y hệt, chỉ nhỏ hơn.
SVG của tôi có được tải lên đâu không?
Không. Việc mã hóa chạy hoàn toàn trong trình duyệt của bạn với encodeURIComponent và btoa; mã nguồn không bao giờ rời khỏi thiết bị của bạn.