Chuyển đổi SVG sang Data URI, dùng cho CSS background-image, hỗ trợ tùy chọn mã hóa URL và Base64
Chuyển đổi định dạng
Về công cụ này
Bộ chuyển đổi SVG sang Data URI là công cụ trực tuyến có thể chuyển đổi mã SVG sang chuỗi Data URI, dùng để nhúng trong CSS và HTML. Nó hỗ trợ đầu ra mã hóa URL và Base64, tối ưu SVG tùy chọn, và tạo mã CSS sẵn sàng sử dụng — tất cả xử lý hoàn thành cục bộ trong trình duyệt.
Tính năng chính
- Chuyển đổi SVG sang Data URI mã hóa URL
- Chuyển đổi SVG sang Data URI mã hóa Base64
- Tối ưu SVG trước khi chuyển đổi
- Định dạng đầu ra CSS background-image
- Đầu ra HTML img src và Data URI thô
- Chuyển đổi thời gian thực với xem trước trực tiếp
Tình huống sử dụng
- Nhúng trực tiếp biểu tượng SVG trong stylesheet CSS
- Nhúng inline hình ảnh SVG trong HTML để cải thiện hiệu suất
- Giảm yêu cầu HTTP bằng cách nhúng SVG dưới dạng Data URI
- Tạo tài liệu HTML di động chứa hình ảnh nhúng
- Tạo đoạn mã CSS cho nền SVG
svg
data-uri
base64
embed
inline
Câu hỏi thường gặp
Bộ chuyển đổi SVG sang Data URI là gì?
Bộ chuyển đổi SVG sang Data URI là công cụ chuyển đổi định dạng trực tuyến, có thể chuyển đổi mã SVG sang chuỗi Data URI, dùng để nhúng trong CSS và HTML. Nó hỗ trợ mã hóa URL và Base64, và cung cấp tối ưu SVG cùng tạo mã CSS sẵn sàng sử dụng.
Sự khác biệt giữa URL encoding và Base64 là gì?
Data URI mã hóa URL sử dụng mã hóa phần trăm để biểu diễn ký tự đặc biệt, đầu ra lớn hơn nhưng dễ đọc hơn. Mã hóa Base64 tạo biểu diễn nhị phân sang văn bản gọn nhẹ, đối với SVG phức tạp có kích thước nhỏ hơn nhưng không thể đọc được.
Công cụ có tối ưu SVG trước khi chuyển đổi không?
Có, khi bật tùy chọn tối ưu SVG, công cụ sẽ loại bỏ khoảng trắng, chú thích và thuộc tính rỗng không cần thiết trong SVG trước khi tạo Data URI, từ đó giảm kích thước đầu ra.
Dữ liệu SVG của tôi có bị gửi đến máy chủ không?
Không. Tất cả chuyển đổi SVG sang Data URI hoàn toàn diễn ra trong trình duyệt của bạn. Mã SVG của bạn không được tải lên hoặc truyền đến bất kỳ máy chủ nào, đảm bảo công việc của bạn hoàn toàn riêng tư và an toàn.
Tôi có thể sử dụng trực tiếp đầu ra cho CSS không?
Có. Công cụ tạo đoạn mã CSS background-image sẵn sàng sử dụng. Chỉ cần sao chép đầu ra CSS và dán vào stylesheet, Data URI sẽ hoạt động như một URL hình nền hợp lệ.