SVG が重くなる主因はメタ情報、過剰な小数精度、複雑なパスです。この手順で実運用向けに最適化できます。
1) 構造のムダを削除する
- metadata、コメント、不要 namespace を削除。
- 冗長な group と未使用 defs/mask/clip を整理。
- 非表示レイヤーを削除して payload を減らす。
2) ジオメトリを調整する
- 用途に応じて小数精度を下げる。
- 視覚差が出ない範囲でパスを簡素化する。
- 再利用アイコンは sprite/symbol で重複を減らす。
3) 実環境で検証する
- 背景色と DPR 違いで表示を確認する。
- 主要画面で Before/After を比較する。
- 削減量を記録し CI に閾値を設定する。