Công cụ tối ưu SVG nhanh và bảo mật
Scalable Vector Graphics (SVG) là tiêu chuẩn cho các biểu tượng và hình minh họa sắc nét, không phụ thuộc vào độ phân giải trên web. Tuy nhiên, khi xuất file SVG từ các phần mềm thiết kế, file nhận được thường chưa được tối ưu tốt để sử dụng thực tế. Công cụ tối ưu SVG này giúp bạn dọn dẹp đồ họa vector ngay lập tức, loại bỏ các dữ liệu thừa và giảm dung lượng file mà không làm giảm chất lượng hình ảnh.
Vì công cụ này hoạt động hoàn toàn trên trình duyệt, các hình ảnh của bạn sẽ không bao giờ bị tải lên máy chủ. Bạn có thể an tâm nén file SVG chứa logo độc quyền, thiết kế sản phẩm chưa ra mắt hoặc các sơ đồ bảo mật. Quá trình xử lý diễn ra tức thì, hiển thị trực tiếp mức dung lượng tiết kiệm được, cùng với tính năng so sánh trực quan trước và sau khi nén để đảm bảo đồ họa của bạn được giữ nguyên vẹn.
Tại sao bạn cần nén file SVG
Khác với ảnh raster (như JPEGs hay PNGs) lưu trữ dữ liệu pixel, SVGs về cơ bản là các file văn bản XML chứa các lệnh toán học để vẽ hình. Khi các phần mềm chỉnh sửa vector xuất các file này, chúng thường kèm theo rất nhiều dữ liệu thừa mà trình duyệt không cần đến để hiển thị ảnh.
Các nguyên nhân phổ biến làm tăng dung lượng file SVG bao gồm:
- Siêu dữ liệu của phần mềm: Các thẻ và thuộc tính đặc thù của phần mềm tạo ra file, chỉ dùng cho mục đích chỉnh sửa.
- Ghi chú và phần tử trống: Các ghi chú của lập trình viên, nhóm trống (
<g>) và các layer ẩn hoàn toàn không có tác dụng gì đối với hình ảnh hiển thị cuối cùng. - Độ chính xác thừa thãi: Tọa độ đường dẫn (path) có từ sáu chữ số thập phân trở lên (ví dụ:
14.123456), gây tốn dung lượng vô ích. - Thuộc tính mặc định: Các style và thuộc tính trùng với mặc định của trình duyệt nên không cần phải khai báo rõ.
Bằng cách sử dụng công cụ nén SVG, bạn sẽ loại bỏ được những đoạn mã ẩn này. Khi giảm dung lượng file SVG, trang web của bạn sẽ tải nhanh hơn, tốn ít băng thông hơn, đồng thời cải thiện hiệu suất tổng thể và thứ hạng SEO.
Cách nén SVG online
Công cụ này cung cấp nhiều tùy chọn tùy chỉnh để bạn kiểm soát chi tiết quá trình tối ưu hóa. Tùy thuộc vào mục đích sử dụng ảnh cuối cùng, bạn có thể điều chỉnh các cài đặt này để đạt được sự cân bằng hoàn hảo giữa dung lượng file và khả năng đọc code.
Độ chính xác thập phân
Các đường vector được vẽ bằng tọa độ. Các phần mềm thiết kế thường xuất các tọa độ này với độ chính xác cực cao, tạo ra các chuỗi số dài. Bằng cách giảm độ chính xác thập phân (số chữ số sau dấu phẩy), bạn có thể giảm đáng kể số lượng ký tự của file. Độ chính xác ở mức 1 hoặc 2 thường là hoàn hảo cho các icon trên web. Nếu bạn thấy các đường cong bị răng cưa hoặc hình khối bị xô lệch trong phần xem trước, chỉ cần tăng thanh trượt độ chính xác lên cho đến khi hình ảnh trông bình thường trở lại.
Tối ưu hóa nhiều lần
Tối ưu hóa thường là một quá trình gồm nhiều bước. Việc xóa một phần tử không cần thiết có thể làm cho phần tử cha bị trống, và sau đó phần tử cha này cũng có thể bị xóa theo. Bật cài đặt "Multipass" sẽ yêu cầu trình tối ưu hóa chạy lặp đi lặp lại các quy trình dọn dẹp cho đến khi không thể giảm thêm dung lượng file nữa. Điều này đảm bảo file đầu ra có dung lượng nhỏ nhất có thể.
Xóa kích thước
Theo mặc định, nhiều file SVG được xuất với các thuộc tính width và height cố định (ví dụ: width="500px"). Dù điều này khóa hình ảnh ở một kích thước cụ thể, nhưng nó lại gây khó khăn cho thiết kế web responsive (thích ứng). Đánh dấu vào "Remove dimensions" sẽ loại bỏ các thuộc tính này trong khi vẫn giữ lại viewBox. Điều này cho phép SVG tự động co giãn linh hoạt dựa trên CSS của thẻ chứa (container) nó, giúp việc sử dụng trong các bố cục web hiện đại trở nên dễ dàng hơn nhiều.
Làm đẹp code
Nếu mục tiêu của bạn là dung lượng file nhỏ nhất tuyệt đối, hãy bỏ chọn mục này. Công cụ sẽ xuất ra một dòng code duy nhất và liền mạch. Tuy nhiên, nếu bạn đang dọn dẹp một file SVG mà bạn dự định sẽ chỉnh sửa thủ công, làm hiệu ứng (animate) hoặc nhúng trực tiếp vào file HTML, việc chọn "Pretty print" sẽ định dạng đầu ra với các khoảng lùi đầu dòng và ngắt dòng gọn gàng.
Các phương pháp hay nhất cho đồ họa vector
Tối ưu hóa SVG chỉ là một bước để xây dựng một trang web nhanh và dễ truy cập. Khi làm việc với đồ họa vector, hãy cân nhắc cách chúng được sử dụng. Nếu bạn nhúng SVG trực tiếp vào HTML, việc nén SVG là rất quan trọng để giữ cho kích thước tệp HTML nhỏ gọn. Bạn cũng nên dùng công cụ Nén HTML hoặc Nén CSS cho toàn bộ trang web để đạt hiệu suất tối đa.
Luôn kiểm tra bản xem trước sau khi tối ưu hóa. Mặc dù hầu hết các tệp SVG đều được nén hoàn hảo, nhưng các hình minh họa phức tạp với dải màu (gradient) chi tiết hoặc đường cắt (clipping path) chính xác có thể cần độ chính xác số thập phân (float precision) cao hơn để giữ nguyên giao diện ban đầu. Trình xem trước và sau khi nén được tích hợp sẵn giúp bạn dễ dàng phát hiện các thay đổi ngoài ý muốn trước khi tải xuống tệp đã nén.
Cuối cùng, dù SVG rất lý tưởng cho logo, biểu tượng (icon) và hình minh họa phẳng, chúng lại không phù hợp với các bức ảnh phức tạp. Nếu tệp SVG của bạn chủ yếu chứa các ảnh raster được nhúng (như JPEG mã hóa base64), việc tối ưu hóa sẽ không có nhiều tác dụng. Trong trường hợp này, tốt hơn hết bạn nên chuyển đổi hoàn toàn hình ảnh đó bằng công cụ chuyển SVG sang PNG.