📐 Công Cụ Tối Ưu SVG

Giới thiệu

Các file SVG xuất từ các công cụ như Inkscape, Adobe Illustrator hay Figma thường chứa lượng lớn dữ liệu thừa vô hình: không gian tên riêng của trình soạn thảo (sodipodi:, inkscape:), khối siêu dữ liệu, chú thích XML và khoảng trắng dư thừa. Công cụ này phân tích SVG của bạn bằng engine DOM tích hợp của trình duyệt và loại bỏ dữ liệu thừa đó theo cách thận trọng — không bao giờ thay đổi tọa độ, màu sắc hay dữ liệu đường dẫn, nên đồ họa của bạn trông giống hệt sau khi tối ưu. Bạn nhận được so sánh kích thước cạnh nhau và bản xem trước kết xuất trực tiếp để xác nhận không có gì thay đổi về mặt hình ảnh trước khi tải file đã làm sạch.

Cách sử dụng

1. Dán mã đánh dấu SVG vào hộp nhập, hoặc nhấp Tải File để mở file .svg từ thiết bị của bạn.
2. Nhấp Tối ưu để chạy trình làm sạch dựa trên DOM, loại bỏ chú thích, siêu dữ liệu và các phần tử trình soạn thảo Inkscape/Sodipodi.
3. Xem so sánh kích thước trước/sau và kiểm tra bản xem trước SVG trực tiếp để xác nhận đồ họa không thay đổi về mặt hình ảnh.
4. Sao chép trực tiếp mã SVG đã tối ưu, hoặc nhấp Tải về để lưu file .svg đã làm sạch vào thiết bị của bạn.

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

Trình tối ưu có làm thay đổi giao diện SVG của tôi không?

Không. Công cụ chỉ loại bỏ dữ liệu thừa vô hình — chú thích, siêu dữ liệu và các phần tử riêng của trình soạn thảo — và thu gọn khoảng trắng. Đường dẫn, hình dạng, màu sắc và biến đổi không bao giờ bị chỉnh sửa.

Nó loại bỏ những dữ liệu thừa riêng của trình soạn thảo nào?

Nó loại bỏ các phần tử và thuộc tính không gian tên của Inkscape và Sodipodi, siêu dữ liệu RDF/Dublin Core, chú thích XML và khoảng trắng không cần thiết giữa các thẻ — những nguyên nhân phổ biến nhất gây phình to file SVG được xuất.

Mã SVG của tôi có được gửi đến máy chủ không?

Không. Toàn bộ quá trình phân tích và làm sạch diễn ra hoàn toàn bên trong trình duyệt của bạn bằng DOM API. Mã SVG không bao giờ rời khỏi thiết bị của bạn.

Tôi có thể kỳ vọng tiết kiệm được bao nhiêu kích thước file?

Mức tiết kiệm tùy thuộc vào nguồn. File Inkscape với đầy đủ siêu dữ liệu thường giảm 10–40%. Các file đã được xuất gọn gàng có thể chỉ giảm 2–5%. Công cụ hiển thị số byte chính xác và phần trăm đã tiết kiệm sau mỗi lần chạy.

Tôi có thể dùng công cụ này trên các SVG được xuất từ Figma hay Adobe Illustrator không?

Có. Trình tối ưu hoạt động với SVG từ bất kỳ nguồn nào. Các file xuất từ Figma đã khá sạch nên mức tiết kiệm khiêm tốn. Các file xuất từ Illustrator thường bao gồm font nhúng và cấu hình màu ICC mà trình làm sạch thận trọng này cố ý giữ nguyên.