Đầu vào
Đang chuẩn bị không gian làm việc…
Cách sử dụng
- Dán SVG hoặc mở tệp SVG UTF-8.
- Chọn Tối ưu SVG rồi so bản xem trước và số byte.
- Tải SVG hoặc mở rộng Kết quả để xem và sao chép markup.
Tối ưu markup vector
SVG có thể chứa metadata của trình biên tập và lệnh vẽ dài ngoài hình dạng hiển thị. Tối ưu viết lại markup để giảm byte không cần thiết.
Công cụ dùng SVGO với tọa độ chính xác ba chữ số thập phân và giữ viewBox cùng ID. Giữ nguồn để so sánh ở ngữ cảnh sử dụng cuối.
Những gì có thể thay đổi
Tối ưu có thể bỏ metadata và đơn giản hóa lệnh vẽ. Làm tròn tọa độ ba chữ số có thể đổi hình học nhẹ, nhất là hình nhỏ hoặc phóng lớn.
viewBox hỗ trợ kích thước đáp ứng; ID có thể được hình, style hoặc mã xung quanh tham chiếu. Cấu hình này giữ chúng thay vì rút ngắn hay xóa.
<svg viewBox="0 0 10 10"><metadata>demo</metadata><path d="M0 0 L10 10"/></svg><svg viewBox="0 0 10 10"><path d="m0 0 10 10"/></svg>So markup rút gọn nêu việc bỏ metadata và path gọn. Đầu ra tải xuống còn có namespace SVG.
Xem trước và nhúng
Bản xem trước tải kết quả như ảnh tách biệt, không chèn markup hoạt động vào trang. Hành vi có thể khác SVG inline trong ứng dụng.
Tối ưu không phải làm sạch. Kiểm tra SVG không đáng tin trước khi nhúng inline và thử style, tham chiếu hoặc hành vi phụ thuộc tài liệu xung quanh.
Xem và lưu đầu ra
Tải xuống lưu optimized.svg. Mở rộng Kết quả để xem nguồn và nút Sao chép; số byte nhỏ hơn không tự chứng minh hình ảnh tương đương.
PNG, JPEG và WebP tĩnh: 20 MiB, 24 megapixel và 8.192 điểm ảnh mỗi cạnh. Base64: 2 MiB. SVG: 1 MiB. Kiểm tra tệp: 1 GiB, chỉ đọc 256 byte đầu. Khả năng hỗ trợ codec tùy trình duyệt. Không có tệp nào được tải lên.
Câu hỏi thường gặp
SVG tối ưu có an toàn để nhúng inline không?
Tối ưu không làm sạch nguồn. Kiểm tra phần tử, thuộc tính, URL và style không đáng tin trước khi nhúng.
Có giữ viewBox và ID không?
Có. Markup khác có thể được viết lại, nên cần thử tham chiếu và style trong tài liệu đích.
Tối ưu có thể đổi hình ảnh không?
Làm tròn tọa độ và đổi cấu trúc có thể ảnh hưởng render. So xem trước và thử tệp ở nơi sẽ dùng.
Vì sao xem trước khác trang của tôi?
Ảnh xem trước không dùng CSS trang xung quanh hay hành vi SVG inline. Ngữ cảnh ngoài và tham chiếu cấp tài liệu có thể ảnh hưởng.
Nút Sao chép ở đâu?
Sau tối ưu, mở rộng Kết quả dưới bản xem trước. Nguồn SVG và nút Sao chép nằm ở đó; tải SVG có ở phía trên.