SVGアイコン最適化の核心原則
FigmaやIllustratorから書き出したSVGファイルには、編集用メタデータ、不要なグループ、過剰な小数点などが含まれており、実際に必要なコードよりもはるかに大きなサイズになっています。SVGO（またはSVGOMGウェブ版）で最適化するとファイルサイズを50〜80%削減できます。
WebでインラインSVGを使用する場合はfill="currentColor"を設定することで、CSSのcolorプロパティでアイコンの色を制御できます。ダークモード対応やホバー状態の処理がCSS一行で済むようになります。
アイコンサイズとviewBox
多くのUIアイコンはviewBox="0 0 24 24"を標準として使用しています。インラインSVGではwidth・height属性を削除し、CSSでwidth: 1emと設定すると、親のフォントサイズに自動的に合わせられます。
よくある質問
SVGにwidth・height属性は必要ですか？
インラインSVGやスプライトは削除してCSSで制御するほうが柔軟です。単独ファイルやimgタグ用はデフォルトサイズを維持するのが安全です。
FigmaからSVGを書き出す際の注意点は？
デフォルト書き出しにメタデータが含まれます。書き出し後にSVGOで最適化し、currentColorを適用してCSSによる色制御を可能にしてください。
SVGスプライトとインラインSVGはどちらがよいですか？
アイコンが多く再利用が多い場合はスプライトがHTTPリクエストを削減して効率的です。インラインはCSSスタイリングやアニメーション適用が容易です。