アイコンやイラストをSVGで扱うと拡大しても綺麗で軽い…はずですが、IllustratorやInkscapeから書き出したSVGは、編集用のメタデータや冗長な数値でファイルが膨らんでいることがよくあります。そのままWebに載せると読み込みが遅くなったり、インライン展開したときにコードが読みにくくなったりします。この記事では、SVGを確認し、安全に最適化し、Reactコンポーネントとして使うまでの流れを順番に紹介します。
1. まずSVGの中身とサイズを確認する
最適化の前に、SVGが正しく表示されるか・viewBoxや要素構成がどうなっているかを確認します。SVGビューアにコードを貼り付けると、レンダリング結果とviewBox・色などの情報を一目で確認できます。ここで元の見た目を把握しておくと、最適化後に崩れていないかを比較しやすくなります。
この手順で使うツール
SVG Viewer
SVGコードをリアルタイムプレビュー・PNG書き出し
2. 不要データを除去して軽量化する
SVGを最適化ツールに通し、コメント・XML宣言・<metadata>・Inkscapeなどのエディタ属性を除去し、座標の数値を適切な桁数に丸め、タグ間の空白を最小化します。Inkscape 風のメタデータを含むテスト用のSVGでは、これだけで710バイトが456バイトになりました。数値の丸めは桁を落としすぎると形が崩れ、特に viewBox が 0 0 1 1 のような小さな座標系では小数1桁でも形が変わるので、プレビューを見ながら調整します。SVG Optimizer が丸めるのは属性の中の数値だけで、<text> の文字や、ファイル名・id のような文字列には触れません。グラデーションなどを url(#id) で参照している id もそのまま残ります。width/height や viewBox は表示に関わるので残します。
この手順で使うツール
SVG Optimizer
SVGを圧縮・最適化してファイルサイズを削減
3. Reactコンポーネントとして使う
最適化したSVGをReactで使う場合は、属性をJSX仕様（class→className、stroke-width→strokeWidth など）に変換する必要があります。変換ツールを使えばSVGコードを貼り付けるだけでReact/TypeScriptのコンポーネントになり、fillやsizeをpropsで受け取れる形にもできます。fill の既定値は currentColor になるので、テキストの色に追従するアイコンコンポーネントとして再利用できます。注意したいのは2点です。fill を props にするとすべての fill が同じ値に置き換わるので、多色のアイコンは単色になります（SVG to React は色が複数あると警告を出します）。また size で大きさを変えるには viewBox が必要で、無いと中身が拡大縮小されず切れて表示されます。生成されたコンポーネントは TypeScript のコンパイラでエラーなく通ることを確かめています。
この手順で使うツール
SVG to React
SVG コードを React/TSX コンポーネントに変換
まとめ
SVGは「確認 → 最適化 → コンポーネント化」の流れで扱うと、軽くて再利用しやすい形になります。エディタから書き出したSVGはまず最適化に通す、を習慣にするだけでページの読み込みが軽くなり、インラインSVGのコードも読みやすくなります。最適化は必ずプレビューで見た目を確認し、崩れる場合は数値の丸め桁数を増やして調整してください。