WebグラフィックにSVGまたはSVGZを使用する必要があるのはいつですか？

私の理解から、

SVGZは、SVGの圧縮ファイルタイプです。私はSVG画像の使用が大好きで、SVG画像を多く使用しました。

私がそれらを使用したすべての時間で、私は数百キロバイトを超えるグラフィックを持ったことがありませんでした。

レスポンシブWebサイトの作成中に、レスポンシブグラフィックスにSVGを使用します。私のお気に入りのデザインスタイルはベクターベースのグラフィックなので、私もそれらを使用します。私の最も強いデザインの強みは、特にグラフィックデザインに関してはイラストレーターです。

SVGグラフィックを使用するもう1つの理由は、腕や脚など、グラフィックの特定の要素を簡単にアニメーション化できることです。

特に、ページの全体にまたがる都市のような背景要素は、ライトのちらつきなどをアニメーション化します。

ファイルが圧縮されている場合、SVGコードが失われるため、アニメーション化できませんか？

SVGだけでなくSVGZを使用する理由はありますか？

更新

古代のCS3がSVGZを保存できることを知ったので、SVGとSVGZを作成して、それらがWebでどのように動作するかを確認することにしました。

テスト後、SVGZファイルタイプで非常に予期しない問題が発生しました。（Chrome、Firefox、およびIEでテスト済み）画像の直接URLにアクセスすると、エラーが発生します。これらのファイルタイプのSVGコードにアクセスできないと仮定していますが、フィドルを作成した後、画像を表示することさえないようです。

これらはウェブにとって役に立たないのですか？

.svg

.svgz

JSFIDDLE

圧縮されたsvgのサポートはブラウザによって異なりますが、エンコードに関する情報でsvgzファイルに適切にフラグを立て、受信時にブラウザにデコードする方法を明示的に指示するようにサーバーを構成する必要があります。

svgzのサーバー応答は、「Content-encoding：gzip」を含むように構成する必要があります

svg     Content-Type: image/svg+xml

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

Apache Webサーバーの場合、これは.htaccessファイルを介して実現できます。

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

サーバーに配置する前にオンザフライで圧縮するか、焼き付けるかに関係なく、Content-encodingをヒントにする必要があります。このようなアセットの場合、事前に圧縮する方が良いと思います。それ以外の場合、ファイルのリクエストごとにサーバーのCPUを消費します。これは大したことではないように思えるかもしれませんが、これは、たとえば米国のヘルスケアWebサイトをダウンさせるような非最適化の問題です。

これはあなたが期待している答えではないかもしれませんが、Webの場合、SVGZファイルを使用する必要はありません。理由は、SVGZファイルは単にGzip圧縮されたSVGであるためです。

最新のWebサーバーは、アセットを提供する前にこのGzip圧縮を行うことができます（詳細についてはStackOverflowのこの回答を参照してください）。したがって、圧縮時に50KBの300KB SVGがある場合、Webサーバーによって自動的にGzip圧縮されるとほぼ同じになります。そのため、300 KBに達することはありません。50KBになり、ブラウザによって圧縮解除されます。