Trình tối ưu hóa và thu nhỏ SVG

SVG xuất từ Illustrator, Inkscape, Figma hay Sketch thường chứa nhiều thứ trình duyệt không bao giờ dùng: khai báo XML, DOCTYPE, chú thích của phần mềm, khối metadata và các thuộc tính có không gian tên như sodipodi, inkscape mà chỉ phần mềm gốc hiểu được. Với một biểu tượng có thể chỉ vài KB, nhưng khi trang web có hàng chục biểu tượng hoặc SVG được nhúng thẳng vào HTML, phần thừa này làm chậm tải trang và khiến mã khó đọc.

Công cụ có năm tùy chọn dọn dẹp bật tắt riêng: xóa chú thích; xóa khai báo XML và DOCTYPE; xóa metadata và các phần tử riêng của trình soạn thảo như sodipodi, inkscape; xóa thuộc tính trình soạn thảo và khai báo không gian tên không dùng; nén khoảng trắng giữa các thẻ và khoảng trắng lặp lại. Sau đó công cụ hiển thị song song bản xem trước gốc và bản đã tối ưu, kèm kích thước tệp và phần trăm tiết kiệm, để bạn kiểm tra trước khi sao chép mã hoặc tải tệp .svg mới.

Công cụ dọn dẹp văn bản theo cách thận trọng: không viết lại dữ liệu đường dẫn, không làm tròn tọa độ, không gộp hình, nên giao diện gần như không đổi; bù lại, mức giảm thường nhỏ hơn các công cụ viết lại đường dẫn như SVGO. Khai báo không gian tên chỉ bị xóa khi không được dùng: nếu tệp vẫn còn xlink:href thì xmlns:xlink được giữ lại, tệp .svg độc lập vẫn hiển thị bình thường. Phần nén khoảng trắng bỏ qua nội dung của <text> (kể cả <tspan> bên trong), <style> và <script>, đồng thời giữ xml:space="preserve", nên khoảng cách chữ và CSS không bị ảnh hưởng. Vì xử lý bằng biểu thức chính quy, nếu tệp dùng cách viết hiếm gặp, hãy so sánh bản xem trước trước khi dùng.

Mọi xử lý diễn ra trong trình duyệt, tệp không bị tải lên. Nếu cần dùng hình ở nơi không hỗ trợ ảnh vector, như một số mạng xã hội hoặc tài liệu Office, hãy chuyển sang PNG bằng công cụ chuyển đổi định dạng ảnh.