Trình tối ưu SVG

Dán hoặc thả một SVG và thu nhỏ nó bằng SVGO. Mọi thứ ở lại trong trình duyệt.

Cách Trình tối ưu SVG hoạt động

Công cụ tối ưu SVG chạy SVGO (SVG Optimizer) trong Web Worker trong trình duyệt để thu nhỏ và làm sạch file SVG mà không cần tải chúng lên. SVGO áp dụng bộ plugin có thể cấu hình xóa chú thích, thu gọn khoảng trắng, hợp nhất các đường giống nhau, chuyển đổi hình dạng sang dạng biểu diễn nhỏ gọn nhất và loại bỏ các thuộc tính không có hiệu ứng thị giác. Kết quả là SVG nhỏ hơn kết xuất giống hệt với bản gốc.

Các file SVG được tạo bởi các công cụ thiết kế như Figma, Illustrator hoặc Inkscape thường chứa nhiều overhead đáng kể: metadata dành riêng cho trình chỉnh sửa, nhóm trống, thuộc tính transform thừa và khai báo namespace mà không trình duyệt nào cần. Bộ plugin mặc định của SVGO loại bỏ overhead này một cách đáng tin cậy. File đã tối ưu được cung cấp để tải xuống và tỉ lệ phần trăm giảm kích thước được hiển thị để bạn xác nhận việc tối ưu có đáng không.

Tác giả: Bastien Sulyan

Cách sử dụng Trình tối ưu SVG, từng bước

Kéo thả file SVG vào khu vực tải lên hoặc nhấp để duyệt file.
SVGO Web Worker chạy tối ưu ngay lập tức với bộ plugin mặc định.
Xem tỉ lệ phần trăm giảm và kích thước file gốc so với đã tối ưu.
Nhấp Tải xuống để lưu SVG đã tối ưu vào thiết bị của bạn.
Nếu các plugin cụ thể gây ra vấn đề kết xuất, điều chỉnh cấu hình plugin và tối ưu lại.

Trường hợp sử dụng thường gặp

Lập trình viên front-end tối ưu các biểu tượng xuất từ Figma trước khi đưa vào pipeline tài sản sản xuất, giảm từng biểu tượng từ 4 KB xuống dưới 1 KB.
Nhà thiết kế web làm sạch các hình minh họa SVG xuất từ Illustrator chứa các lớp metadata trình chỉnh sửa vô hình trong trình duyệt nhưng làm phình file.
Lập trình viên xây dựng font biểu tượng từ các glyph SVG đảm bảo mỗi SVG nguồn sạch và có cấu trúc nhất quán trước bước xây dựng font.
Kỹ sư hiệu suất kiểm tra SVG nội tuyến trong HTML và thay thế từng bản gốc phình to bằng phiên bản đã tối ưu SVGO để cải thiện trọng lượng trang.

Câu hỏi thường gặp

SVGO có thay đổi giao diện SVG của tôi không?

Các plugin mặc định của SVGO được chọn để không mất dữ liệu thị giác: SVG đã tối ưu kết xuất giống hệt với bản gốc trong tất cả trình duyệt tiêu chuẩn. Một số plugin tích cực (như những plugin làm tròn tọa độ đường rất nặng) có thể gây ra sự khác biệt kết xuất nhỏ. Nếu bạn nhận thấy thay đổi thị giác, so sánh các file gốc và đã tối ưu trong trình duyệt và tắt plugin cụ thể gây ra vấn đề.

File SVG có được gửi đến máy chủ để tối ưu không?

Không. SVGO chạy trong Web Worker trong tab trình duyệt của bạn. Văn bản SVG được đọc từ ổ đĩa cục bộ của bạn, xử lý trong bộ nhớ JavaScript, và đầu ra được trả về trang để tải xuống. Nội dung file không rời thiết bị của bạn.

SVG của tôi sẽ nhỏ hơn bao nhiêu?

Mức giảm phụ thuộc vào nguồn. SVG xuất từ công cụ thiết kế với metadata trình chỉnh sửa thường thu nhỏ từ 30 đến 70 phần trăm. SVG viết tay đã gọn có thể chỉ giảm 5 đến 15 phần trăm. Công cụ hiển thị số byte chính xác và tỉ lệ phần trăm để bạn có thể đánh giá từng file riêng lẻ.

Việc tối ưu có ảnh hưởng đến animation SVG hoặc JavaScript trong file không?

Cấu hình này bảo toàn các phần tử animation và thuộc tính SMIL. Nó có loại bỏ các phần tử script: công cụ thêm plugin removeScripts vào preset mặc định của SVGO, vì một SVG bạn sắp nhúng không nên mang theo mã có thể thực thi. Một số plugin làm sạch thuộc tính có thể tương tác với animation nếu animation tham chiếu các thuộc tính đó bằng ID; kiểm tra đầu ra đã kết xuất sau khi tối ưu các file sử dụng animation phức tạp.

Tôi có thể tối ưu nhiều file SVG cùng lúc không?

Phiên bản hiện tại xử lý một file SVG mỗi lần. Thả một file, tải xuống kết quả, rồi thả file tiếp theo. Xử lý hàng loạt nhiều file trong một phiên không có trong bản phát hành này.

Công cụ sử dụng phiên bản SVGO nào?

Công cụ đóng gói SVGO chạy trong Web Worker. Phiên bản đóng gói được ghi chú trong thông tin về công cụ. SVGO được duy trì tích cực và API plugin thay đổi đáng kể giữa v1, v2 và v3; công cụ hiện tại sử dụng định dạng plugin v3.

Công cụ liên quan

Giữ mọi thứ cục bộ, khám phá các công cụ bổ trợ.

Tất cả công cụ ảnh