Tối ưu SVG (rút gọn an toàn)

Rút gọn SVG an toàn, so điểm ảnh trước và sau, xem dung lượng và gzip tiết kiệm.

Tối ưu những gì

3 hợp với icon; 1 hoặc 2 cho hình minh họa lớn, 4 trở lên cho hình rất nhỏ hoặc phóng to nhiều.

Tắt nếu CSS hoặc JavaScript của trang bên ngoài tệp này nhắm tới ID bên trong.

Mặc định tắt: trình đọc màn hình đọc phần title.

Mặc định tắt: hiếm khi tiết kiệm nhiều và làm thay đổi bộ chọn CSS như rect.

Dung lượng

Hãy dán mã SVG hoặc mở một tệp.

Công cụ này làm gì

Dán mã SVG hoặc mở tệp .svg để nhận tệp nhỏ hơn mà vẽ ra cùng một hình. SVG xuất từ phần mềm vẽ mang theo nhiều thứ trình duyệt không dùng: chú thích, thiết lập của phần mềm (Inkscape, Illustrator, Sketch), khối metadata, số có sáu chữ số thập phân, thuộc tính đang ở giá trị mặc định và ID không ai trỏ tới. Công cụ bỏ chúng, làm tròn số theo độ chính xác bạn chọn, rút gọn dữ liệu path, rồi vẽ cả hai phiên bản trong trình duyệt và so sánh từng điểm ảnh, để bạn biết kết quả an toàn trước khi dùng. Mọi thứ chạy ngay trên trang này.

An toàn từ cách làm

Thuộc tính mặc định như fill="black" chỉ bị xóa khi không phần tử cha nào đặt thuộc tính đó, không có khối <style> có thể đặt, và phần tử không nằm trong <defs> hay <symbol> (vì <use> truyền màu tô của nó xuống). ID chỉ bị xóa khi không có gì tham chiếu: href, url(#…), bộ chọn CSS, begin của hoạt ảnh hay thuộc tính ARIA; tệp có <script> giữ mọi ID, và ID của <symbol> luôn được giữ. Khoảng trắng không bao giờ bị động tới bên trong <text>. Số được làm tròn có bù sai số để không cộng dồn dọc path dài; viewBox không bao giờ bị làm tròn. Xem bài viết về tối ưu SVG an toàn.

Đọc kết quả

Dung lượng hiện số byte trước và sau, cả khi nén gzip (con số máy chủ thật sự gửi đi). Bước kiểm tra điểm ảnh vẽ hai phiên bản ở tối đa 512 điểm ảnh bằng chính bộ vẽ của trình duyệt: "giống hệt từng điểm ảnh" nghĩa là không điểm nào đổi; "giống nhau khi nhìn" nghĩa là chỉ phần khử răng cưa ở vài mép lệch vài mức. Nếu khác nhau, hãy tăng số chữ số thập phân hoặc tắt bớt tùy chọn. Ba chữ số thập phân hợp với icon; hình lớn có thể dùng một hoặc hai.

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

SVG của tôi có bị tải lên không?

Không. Tệp được phân tích, tối ưu và vẽ trong trình duyệt; bản xem trước hiển thị dạng ảnh nên script trong SVG không chạy.

SVG sau khi tối ưu có giống hệt không?

Công cụ tự kiểm tra bằng cách vẽ cả hai và so từng điểm ảnh. Với thiết lập mặc định, kết quả giống hệt hoặc chỉ khác khử răng cưa ở vài mép.

Có nên xóa <title> không?

Thường là không, vì trình đọc màn hình đọc tiêu đề. Tùy chọn này mặc định tắt.

Khác gì SVGO?

SVGO là công cụ dòng lệnh rất đầy đủ. Công cụ này làm ít bước hơn một cách thận trọng, kiểm tra điểm ảnh và không cần cài đặt.