SVGZとSVG：編集や受け渡しに合う形式を選ぶ
実際のgzip圧縮と復元でSVGZとSVGを比較します。保持される内容、Webのヘッダー、エディターや受け取り手に渡すファイルを確認します。
目次
SVGZはgzipで圧縮したSVGファイルです。展開すると、パス、色、文字、埋め込み画像を含むSVG文書を復元できます。W3CのSVGメディアタイプ登録は、.svgzを.svg.gzの別名と定義しています。
SVGZとSVGは受け取り側のワークフローに合わせて選びます。読みやすいマークアップが必要な場合や、アプリケーションがその形式を要求する場合は、通常の.svgを保持します。相手が対応し、圧縮ファイルを渡す理由がある場合は.svgzを使います。Webサイトではファイル名を変える前にHTTP圧縮を確認してください。URLが.svgで終わっていても、すでに圧縮した内容を送信している場合があります。
以下の例では、独自の332バイトのバッジを243バイトに圧縮し、元のバイト列を完全に復元します。一つのファイルの結果であり、自身のアートワークやページ速度についての保証ではありません。
SVGをSVGZにすると何が変わるか
| 問い | SVG | SVGZ |
|---|---|---|
| 保存されるもの | テキストのSVGマークアップ | gzip圧縮したSVGマークアップ |
| テキストエディターで直接読めるか | はい | 先に展開します |
| この形式を選ぶとパスが単純化されるか | いいえ | いいえ |
| 埋め込みビットマップがベクター形状になるか | いいえ | いいえ |
| 受け取り側に必要な対応 | ファイルで使われているSVG機能 | gzipの展開と、ファイルで使われているSVG機能 |
| 自動的にWeb転送量が小さくなるか | すでにHTTP圧縮している場合があります | 実際の配信レスポンスを比較します |
MDNのSVGファイル形式のガイドは、通常のテキストSVGとgzip圧縮したSVGを区別し、SVGZに必要なサーバー設定を説明しています。文書自体になじみがなければ、SVGファイルに含まれる内容から確認してください。
圧縮コピーは受け渡しに役立ちます。オブジェクトの確認、修正、次のツールが必要とする形式への書き出しのために、編集可能なマスターは別に保持します。
小さなバッジでSVGZへの圧縮と復元を試す
この独自のイラストは青緑色の六角形、サンゴ色の太陽、淡い色の山で構成します。作業用フォルダーに以下をbadge.svgとして保存します。
<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>gzip、cmp、wcがあるシステムで、そのフォルダー内で次を実行します。既存ファイルに保持すべき作業がある場合は、新しい出力ファイル名を使ってください。
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最初のコマンドは元データを保持して圧縮コピーを作成します。-nはgzipヘッダーから元のファイル名とタイムスタンプを省きます。2番目は圧縮コピーを別のファイルへ展開します。cmpはバイト列を比較し、wc -cはバイト数を表示します。
この手順をApple gzip 457.140.3で実行しました。すべてのコマンドが正常終了し、cmpは元のSVGと展開したSVGに差がないことを確認しました。
| このテストのファイル | バイト数 | 確認できること |
|---|---|---|
badge.svg | 332 | 元データ |
badge.svgz | 243 | 圧縮した表現 |
roundtrip.svg | 332 | 元のバイト列と同一の復元データ |
圧縮で89バイト、元のサイズの約26.8%を削減しました。空白、改行、メタデータ、アートワーク、圧縮設定が異なれば結果も変わります。バイト比較はこの圧縮と復元で元データが保持されたことを示します。ブラウザーの転送時間、描画性能、編集アプリケーションとの互換性は測定していません。
SVGを要求するエディターでSVGZを開きたいだけなら、必要なのは展開処理です。badge.svgzをbadge.svgに改名しても、圧縮したバイト列はそのままです。同様に、SVGをSVGZに改名してもgzipは実行されません。
圧縮とアートワークの整理を区別する
トレースしたロゴに粗い輪郭と数百の不要な点があるとします。gzipは保存サイズを減らすかもしれませんが、展開すれば同じ点が戻ります。編集上の問題が形状の複雑さなら、SVGのノード整理ガイドを使います。点を減らすと形が変わる場合があるので、単純化中にシルエットを比較してください。
マークアップの最適化も別の操作です。メタデータの削除、数値の書き換え、互換性のある図形の結合は、圧縮前に元の文書を変更します。バイト列が同一になるgzipの圧縮と復元は、これらを行いません。最適化ツールがSVGも編集する場合は、すべての変化を圧縮のせいにせず、出力を独立して確認します。SVGOの設定とID保持のガイドでは、標準プリセットによって外部CSSの接続先が失われる独自のバッジで、この確認を示しています。
SVGはラスター画像を含む場合もあります。文書を圧縮しても埋め込み画像が保持され、写真内の物体の周りに編集可能な輪郭が作られるわけではありません。埋め込みラスターの診断で、画像のコンテナーとベクターパスで作ったアートワークを区別できます。
この区別があれば、次の操作を選びやすくなります。マークアップの復元には展開、形状の変更には編集、適したラスターに新しいベクター形状が必要な場合だけトレースを使います。
通常のSVGレスポンスもWebサイトで圧縮できる
HTTP圧縮はURLに表示されるファイル名と独立しています。サーバーはbadge.svgへの要求に対し、そのSVGの圧縮表現を送信できます。MDNのHTTP圧縮ガイドでは、要求側が対応するエンコーディングを示し、レスポンス側が使った方式を示す交渉を説明しています。Accept-Encodingで表現が変わる場合は、キャッシュが各版を区別できるようレスポンスにVary: Accept-Encodingを使います。
gzipでエンコードしたSVGレスポンスに関係するヘッダーは次のとおりです。
Content-Type: image/svg+xml
Content-Encoding: gzipContent-Typeは展開後のメディアを示します。Content-Encodingはレスポンス本文の展開方法を受け取り側に伝えます。MDNのContent-Encodingリファレンスはこの違いを説明しています。ヘッダーは実際に送信するバイト列を表す必要があります。未圧縮のSVGにContent-Encoding: gzipを付けても圧縮されません。
保存済みの.svgzをSVG画像として配信する場合、MDNのSVGZサーバー設定はSVGのメディアタイプとgzipのコンテンツエンコーディングを求めています。CDNの動作も含め、ブラウザーのNetworkパネルで最終レスポンスを確認します。ローカルで正常に開けても、そのレスポンスを検証したことにはなりません。
既存のSVGをSVGZに置き換える前に、通常のSVGレスポンスがすでに圧縮されているか確認します。ローカルSVGのサイズとネットワーク転送量を比較するのではなく、キャッシュ状態を含む同じ条件下で実際のレスポンスを比較してください。上のバッジのテストは、このWeb上の比較を行っていません。
次のアプリケーションが使えるファイルを渡す
編集用の受け渡しでは、相手がインポートする形式を確認します。SVGは受け付けるがSVGZは拒否する場合、展開したSVGを渡し、そのコピーを試します。アプリケーション自体が理解できないSVG機能への対応は、展開しても追加されません。
採用したファイルを目的のアプリケーションで開き、オブジェクトを確認します。文字、クリッピング、埋め込み画像、色、重要な最小の細部を調べます。この確認はファイルの展開と分けて行います。同一の元のバイト列でも、対応機能が異なるアプリケーションでは解釈が変わることがあります。
空白に見える場合は、まず読み取れるSVGに展開できたかを確認します。その後、空白のSVGのトラブルシューティングで文書と表示環境を調べます。圧縮を繰り返しても、見えない塗り、不足した内容、不適切なキャンバスは修復できません。
マスター、受け渡し用コピー、受け取り側のツール名の簡単なメモを保持します。行き先を知らずに最小のローカルファイルを選ぶより役立ちます。
元データにベクターパスが必要な場合
ベクターマスターがなく、平らなPNGやJPGのロゴしか残っていない場合は、PerfectVectorの画像からベクターへのワークフローで編集可能なSVG候補を準備できます。プレビューと元画像を比較し、穴と別々の領域を確認して、ダウンロードしたファイルを目的のエディターで開きます。アートワークを採用した後で圧縮を選びます。
既存のSVGZの展開にPerfectVectorは必要ありません。その作業には展開を使います。写真や描画効果は、意図した外観を保ちやすければラスターのままにし、既存のベクターマスターがあれば使ってください。ブログの形式と編集のガイドでは、格納前の元データの選択を扱っています。
よくある質問
SVGZはSVGより高品質ですか？ いいえ。gzip圧縮は保存する表現を変えます。正しく展開すればSVGの元データが戻り、パス、色、埋め込み画像の品質が改善されるわけではありません。
SVGZをSVGにするにはどうしますか？
gzip対応ツールで展開し、展開後のSVGを保存します。たとえばgzip -dc badge.svgz > roundtrip.svgは展開コピーを書き出します。拡張子の変更だけではこの処理は行われません。
SVGZにするとWebサイトは必ず速くなりますか？ 拡張子から一定の速度向上は決まりません。通常のSVGレスポンスもすでにHTTP圧縮している場合があります。実際のレスポンスヘッダー、転送バイト数、キャッシュ条件、ページの動作を確認してください。
SVGの圧縮はノード数を減らしますか？ いいえ。gzipは展開を通して元データを保持します。パスの単純化やその他のSVG最適化は別の操作で、それぞれアートワークの確認が必要です。
参考資料
- W3C — SVGメディアタイプ登録 — SVGZをgzip圧縮したSVGと定義し、SVG.GZとの関係を示します。
- MDN — SVGの入門 — ファイル形式の違いとSVGZレスポンスヘッダー。
- MDN — Content-Encoding — 展開と、エンコーディングとメディアタイプの関係。
- MDN — HTTPの圧縮 — レスポンス圧縮の交渉とキャッシュの区別。
受け取り側のツールに合うファイルを渡し、展開後のアートワークを検証します。編集可能な形状が必要なラスターロゴから始める場合は、SVGの候補を準備し、圧縮方法を決める前にパスを確認してください。
