Khi nào tôi nên sử dụng SVG hoặc SVGZ cho đồ họa web của mình?

Từ sự hiểu biết của tôi,

SVGZ là loại tệp nén của SVG. Tôi thích sử dụng hình ảnh SVG và đã có nhiều kinh nghiệm với chúng.

Tất cả những lần tôi sử dụng chúng, tôi chưa bao giờ có một đồ họa vượt quá vài trăm kilobyte.

Tôi sử dụng SVG cho đồ họa đáp ứng trong khi tạo các trang web phản hồi. Tôi cũng sử dụng chúng vì phong cách thiết kế yêu thích của tôi là đồ họa dựa trên vector. Thế mạnh thiết kế mạnh nhất của tôi là vẽ tranh minh họa, đặc biệt là khi nói đến thiết kế đồ họa.

Một lý do khác mà tôi sẽ sử dụng đồ họa SVG là do dễ dàng hoạt hình các yếu tố nhất định của đồ họa, như cánh tay, chân, v.v.

Đặc biệt là các yếu tố nền, như một thành phố trải dài trên toàn bộ trang trong khi tôi làm động một số ánh sáng nhấp nháy và vân vân.

Nếu tệp được nén, nó có bị mất mã SVG không vì vậy tôi không thể làm động nó?

Có bất kỳ lý do nào tôi nên sử dụng một SVGZ không chỉ là một SVG?

Cập nhật

Chà, tôi quyết định chỉ tạo một SVG và SVGZ để xem họ đã hành động như thế nào với web kể từ khi tôi phát hiện ra tác phẩm cổ xưa của mình CS3 có thể cứu được SVGZ!

Sau khi thử nghiệm, tôi gặp phải một vấn đề rất bất ngờ với loại tệp SVGZ. (Đã thử nghiệm trên Chrome, Firefox và IE) Nếu bạn truy cập URL trực tiếp của hình ảnh, bạn sẽ gặp lỗi. Tôi giả sử bạn không thể truy cập mã SVG trên các loại tệp này nhưng sau khi thực hiện một thao tác, nó thậm chí dường như không hiển thị hình ảnh.

Là những thứ vô dụng cho web?

.svg

.svgz

NHANH CHÓNG

Hỗ trợ cho Svg nén sẽ thay đổi tùy theo trình duyệt, nhưng bạn cần định cấu hình máy chủ để gắn cờ chính xác tệp Svgz với thông tin về mã hóa của nó để thông báo rõ ràng cho trình duyệt cách giải mã khi nhận.

Phản hồi của máy chủ đối với svgz cần được cấu hình để bao gồm "Mã hóa nội dung: gzip"

svg     Content-Type: image/svg+xml

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

Đối với máy chủ web Apache, điều này có thể đạt được thông qua tệp .htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Lưu ý rằng cho dù bạn nén nó khi đang di chuyển hay nướng nó trước khi bạn đặt nó trên máy chủ, mã hóa nội dung nên được gợi ý. Đối với các tài sản như thế này, tôi nghĩ tốt hơn là nên nén trước nó. Nếu không, bạn đang ăn CPU máy chủ cho mỗi yêu cầu của tệp. Điều này có vẻ không nhiều, nhưng đây là loại vấn đề không được tối ưu hóa, ví dụ như trang web chăm sóc sức khỏe của Hoa Kỳ.

Đây có thể không phải là câu trả lời mà bạn mong đợi, nhưng đối với web, không thực sự cần thiết để sử dụng bất kỳ tệp SVGZ nào. Lý do là một tệp SVGZ chỉ đơn giản là một SVG đã được giải nén trước.

Các máy chủ web hiện đại có thể tự thực hiện Gzipping này trước khi phân phát tài sản (xem câu trả lời này trên StackOverflow để biết thêm thông tin), vì vậy nếu bạn có một SVG 300KB là 50KB khi được nén, nó sẽ tự động tương tự khi được máy chủ web nén. Vì vậy, nó sẽ không xuống 300KB, nó sẽ là 50KB và sau đó sẽ không bị nén bởi trình duyệt.