Nén file SVG

SVG (Scalable Vector Graphics) không được tạo thành từ điểm ảnh — đó là một file văn bản viết bằng XML, mô tả hình khối, đường nét và màu sắc dưới dạng các phép toán học. Đó là lý do vì sao một logo SVG luôn sắc nét hoàn hảo ở bất kỳ kích thước nào, từ một favicon nhỏ xíu cho tới một tấm biển quảng cáo khổng lồ, và cũng là lý do nó là lựa chọn hàng đầu cho biểu tượng, logo và minh họa trên web. Vì bản chất là mã chứ không phải lưới điểm ảnh, nén một file SVG nghĩa là dọn dẹp đoạn mã đó chứ không phải loại bỏ chi tiết hình ảnh — nên mức tiết kiệm gần như hoàn toàn không đánh đổi chất lượng.

Các công cụ thiết kế như Illustrator, Figma và Sketch xuất ra file SVG về mặt kỹ thuật là đúng nhưng lại đầy rẫy những phần thừa. Phần thừa đó cộng dồn rất nhanh, đặc biệt khi bạn nhúng hàng chục biểu tượng vào một trang:

• Metadata của trình chỉnh sửa, chú thích và namespace mà trình duyệt bỏ qua
• Độ chính xác thập phân dư thừa trên tọa độ (mười chữ số trong khi hai là đủ)
• Các lớp ẩn, nhóm rỗng và định nghĩa không được sử dụng
• Thuộc tính dư thừa và kiểu inline có thể được đơn giản hóa
• Khoảng trắng và thụt lề dành cho con người đọc, không phải cho trình duyệt

MiCompress rút gọn file SVG của bạn theo cách mà một công cụ build vẫn làm: loại bỏ phần thừa và chú thích của trình chỉnh sửa, làm tròn tọa độ về độ chính xác hợp lý, gộp các thuộc tính dư thừa, xóa các phần tử ẩn và rỗng, đồng thời cắt bỏ khoảng trắng không cần thiết. Hình ảnh hiển thị giống hệt bằng mắt thường vì không thay đổi nào trong số này chạm vào các hình khối thực sự — chỉ thay đổi cách chúng được viết ra. Kết quả là một file SVG nhỏ hơn, sạch hơn, hiển thị nhanh hơn và dễ nhúng thẳng vào HTML hay CSS của bạn hơn.

Khác với JPG, PNG hay WebP, nén SVG thực sự không mất dữ liệu theo đúng nghĩa quan trọng nhất: vì bạn đang tối ưu đoạn mã mô tả các vector, hình ảnh vẫn phóng to vô hạn và trông sắc nét hoàn hảo ở mọi mức zoom. Không có thanh trượt chất lượng và không có sự đánh đổi nào cần cân nhắc. Thứ duy nhất giảm đi là số ký tự trong file, và đó chính xác là điều bạn mong muốn với một tài nguyên sẽ được tải xuống ở mỗi lần tải trang.

Với logo, biểu tượng và minh họa đơn giản, SVG gần như luôn thắng định dạng raster: nó thường nhỏ hơn, luôn sắc nét, và có thể được tạo kiểu hoặc tạo hoạt ảnh bằng CSS. Chỉ nên dùng PNG hay WebP khi ảnh là ảnh chụp hoặc có chi tiết phức tạp, mang tính hội họa không thể quy về các đường vector gọn gàng. Nếu bạn vẫn đang xuất biểu tượng dưới dạng PNG, chuyển sang SVG đã rút gọn thường giảm được dung lượng đáng kể và loại bỏ hiện tượng mờ trên màn hình độ phân giải cao.