FigmaからSVGを書き出すときは、文字の見た目を保つか、文字列を残すか、Web側で内部要素を操作するかを先に決めます。設定を選ぶだけで終えず、書き出したSVGを使用先で確認してください。
SVGを書き出す基本手順
- 書き出すフレームやレイヤーを選択します。
- 右サイドバーのExportへ設定を追加し、形式をSVGにします。
- 詳細設定で、文字・id・線・重なり等の扱いを確認します。
- 書き出して、ブラウザーと実際の使用先で確認します。
複数の対象は、設定を追加したうえでMain menu → File → Exportからまとめて書き出せます。ショートカットはWindowsがShift+Ctrl+E、MacがShift+Command+Eです。倍率やPNGの寸法が目的なら、2x・固定幅・ピクセル寸法の解説を参照してください。
用途別の設定の選び方
| 目的 | 文字の扱い | 書き出し後の確認 |
|---|---|---|
| ロゴなどの形を保つ | Outline textを使う | 形・線・余白、必要な代替テキスト |
| SVG内に文字列を残す | Outline textを外す | フォントと実際の描画結果 |
| CSS・JavaScriptから要素を参照 | 必要に応じてid属性を含める | 埋め込み方、idの衝突、操作対象 |
| 内側・外側の線がある部品 | Simplify strokeを比較する | 線の形、マスク、容量 |
| 文字レイヤーの枠を含める | Include bounding boxを確認 | 余白と、枠外の文字の欠け |
Outline text：文字の形を残すか、文字列を残すか
Outline textを有効にすると、文字をベクターの形に変換します。書き出したSVG内で、元の文字列として打ち替える用途には向きません。文字を残す場合は無効にしますが、使用先のフォントやブラウザーの描画によって見た目が変わる場合があります。公式：SVGのExportSettings
ロゴの形を保つ場合と、説明文を編集・選択できる形で残す場合を区別します。SVG内に文字列があることだけで、Webページの検索・翻訳・アクセシビリティを保証できるわけではありません。掲載方法と、画像としての説明も確認してください。
Include id attribute：参照用の名前を付ける
有効にすると、レイヤー名をもとにSVGの要素へidを含めます。JavaScriptやCSSで特定要素を参照する場合に使えますが、idを含めるだけで色や動作が変わるわけではありません。マスクやグラデーションなどに必要なidは、この設定を外しても生成されます。
Webページへ複数のSVGを直接埋め込む場合は、同じidが重複しないよう確認します。HTML内へインラインで置く方法と、画像として参照する方法で、ページから扱う対象が異なります。MDN：HTML内のSVG、MDN：SVGのid
Simplify stroke：線の近似とマスクの違いを確認する
SVGの線は中央配置を前提とするため、Figmaの内側・外側の線をそのままの設定で表せるとは限りません。Simplify strokeは出力を簡略化するための近似を行い、無効の場合はより精密なマスクを使う方法になります。形とデータ量を比較して選びます。
線があるアイコンでは、拡大表示して角、細い線、重なりを確認します。「簡略化なら常に軽く正確」と一律に決めず、出力結果で判断してください。公式：SVGの線の書き出し
重なり・余白・色の設定
Ignore overlapping layersは、選択対象に重なる他のレイヤーを含めるかを切り替えます。対象だけを出したい場合と、重なった見た目を含めたい場合を区別します。
Include bounding boxはテキストレイヤー向けの設定です。有効なら文字の枠で出力範囲を決めるため、枠が大きければ余白を含み、枠より外の文字は欠ける場合があります。無効なら文字そのものの範囲を基準にします。
色プロファイルはSame as file・sRGB・Display P3を確認します。ファイルと使用先の色条件を揃え、実際のブラウザーで見た目を確認してください。設定の対応範囲は公式の書き出し形式と設定を参照します。
出力したSVGを確認する
文字の形・改行、線とマスク、表示範囲・余白、idの参照、PC・スマホでの表示を確認します。元のFigmaデータと出力ファイルを残すと、設定を変えて比較できます。
REST APIで複数ノードを書き出す方法は、Figma APIで画像を一括書き出すに分けています。Plugin APIの設定名とREST APIの引数名は同一とは限らないため、使うAPIの資料で確認してください。