Trình tối ưu SVG

Trình tối ưu SVG là gì?

Trình tối ưu SVG là công cụ miễn phí chạy trong trình duyệt dành cho nhà thiết kế web, tác giả biểu tượng và lập trình viên front-end cần làm gọn SVG viết tay hoặc đã xuất trước khi triển khai. Trình biên tập vector thêm trọng lượng vô hình: chú thích XML, khối siêu dữ liệu, thuộc tính Inkscape/Sodipodi/Illustrator, số thập phân thừa, transform vô nghĩa, nhóm bao bọc, cùng ID và defs không được gì tham chiếu. Bật/tắt từng bước dọn dẹp trong Cài đặt, dán mã hoặc thả tệp .svg, xem bản render Gốc và Đã tối ưu cập nhật cạnh nhau, và đọc các số liệu Trước, Sau, Đã tiết kiệm, Gzip và Brotli. Sao chép kết quả hoặc tải xuống dưới dạng .min.svg. Dùng nó để làm nhẹ biểu tượng nội tuyến, sprite sheet, logo và minh họa.

Cách sử dụng Trình tối ưu SVG

1. Dán SVG của bạn, hoặc thả/tải lên tệp .svg — mã sẽ điền vào ô nhập.
2. Mở Cài đặt và bật đúng các bước dọn dẹp bạn muốn: làm tròn tọa độ, xóa chú thích, siêu dữ liệu và thuộc tính trình biên tập, nhóm rỗng, ID và defs không dùng, gộp transform, rút gọn style nội tuyến, rút gọn màu hex, bỏ giá trị mặc định và rút gọn khoảng trắng.
3. Nếu bật làm tròn tọa độ, hãy đặt độ chính xác (0-5 chữ số thập phân).
4. So sánh bản render Gốc và Đã tối ưu cạnh nhau để xác nhận hình vẽ vẫn đúng.
5. Đọc các số liệu Trước, Sau, Đã tiết kiệm, Gzip và Brotli để thấy mức giảm kích thước thực.
6. Sao chép SVG đã tối ưu, hoặc tải xuống dưới dạng tệp .min.svg.

Ví dụ

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

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

Trình tối ưu loại bỏ chính xác những gì?

Khi bật các công tắc tương ứng: chú thích XML, các phần tử <metadata>, <title> và <desc>, thuộc tính không gian tên của trình biên tập (Inkscape, Sodipodi, Illustrator), nhóm rỗng, ID không được gì tham chiếu và <defs> không được tham chiếu. Nó cũng có thể làm tròn thuộc tính số và dữ liệu path, gộp transform vô nghĩa, rút gọn thuộc tính style và CSS trong <style>, rút gọn màu hex (#ffffff→#fff) và bỏ các thuộc tính trình bày mặc định như fill-opacity="1".

Làm tròn tọa độ có làm thay đổi hình dáng SVG của tôi không?

Làm tròn ở độ chính xác thấp có thể dịch điểm đi một phần rất nhỏ của đơn vị, thường không nhìn thấy nhưng nhỏ hơn. Tăng độ chính xác (đến 5 chữ số) nếu cần hình học chính xác, hoặc tắt làm tròn để giữ nguyên các con số.

Tôi có thể tải một tệp và xem trước kết quả không?

Có. Thả hoặc tải lên tệp .svg (hoặc dán mã) và bản render Gốc cùng Đã tối ưu hiện cạnh nhau để bạn phát hiện chỗ hỏng. Sau đó sao chép đầu ra hoặc tải .min.svg đã tối ưu — không có gì được tải lên; tệp được đọc cục bộ.

Con số Gzip và Brotli nghĩa là gì?

Kích thước Gzip được đo bằng cách thực sự nén SVG đã tối ưu ngay trong trình duyệt, nên phản ánh số byte thực trên kết nối có gzip. Con số Brotli là ước tính suy ra từ kích thước gzip đó (brotli thường nén văn bản nhỏ hơn một chút); một bộ mã hóa brotli thật quá nặng để đóng gói, nên nó được đánh dấu bằng dấu ngã.

SVG của tôi có được tải lên đâu không?

Không. Việc phân tích, dọn dẹp, đo kích thước và tuần tự hóa đều diễn ra cục bộ trong trình duyệt của bạn bằng DOMParser tích hợp. Không có gì được gửi đến máy chủ, nên công cụ hoạt động ngoại tuyến và tác phẩm của bạn được giữ riêng tư.