ベクタ画像を圧縮してファイルサイズを軽量化する。
成果物
前回まで
SVG画像ファイルを作成した。テキストエディタで編集して無駄なデータを手動で削除した。
SVGZ形式
SVGZはSVGをGzip(Zlib/Deflate)圧縮したファイル形式である。
圧縮・展開
Linuxコマンドのgzip,gunzipを使ってSVGとSVGZの相互変換をする。
1. 圧縮（SVG→SVGZ）
gzip -c src.svg > dst.svgz
2. 展開（SVGZ→SVG）
gunzip -c dst.svgz > src.svg
3. 表示確認
1. inkview
私の環境ではinkviewツールにで表示確認した。
inkview dsv.svgz
inkviewはinkscapeをインストールした時の付属品。
もちろん本体のinkscapeでも表示・編集できる。
inkscape dsv.svgz
ファイルサイズ一覧
| No | 状態 | ファイルサイズ |
|---|---|---|
| 1 | Inkscape SVG | 4219 B |
| 2 | プレーン SVG | 2929 B |
| 3 | 最適化 SVG | 1471 B |
一応、InkscapeでもSVGZ形式で出力できるが、最適化SVGではできない上に、それでも無駄データが付与しているため使わない。念の為ファイルサイズを記述しておく。
| No | 状態 | ファイルサイズ |
|---|---|---|
| 4 | Inkscape SVGZ | 1618 B |
| 5 | プレーン SVGZ | 1199 B |
最適化SVGを以下の方法で減量する。
| No | 状態 | ファイルサイズ |
|---|---|---|
| 6 | SVGOMG | 1010 B |
| 7 | 手動編集 | 610 B |
| 8 | SVGZ | 347 B |
元4219Bが347Bに圧縮できた。元の約1/12(8%)、92%OFF。
4219:347=1:12.1585014409 347:4219=0.0822469779569
ファイルサイズは以下コマンドで調べた。
FILE=dst.svgz wc -c "$FILE" | awk '{print $1}'
問題
ブラウザでSVGZを表示できない。
ブラウザの標準機能だけではSVGZを表示できないらしい。少なくとも私の環境（Chrome 92）では表示されなかった。
Inkviewでは表示されるため、SVGZファイル自体は正常のはず。ブラウザの表示機能に欠陥があると思われる。
でも、それじゃ困る。主な用途はHTML文書内における表示なのだから。どうしたものか。
