Logo XTools
XTools

Tối ưu SVG

Tối ưu tệp SVG để giảm dung lượng
  • Tệp không rời khỏi thiết bị của bạn
  • Chạy trên trình duyệt
  • Miễn phí, không cần đăng ký, không hình mờ

Drop SVG files here, or click to choose

Chấp nhận SVG, SVGZ · Bạn cũng có thể dán bằng Ctrl+V / ⌘V

Tip: paste SVG code anywhere on this page with Ctrl+V / ⌘V.

Cách dùng Tối ưu SVG

Thu nhỏ tệp SVG bằng SVGO mà không rời trình duyệt. Chọn mức sẵn Mặc định, An toàn hoặc Tối đa hoặc bật tắt từng plugin, kiểm tra khác biệt pixel so với bản gốc, rồi xuất kết quả thành SVG, data URI hoặc thành phần React.

  1. 1

    Thả tệp SVG hoặc SVGZ lên trang, hoặc dán mã SVG; “Mẫu” nạp một ví dụ.

  2. 2

    Trong “Tối ưu”, chọn Mặc định, An toàn hoặc Tối đa, và chỉnh “Độ chính xác số”, “Nhiều lượt” và “In đẹp”.

  3. 3

    Tùy chọn: mở các nhóm “Plugin” để bật hoặc tắt từng plugin SVGO; “Đặt lại” trở về Mặc định.

  4. 4

    So kết quả “Cạnh nhau”, bằng “Thanh trượt”, hoặc trong “Khác biệt”, nơi pixel đã đổi hiện đỏ.

  5. 5

    Chọn tab SVG, Data URI hoặc React, rồi nhấn “Tải SVG” hoặc “Tải .jsx”; với nhiều tệp, dùng “Tải tất cả (ZIP)”.

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

SVG của tôi có được tải lên không?

Không. SVGO chạy trong worker nền của trình duyệt, nên tệp không rời khỏi thiết bị.

Tối ưu có đổi cách SVG trông không?

Mức Mặc định nhằm giữ cùng hình. “Khác biệt” dựng cả hai bản và báo tỷ lệ pixel đã đổi, hoặc “Trông giống hệt”. “Độ chính xác số” rất thấp có thể làm méo chi tiết nhỏ.

Mức sẵn nào hợp SVG động hoặc có script?

An toàn. Nó để nguyên cấu trúc, ID và hình, nên bộ chọn CSS và script vẫn tìm được phần tử.

Vì sao Tối đa xóa chiều rộng và chiều cao?

Tối đa cũng bỏ tiêu đề, kích thước và script, hợp biểu tượng dùng qua CSS hoặc img; SVG khi đó co theo khung chứa. Bỏ chọn removeDimensions trong “Nhúng web” để giữ kích thước.

Nên dùng data URI Base64 hay mã hóa URL?

Hầu hết trường hợp hãy để Base64 tắt: URI mã hóa URL thường ngắn hơn và gzip tốt hơn. Chỉ bật khi một công cụ yêu cầu Base64.

Xuất React hoạt động thế nào?

Tab React bọc SVG đã tối ưu trong thành phần JSX đặt tên theo tệp, thuộc tính được viết lại cho JSX và props được truyền vào phần tử svg. “Tải .jsx” lưu nó.