Tối Ưu SVG

Giảm dung lượng tệp SVG ngay trong trình duyệt. Công cụ chạy ba lớp tối ưu độc lập: resample ảnh raster nhúng bên trong SVG, tối ưu vector bằng SVGO, và dọn dẹp cơ bản (comment, metadata, rác trình chỉnh sửa, khoảng trắng, làm tròn số). Xử lý được một tệp hoặc cả loạt tệp cùng lúc. Mọi thứ chạy phía trình duyệt nên tệp của bạn không bao giờ rời khỏi máy.

Nếu SVG của bạn nặng vài MB, gần như chắc chắn nguyên nhân là ảnh raster nhúng chứ không phải mã vector. Minify markup trong trường hợp đó chỉ giảm được vài phần nghìn — hãy bật Tối ưu ảnh nhúng (raster).

Vì sao SVG lại nặng đến vậy

SVG xuất từ Illustrator, Figma hay Sketch thường nhúng ảnh bitmap dưới dạng chuỗi base64 trong thuộc tính xlink:href. Ảnh đó giữ nguyên độ phân giải gốc, trong khi thuộc tính transform lại thu nhỏ nó xuống rất nhiều khi hiển thị.

Ví dụ thực tế: một tệp bản đồ 14,29 MB chứa đúng một ảnh PNG 4000×3423, nhưng transform="scale(.06)" khiến nó chỉ vẽ ra 240×205 px. Số pixel thừa gấp khoảng 278 lần. Chạy SVGO lên tệp này mất 7 giây và giảm được 0,0%. Resample ảnh đó xuống 480 px đưa tệp về 0,07 MB — giảm 99,5%.

Các bước sử dụng

Xử lý nhiều tệp (tab "Tệp")

1. Kéo-thả hoặc bấm chọn nhiều tệp .svg vào vùng tải lên.
2. Bảng danh sách hiện ngay dung lượng từng tệp và dòng tóm tắt số ảnh nhúng · dung lượng · % của tệp. Nếu con số đó là 99% thì bạn biết cần bật lớp nào.
3. Chỉnh Tùy chọn ở phía trên (xem mô tả bên dưới), rồi bấm Tối ưu tất cả.
4. Theo dõi thanh tiến trình; bấm Dừng nếu muốn hủy giữa chừng — các tệp đã xong vẫn được giữ.
5. Bấm mũi tên mở rộng ở đầu mỗi dòng để xem báo cáo từng ảnh nhúng: kích thước gốc, kích thước hiển thị thực tế, kích thước sau resample và dung lượng tiết kiệm.
6. Tải từng tệp bằng nút tải xuống, hoặc bấm Tải ZIP để lấy toàn bộ. Tệp kết quả có đuôi .min.svg.

Xử lý một tệp (tab "Dán mã")

1. Dán mã SVG vào ô bên trái, hoặc bấm Mở để nạp tệp.
2. Với tệp nhỏ, kết quả cập nhật trực tiếp khi bạn sửa đầu vào hoặc đổi tùy chọn.
3. Với tệp lớn, tự động xem trước sẽ tắt để trình duyệt không bị treo — bấm Tối ưu khi bạn sẵn sàng.
4. Xem bản render bên dưới kết quả để chắc chắn hình vẫn đúng, rồi bấm sao chép hoặc Lưu.

Các tùy chọn

Tối ưu ảnh nhúng (raster)

Đây là lớp cho hiệu quả cao nhất với SVG xuất từ phần mềm thiết kế.

• Cạnh dài tối đa (px) — trần cứng cho cạnh dài nhất của mỗi ảnh. Mặc định 512.
• Hệ số nét (retina) — nhân với kích thước hiển thị thực tế. 2× cho ảnh sắc trên màn hình mật độ cao; 1× cho tệp nhẹ nhất.
• Định dạng — Auto chọn JPEG cho ảnh đục và PNG cho ảnh có vùng trong suốt (tương thích rộng nhất). WebP nhẹ hơn đáng kể nhưng cần trình xem hiện đại. Giữ định dạng gốc chỉ thay đổi kích thước.
• Chất lượng — áp dụng cho JPEG và WebP.

Công cụ dựng tạm tài liệu để đo kích thước vẽ thật của từng ảnh, thay vì đoán từ chuỗi transform, nên số liệu đúng cả khi ảnh nằm trong nhiều lớp <g> lồng nhau.

Ảnh không bao giờ bị phóng to: trần trên luôn là độ phân giải gốc của chính nó. Và kết quả chỉ được ghi đè khi nó thực sự nhỏ hơn bản gốc — nên các icon nhỏ trong tệp sẽ tự động được giữ nguyên.

Tối ưu vector (SVGO)

Chạy SVGO với bộ preset mặc định: gộp path, bỏ nhóm thừa, dọn id, rút gọn style. Ô Độ chính xác đặt số chữ số thập phân cho tọa độ. Tùy chọn removeViewBox được tắt sẵn vì bỏ viewBox sẽ làm hỏng khả năng co giãn của SVG.

Dọn dẹp cơ bản

Đúng bộ tùy chọn như trước: Xóa comment, Xóa XML/DOCTYPE, Xóa <metadata>, Xóa rác editor (thẻ Inkscape/Sodipodi), Gộp khoảng trắng, Làm tròn số với số chữ số thập phân 0–6. Lớp này luôn chạy cuối cùng.

Mẹo

• Thứ tự chạy là cố định: resample ảnh trước, SVGO sau. Chạy SVGO trên chuỗi base64 27 MB mất 33 giây và chỉ giảm 0,1%; sau khi ảnh đã nhỏ lại thì nó chạy gần như tức thì.
• Muốn sửa tay mã nguồn của một tệp lớn? Bấm nút bút chì trên dòng tương ứng để nạp nó sang tab Dán mã, hoặc bấm Vẫn mở trình soạn thảo ở cảnh báo tệp lớn. Gõ phím sẽ hơi giật — đó là đánh đổi khi mở tệp nhiều MB.
• Nếu làm tròn quá mạnh khiến nét mảnh hay đường path chính xác bị méo, hãy tăng số chữ số thập phân (tối đa 6) hoặc tắt hẳn Làm tròn số.
• Ô nhập được tô cảnh báo nghĩa là không tìm thấy thẻ <svg> — hãy kiểm tra lại xem bạn đã dán một SVG đầy đủ và hợp lệ chưa.
• Luôn để mắt tới bản xem trước khi tối ưu để kịp phát hiện lỗi hiển thị do việc xóa các thẻ riêng của trình chỉnh sửa gây ra.

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

Tệp SVG của tôi có được tải lên máy chủ không?

Không. Toàn bộ quá trình tối ưu diễn ra cục bộ trong trình duyệt, không có gì được gửi đi đâu cả.

Vì sao tệp của tôi hầu như không nhỏ đi (−% tiết kiệm thấp)?

Kiểm tra dòng tóm tắt dưới tên tệp trong bảng. Nếu tệp không có ảnh nhúng và mã vector đã được minify sẵn thì đơn giản là không còn gì để cắt. Ngược lại, nếu ảnh nhúng chiếm phần lớn dung lượng mà tệp vẫn không giảm, hãy bật Tối ưu ảnh nhúng (raster).

Ảnh nhúng có bị giảm chất lượng không?

Có, đây là nén mất dữ liệu — nhưng chỉ giảm xuống đúng kích thước ảnh thực sự được vẽ ra. Ảnh được thu nhỏ theo nhiều bước (chia đôi liên tiếp) thay vì một bước duy nhất, nên chữ và chi tiết nhỏ trên bản đồ vẫn đọc được. Nếu thấy mờ, hãy tăng Hệ số nét lên 3× hoặc nâng Cạnh dài tối đa.

Có nên chọn WebP không?

WebP cho tệp nhẹ nhất và vẫn giữ được vùng trong suốt. Chỉ lưu ý là SVG kết quả cần được mở bằng trình duyệt hiện đại; một số phần mềm thiết kế cũ có thể không đọc được ảnh WebP nhúng bên trong. Khi cần chắc chắn, hãy dùng Auto.

Việc tối ưu có thể làm hỏng SVG không?

Có thể, nếu làm tròn quá mạnh hoặc một thẻ trình chỉnh sửa mà tệp thực sự cần bị xóa. Hãy luôn kiểm tra bản xem trước, và giảm số thập phân hoặc tắt tùy chọn cụ thể nếu thấy có gì đó sai lệch.