クラスター C5: 画像処理
SVG 最適化と変換のベストプラクティス
SVG は効率的ですが、エディタ書き出しのままでは余計な metadata や長い path、ずれた viewBox を抱えがちです。運用パイプラインが必要です。
最適化は安全な変換から始める
本番向きの最適化は、エディタ metadata、未使用定義、過剰精度の削除です。いきなり攻めた再構成をする必要はありません。
preset を変えるたびにアイコン位置、stroke、viewBox の整合性を検証すべきです。
変換は配信境界で行う
- ソース・オブ・トゥルースは SVG のまま保つ。
- PNG などのラスタ変換は必要な配信先だけに限定する。
- 変換後ビットマップを主資産として編集し続けない。
実用的な入出力例
入力
120KB の書き出し SVG (metadata 含む) 目的: Web アイコン + SNS プレビュー PNG
出力
最適化後 SVG は 20KB 未満 必要サイズの PNG を派生生成