Tối Ưu & Nén SVG miễn phí

Cách hoạt động

Công cụ này giảm dung lượng tệp SVG bằng bộ tối ưu tự viết chạy hoàn toàn trong trình duyệt — không thư viện, không máy chủ. Nó kết hợp hai lượt: DOMParser/XMLSerializer tích hợp của trình duyệt cho xử lý chính xác ở mức thuộc tính, và các phép thay thế regex có mục tiêu để bỏ chú thích, xóa siêu dữ liệu và gộp khoảng trắng.

1. 1
   DOMParser làm sạch SVG

   Trước mọi bước tối ưu, DOMParser của trình duyệt đọc SVG dạng XML và duyệt mọi phần tử. Thẻ script, trình xử lý sự kiện (mọi thuộc tính on*), phần tử hoạt ảnh và tham chiếu URL bên ngoài bị xóa vô điều kiện — bước này chạy bất kể bạn chọn tùy chọn tối ưu nào.
2. 2
   Làm tròn số thập phân dựa trên DOM

   Nếu bật làm tròn số thập phân, bộ tối ưu duyệt DOM đã phân tích lần thứ hai và chỉ làm tròn các thuộc tính số đã biết (dữ liệu path d, tọa độ, giá trị transform, độ dày nét, v.v.), dùng regex khớp từng số thực mà không làm hỏng các giá trị path nối liền như .5.5.
3. 3
   Các lượt regex làm sạch mã đã tuần tự hóa

   XMLSerializer tạo XML đã chuẩn hóa, rồi các phép thay chuỗi có mục tiêu loại bỏ chú thích HTML, siêu dữ liệu trình chỉnh sửa Inkscape/Sodipodi, khai báo XML, thuộc tính mặc định thừa (như version="1.1") và khoảng trắng giữa các thẻ — mỗi lượt có phạm vi hẹp để nội dung nút văn bản không bao giờ bị động đến.
4. 4
   Kích thước gzip và định dạng xuất

   CompressionStream API của trình duyệt tính kích thước gzip thực của cả đầu vào và đầu ra, vì đó là yếu tố thực sự quyết định chi phí truyền tải trên web. SVG đã tối ưu có thể tải về, sao chép dạng SVG thô, chuyển sang thuộc tính camelCase sẵn sàng cho React JSX, hoặc mã hóa thành CSS data URI — mọi chuyển đổi diễn ra cục bộ.

Công cụ liên quan