Cách dùng Tối ưu SVG
- Dán mã SVG hoặc mở một file
.svg. - Giữ cài đặt mặc định để tiết kiệm được nhiều dung lượng nhất, hoặc giảm độ chính xác để path nhỏ hơn nữa.
- So sánh bản xem trước gốc và bản đã tối ưu để chắc chắn không có gì bị lệch.
- Sao chép mã đã tối ưu hoặc tải về file
.svg.
Vì sao nên tối ưu file SVG?
SVG xuất từ các công cụ thiết kế thường mang theo nhiều thứ thừa: metadata của trình chỉnh sửa, comment, layer ẩn, giá trị thuộc tính mặc định, nhóm rỗng và tọa độ có sáu chữ số thập phân. Những thứ này không ảnh hưởng đến hình ảnh hiển thị, nhưng có thể khiến file lớn gấp hai đến năm lần so với cần thiết. Icon SVG nhúng trực tiếp vào HTML cũng lặp lại phần dư thừa đó trên mọi trang.
SVGO làm gì?
SVGO là bộ tối ưu SVG tiêu chuẩn được hầu hết các công cụ build sử dụng. Nó chạy một loạt plugin an toàn:
- Xóa khai báo XML, comment,
<metadata>, namespace của các phần mềm (Illustrator, Inkscape, Sketch) và các phần tử ẩn. - Gộp các nhóm không cần thiết, hợp nhất path khi có thể và chuyển hình khối sang dữ liệu path ngắn hơn.
- Làm tròn số theo độ chính xác đã chọn và viết lại lệnh path ở dạng ngắn nhất.
- Thu gọn style nội tuyến và màu sắc (
#FFFFFF→#fff), đồng thời xóa các giá trị mặc định. - Rút gọn ID và xóa những ID không được tham chiếu đến.
Công cụ này luôn giữ lại viewBox, vì đây là thuộc tính cần thiết để SVG co giãn đúng cách.
Chọn độ chính xác
| Độ chính xác | Phù hợp nhất với |
|---|---|
| 1 | Icon đơn giản được vẽ theo lưới pixel |
| 2–3 | Đa số icon, logo và minh họa (mặc định là 3) |
| 4–5 | Minh họa chi tiết, bản đồ và biểu đồ có đường cong nhỏ |
Độ chính xác thấp hơn đồng nghĩa với ít chữ số hơn và file nhỏ hơn, nhưng các đường cong có thể lệch nhẹ. Đó là lý do bạn nên xem bản xem trước.
Width, height và viewBox
Xóa width và height giúp SVG co giãn theo khung chứa bằng CSS, thường là điều bạn muốn với icon và SVG nội tuyến. Hãy giữ lại chúng khi SVG được dùng trong <img> mà không có kích thước cụ thể.
Bước tiếp theo: biến SVG đã tối ưu thành nền CSS, component React hoặc phần tử Webflow.
Cũng được tìm dưới tên: nén svg, svgo online, minify svg, giảm dung lượng svg, compress svg, rút gọn file svg.
Các công cụ dùng kèm tốt với Tối ưu SVG
- Đổi ViewBox SVG — Chuẩn hóa icon về viewBox mới (ví dụ 24×24) bằng cách scale lại chính tọa độ bên trong mọi path, circle, rect và polygon — không cần mẹo transform="scale()".
- Nén ảnh — Giảm dung lượng ảnh và đồ họa đến 90% mà gần như không thấy mất chất lượng, tùy thuộc vào ảnh và cài đặt.
- Nén & Giải nén Gzip — Nén văn bản hoặc bất kỳ tệp nào bằng gzip, zlib hoặc raw deflate, hoặc dán chuỗi Base64 / mở tệp .gz để giải nén.
- Nén & Giải nén Brotli — Nén văn bản hoặc file bằng Brotli với chất lượng từ 0 đến 11, giải nén dữ liệu .br và so sánh kết quả với gzip.