OneSVG Studio

Tối Ưu SVG Online Miễn Phí (SVGO)

Upload file .svg có sẵn — chúng tôi chạy SVGO preset-default + multipass, loại metadata Inkscape, gộp path, làm tròn toạ độ. Preview realtime, copy code hoặc tải file .min.svg.

SVG Optimizer
Upload file SVG, chúng tôi tối ưu bằng SVGO và hiển thị so sánh.
Độ chính xác số thập phân3

Thấp hơn = file nhẹ hơn nhưng path có thể lệch vài pixel. 3 là mặc định cân bằng.

Về công cụ SVG Optimizer

File SVG được export từ Illustrator, Figma, Inkscape thường chứa nhiều metadata vô dụng: comment, editor namespace, id tự động, toạ độ thập phân 10 chữ số. SVGO (SVG Optimizer) của tác giả Kir Belevich là công cụ tiêu chuẩn để loại bỏ tất cả những thứ đó, giữ nguyên biểu diễn hình.

Chúng tôi dùng SVGO preset-default với multipass enabled: chạy nhiều lượt tối ưu, mỗi lượt áp dụng 30+ plugin khác nhau. Độ chính xác toạ độ có thể điều chỉnh (0-10 chữ số) để cân bằng giữa dung lượng và độ chính xác path. Giữ nguyên viewBox để SVG responsive.

  • SVGO preset-default multipass
  • Slider độ chính xác số thập phân (0-10)
  • Preview SVG trước và sau tối ưu
  • Hiển thị so sánh dung lượng / %
  • Copy code hoặc tải .min.svg
  • Giữ viewBox để responsive

Cách tối ưu file SVG

  1. 1

    Upload file SVG

    Kéo thả file .svg vào khung upload. Chấp nhận đến 25MB (rất lớn với SVG).

  2. 2

    Điều chỉnh precision

    3 là mặc định. Giảm xuống 1-2 cho icon, tăng lên 5-6 cho ảnh chi tiết cần chính xác tuyệt đối.

  3. 3

    Bấm Tối ưu

    SVGO xử lý phía server, thường < 1s. Không tiêu tài nguyên máy bạn.

  4. 4

    Xem so sánh & tải

    Hiển thị kích thước trước/sau và % tiết kiệm. Copy code hoặc tải .min.svg.

Khi nào dùng SVG Optimizer?

Tối ưu icon cho dự án web
Icon Illustrator thường 8-15KB, sau SVGO còn 1-3KB. Cộng dồn 100 icon = tiết kiệm MB.
Chuẩn bị SVG cho inline
Inline SVG trong HTML cần gọn để không phình file, SVGO xử lý hoàn hảo.
Giảm payload email marketing
Logo SVG nhỏ gọn load nhanh trong inbox, tăng tỉ lệ đọc mail.
Làm sạch SVG export Figma
Figma export nhiều id thừa, SVGO loại hết mà không đổi hình.

SVG trước và sau tối ưu SVGO

Ví dụ thực tế trên icon set Figma export 10 icon — số liệu trung bình sau khi chạy SVGO preset-default + multipass.

Tiêu chíSVG gốc (Figma/Illustrator)SVG sau SVGO
Dung lượng icon trung bình8-15 KB1-3 KB (giảm 70-85%)
Số ký tự coordinateM12.34567891 2.98765432M12.3 3 (precision 1-3)
Metadata Inkscape/AdobeCó <sodipodi:namedview>...Đã xoá
Auto-generated idid='Path_1234', id='g_567'...Xoá (nếu không dùng CSS)
<g> lồng nhau thừaNhiều nested <g>Gộp — flat structure
Duplicate pathCóMerged (mergePaths plugin)
viewBox preserved-✅ (responsive giữ nguyên)
Hiển thị trên browserKhông khácKhông khác (pixel-identical)

SVGO hoạt động thế nào?

SVGO (SVG Optimizer) là thư viện JavaScript của Kir Belevich — công cụ chuẩn tối ưu SVG, được dùng trong GitHub (icon Octicons), VSCode, Iconify, webpack plugin, và hàng chục CI/CD pipeline. Kiến trúc plugin-based với 50+ plugin, mỗi plugin làm 1 transform độc lập.

Preset-default bao gồm 35 plugin core: removeMetadata (xoá Inkscape/AI namespace), convertPathData (làm tròn toạ độ, chuyển relative), mergePaths (gộp path cùng style), convertTransform (gộp transform), collapseGroups (flatten nested <g>), removeEmptyAttrs, removeUselessDefs... Mỗi plugin giảm vài phần trăm, tổng cộng thường 40-70%.

Multipass mode chạy tối ưu lặp lại cho tới khi không giảm được thêm — hữu ích vì 1 số plugin chỉ phát huy khi plugin khác đã chạy trước. Ví dụ: collapseGroups mở khoá mergePaths trên group vừa được flatten. Chúng tôi enable multipass mặc định, precision=3 (làm tròn 0.1 pixel — mắt không phát hiện).

Câu hỏi về SVG Optimizer

SVGO có làm hỏng animation CSS không?
Không, nếu giữ id và class. Preset mặc định của chúng tôi đã disable plugin removeIds và keep viewBox. Nếu có script/CSS tham chiếu id, hãy chỉnh precision cao hơn.
Có hỗ trợ file SVG có <image> base64?
Có, SVGO không xoá <image>. Tuy nhiên đó không phải SVG thuần — bạn có thể dùng Color Vectorize để chuyển ảnh thành path thật.
File output khác với gốc về hình không?
Không đáng kể. Precision mặc định 3 làm tròn 0.1 pixel — mắt thường không phát hiện.
Có tối ưu nhiều file cùng lúc không?
Hiện 1 file/lượt. Với batch, dùng Batch Convert engine custom hoặc gọi /api/optimize nhiều lần.