Nén tệp SVG

SVG là mã, không phải điểm ảnh

Tệp SVG (Scalable Vector Graphics) là một văn bản XML mô tả các hình: đường path, hình tròn, dải màu chuyển, chữ. Vì chứa chỉ dẫn thay cho điểm ảnh, SVG luôn sắc nét ở mọi kích thước, từ favicon 16 điểm ảnh đến biển quảng cáo ngoài trời. Biểu tượng, logo, hình minh họa, biểu đồ và bản đồ trên web thường là SVG, và định dạng này là tiêu chuẩn của W3C từ năm 2001.

Là văn bản thì có một hệ quả: dung lượng tệp phụ thuộc vào việc phần mềm soạn thảo viết dài dòng đến đâu, chứ không phụ thuộc vào kích thước hiển thị của hình. Hai tệp SVG hiển thị giống hệt nhau có thể chênh nhau vài lần về dung lượng.

Điều gì khiến tệp SVG nặng hơn mức cần thiết

• Siêu dữ liệu của phần mềm. Illustrator, Inkscape, Figma và Sketch thêm không gian tên riêng, tên lớp, chú thích khi xuất và đôi khi cả một bản sao nhúng của tài liệu có thể chỉnh sửa.
• Độ chính xác thừa. Những tọa độ như 12.483920174 trong khi 12.48 hiển thị y hệt ở mọi kích thước thực tế.
• Cấu trúc dư thừa. Nhóm rỗng, lớp ẩn, giá trị thuộc tính mặc định, định nghĩa không dùng đến và kiểu CSS có thể viết ngắn hơn.
• Cú pháp đường path dài. Lệnh tuyệt đối ở chỗ lệnh tương đối ngắn hơn, chữ cái lệnh lặp lại, khoảng trắng thừa.
• Ảnh bitmap nhúng. Ảnh chụp dán vào hình minh họa được lưu dưới dạng văn bản Base64 trong SVG, lớn hơn tệp ảnh gốc khoảng một phần ba.

Công cụ tối ưu SVG như thế nào

Công cụ chạy SVGO, trình tối ưu SVG mã nguồn mở được dùng rộng rãi, ngay trong trình duyệt của bạn. Nó xóa siêu dữ liệu và chú thích, gộp các nhóm vô dụng, rút gọn dữ liệu path, làm tròn số đến 3 chữ số thập phân theo mặc định (bạn có thể chọn từ 0 đến 6) và gộp các kiểu CSS, lặp lại các lượt cho đến khi không còn gì thay đổi. Kết quả vẫn là một tệp SVG bình thường mà bạn có thể mở trong mọi phần mềm hoặc dán vào HTML. Trong thử nghiệm của chúng tôi với tám tệp SVG, từ biểu tượng đã tối ưu thủ công đến một tệp xuất từ Inkscape đầy dữ liệu của phần mềm, mức tiết kiệm từ 8% đến 42%.

Xét theo nghĩa hẹp, việc tối ưu có làm mất dữ liệu: làm tròn thay đổi tọa độ một chút xíu, và dữ liệu riêng của phần mềm soạn thảo bị bỏ đi, nên bạn không thể mở lại tệp với đầy đủ các lớp ban đầu. Hãy giữ tệp nguồn từ phần mềm thiết kế và coi tệp SVG đã tối ưu là bản phát hành.

Máy chủ thường gửi SVG kèm nén gzip hoặc Brotli, giúp văn bản nhỏ thêm trên đường đến trình duyệt. Tối ưu và nén phía máy chủ cộng dồn hiệu quả cho nhau, vì dữ liệu đã bị xóa thì không bao giờ phải nén nữa.

Khi SVG đã tối ưu bị lỗi

• CSS hoặc JavaScript không còn tìm thấy phần tử. Trình tối ưu rút gọn hoặc xóa các ID và tên class trông như không được dùng trong tệp. Nếu kiểu CSS hoặc mã của trang nhắm đến chúng, hãy kiểm tra kết quả trước khi đăng.
• Biểu tượng không còn co giãn. SVG cần thuộc tính viewBox để đổi kích thước đúng cách. Công cụ giữ thuộc tính này, nên hãy kiểm tra xem tệp gốc có nó không; SVG chỉ có chiều rộng và chiều cao cố định thì vốn chưa bao giờ co giãn tốt.
• Hình rất nhỏ bị méo. Biểu tượng rất nhỏ vẽ trên khung lớn có thể bị ảnh hưởng bởi việc làm tròn. Điều này hiếm khi xảy ra với độ chính xác mặc định.
• Tệp chủ yếu là một ảnh chụp nhúng. Hãy xuất ảnh thành tệp JPG hoặc WebP riêng rồi liên kết đến nó, hoặc chuyển toàn bộ hình sang bitmap.

Câu hỏi về SVG

Trang liên quan

Ảnh bitmap được xử lý bằng công cụ nén ảnh. Để hiểu những gì chạy ngay trên máy và lý do, hãy xem cách hoạt động.