世界最高峰の現場で日々プロダクトを磨き上げている皆さん、こんにちは。
今日は、Figmaから書き出したSVGをそのままフロントエンドに埋め込んで、「なんだかコードが汚いな」「ファイルサイズが重いな」とモヤモヤしている方のために、「極限まで無駄を削ぎ落とすプロのSVG最適化術」を伝授します。
Figmaは素晴らしいツールですが、何も考えずに書き出すと、ブラウザが処理するには不要な「ゴミ」が大量に含まれます。これを知っているか否かで、エンジニアとしての信頼度は大きく変わります。さあ、一緒に「軽量で美しいSVG」を追求しましょう。
—
1. なぜFigmaのデフォルトSVGは「重い」のか？
Figmaが生成するSVGには、デザイナーが作業する上では便利でも、開発時には不要なデータが含まれています。
- Figma特有のメタデータ: `data-name` や `figma-node-id` など、開発環境には一切不要な属性が紛れ込みます。
- 不必要なグループタグ: レイヤー構造をそのまま反映しようとして、多重の `
` タグが生成され、DOMツリーを無駄に深くします。 - 精密すぎる座標: 小数点以下が数桁に及ぶ座標値。ブラウザの描画性能を考えると、多くの場合、小数点第1〜2位で十分です。
これらを放置すると、SVGの数は増えるほどにDOMが肥大化し、ページの初期表示速度に悪影響を及ぼします。
—
2. 軽量化の第一歩：Figma内での「事前整理」
ツールで最適化する前に、「書き出しの素材」を磨くのがプロの流儀です。
- レイヤーのフラット化: 複雑なベクターは、最後に `Command + E` で統合（Flatten）しましょう。中間のパスを保持する必要がないなら、これが最強の軽量化です。
- 命名規則（命名＝ID）: SVG内のID属性は、そのままCSSやJSでの操作対象になります。英数字で簡潔に（例: `icon-search`, `logo-main`）名前を付けましょう。
- クリッピングパスの回避: 不要なマスクは「Boolean Operations」を使って形状自体を切り抜いてください。複雑なマスクはブラウザのレンダリングコストを激増させます。
—
3. 自動化ワークフロー：最強の最適化セットアップ
さて、ここからが本題です。手作業での削除はもうやめましょう。以下の手順で「爆速かつ高品質」なSVGパイプラインを構築します。
手順①：プラグイン「SVG Export」を活用する
Figmaには数多くのプラグインがありますが、迷ったら「SVG Export」をインストールしてください。このプラグインは、書き出し時に不要な属性を自動でクリーニングしてくれます。
手順②：CLIツール「SVGO」で仕上げる
フロントエンドの実装現場では、最終的にSVGO (SVG Optimizer)を使うのが鉄則です。プロジェクトのルートディレクトリに設定ファイルを用意し、コマンド一つで最適化します。
インストール:
npm install -g svgo
設定ファイル (`svgo.config.js`):
プロジェクトのルートに配置し、不要なメタデータを徹底的に排除します。
module.exports = {
plugins: [
‘preset-default’, // 基本的な圧縮（不要なグループや属性の削除）
‘removeDimensions’, // width/heightを削除し、viewBoxに依存させる（レスポンシブ対応の鍵）
{
name: ‘removeAttrs’,
params: {
attrs: ‘(fill|stroke|data-name|figma-node-id)’ // 不要な属性を徹底排除
}
}
]
};
手順③：HelloWorld的動作確認（検証）
最適化されたSVGが正しく動くか確認しましょう。
1. FigmaからSVGをコピー。
2. `input.svg` として保存。
3. ターミナルで `svgo input.svg -o output.svg` を実行。
4. `output.svg` のコード量を比較してみてください。驚くほど軽くなっているはずです。
—
最後に：デザインとエンジニアリングの架け橋として
「SVGをいかに小さくするか」という課題は、単なる容量の削減ではありません。それは「ブラウザがいかに効率よく描画できるか」を配慮する、エンジニアリングの意思表示です。
これをマスターすれば、あなたのチームのプロダクトはより軽快に、よりプロフェッショナルなものへと進化します。
Figmaでの設計時から「どう書き出されるか」を意識し、SVGOで機械的にクリーンアップする。このルーチンを身につければ、毎日の作業が驚くほどスムーズになります。さあ、次はあなたのプロジェクトで試してみてください。何か詰まったら、いつでも聞きに来てくださいね！