SVGO: tối ưu SVG mà không mất cấu trúc cần thiết

Để tối ưu SVG bằng SVGO mà không làm hỏng cách dùng trên trang, giữ bản gốc, xác định cấu trúc trang phụ thuộc, rồi thử bản sao được tối ưu riêng trong trang đó. Tệp nhỏ hơn và bản xem trước độc lập không đổi không chứng minh bộ chọn CSS, tập lệnh hoặc tham chiếu vẫn hoạt động.

Huy hiệu tự tạo của chúng tôi làm khác biệt đó thấy rõ. Bộ cấu hình mặc định của SVGO giảm nguồn từ 437 xuống 263 byte, nhưng xóa ID mà HTML bao quanh dùng để đổi màu mặt trời. Tắt cleanupIds tạo bản 281 byte giữ điểm tham chiếu đó. Các số đo mô tả riêng mẫu này với SVGO 4.1.0, không bảo đảm mức nén cho hình khác.

SVGO chỉnh mã SVG có sẵn. Nếu chỉ có PNG hoặc JPG, tạo hoặc khôi phục hình học vector trước. Tối ưu hóa không thể biến các đối tượng trong bitmap thành đường dẫn chỉnh sửa được.

Quyết định cấu trúc SVG nào cần giữ

Trước khi chạy công cụ tối ưu, phân biệt phần nhìn thấy với phần tài liệu hoặc ứng dụng khác tham chiếu. Bộ cấu hình mặc định SVGO có các thao tác đổi ID, nhóm, kiểu và dữ liệu đường dẫn. Tích hợp cũng có thể chọn bộ plugin khác, nên kiểm tra cấu hình của công cụ thực sự xử lý tệp.

Đây là các bước kiểm tra riêng. Giữ ID không bảo đảm giữ mọi nhóm, nút hoặc đối tượng chỉnh sửa được. Tương tự, hiển thị đúng không chứng minh trình chỉnh sửa sẽ khôi phục cấu trúc lớp bạn thích. Giữ bản chính chỉnh sửa được và tạo bản bàn giao cho ngữ cảnh đích.

Với symbol tái sử dụng, hướng dẫn sprite SVG trình bày phía sử dụng tham chiếu. Bài này tập trung vào điều bước tối ưu có thể thay đổi trước khi nơi sử dụng nhận tệp.

Tái hiện điểm tham chiếu CSS ngoài bị hỏng

Dùng thư mục thử nghiệm trống có Node.js và npm. Lưu hình minh họa viết thủ công này thành input.svg, bao gồm xuống dòng cuối. Đây là mẫu thử cấu hình, không phải kết quả chuyển đổi PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

Cài đúng phiên bản dùng cho ví dụ này, rồi tạo tệp đầu ra mới:

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

Chạy trong thư mục sạch để svgo.config.mjs có sẵn không cung cấp cài đặt bất ngờ. Kho mã SVGO chính thức mô tả tên tệp đầu ra riêng và tải cấu hình. Với bản dựng dự án, giữ phiên bản và cấu hình trong quản lý phiên bản để nâng cấp là thay đổi có chủ ý.

Mở default.svg dưới dạng văn bản. Hình tròn vẫn có màu san hô, nhưng ID badge-accent đã mất. ID đó không được tham chiếu bên trong tài liệu SVG. Tài liệu cleanupIds giải thích plugin xóa ID không dùng và rút ngắn ID được tham chiếu. Bộ chọn của trang bên ngoài nằm ngoài đầu vào của mẫu thử này.

Để thấy hệ quả, đặt mã SVG trực tiếp trong trang HTML với kiểu này ở ngoài SVG:

<style>
  #badge-accent { fill: #f5bf42; }
</style>

Dùng một bản cho mỗi trang trong phép thử này. Mặt trời của SVG gốc trở thành vàng vì bộ chọn khớp. Mặt trời tối ưu mặc định giữ màu san hô vì thiếu ID. Tải một trong hai tệp qua phần tử img sẽ là phép thử khác: trang chứa ảnh không chọn được hình bên trong SVG như một phần của cùng tài liệu.

Giữ điểm tham chiếu, rồi lặp lại phép thử

Lưu nội dung này thành svgo.config.mjs trong cùng thư mục:

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

Giờ ghi bản sao khác:

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

Phần ghi đè tắt riêng plugin này trong khi giữ phần còn lại của bộ cấu hình mặc định. Nó là điểm bắt đầu cho phụ thuộc ID được minh họa. Nó không phải cấu hình an toàn phổ quát cho hình tùy ý, chuyển động, quan hệ trợ năng hay cấu trúc riêng của ứng dụng.

Chúng tôi chạy các lệnh trên trong thư mục sạch và độc lập chạy cấu hình tương đương qua API JavaScript của SVGO 4.1.0. Đầu ra CLI và API giống hệt từng byte, không thêm xuống dòng cuối vào tệp đã tối ưu. Sau đó chúng tôi hiển thị mỗi kết quả trong tài liệu HTML riêng với cùng quy tắc CSS ngoài. Trình duyệt báo các kết quả này:

Đầu ra giữ ID tiết kiệm 156 byte, khoảng 35,7% nguồn này. Nó lớn hơn đầu ra mặc định 18 byte và giữ hành vi chúng tôi cần. Khoảng trắng, kiểu xuống dòng, phiên bản và định dạng đầu ra có thể đổi số byte của bạn.

Cả ba bản giữ viewBox="0 0 160 160" trong phép thử này. Chúng tôi kiểm tra kết quả nhìn thấy và màu tô được trình duyệt tính. Chúng tôi không đo thời gian truyền mạng hoặc thử mọi trình duyệt, trình chỉnh sửa, tính năng SVG hay tích hợp bản dựng.

Điều chỉnh cài đặt cho phụ thuộc cụ thể

Nếu chỉ vài ID là điểm tham chiếu công khai, cleanupIds cũng có tùy chọn preserve và preservePrefixes. Dùng khi bạn có thể nêu tên phụ thuộc, rồi lặp lại cùng phép thử phía sử dụng. Nếu nhiều SVG được nội tuyến cùng nhau, cũng kiểm tra ID trùng. Giữ ID đã trùng không làm nó duy nhất; đổi tên một ID đòi hỏi cập nhật nơi sử dụng.

Kiểu hoặc tập lệnh bên trong SVG có thể đổi hành vi công cụ tối ưu. Tài liệu cleanupIds mô tả biện pháp bảo vệ hạn chế thao tác khi có các phần tử đó. Đừng suy rộng biện pháp bảo vệ sang CSS trong tài liệu khác, hoặc ép dọn ID khi chưa hiểu tham chiếu nào phụ thuộc vào chúng.

Xử lý độ chính xác số riêng. Ít chữ số thập phân hơn có thể giảm mã, nhưng mức thay đổi chấp nhận được phụ thuộc tỷ lệ tọa độ hình và kích thước hiển thị cuối. Kiểm tra khe nhỏ, góc và đường cong ở kích thước sẽ dùng hình. Kiểm tra ID thành công không nói gì về những chi tiết đó.

Giữ viewBox khi bố cục phụ thuộc hành vi thay đổi tỷ lệ của nó. Tài liệu plugin removeViewBox cảnh báo hệ quả với tỷ lệ và cắt vùng. Nó không nằm trong bộ cấu hình mặc định được tài liệu hóa dùng ở đây; thêm nó một cách tường minh là quyết định riêng. Tránh sao chép cấu hình cũ khi chưa kiểm tra nó được viết cho phiên bản và bộ cấu hình nào.

Với đường bao được đồ lại dày đặc, tối ưu mã và chủ động làm sạch nút cũng trả lời các câu hỏi khác nhau. Dùng hướng dẫn nút SVG để đánh giá hình học có cần đơn giản hóa không, và so sánh dáng bao ngoài sau chỉnh sửa. Nguồn nhỏ hơn không tự động có nghĩa đường cắt sạch hơn.

Xác minh bản bàn giao ở nơi sẽ dùng

Sau khi chọn cấu hình, đặt tệp tối ưu vào quy trình tiếp nhận thực tế. Kiểm tra trạng thái mặc định và mọi trạng thái khi di chuột, chọn, đổi giao diện hoặc chuyển động phụ thuộc vào nó. Bản xem trước tĩnh có thể bỏ sót bộ chọn chỉ chạy sau tương tác.

Với hình web, kiểm tra đầu ra bản dựng cuối cùng cùng tệp tối ưu cục bộ. Framework hoặc công cụ đóng gói có thể chạy tối ưu riêng về sau. Lặp lại phép thử nếu mã bàn giao khác.

Với bàn giao chỉnh sửa được, mở bản sao trong trình chỉnh sửa dự định và chọn các phần người nhận cần. Xác nhận chữ nhỏ, lỗ, màu riêng và cắt vùng. Giữ bản nguồn chính ngay cả khi bản web vượt qua kiểm tra.

Tối ưu tệp cũng riêng với nén truyền tải. Hướng dẫn SVGZ so với SVG minh họa vòng nén và giải nén gzip khôi phục byte nguồn giống hệt. SVGO đổi nguồn đó trước bàn giao; gzip sau đó có thể mã hóa các byte ấy. So sánh mỗi thao tác với mục tiêu riêng.

Khi vector hóa nằm trước tối ưu hóa

Nếu mất bản vector gốc và nguồn duy nhất là PNG hoặc JPG phẳng, quy trình ảnh sang vector của PerfectVector có thể giúp chuẩn bị một bản SVG. So sánh kết quả với nguồn và kiểm tra lỗ, chi tiết nhỏ, vùng riêng trước khi chấp nhận. Thêm ID hoặc nhóm trang cần sau khi kiểm tra hình, rồi tối ưu bản bàn giao và thử các điểm tham chiếu đó.

PerfectVector không phải công cụ tối ưu SVG có sẵn và không tái dựng bộ chọn của trang web. Dùng bản vector gốc nếu có. Giữ ảnh chụp raster khi chi tiết sắc độ liên tục quan trọng hơn đường bao chỉnh sửa được. Các hướng dẫn chuẩn bị vector trong blog trình bày lựa chọn nguồn đó.

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

Tắt cleanupIds có làm mọi SVG an toàn để tối ưu không? Không. Nó bảo vệ ID khỏi việc xóa và rút gọn của plugin đó, nhưng plugin khác vẫn có thể đổi kiểu, nhóm, hình hoặc dữ liệu đường dẫn. Xác minh các tính năng và tham chiếu quy trình tiếp nhận dùng.

Vì sao SVG tối ưu trông đúng riêng nhưng sai trên trang? Bản xem trước độc lập có thể không dùng CSS hoặc tập lệnh ngoài. Trong ví dụ của chúng tôi, màu san hô riêng của SVG hiển thị bình thường, còn việc đổi vàng của trang thất bại vì ID được chọn đã bị xóa.

Tôi có nên tối ưu bản chính chỉnh sửa được duy nhất không? Giữ bản chính và ghi bản bàn giao tối ưu. Tệp có thể hiển thị đúng sau tối ưu trong khi cấu trúc đối tượng kém hữu ích cho chỉnh sửa về sau.

SVGO có biến PNG thành đường dẫn vector không? Không. SVGO xử lý mã SVG. Đồ lại raster sang vector là thao tác trước đó khi hình cần hình học chỉnh sửa được và không có bản vector gốc phù hợp.

Nguồn tham khảo

1. Kho mã SVGO — Giải thích cài đặt, đầu ra dòng lệnh, tải cấu hình và API optimize.
2. Bộ cấu hình mặc định SVGO — Liệt kê plugin, mô tả ghi đè và khác biệt tích hợp.
3. SVGO cleanupIds — Mô tả xóa, rút gọn ID, tùy chọn giữ và biện pháp bảo vệ liên quan.
4. SVGO removeViewBox — Giải thích rủi ro tỷ lệ khi chủ động xóa viewBox.

Giữ bản nhỏ nhất vượt qua các bước kiểm tra hình và hành vi của bạn. Nếu tệp đầu vẫn thiếu hình học vector chỉnh sửa được, chuẩn bị SVG từ hình raster, kiểm tra các hình và giữ các điểm tham chiếu bạn thêm trước khi tối ưu bản bàn giao.