SVGファイルを圧縮

SVG（Scalable Vector Graphics）はピクセルでできていません。図形・パス・色を数学的な命令として記述する、XMLで書かれたテキストファイルです。だからこそSVGのロゴはファビコンから看板まであらゆるサイズで完璧に鮮明で、Web上のアイコン・ロゴ・イラストの定番形式なのです。ラスターの格子ではなくコードなので、SVGの圧縮とはそのコードを掃除することであり、視覚的なディテールを捨てることではありません。つまり節約は実質的に画質の犠牲ゼロで手に入ります。

Illustrator・Figma・SketchなどのデザインツールはSVGを技術的には正しく、しかし雑然としたまま書き出します。数十個のアイコンをページにインライン展開すると、このオーバーヘッドはすぐに積み上がります：

• ブラウザが無視するエディタのメタデータ・コメント・名前空間
• 座標の過剰な小数精度（2桁で足りるところに10桁）
• 隠れたレイヤー・空のグループ・未使用の定義
• 簡略化できる冗長な属性やインラインスタイル
• 人間向けの空白とインデント——ブラウザには不要

MiCompressはビルドツールのようにSVGを縮小します。エディタの残骸とコメントを取り除き、座標を妥当な精度に丸め、冗長な属性を畳み、隠れた要素や空要素を削除し、不要な空白を絞り出します。これらの変更はどれも実際の図形には触れず、書き方だけを変えるため、レンダリング結果は目にはバイト単位で同一です。結果はより小さくクリーンなSVGで、レンダリングが速くなり、HTMLやCSSへのインライン展開も容易になります。

JPG・PNG・WebPと違い、SVG圧縮は重要な意味で真に可逆です。ベクターを記述するコードを最適化しているため、グラフィックは無限に拡大でき、どのズームレベルでもピクセルパーフェクトに見えます。品質スライダーも天秤にかけるトレードオフもありません。縮むのはファイルの文字数だけで、ページ読み込みのたびにダウンロードされる資産にとって、それこそが望むものです。

ロゴ・アイコン・シンプルなイラストでは、SVGはほぼ常にラスター形式に勝ります。たいてい小さく、常に鮮明で、CSSでスタイルもアニメーションも可能です。PNGやWebPに頼るのは、画像が写真であるか、きれいなベクターパスに還元できない複雑で絵画的なディテールを持つ場合だけにしましょう。まだアイコンをPNGで書き出しているなら、縮小済みSVGへの切り替えで通常は重さが減り、高解像度画面でのにじみも消えます。