SVGファイルは、エディタのメタデータや過剰な小数、複雑なパスによって重くなることがよくあります。このチェックリストは、見た目を壊さずにサイズを削減するのに役立ちます。
1) 構造上の余分を除去する
- メタデータ、コメント、エディタ固有の名前空間を取り除きます。
- 冗長なグループをフラット化し、未使用のdefs、マスク、クリップを削除します。
- 本番で描画されない非表示レイヤーを削除します。
2) サイズに合わせてジオメトリを調整する
- UIのスケールに合わせて、パス精度を安全な小数しきい値まで下げます。
- 互換性のあるパスを結合し、可能な場合は複雑な曲線を簡略化します。
- 繰り返し使うアイコンにはシンボル/スプライトを使い、ペイロードの重複を避けます。
3) 実環境で検証する
- 対象の背景色とDPRレンジでアイコンをテストします。
- 主要画面で前後を比較し、微妙な視覚リグレッションを検出します。
- 削減できたバイト数を記録し、CIで上限を適用します。