SVGZ và SVG: Chọn tệp để chỉnh sửa hoặc bàn giao

SVGZ là tệp SVG nén bằng gzip. Giải nén sẽ khôi phục tài liệu SVG, gồm đường dẫn, màu, văn bản và mọi ảnh nhúng. Đăng ký kiểu media SVG của W3C định nghĩa .svgz là tên thay thế cho .svg.gz.

Chọn SVGZ hay SVG theo quy trình tiếp nhận. Giữ .svg thông thường khi ai đó cần mã dễ đọc hoặc ứng dụng yêu cầu định dạng đó. Dùng .svgz khi người nhận hỗ trợ và bạn có lý do giao tệp nén. Với website, kiểm tra nén HTTP trước khi đổi tên tệp: URL kết thúc bằng .svg có thể đã gửi nội dung nén.

Ví dụ dưới đây nén huy hiệu gốc 332 byte xuống 243 byte rồi khôi phục chính xác dữ liệu gốc. Đây là kết quả cho một tệp, không phải lời hứa về hình của bạn hay tốc độ trang.

Điều gì đổi khi SVG thành SVGZ?

Hướng dẫn loại tệp SVG của MDN phân biệt SVG văn bản thông thường với SVG nén gzip và giải thích cấu hình máy chủ SVGZ cần. Nếu chưa quen nội dung SVG bên trong, bắt đầu với tệp SVG chứa gì.

Bản nén là cách đóng gói hữu ích. Giữ riêng bản gốc chỉnh sửa được để kiểm tra đối tượng, sửa lỗi và xuất dạng công cụ tiếp theo cần.

Thử vòng nén và giải nén SVGZ với huy hiệu nhỏ

Hình minh họa gốc này chứa lục giác xanh mòng két, mặt trời san hô và núi màu nhạt. Lưu đoạn sau thành badge.svg trong thư mục tạm:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
  <path d="m60 78 10-16 11 16-11-5Z" fill="#a8d9d3"/>
</svg>

Trên hệ thống có gzip, cmp và wc, chạy các lệnh này trong thư mục đó. Dùng tên đầu ra mới nếu những tệp đó đã chứa công việc cần giữ.

gzip -n -c badge.svg > badge.svgz
gzip -dc badge.svgz > roundtrip.svg
cmp badge.svg roundtrip.svg
wc -c badge.svg badge.svgz roundtrip.svg

Lệnh đầu ghi bản nén và giữ nguồn. Tùy chọn -n bỏ tên tệp gốc và dấu thời gian khỏi phần đầu gzip. Lệnh thứ hai giải mã bản nén vào tệp khác. cmp kiểm tra dữ liệu, còn wc -c báo số byte.

Chúng tôi chạy chuỗi này với Apple gzip 457.140.3. Mọi lệnh thoát thành công, và cmp không tìm thấy khác biệt giữa SVG gốc và bản giải mã.

Tệp nén tiết kiệm 89 byte, khoảng 26.8% kích thước nguồn này. Khoảng trắng, kết thúc dòng, siêu dữ liệu, hình hoặc thiết lập nén khác có thể thay kết quả. So sánh byte xác lập vòng này giữ nguyên nguồn. Nó không đo thời gian truyền trình duyệt, hiệu năng kết xuất hay tương thích với ứng dụng chỉnh sửa.

Nếu chỉ cần mở SVGZ trong trình chỉnh sửa yêu cầu SVG, giải nén là thao tác liên quan. Đổi tên badge.svgz thành badge.svg vẫn để dữ liệu nén nguyên đó. Tương tự, đổi tên SVG sang SVGZ không chạy gzip.

Phân biệt nén và dọn hình

Giả sử logo được đồ lại có đường bao thô và hàng trăm điểm không cần thiết. Gzip có thể giảm kích thước lưu, nhưng giải mã trả lại những điểm đó. Dùng hướng dẫn dọn nút SVG khi vấn đề chỉnh sửa là độ phức tạp hình học. So sánh hình bao khi đơn giản hóa vì bỏ điểm có thể đổi hình.

Tối ưu mã là thao tác khác. Xóa siêu dữ liệu, viết lại số hoặc ghép hình tương thích làm thay đổi tài liệu nguồn trước khi nén. Vòng gzip giống từng byte không làm những việc đó. Nếu công cụ tối ưu cũng sửa SVG, kiểm tra đầu ra độc lập thay vì quy mọi thay đổi cho nén. Hướng dẫn cấu hình SVGO và giữ ID minh họa kiểm tra đó với huy hiệu gốc có điểm tham chiếu CSS bên ngoài biến mất dưới cấu hình mặc định.

SVG cũng có thể chứa ảnh raster. Nén tài liệu đó giữ ảnh nhúng; không tạo đường bao chỉnh sửa được quanh đối tượng trong ảnh. Chẩn đoán raster nhúng giúp phân biệt phần tử chứa ảnh với hình dựng bằng đường dẫn vector.

Những khác biệt này giúp chọn bước tiếp dễ hơn: giải nén để khôi phục mã, chỉnh sửa để đổi hình học và chỉ đồ lại khi hình raster phù hợp cần hình vector mới.

Website có thể nén phản hồi SVG thông thường

Nén HTTP độc lập với tên tệp bạn hiện trong URL. Máy chủ có thể nhận yêu cầu badge.svg và gửi biểu diễn nén của SVG đó. Hướng dẫn nén HTTP của MDN mô tả thương lượng: yêu cầu thông báo kiểu mã hóa hỗ trợ, và phản hồi xác định kiểu đã dùng. Khi biểu diễn thay đổi theo Accept-Encoding, phản hồi dùng Vary: Accept-Encoding để bộ nhớ đệm phân biệt các phiên bản.

Với phản hồi SVG mã hóa gzip, các header liên quan là:

Content-Type: image/svg+xml
Content-Encoding: gzip

Content-Type xác định media sau giải mã. Content-Encoding cho người nhận biết cách giải mã phần thân phản hồi. Tài liệu Content-Encoding của MDN giải thích khác biệt. Những header phải mô tả dữ liệu thực sự gửi; thêm Content-Encoding: gzip vào SVG không nén không làm nó được nén.

Với .svgz lưu sẵn được phục vụ như ảnh SVG, hướng dẫn máy chủ SVGZ của MDN yêu cầu kiểu media SVG và mã hóa nội dung gzip. Kiểm tra phản hồi cuối trong bảng Network của trình duyệt, gồm hành vi CDN. Tệp cục bộ mở thành công không xác minh phản hồi đó.

Trước khi thay SVG hiện có bằng SVGZ, kiểm tra phản hồi SVG thông thường đã nén chưa. So sánh phản hồi thực tế dưới cùng điều kiện, gồm trạng thái bộ nhớ đệm, thay vì so kích thước tệp SVG cục bộ với kích thước truyền mạng. Phép thử huy hiệu trên không thực hiện so sánh web đó.

Gửi tệp ứng dụng tiếp theo dùng được

Với bàn giao chỉnh sửa được, hỏi người nhận nhập định dạng nào. Nếu nhận SVG nhưng từ chối SVGZ, cung cấp SVG giải nén và thử bản đó. Giải nén không thêm hỗ trợ cho tính năng SVG mà bản thân ứng dụng không hiểu.

Mở tệp được chấp nhận trong ứng dụng dự định và kiểm tra đối tượng. Kiểm tra chữ, cắt, ảnh nhúng, màu và chi tiết nhỏ nhất quan trọng. Giữ kiểm tra đó riêng với giải mã tệp: cùng dữ liệu nguồn vẫn có thể được ứng dụng hỗ trợ tính năng khác nhau diễn giải khác nhau.

Nếu tệp trống, trước hết xác định nó đã giải mã thành SVG đọc được chưa. Sau đó kiểm tra tài liệu và ngữ cảnh hiển thị bằng hướng dẫn xử lý SVG trắng. Nén lặp lại không sửa màu vô hình, nội dung thiếu hay khung vẽ không phù hợp.

Giữ bản gốc, bản bàn giao và ghi chú ngắn nêu công cụ nhận. Cách đó hữu ích hơn chọn tệp cục bộ nhỏ nhất trước khi biết sẽ gửi đi đâu.

Khi nguồn vẫn cần đường dẫn vector

Nếu mất bản vector gốc và chỉ còn logo 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 chỉnh sửa được để đánh giá. So bản xem trước với nguồn, kiểm tra lỗ và vùng riêng rồi mở tệp tải trong trình chỉnh sửa dự định. Chỉ chọn nén sau khi chấp nhận hình.

Không cần PerfectVector để giải nén SVGZ hiện có. Dùng giải nén cho nhiệm vụ đó. Giữ ảnh chụp hoặc hiệu ứng vẽ ở dạng raster khi giữ đúng diện mạo, và dùng bản vector gốc hiện có khi có. Các hướng dẫn định dạng và chỉnh sửa trên blog trình bày lựa chọn nguồn trước đóng gói.

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

SVGZ có chất lượng cao hơn SVG không? Không. Nén gzip thay đổi dạng biểu diễn khi lưu trữ. Giải nén đúng khôi phục nguồn SVG; không cải thiện đường dẫn, màu hay ảnh nhúng.

Làm sao chuyển SVGZ thành SVG? Giải nén bằng công cụ xử lý gzip, rồi lưu SVG giải mã. Ví dụ, gzip -dc badge.svgz > roundtrip.svg ghi bản đã giải mã. Chỉ đổi phần mở rộng không thực hiện thao tác đó.

SVGZ luôn làm website nhanh hơn phải không? Phần mở rộng không kéo theo lợi ích tốc độ cố định. Phản hồi SVG thông thường có thể đã dùng nén HTTP. Kiểm tra header phản hồi thực, dữ liệu truyền, điều kiện bộ nhớ đệm và hành vi trang.

Nén SVG có giảm số nút không? Không. Gzip giữ nguồn qua giải mã. Đơn giản hóa đường dẫn hay tối ưu SVG khác là thao tác riêng cần kiểm tra hình riêng.

Nguồn tham khảo

1. W3C — Đăng ký kiểu media SVG — Định nghĩa SVGZ là SVG nén gzip và quan hệ với SVG.GZ.
2. MDN — Bắt đầu với SVG — Phân biệt dạng tệp và mô tả header phản hồi SVGZ.
3. MDN — Content-Encoding — Giải thích giải mã và quan hệ giữa mã hóa với kiểu media.
4. MDN — Nén trong HTTP — Trình bày thương lượng nén phản hồi và biến thể bộ nhớ đệm.

Chọn tệp bàn giao phù hợp công cụ nhận rồi xác minh hình đã giải mã. Nếu bắt đầu từ logo raster cần hình chỉnh sửa được, hãy chuẩn bị một bản SVG để đánh giá và kiểm tra đường dẫn trước khi quyết định cách nén.