Tối ưu hóa SVG
Tối ưu và minify mã SVG, sau đó kiểm tra kết quả đã được làm sạch.
Khái niệm
Tối ưu hóa SVG để giảm dung lượng trong khi giữ kết quả hiển thị
Tối ưu hóa SVG thường được dùng trước khi phát hành tài sản inline hoặc SVG tải về, giúp giảm payload mà vẫn giữ cấu trúc hiển thị chính.
Công cụ giúp loại bỏ khai báo XML, chú thích, metadata và khoảng trắng dư thừa để giảm kích thước, nhất là với bộ sưu tập biểu tượng hoặc hình minh họa tái sử dụng.
Khi cùng một SVG được dùng lặp lại trên nhiều trang atau hệ thống thiết kế, bản đã tối ưu giúp tải nhanh hơn và giảm băng thông đáng kể.
Thời điểm áp dụng
Dùng khi icon, button SVG hoặc bộ minh họa được triển khai ở nhiều nơi và cần tăng tốc độ tải nhưng giữ nguyên hiển thị.
Những gì được dọn
Loại bỏ XML declaration, doctype, comment và metadata, rồi dọn khoảng trắng giữa các phần tử, quanh dấu bằng và khoảng trắng lặp.
Điểm kiểm tra cuối
So sánh trước–sau để chắc rằng shape, viewBox, kích thước và các thuộc tính truy cập (aria-label/role) vẫn được giữ nguyên.
Kiểm tra lại trước khi phát hành để đảm bảo không làm mất thông tin truy cập và hình ảnh hiển thị vẫn giữ nguyên.
Tối ưu hóa SVG Không gian tối ưu SVG
Cách sử dụng
- 1 Dán mã SVG hoặc kéo tệp SVG vào vùng nhập.
- 2 Nhấn tối ưu hóa để giảm mã không cần thiết.
- 3 Kiểm tra bản xem trước và dung lượng thay đổi, rồi sao chép hoặc tải SVG đã tối ưu.
Trường hợp sử dụng phổ biến
- Xóa chú thích và metadata SVG
- Nén mã SVG inline
- Xem trước và tải SVG đã tối ưu
Câu hỏi thường gặp
Làm sao nhập SVG?
Bạn có thể dán mã SVG hoặc kéo thả tệp .svg để đưa nội dung vào ô nhập, rồi chạy tối ưu hóa.
Tối ưu hóa sẽ giảm những gì?
Công cụ xóa khai báo XML, chú thích, doctype, thẻ metadata và dọn khoảng trắng để mã SVG ngắn hơn.
Có thể sao chép hoặc tải kết quả không?
Có. Bạn có thể sao chép mã SVG đã tối ưu hoặc tải xuống dưới dạng optimized.svg, đồng thời xem trước kết quả.