ZeroPingKit

SVG to CSS Background

Nhúng trực tiếp mã SVG vào CSS dưới dạng Data URI an toàn và tối ưu.

Tiết kiệm thời gian với Chuyển JSON sang CSV

Hãy thử JSON to CSV Converter để làm phẳng dữ liệu JSON thành bảng Excel cực nhanh và bảo mật.

Thử ngay
Đang tải công cụ...

Tiết kiệm thời gian với Chuyển Markdown sang HTML

Hãy thử Markdown to HTML Converter để xem trước thời gian thực và tạo mã nguồn HTML an toàn.

Thử ngay

Giới thiệu về SVG to CSS Background

Trình chuyển đổi SVG to CSS Background giúp bạn nhúng trực tiếp hình ảnh vector vào tệp CSS dưới dạng Data URI. Việc này giúp giảm số lượng HTTP request, tăng tốc độ tải trang và dễ dàng quản lý theme. Toàn bộ quá trình mã hóa (URL-encoding) diễn ra 100% tại trình duyệt (Client-side), đảm bảo an toàn tuyệt đối cho dữ liệu của bạn.

Hướng dẫn sử dụng

1
Dán đoạn mã SVG thô (sao chép từ Figma, Illustrator hoặc file mã nguồn) vào khung nhập liệu.
2
Công cụ sẽ tự động dọn dẹp mã, loại bỏ khoảng trắng thừa và URL-encode đoạn mã SVG của bạn.
3
Sao chép chuỗi background-image đã được tạo và dán trực tiếp vào tệp CSS hoặc class Tailwind của bạn.

Tính năng nổi bật

  • Tối ưu hóa URL-Encoding: Sử dụng URL-encoding thay vì Base64 giúp mã CSS dễ đọc hơn và nén (gzip) tốt hơn, giảm đáng kể dung lượng tệp.
  • Dọn dẹp mã tự động (Auto Cleanup): Tự động xử lý các ký tự đặc biệt và dấu ngoặc kép để đảm bảo tương thích 100% với cú pháp CSS.
  • Xem trước trực quan (Real-time Preview): Kiểm tra ngay lập tức hình ảnh vector hiển thị thực tế trên nền caro trước khi chép mã vào dự án.

Câu hỏi thường gặp

Tại sao nên dùng URL-encoded thay vì Base64 cho SVG?

Không giống như ảnh raster (PNG/JPG), SVG là dạng văn bản thuần túy. URL-encoding giữ nguyên định dạng văn bản này nhưng làm cho nó an toàn để đặt trong CSS, giúp file nhẹ hơn và thuật toán gzip nén tốt hơn nhiều so với mã Base64.

Kích thước file SVG tối đa nên dùng để nhúng CSS là bao nhiêu?

Kỹ thuật này phát huy hiệu quả tốt nhất cho các icon, pattern hoặc hình minh họa nhỏ (khuyến nghị dưới 10KB). Đối với các file SVG quá lớn, việc nhúng trực tiếp sẽ làm file CSS bị phình to, làm chậm quá trình Render-blocking của trình duyệt.

Tôi có thể đổi màu SVG sau khi đã nhúng vào CSS không?

Khi đã nhúng dưới dạng background-image, bạn không thể dùng các thuộc tính CSS thông thường (như fill hay color) để đổi màu SVG được nữa. Bạn bắt buộc phải đổi mã màu trực tiếp trong đoạn mã SVG thô trước khi đưa vào công cụ chuyển đổi.