Cách công cụ Nén SVG hoạt động
Một tệp SVG lưu từ Illustrator, Inkscape, Figma hoặc Sketch thường chứa nhiều thứ mà trình duyệt không bao giờ dùng: siêu dữ liệu của trình chỉnh sửa, chú thích, lớp ẩn, giá trị mặc định được ghi đầy đủ và tọa độ có từ tám chữ số thập phân trở lên. Công cụ này bỏ tất cả những thứ đó bằng SVGO, công cụ tối ưu SVG mã nguồn mở mà hầu hết công cụ build và ứng dụng thiết kế dựa vào, nên hình vẽ trông vẫn như cũ nhưng tệp nhỏ hơn.
SVGO chạy nhiều lượt qua tệp. Công cụ gộp và rút gọn các đường (path), làm tròn số theo độ chính xác bạn chọn, gộp các nhóm không cần thiết, bỏ các phần tử rỗng và viết lại màu ở dạng ngắn nhất. viewBox được giữ lại, nên tệp SVG vẫn co giãn được đến mọi kích thước, và các ID mà những phần khác của tệp tham chiếu đến được rút gọn cùng với tham chiếu được cập nhật, nên gradient và mask vẫn hoạt động.
Độ chính xác là cài đặt duy nhất quan trọng. Cao giữ ba chữ số thập phân, không thể nhận ra ở bất kỳ kích thước thông thường nào và là lựa chọn an toàn cho biểu tượng và logo. Cân bằng giữ hai chữ số, và Nhỏ nhất giữ một chữ số, phù hợp với hình minh họa lớn, nơi một phần mười đơn vị nhỏ hơn nhiều so với một pixel, nhưng có thể làm méo các biểu tượng rất nhỏ. Nếu kết quả trông không ổn, hãy nén lại bản gốc ở độ chính xác cao hơn.
Công cụ tối ưu, khoảng 200 KB, được tải vào lần đầu bạn nhấn nút. Các tệp SVG của bạn được đọc và viết lại ngay trong thẻ này và không bao giờ được tải lên, điều quan trọng với logo chưa công bố và tác phẩm của khách hàng.
Giải thích các tùy chọn của công cụ Nén SVG
| Cao | Ba chữ số thập phân. An toàn cho biểu tượng, logo và mọi thứ nhỏ. |
|---|---|
| Cân bằng | Hai chữ số thập phân. Phù hợp với hầu hết hình minh họa. |
| Tệp nhỏ nhất | Một chữ số thập phân. Dành cho tác phẩm lớn; hãy kiểm tra các biểu tượng nhỏ sau đó. |
| Được giữ lại | viewBox, các ID được tham chiếu, gradient, mask và hình thức của hình vẽ. |
| Bị bỏ đi | Siêu dữ liệu của trình chỉnh sửa, chú thích, phần tử ẩn và rỗng, độ chính xác thừa. |
Khi nào nên dùng
Nén SVG trước khi đưa biểu tượng và logo lên website, nơi mỗi kilobyte đều làm trang tải lâu hơn, trước khi nhúng trực tiếp tệp SVG vào HTML hoặc một component React, trước khi commit tài nguyên thiết kế vào kho mã nguồn, hoặc khi biểu mẫu tải lên giới hạn dung lượng tệp.
Giữ tệp SVG gốc, chỉnh sửa được, cho ứng dụng thiết kế của bạn. Việc tối ưu bỏ dữ liệu của trình chỉnh sửa như tên lớp và đường gióng, nên hãy mở lại bản gốc khi bạn cần chỉnh sửa tác phẩm.
Về công cụ tối ưu SVG
SVGO, viết tắt của SVG Optimizer, là công cụ mã nguồn mở đứng sau việc tối ưu SVG trong hầu hết công cụ build web, và trong các ứng dụng thiết kế có tùy chọn xuất tối ưu. Công cụ phân tích tệp SVG thành một cây, chạy một loạt bước dọn dẹp đã được kiểm chứng kỹ trên cây đó rồi ghi lại, lặp lại cho đến khi không tiết kiệm thêm được gì. Mọi bước được thực hiện ở đây đều giữ cho hình vẽ trông như cũ, đó là lý do các thiết lập mặc định của công cụ được tin dùng trong môi trường thực tế. Phiên bản dùng trên trang này chạy hoàn toàn trong trình duyệt, được tải từ CDN jsDelivr ở lần đầu bạn dùng công cụ.
Khắc phục sự cố công cụ Nén SVG
"đã được tối ưu; trả về không thay đổi"
Tệp SVG đã được tối ưu, nên không thể bỏ thêm gì mà không làm thay đổi tệp. Tệp gốc được trả lại cho bạn.
Một phần hình vẽ bị dịch chuyển hoặc bị méo
Các biểu tượng rất nhỏ có thể bị lệch ở độ chính xác thấp. Hãy nén lại bản gốc với độ chính xác Cao.
"không phải là tệp SVG"
Tệp không chứa hình vẽ SVG. Các tệp xuất dưới dạng SVG nhưng chỉ bọc một ảnh bitmap cũng không thể nhỏ đi nhiều; thay vào đó hãy nén ảnh bên trong.
Cách dùng công cụ Nén SVG, từng bước
- Nhấn "Chọn tệp SVG" hoặc kéo tệp vào ô.
- Đặt tùy chọn nếu cần; cài đặt mặc định phù hợp với hầu hết mục đích.
- Nhấn "Nén SVG". Mọi việc diễn ra trên thiết bị của bạn.
- Lưu kết quả bằng nút tải xuống.
Làm việc này trực tuyến có an toàn không?
Với hầu hết công cụ trực tuyến, "trực tuyến" nghĩa là tệp của bạn được tải lên máy chủ của một công ty, xử lý ở đó và được giữ lại một thời gian trước khi bị xóa. Ở đây thì không. Trang tải mã của công cụ về trình duyệt của bạn, và tệp được đọc và xử lý ngay trong thẻ trên thiết bị của bạn. Tệp không bao giờ được gửi đến TapToConvert hay bất kỳ ai khác.
Bạn có thể tự kiểm chứng: khi trang và bộ máy của nó đã tải xong, hãy tắt Wi-Fi và công cụ vẫn hoạt động. Điều đó cũng có nghĩa là không có hàng chờ, không giới hạn hằng ngày và không có mức trần kích thước tệp do máy chủ đặt ra; giới hạn duy nhất là bộ nhớ trình duyệt cấp cho một thẻ.
Câu hỏi thường gặp về nén SVG
Nén có làm thay đổi hình thức tệp SVG của tôi không?
Ở độ chính xác Cao, không có thay đổi nào nhìn thấy được. Độ chính xác thấp hơn làm tròn tọa độ nhiều hơn, có thể làm méo các chi tiết rất nhỏ.
Tệp sẽ nhỏ đi bao nhiêu?
Tệp SVG xuất từ ứng dụng thiết kế thường nhỏ đi 30 đến 70 phần trăm. Tệp SVG đã được tối ưu thì nhỏ đi rất ít hoặc không nhỏ đi.
Tôi có còn chỉnh sửa được tệp SVG đã nén không?
Có, nhưng tên lớp, đường gióng và cài đặt của trình chỉnh sửa đã mất. Hãy giữ bản gốc để chỉnh sửa.
Tệp của tôi có bị tải lên không?
Không. SVGO chạy trong trình duyệt của bạn, nên tệp SVG không bao giờ rời khỏi thiết bị của bạn.
Có miễn phí không?
Có. Không cần đăng ký, không hình mờ và không giới hạn sử dụng. TapToConvert được duy trì nhờ quảng cáo.
Tệp của tôi có bị tải lên không?
Không. Mọi thứ diễn ra trong thẻ trình duyệt, trên chính thiết bị của bạn.