Tối Ưu & Nén File SVG Online (Giảm Dung Lượng)

SVG (Scalable Vector Graphics) là gì và tại sao nên dùng cho web?

SVG là định dạng hình ảnh vector dựa trên mã XML. Khác với ảnh bitmap (PNG/JPG) cấu tạo từ các điểm ảnh, SVG được tạo ra bằng các công thức toán học (đường thẳng, hình học).

• Không bao giờ bị vỡ nét: Bạn có thể phóng to SVG ra kích thước một tòa nhà mà nó vẫn sắc nét 100%.
• Dung lượng cực nhẹ: Rất phù hợp cho Logo, Icon, hình minh họa (Illustration) dạng phẳng.
• Có thể tùy chỉnh bằng Code: Lập trình viên có thể đổi màu, làm hoạt ảnh (Animation) cho SVG trực tiếp bằng CSS/Javascript.

Công cụ này nén file SVG bằng cách nào?

Khi bạn xuất file SVG từ các phần mềm thiết kế như Adobe Illustrator, Figma hay Sketch, bên trong file sẽ chứa rất nhiều rác:

• Khai báo Metadata thừa thãi của phần mềm.
• Các thuộc tính CSS ẩn, thẻ <g> không dùng đến.
• Tọa độ toán học có quá nhiều số thập phân dư thừa (ví dụ: 12.000344px thay vì 12px). Công cụ SVG Optimizer dựa trên thuật toán nổi tiếng SVGO sẽ dọn dẹp toàn bộ rác (Minify) và làm tròn các chữ số thập phân này. Quá trình này giúp file nhẹ đi từ 30% - 60% mà hình dạng không hề thay đổi.

Có nên chuyển toàn bộ icon PNG sang SVG không?

Có, đó là tiêu chuẩn của web hiện đại. Việc thay thế toàn bộ Icon PNG sang file SVG hoặc SVG Sprite sẽ giúp giảm một lượng lớn HTTPS Requests, tránh tải các file ảnh thừa thãi và giúp giao diện website trông sắc nét hoàn hảo trên màn hình Retina (Apple) hoặc màn hình 4K.