Tối Ưu Hóa SVG

Nén tệp SVG trực tuyến — xóa metadata, chú thích và thuộc tính không cần thiết để giảm kích thước tệp

Chia sẻ:

Tối Ưu Hóa SVG

Tại sao nên tối ưu hóa tệp SVG?

Tệp SVG xuất từ Illustrator, Figma và Inkscape chứa nhiều dữ liệu không cần thiết — chú thích, metadata của trình soạn thảo, thuộc tính dư thừa và container trống. Sau khi tối ưu hóa, kích thước tệp có thể giảm 30-70% và tải nhanh hơn.

🎯

8 chiến lược tối ưu

Bật/tắt từng lượt tối ưu độc lập để kiểm soát chính xác

📊

Thống kê giảm kích thước

Xem kích thước gốc, kích thước đã tối ưu và phần trăm tiết kiệm sau mỗi lần tối ưu

✅

Tối ưu không mất dữ liệu

Tất cả tối ưu giữ nguyên giao diện SVG — chỉ xóa metadata vô hình

Tối ưu SVG trong 3 bước

1

Dán mã SVG

Sao chép mã nguồn SVG từ công cụ thiết kế hoặc tệp và dán vào trường đầu vào

2

Chọn các tối ưu hóa

Đánh dấu các tùy chọn tối ưu mong muốn — cài đặt mặc định cho giảm tối đa

3

Sao chép và sử dụng

Sao chép SVG đã tối ưu và thay thế tệp gốc hoặc nhúng trực tiếp vào HTML

Các trường hợp sử dụng tối ưu SVG

🎨

Thư viện icon

Tối ưu các bộ icon xuất từ Figma hoặc Illustrator trước khi thêm vào thư viện

🏢

Logo

Làm sạch logo SVG cho header website, favicon và tài nguyên thương hiệu

✨

SVG có animation

Giảm kích thước cơ sở của SVG có animation vốn đã lớn do dữ liệu animation

📱

PWA và mobile

SVG nhỏ hơn giảm tiêu thụ dữ liệu di động và cải thiện điểm Lighthouse

Các thực hành tốt nhất cho tối ưu SVG

✓ Cẩn thận khi xóa ID với animation CSS

Nếu SVG dùng CSS hay JS animation nhắm vào phần tử theo ID, tắt 'Xóa ID' để animation không bị hỏng.

✓ Giữ viewBox, xóa width/height

Xóa thuộc tính width/height và chỉ giữ viewBox cho phép SVG scale responsive qua CSS.

✓ Làm tròn số đến 2 chữ số thập phân

Tọa độ đường dẫn với hơn 5 chữ số thập phân không thể phân biệt về mặt thị giác. Làm tròn về 2 giảm kích thước tệp.

✓ Tự động hóa SVGO trong CI/CD

Trong các dự án lớn, tích hợp SVGO vào quy trình build để tự động tối ưu tất cả SVG.

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

Tối ưu SVG có thể giảm bao nhiêu kích thước tệp?

Thường tiết kiệm 30-70% tùy thuộc vào nguồn. SVG Illustrator thể hiện khoản tiết kiệm lớn nhất; xuất Figma đã tương đối sạch.

Tối ưu hóa có thay đổi giao diện SVG không?

Không — tất cả tối ưu trong công cụ này chỉ xóa dữ liệu vô hình hoặc làm tròn số với độ chính xác không nhận thấy được. Kết quả hình ảnh giống hệt bản gốc.

Tại sao xóa thuộc tính width và height?

Giá trị width/height được mã hóa cứng ngăn SVG scale responsive qua CSS. Xóa chúng và chỉ giữ viewBox cho phép kiểm soát kích thước hoàn toàn qua thuộc tính CSS.

Sự khác biệt giữa công cụ này và SVGO là gì?

SVGO là công cụ dòng lệnh Node.js là tiêu chuẩn để tối ưu SVG. Công cụ này cung cấp giao diện trình duyệt thân thiện cho các tối ưu phổ biến nhất mà không cần cài đặt Node.js.