Chuyển SVG sang nền CSS – Mã data URI CSS
Dán hoặc thả SVG để tạo background-image CSS dùng ngay với data URI. Mã hóa URL là tùy chọn ưu tiên cho kết quả gọn, dễ đọc, và Base64 cũng khả dụng. Chọn kiểu dấu ngoặc kép, áp dụng rút gọn SVG nhẹ, đặt background-size, background-repeat và background-position, rồi xem bản xem trước trực tiếp.
Công cụ chuyển đổi SVG sang nền CSS biến markup SVG thành khai báo background-image CSS dùng ngay chứa data URI. Dán hoặc thả SVG để tạo kết quả, rồi dùng bản xem trước trực tiếp để xem lại. Việc này hữu ích khi bạn muốn dùng SVG làm nền CSS thay vì tham chiếu nó như file ảnh riêng.
Công cụ cung cấp mã hóa URL và Base64 cho data URI. Mã hóa URL được ưu tiên cho kết quả gọn, dễ đọc, còn Base64 là lựa chọn thay thế. Bạn cũng có thể chọn kiểu dấu ngoặc kép, áp dụng rút gọn SVG nhẹ và đặt background-size, background-repeat, background-position. Các tùy chọn này giúp định hình CSS tạo ra và bản xem trước mà không thay đổi mục đích cơ bản của phép chuyển đổi.
SVG là định dạng ảnh vector dựa trên markup, còn CSS dùng để mô tả quy tắc trình bày cho trang web. Data URI biểu diễn nội dung trong một URI, cho phép nội dung SVG xuất hiện trong giá trị background-image CSS. Chuyển đổi giữa các dạng biểu diễn này hữu ích khi bạn muốn đặt SVG vào stylesheet làm nền và cấu hình hiển thị bằng thuộc tính background CSS.
Công cụ chuyển đổi chạy hoàn toàn trong trình duyệt của bạn: đầu vào được xử lý trên thiết bị và không gửi đến máy chủ. Công cụ cũng hoạt động ngoại tuyến sau khi trang đã tải, vì vậy bạn có thể chuyển đổi SVG mà không cần kết nối mạng. Nhà phát triển và kỹ sư DevOps có thể dùng nó để chuyển đổi nhanh tại bàn làm việc hoặc khi làm trên máy khác, mà không cần cài gì cục bộ.
Bước 1: Dán hoặc thả SVG vào ô nhập liệu. Công cụ dùng nội dung đó để tạo data URI background-image CSS.
Bước 2: Chọn mã hóa URL hoặc Base64 cho data URI. Mã hóa URL được ưu tiên cho kết quả gọn, dễ đọc.
Bước 3: Điều chỉnh tùy chọn có sẵn, gồm kiểu dấu ngoặc kép và rút gọn SVG nhẹ. Đặt background-size, background-repeat và background-position khi cần.
Bước 4: Xem bản xem trước trực tiếp để kiểm tra kết quả, rồi sao chép CSS đã tạo cho dự án.
Trường hợp sử dụng: Chuyển đổi SVG thành background-image CSS cho stylesheet mà không cần cài công cụ cục bộ.
Trường hợp sử dụng: Chuẩn bị đồ họa nền khi làm việc trên máy không có thiết lập phát triển quen thuộc.
Trường hợp sử dụng: Chuyển đổi SVG nội bộ mà không dán nội dung vào dịch vụ bên thứ ba.
Trường hợp sử dụng: So sánh data URI mã hóa URL và Base64 khi chọn cách biểu diễn SVG trong CSS.
Trường hợp sử dụng: Điều chỉnh background-size, background-repeat và background-position, rồi dùng bản xem trước trực tiếp để kiểm tra kết quả.
Trường hợp sử dụng: Áp dụng rút gọn SVG nhẹ khi chuẩn bị nền SVG cho quy tắc CSS.