SVGをブラウザ内で最適化して比較する

SVGコードまたは1件の.svgファイルを読み込み、設定を選んで、最適化前後の表示・サイズ・変更内容を確認できます。入力内容はサーバーへ送信されません。

結論：書き出し後のコードを確認し、用途別に最適化する

Figmaの書き出し結果はデザイン内容やExport方法で変わります。不要なgroupや長い数値がある場合もあれば、すでに簡潔な場合もあるため、一律に「Figma SVGは重い」と判断しません。

編集用のFigmaファイルと元SVGを残し、公開用コピーだけを最適化します。UIアイコンは小さな表示サイズでも線や角が崩れていないか確認します。

項目	確認内容
viewBox	図形全体を囲み、レスポンシブ表示で必要か
group	transformやstyleを持つか。属性のない入れ子だけか
path	長い小数や重複があるか。見た目へ影響する精度か
ID	gradient・mask・clipPath・ARIA・外部CSSから参照されるか
fill・stroke	固定色でよいか、部品としてcurrentColorを使う設計か

fill="#000"をfill="currentColor"へ変えると、親要素のcolorでアイコン色を制御できます。ただし、複数色のロゴや固定ブランドカラーまで自動変換してはいけません。

現行DevelopToolsは固定色をcurrentColorへ自動変更しません。必要なら設計判断として手動で変更し、通常・hover・disabled・dark modeを確認します。

DevelopToolsのSVG最適化・圧縮ツールはSVGOを組み込んだものではなく、DOMParserで解析したSVGへ独自の最適化処理を適用します。SVGコードの貼り付けと1件の.svgファイル入力に対応し、処理はブラウザ内だけで完結します。

確認・設定項目	現行ツールの対応
基本整理	コメント、metadata、編集ソフト固有情報、空白、空属性・空要素を整理
数値・色	小数点精度を0～8桁で指定し、数値と短縮可能なカラーコードを整理
構造	未使用defs、属性のないグループ、未使用IDの整理と参照IDの短縮
安全性	script、イベント属性、外部参照、foreignObject、アニメーションの扱いを設定
保護設定	title・descとviewBoxを維持するか選択
検証	前後プレビュー、重ね合わせ、ファイルサイズ、要素数、変更レポートを表示

複数ファイルの一括処理、SVGOのpreset-defaultや任意Plugin設定、convertPathDataによるpath命令の変換、prefixIds、mergePaths、ビルド工程への組み込みには対応していません。これらはSVGOや各ビルドツール側で行います。

ファイルサイズが小さくなっても、表示・参照・ライセンス・アクセシビリティが壊れていれば最適化成功とはいえません。

SVGOのPlugin構成や既定値はVersionで変わります。この記事はSVGO v4系の公式資料を基準にしていますが、導入時は利用中VersionのDocumentationと設定ファイルを確認してください。

Figmaから書き出したアイコンにgroupと長い小数値が含まれています。最初から最大圧縮を選ぶのではなく、元ファイルを保存したうえで、削除対象と維持対象を決めます。

viewBoxを維持し、単色部品だけは別工程でcurrentColor対応を検討します。最適化後は削減率だけで判断せず、16px・24px表示、線幅、hover色、ダークモードを確認してから公開用ファイルへ置き換えます。

同じ設定をすべてのSVGへ機械的に適用せず、ロゴ、アイコン、図表、アニメーションなど用途ごとに検証してください。

Figmaから出したSVGは必ず最適化すべきですか？: 必須ではありません。容量、コード、表示を確認し、削減余地と保守性がある場合に公開用コピーを最適化します。
currentColorへ自動変換できますか？: 現行DevelopToolsは自動変換しません。アイコン設計の変更として手動で判断してください。