Nén định dạng SVG

Những yếu tố làm tăng kích thước file SVG

Mở tệp SVG được xuất từ Figma trong trình soạn thảo văn bản, bạn thường sẽ thấy:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Gần như mọi dòng đều có thể xóa được. Kết quả hiển thị chỉ cần svg, viewBox và path.

Những gì bộ tối ưu hóa loại bỏ

Những điểm cần lưu ý

• Đừng xóa các ID được tham chiếu bởi CSS hoặc url(#...) trong phần tô màu (fill), mặt nạ và bộ lọc. Chế độ mạnh có thể làm hỏng gradient.
• Hãy giữ viewBox. Nếu không, SVG sẽ không co giãn linh hoạt (responsive) được.
• Hãy giữ <title> nếu bạn dựa vào nó cho trợ năng (trình đọc màn hình sẽ đọc nó).
• Tránh gộp (collapse) các thực thể <use>. Bộ tối ưu hóa có thể nội tuyến chúng và làm mất đi mẫu gốc là nguồn tham chiếu duy nhất.

Khi nào nén thực sự tiết kiệm được byte

SVG là văn bản, nghĩa là gzip trên máy chủ đã loại bỏ phần lớn sự dư thừa. Một tệp SVG giảm từ 4 KB xuống 1 KB khi chưa nén có thể chỉ giảm từ 1,2 KB xuống 0,7 KB khi truyền qua mạng. Dù vậy vẫn rất đáng làm, và tệp nguồn nhỏ hơn cũng dễ đọc hơn.