SVG sang HTML

Chuyển đổi SVG sang HTML trực tuyến

Chọn tệp SVG hoặc dán mã của nó để tạo SVG inline cho trang HTML. Xem trước kết quả, điều chỉnh các thiết lập tối ưu hóa rồi sao chép mã. Mọi bước phân tích, tối ưu hóa và chuyển đổi đều chạy ngay trong trình duyệt của bạn, không gửi SVG của bạn lên máy chủ.

Chuẩn bị SVG inline co giãn linh hoạt

Giữ viewBox để bảo toàn hệ tọa độ của SVG. Khi SVG có viewBox dùng được, hãy xóa chiều rộng và chiều cao cố định, rồi đặt kích thước bằng CSS của riêng bạn.

Hiểu về dung lượng SVG và mức tiết kiệm

“Dung lượng gốc” là dung lượng của SVG đầu vào. “Dung lượng SVG đã tối ưu” là dung lượng sau khi xử lý với các tùy chọn bạn đã chọn, như xóa chú thích, làm tròn tọa độ và rút gọn mã. Dung lượng được hiển thị bằng kB, trong đó 1 kB bằng 1.000 byte. “Tiết kiệm” là phần trăm dung lượng giảm được: từ 10 kB xuống 7 kB là tiết kiệm 30%. Nếu kết quả lớn hơn, chẳng hạn do định dạng cho dễ đọc, mục “Tăng dung lượng” sẽ hiện thay thế. Các số liệu này so sánh mã SVG, không phải dung lượng của các bản xuất JSX, React, CSS Data URI hay Base64.

Độ chính xác thập phân và thụt lề

Độ chính xác thập phân quy định số chữ số được giữ lại sau dấu thập phân trong tọa độ và các thuộc tính số. Với độ chính xác 2, 12.34567 thành 12.35. Ít chữ số thập phân hơn có thể giảm dung lượng tệp nhưng có thể làm thay đổi các chi tiết nhỏ; giá trị mặc định 3 chỉ là điểm khởi đầu, vì vậy hãy kiểm tra bản xem trước. Thụt lề dùng 2 dấu cách, 4 dấu cách hoặc tab để mã HTML và JSX dễ đọc hơn mà không làm thay đổi hình ảnh. “Rút gọn SVG” xóa các khoảng trắng định dạng không cần thiết để thu gọn kết quả, nên thụt lề bị tắt khi đang bật rút gọn.

HTML, JSX, React và SVG Data URI

Kết quả HTML là mã SVG inline và được tải xuống dưới dạng tệp SVG. JSX điều chỉnh tên thuộc tính và style inline cho React. Component React bọc mã này trong một hàm TypeScript nhận các prop SVG tiêu chuẩn. CSS Data URI tạo ra một khai báo background-image; Base64 tạo ra một URI ảnh SVG đã mã hóa. Số liệu dung lượng mô tả SVG đã tối ưu, không phải các định dạng mã hóa vốn lớn hơn. Hãy kiểm tra lại các ID trước khi dùng nhiều bản inline trên cùng một trang.

Xử lý SVG tĩnh, ngay trên thiết bị

Bản xem trước là một hình ảnh tách biệt chứ không phải mã trang có thể thực thi. Script, HTML nhúng, hoạt ảnh, hình ảnh bên ngoài và bảng định kiểu đều bị xóa. Các style trình bày inline được hỗ trợ và các tham chiếu fragment cục bộ được giữ lại. Công cụ này dành cho hình vẽ tĩnh; các tính năng không được hỗ trợ có thể làm thay đổi giao diện của hình. currentColor thay đổi màu tô và màu viền đơn sắc, và kế thừa màu khi được dùng inline; bản xem trước dạng ảnh dùng ngữ cảnh màu riêng của nó.