SVGを最適化してファイルサイズを削減する方法
デザインツールで書き出したSVGには、エディタのメタデータや冗長な小数、不要な空白が多く含まれ、ファイルサイズが必要以上に大きくなりがちです。SVG Optimizerはこうした不要データを除去し、表示に影響しない範囲でSVGを軽量化します。Web表示の高速化やアイコンのインライン化に役立ちます。
SVGが重くなる原因
IllustratorやInkscapeなどで書き出したSVGには、編集用のメタデータ（<metadata>、inkscape:*・sodipodi:* 属性、名前空間宣言）、XML宣言、コメント、そして小数点以下が長い座標値が含まれます。これらは画面表示には不要ですが、そのままだとファイルサイズを大きくし、HTMLにインライン展開したときにコードを読みにくくします。特にアイコンを大量に使うサイトでは、この差の積み重ねが読み込み速度に効いてきます。
安全に削減できるもの / 慎重に扱うもの
コメント・XML宣言・DOCTYPE・<metadata>・エディタ由来の属性は、表示に影響しないため安全に削除できます。一方、数値の丸めは桁を落としすぎると細かい形状がわずかにズレることがあります。アイコンなど小さく表示するSVGは2桁程度で十分ですが、大きく表示する複雑なパスは3〜4桁にすると安心です。width/height や viewBox は表示サイズに関わるため、SVG Optimizerでは削除しません。
最適化後は必ずプレビューで確認する
最適化はコード上の削減なので、見た目が変わっていないかの確認が重要です。SVG Optimizerは最適化後のSVGをその場でプレビュー表示するため、形状や色が崩れていないかをすぐ確認できます。もし崩れる場合は「数値を丸める」の桁数を増やすか、その工程をオフにしてください。処理はすべてブラウザ内で行われ、SVGは外部に送信されません。
Webでの活用（インラインSVG・アイコン）
最適化したSVGは、<img>やCSSのbackgroundとして使うほか、HTMLに直接インライン展開してCSSで色やサイズを制御する使い方が効果的です。特にアイコンはインラインSVGにするとHTTPリクエストが減り、fillにcurrentColorを指定すれば文字色に追従させられます。生成したコードはReactコンポーネントに変換してそのまま使うこともできます。