Công cụ tối ưu SVG (SVGO)
Tối ưu và rút gọn mã SVG bằng SVGO ngay trong trình duyệt. Xóa metadata của trình chỉnh sửa, chú thích và markup thừa, hiển thị dung lượng tiết kiệm kèm xem trước.
Dùng preset mặc định của SVGO, giữ lại viewBox, tiêu đề và mô tả trợ năng.
Chạy hoàn toàn trong trình duyệt. Dữ liệu của bạn không bao giờ bị tải lên.
Tối ưu SVG là gì?
Công cụ tối ưu SVG chạy SVGO, thư viện tối ưu SVG tiêu chuẩn, trên mã SVG của bạn. Nó xóa metadata của trình chỉnh sửa, chú thích, phần tử ẩn và rỗng, rút ngắn dữ liệu path, số và màu, đồng thời gộp những gì có thể gộp. Bạn nhận được mã đã tối ưu, xem trước trước/sau và mức giảm dung lượng.
Cách sử dụng Tối ưu SVG
- Dán mã SVG vào ô Mã SVG, hoặc thả/chọn file
.svg. - Chỉnh các tùy chọn: Tối ưu nhiều lượt, Độ chính xác số, Giữ ID, Thay width/height bằng viewBox, Định dạng đẹp đầu ra.
- So sánh ảnh xem trước trước/sau và nhãn dung lượng.
- Sao chép SVG đã tối ưu hoặc tải về dưới tên
name-min.svg.
Ví dụ
SVG 100×100 từ trình chỉnh sửa có khai báo XML, một chú thích, <metadata>, <defs> rỗng và một <g> lồng quanh một rect (474 byte)
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10 10h80v80H10z" style="fill:red;stroke:none"/></svg>
Khi nào nên dùng Tối ưu SVG
Dùng cho icon, logo và hình minh họa xuất từ Figma, Illustrator, Inkscape hoặc Sketch trước khi đưa lên website hay ứng dụng. Bật Giữ ID nếu CSS, JavaScript hoặc tham chiếu <use> ở nơi khác phụ thuộc vào ID phần tử. Luôn kiểm tra ảnh xem trước: SVG bất thường có script hoặc tham chiếu bên ngoài có thể cần chỉnh tay.
Tối ưu SVG hoạt động như thế nào
Công cụ tải bản build trình duyệt của SVGO 4 khi cần và áp dụng các plugin preset-default: xóa khai báo XML, doctype, chú thích, metadata và namespace của trình chỉnh sửa, làm sạch thuộc tính và giá trị số, chuyển hình dạng thành path, gộp nhóm, viết lại dữ liệu path và transform, cùng nhiều thứ khác. Preset mặc định của SVGO 4 giữ viewBox, <title> và <desc> không thuộc trình chỉnh sửa, nên khả năng co giãn và khả năng truy cập được bảo toàn. Với nhiều lượt, các plugin lặp lại cho đến khi kết quả không nhỏ hơn được nữa.
Các Trường Hợp Sử Dụng Phổ Biến
- Thu nhỏ icon xuất từ công cụ thiết kế trước khi đưa vào thư viện component.
- Làm sạch logo SVG để nhúng trực tiếp vào HTML.
- Làm SVG sprite nhỏ hơn để trang tải nhanh hơn.
- Xóa metadata của trình chỉnh sửa làm lộ đường dẫn file hoặc tên tác giả.
Lưu Ý Bảo Mật
Ảnh được giải mã, xử lý và mã hóa cục bộ trong trình duyệt bằng Canvas API. Không có gì được tải lên máy chủ.
Câu Hỏi Thường Gặp
Tối ưu bằng SVGO có mất dữ liệu không?
Với preset mặc định, nó gần như luôn không mất gì về mặt hình ảnh. Giảm độ chính xác số quá nhiều (0–1 chữ số thập phân) có thể làm lệch hình nhỏ, nên hãy so sánh ảnh xem trước.
Vì sao CSS của tôi không còn hoạt động sau khi tối ưu?
SVGO rút ngắn hoặc xóa các ID không dùng. Hãy bật Giữ ID nếu style hoặc script của bạn nhắm tới chúng.
Công cụ có xóa viewBox không?
Không. Preset mặc định của SVGO 4 giữ viewBox. Tùy chọn Thay width/height bằng viewBox sẽ xóa kích thước cố định, giúp SVG co giãn theo khung.