File SVG quá lớn? 8 mẹo nén và tối ưu

File SVG nặng vài trăm KB thậm chí vài MB thường là do quá nhiều điểm neo, đường thừa, metadata của trình chỉnh sửa và độ chính xác số thập phân quá cao. Tám kỹ thuật dưới đây được sắp xếp theo trình tự "từ nguồn đến bàn giao" và đều có thể áp dụng ngay.

1. Ở mức đường: bớt điểm neo, gộp đường

Mẹo 1: Giảm điểm neo (đơn giản hóa đường)

Đường có càng nhiều điểm neo thì file càng lớn và vẽ càng chậm. Khi chuyển hãy tăng độ mượt một chút để bớt điểm neo ngay từ nguồn; với file SVG sẵn có, dùng "Object → Path → Simplify" của Illustrator hoặc "Path → Simplify" (Ctrl+L) của Inkscape để cắt bỏ điểm neo thừa. Chỉnh độ mượt và số màu trong công cụ chuyển đổi của PolySVG cũng cho bạn cân bằng giữa chất lượng và dung lượng theo thời gian thực.

Mẹo 2: Gộp đường và lớp

Gộp nhiều đường cùng màu tô thành một đường để bỏ các thuộc tính lặp lại, làm phẳng các nhóm lồng nhau vô nghĩa, xóa lớp ẩn và phần tử rỗng. Trong phần mềm thiết kế, dùng thao tác unite của pathfinder hoặc gộp lớp trước khi xuất.

2. Bên trong file: bỏ metadata, giảm độ chính xác

Mẹo 3: Xóa metadata của trình chỉnh sửa

SVG xuất từ Illustrator hay Inkscape thường mang theo namespace của trình chỉnh sửa, <metadata>, chú thích và thiết lập xuất, tất cả đều không ảnh hưởng tới việc hiển thị nên có thể xóa thủ công hoặc để SVGO dọn tự động. Lưu ý giữ lại <title> và <desc>, chúng hữu ích cho khả năng tiếp cận.

Mẹo 4: Giảm độ chính xác số thập phân

Toạ độ đường thường có sáu đến tám chữ số thập phân, trong khi màn hình chỉ cần một đến hai. Đặt floatPrecision trong cấu hình SVGO xuống 1-2 thì dung lượng giảm rõ rệt mà không thấy khác biệt. Với biểu tượng cực nhỏ, cẩn thận đừng nén toạ độ quá mạnh kẻo hình bị biến dạng.

3. Tự động hóa: nén một lệnh với SVGO

Mẹo 5: Tối ưu tự động bằng SVGO

SVGO là công cụ tối ưu SVG được xem như chuẩn mực, tích hợp hàng chục plugin: bỏ chú thích và metadata, gộp đường, tối ưu lệnh đường, làm gọn số liệu. Cách dùng cơ bản:

npx svgo input.svg -o output.svg

File thông thường nhỏ đi 30%-70%. Có hai lưu ý: đừng xóa thuộc tính viewBox nếu không muốn phá vỡ khả năng co giãn; và với biểu tượng cần đổi màu bằng CSS, hãy giữ fill kế thừa thay vì ghi cứng màu.

Hãy so sánh dung lượng file và dung lượng truyền thực tế trong công cụ phát triển của trình duyệt trước và sau khi tối ưu để xác nhận hiệu quả. Mỗi lần chỉ đổi một nhóm tham số, như vậy khi kết quả bất thường sẽ dễ tìm ra bước gây vấn đề.

4. Cấu trúc và tái sử dụng: symbol, kiểm soát lớp màu

Mẹo 6: Dùng defs và use để tái sử dụng hình lặp

Khi cùng một biểu tượng xuất hiện nhiều lần trên trang, hãy định nghĩa một lần bằng <defs> và tham chiếu nhiều lần bằng <use>, hoặc gộp thành một sprite sheet SVG, khi đó cả dung lượng lẫn số request đều giảm.

Mẹo 7: Kiểm soát lớp màu, tránh nhúng bitmap

Khi vector hóa hãy giảm số màu để bớt lớp màu, và khi nào được thì dùng màu đơn thay vì gradient phức tạp. Đặc biệt tránh nhúng bitmap base64 bên trong SVG — làm vậy thì file vector chỉ còn là vật chứa bitmap và dung lượng sẽ mất kiểm soát. Các đường thừa còn sót sau khi chuyển có thể bấm xóa trong trình chỉnh sửa trực tuyến.

5. Bàn giao: nén khi truyền và bộ nhớ đệm

Mẹo 8: Bật gzip/Brotli và cache

SVG là văn bản nên khi bật gzip hoặc Brotli trên máy chủ, dung lượng truyền thường giảm thêm 60%-80%; hãy đặt cache header dài hạn cho file SVG tĩnh. Biểu tượng rất nhỏ có thể nhúng thẳng vào HTML, tiết kiệm hoàn toàn một request. Nguyên lý đằng sau được giải thích ở ưu điểm của SVG; còn muốn kiểm soát dung lượng ngay từ bước chuyển đổi, hãy đọc các cách chuyển ảnh sang SVG.

Thứ tự rất quan trọng: kiểm soát điểm neo và lớp màu ngay từ nguồn, dọn metadata và độ chính xác bên trong file, rồi mới chạy SVGO, cuối cùng mới bật nén khi truyền. Khi cả bốn lớp này chồng lên nhau, dung lượng SVG thường nhỏ đi một bậc độ lớn.