Tối ưu SVG an toàn: bỏ được gì và cái gì sẽ hỏng

Tệp SVG xuất ra mang theo những gì trình duyệt không dùng, bỏ đi tiết kiệm bao nhiêu khi chưa nén và khi gzip, và năm kiểu "tối ưu" âm thầm làm hỏng icon.

Tác giả: Đào Văn ThươngĐăng 14 tháng 10, 2026 5 phút đọcCó thêm bản English
Trong bài này

Một tệp SVG lấy thẳng từ phần mềm vẽ thường lớn gấp hai, ba lần mức cần thiết. Phần lớn phần thừa bỏ đi an toàn. Tuy vậy, vài kiểu tối ưu phổ biến làm thay đổi hình ảnh trong những điều kiện bạn không thấy khi thử nhanh: icon trong sprite mất màu, hiệu ứng hover ngừng chạy, một path dài bị trôi. Bài này đi qua cả hai với một ví dụ thật, dùng công cụ tối ưu SVG, công cụ chỉ áp dụng các bước an toàn và kiểm tra kết quả từng điểm ảnh.

Tệp xuất mang theo những gì

Ví dụ có sẵn trong công cụ là một icon 48 × 48 (hình vuông bo góc có dải màu, một đường biểu đồ và một chấm tròn) được viết theo đúng cách Inkscape lưu tệp. Nó chứa:

  • khai báo XML và chú thích "Created with";
  • phần tử sodipodi:namedview của Inkscape (kích thước cửa sổ, mức thu phóng, màu trang) và các thuộc tính inkscape:label / inkscape:groupmode;
  • một khối <metadata>;
  • một dải màu không dùng, còn sót từ phiên bản trước;
  • các số như 4.0000000 và 16.0000001;
  • thuộc tính id trên mọi phần tử;
  • version="1.1" và opacity="1", đều là giá trị mặc định;
  • một nhóm lớp (layer) chỉ có thuộc tính của phần mềm vẽ.

Không thứ nào ảnh hưởng tới cách icon hiển thị trong trình duyệt.

Kết quả

Công cụ xóa một chú thích, một khối metadata, một phần tử và bốn thuộc tính của phần mềm vẽ, rút gọn mười hai thuộc tính số, bỏ hai giá trị mặc định, bốn ID không dùng, một dải màu không dùng và nhóm lớp rỗng. Tệp giảm từ 1.348 byte xuống 503, nhỏ hơn 62,7%. Khi nén gzip, dạng máy chủ web gửi đi khi bật nén, nó giảm từ 630 xuống 311 byte, nhỏ hơn 50,6%. Mức tiết kiệm khi gzip luôn nhỏ hơn khi chưa nén, vì gzip vốn đã nén phần lặp lại; đó mới là con số quan trọng với tốc độ trang.

Path M 14.000000,30.000000 L 21.000000,22.000000 L 26.000000,27.000000 L 34.000000,18.000000 thành M14 30L21 22 26 27 34 18: cùng các điểm, dạng ngắn nhất (chữ lệnh lặp lại có thể bỏ).

Bước kiểm tra điểm ảnh vẽ hai phiên bản trong trình duyệt rồi so sánh: giống hệt nhau.

Năm kiểu tối ưu làm hỏng hình

1. Xóa màu tô "mặc định" bên trong symbol. fill="black" là giá trị ban đầu nên xóa trông có vẻ an toàn. Nhưng trong sprite, phần tử <use> có thể đặt fill="red", và nội dung của symbol thừa hưởng màu đó. Path ghi rõ fill="black" vẫn đen; xóa thuộc tính đi thì nó thành đỏ. Công cụ giữ thuộc tính mặc định bên trong <defs>, <symbol> và mọi thứ mà <use> trỏ tới.

2. Xóa giá trị mặc định khi phần tử cha hoặc CSS đặt thuộc tính đó. Trong <g fill="red"><path fill="black"/></g>, giá trị "mặc định" trên path đang ghi đè nhóm. Với <style>g{fill:red}</style> điều tương tự xảy ra qua CSS. Công cụ chỉ xóa giá trị mặc định có tính kế thừa khi không phần tử cha nào đặt nó và tệp không có khối <style>.

3. Xóa ID mà CSS, hoạt ảnh hay trợ năng đang dùng. Một ID có thể được tham chiếu qua href="#icon", qua url(#gradient) trong thuộc tính hay CSS, qua bộ chọn như #dot:hover trong khối <style>, qua begin="fade.end" của hoạt ảnh, hay qua aria-labelledby. Công cụ kiểm tra tất cả. Có hai trường hợp không thể chứng minh từ chính tệp: symbol trong sprite được dùng từ trang HTML, và CSS hay JavaScript của trang nhắm tới ID bên trong SVG nhúng trực tiếp. Công cụ không bao giờ xóa ID của <symbol>, giữ mọi ID khi tệp có <script>, và cho phép tắt việc xóa ID.

4. Thu gọn khoảng trắng bên trong chữ. Giữa các thẻ, khoảng trắng vô nghĩa. Bên trong <text>Hello world</text> nó là một phần nội dung, và dưới xml:space="preserve" mỗi dấu cách đều có giá trị. Công cụ không bao giờ động tới nội dung chữ.

5. Làm tròn dữ liệu path tương đối một cách ngây thơ. Nhiều path dùng lệnh tương đối (l, c): mỗi bước tiếp nối từ chỗ bước trước kết thúc. Làm tròn từng bước đến ba chữ số thập phân thì sai số cộng dồn. Trường hợp cực đoan 1.000 bước, mỗi bước 0,0004 đơn vị: mỗi bước làm tròn thành 0 và path kết thúc hụt 0,4 đơn vị. Công cụ ghi mỗi bước là khoảng cách giữa đích chính xác và chỗ path đã làm tròn thực sự tới, nên sai số không bao giờ quá nửa đơn vị của chữ số thập phân cuối, dù path dài đến đâu. Bộ kiểm thử của công cụ kiểm tra đúng trường hợp đó.

Chọn độ chính xác

Ba chữ số thập phân an toàn cho icon trên lưới 24 hoặc 48 đơn vị: vẽ ở 512 điểm ảnh, một phần nghìn đơn vị chỉ là 0,02 điểm ảnh với icon 24 đơn vị và 0,01 với icon 48 đơn vị. Hình minh họa có viewBox vài nghìn đơn vị có thể dùng một hoặc hai chữ số. Hình có viewBox rất nhỏ (0 đến 1) cần bốn chữ số trở lên. Nếu bước kiểm tra điểm ảnh báo khác biệt, hãy tăng độ chính xác.

Những lỗi hay gặp

  • Xóa `<title>`. Đó là cách trình đọc màn hình gọi tên SVG. Hãy giữ trừ khi SVG chỉ để trang trí và đã đánh dấu aria-hidden.
  • Xóa viewBox. Thiếu nó SVG không co giãn được. Công cụ không bao giờ xóa viewBox, và thêm vào khi tệp chỉ có width, height.
  • Tin con số mà không nhìn. Hãy luôn so trước và sau; bước kiểm tra điểm ảnh của công cụ làm việc đó cho bạn.
  • Tối ưu tệp gốc. Hãy giữ tệp của phần mềm vẽ và xuất một bản đã tối ưu; dữ liệu của phần mềm là thứ giúp bạn tiếp tục chỉnh sửa.

Công thức

  1. Xuất từ phần mềm vẽ dưới dạng SVG thường.
  2. Mở trong công cụ tối ưu SVG với thiết lập mặc định: 3 chữ số thập phân, bỏ dữ liệu phần mềm và chú thích, bật xóa ID trừ khi script của trang dùng các ID đó.
  3. Xem kết quả kiểm tra điểm ảnh và dung lượng gzip.
  4. Nếu cần thêm PNG hay bộ icon, công cụ chuyển đổi SVG vẽ tệp đã tối ưu ở mọi kích thước.

Công cụ được nhắc trong bài

Về trang blog