デザインツールとして広く使われているFigmaで、SVGを書き出したら形がずれたり文字が消えたりという不具合を経験したことはありませんか。特に「Figma SVG 書き出し 崩れる」というキーワードで検索するユーザーは、見た目の差異、サイズや配置のズレ、テキストのフォント崩れ、マスクやグラデーションの問題などを解決したい意図を持っています。この記事では、見た目が崩れる主な原因を整理し、それぞれに対して最新の対策方法を詳しく解説します。
目次
Figma SVG 書き出し 崩れる：発生する主な問題とは
FigmaからSVGを書き出した際に「崩れる」と感じる具体的な症状には、以下のようなものがあります。崩れの種類を把握することで、原因を特定しやすくなります。
- 要素の位置やサイズがデザインと異なる
- マスクやクリッピングパスが正しく適用されない
- テキストがフォント依存でフォールバックフォントになる、またはアウトライン化による太さ不足・過剰
- グラデーションやフィルタがブラウザで表示されない、または色味が変わる
- 重なりレイヤーの表示がおかしくなる、部分が欠ける、背景が透過しない
- CSSとの相互作用で比率が歪んだり色が薄くなったりすること
位置・サイズのズレ
SVG内の要素が小数点を含む位置（サブピクセル）で配置されていたり、親フレームが丸められていない位置にあると、書き出し後に幅や高さが意図したものとずれて見えることがあります。SVGは viewBox、width、height によって描画が決まるため、小数点値があると余白が生じたり、1px増減することがあります。こうした症状は、エクスポート時に「サイズ／位置をピクセル単位に丸める」設定や「Snap to Pixel Grid（ピクセルグリッドにスナップ）」機能で改善されます。最近もユーザーから報告されており、こうした機能を意識することで崩れを防げるようになりました。
マスク／クリッピング関連の問題
マスクやクリップパスを使ったデザインはSVGとして出力される際に、対象の要素との重なり順やグループ化の状態によって描画が変わることがあります。特に複数の重なりレイヤーがあったり、グループ外の影響を受ける場合、マスクが白くなったり、切り取られた部分が表示されなかったりすることがあります。こうした問題は要素を必要に応じてフラット化（Flatten）したり、マスクを使わずブーリアン演算で形を生成することで回避できることが多いです。
テキストとフォントの崩れ
テキストは通常フォントとしてエクスポートされますが、閲覧環境にそのフォントがないとフォールバックフォントに置き換わるため見た目が変わることがあります。また、Figmaには書き出し時の設定で「Outline Text（テキストをアウトライン化）」を使うオプションがあり、これを有効にするとテキストがパスになり、どの環境でも見た目が保たれやすくなります。ただしパスとして保存されるため編集性が失われたりファイルサイズが増える可能性があります。
グラデーション・フィルタの非互換性
SVGでグラデーションやフィルタを使った場合、ブラウザやフレームワークによってはその属性が正しく解釈されないことがあります。例えば、Gradient 定義内の ID にコロンなどが含まれていたり、フィルタ要素を defs 内で定義した後に参照順序が正しくなかったりすると、表示されない問題が起こります。他にもパターンパーツや埋め込まれた base64 イメージの処理が非対応のライブラリで問題となることがあります。
CSSやコンテナとの兼ね合いで崩れる
SVG をWebページに配置した際、外側の CSS が SVG 要素に影響を与え、固定幅指定やアスペクト比が維持されていないと縦横比が崩れたり拡大縮小でボケたりします。特に React や Flutter などのフレームワークで SVG を使う場合、外部 CSS が fill や stroke に currentColor を使っていたり、display プロパティが default 以外に設定されていたりすると意図しない表示になることがあります。
最新のFigma設定で崩れないSVGを作るための具体的対処法
上記のような問題を回避するためには、書き出し前と書き出し時の設定を見直すことが重要です。最新の仕様や設定項目を使った対策を中心に紹介します。
サブピクセル・ピクセルグリッドの整合性を保つ
ずれの多くは要素やフレームの座標やサイズが整数でないことに起因します。最新の Figma にはピクセルグリッドにスナップする機能や、位置・サイズを整数に丸める機能があります。意図したサイズで SVG を書き出せるよう、「Round to Pixel（ピクセル丸め）」「Snap to Pixel Grid」を使ってデザインを整えておきましょう。これにより viewBox や width／height の余計な余白や誤差が減ります。
マスク・クリッピング・重なりを整理する
マスクやクリップを使ったデザインは便利ですが、SVGに書き出す際には重なり順やグループ構造がそのまま表現できないことがあります。問題の要素に対しては次のことを試してみてください。
- マスクを使う代わりにブーリアン演算で形状を作る
- 必要に応じて Flatten 化してマスク／クリップパスをフラットにする
- “Ignore overlapping layers” 設定を確認し、重なりを含めるか無視するかを適切に選択する
テキストをアウトライン化／フォントを確認する
テキストが崩れる要因として、フォントがそもそも SVG を読み込む環境に存在しない場合が考えられます。書き出し時に「Outline Text」を有効にすることで、テキストをパスに変換して見た目を固定できます。また、フォントを埋め込むか、読み込む先で利用可能なフォントを指定することも有効です。この方法で、フォントがない環境でもデザイン通りの見た目を保てます。
グラデーション・パターン・フィルタの互換性確保
SVG の defs 内のグラデーションやパターン、mask フィルタなどは、書き出された SVG が表示される環境によっては正しく解釈されないことがあります。そのため、次の点を確認してください。
- ID にコロンなどの特殊文字が含まれていないか
- グラデーションなどの定義（defs）が参照より前に存在する構造になっているか
- パターン定義やパスデータを可能な限り単純化すること
- もし埋め込まれた raster イメージや base64 データを使っているなら、それを除去または別ファイルで処理する
CSS・HTMLでの使用時の設定を見直す
SVG を Web に配置する際には、z-index や CSS の display、width／height、 preserveAspectRatio 属性などの外部要因が崩れの原因になります。React や Vue、Flutter などのフレームワークを使っている場合は、SVG の code 内で width／height を固定するのではなく、 viewBox を使い、 container として max-width や height auto を指定することが望ましいです。また、fill や stroke が currentColor などで指定されていないかチェックし、必要なら実際のカラーコードに置き換えると環境依存の色ずれを防げます。
Figmaのエクスポート設定を正しく使う
Figma の Export パネルには SVG 書き出しに関して複数のオプションがあります。これらを理解して適切に設定すれば崩れの多くを回避できます。
| 設定項目 | 説明 | 崩れ防止のヒント |
|---|---|---|
| Include “id” attribute | SVG 内の要素に ID を付与 | 重複 ID や特殊文字を含まない名前にする |
| Outline Text | テキストをアウトラインパスとして扱う | フォントがない環境でも見た目が同じになるようにする |
| Ignore overlapping layers | 重なりのあるレイヤーを無視するか含めるか | スライスやアイコン単体では無視、複雑なコンポーネントでは含めるように調整 |
| Simplify stroke | 境界線のストロークを単純化する処理 | 細かいストロークや内外ストロークを対応させたい場合はオフにすることも検討 |
環境／ツール別の問題と回避策
SVGを書き出した後、使用する場所によって崩れが発生することがあります。ここでは主な環境別に見えている問題とその対策をまとめます。
ブラウザでの表示
ブラウザでは viewBox や preserveAspectRatio の属性が正しく指定されていないと、アスペクト比が崩れたり切り捨てられた部分が背景になったりします。SVGの width height を要素内で指定し、CSS で max-width や height auto を使うとサイズのズレを防げます。また、ブラウザによっては defs 内の定義順序や ID の命名規則に厳しいため、特殊文字や不適切な参照を避けることが重要です。
React や Vue などのフロントエンドフレームワーク
これらの環境では SVG をコンポーネント化したり class を当てたりすることが多いため、外部 CSS のスタイルが描画に干渉するケースが見られます。currentColor を使っていると親要素の color に引きずられますし、width/height の固定・レスポンシブ性が不足すると伸び縮みで崩れます。インライン SVG を採用することでスタイルの制御がしやすくなることもあります。
Flutter やモバイルアプリ開発環境
Flutter 用のパッケージで SVG を表示しようとすると、パターン定義の中に base64 画像が含まれていたり、 mask や pattern 要素が複雑であるために正しく読み込めないことがあります。こうした場合は、SVGを書き出す前に可能な範囲でパターンやマスクを回避し、画像をベクター形状に置き換えるか、外部リソースとして処理することが推奨されます。
実践ワークフロー例：崩れないSVG書き出し手順
ここでは SVG 書き出しで崩れを抑えるための実践的なワークフローを示します。デザインフェーズからコーディングフェーズまでを通じた流れを持って作業することで、トラブルを未然に防げます。
- デザインを整数ピクセルで配置し、スナップグリッドを有効にする
- 不要な背景や重なりのない状態で各パーツを整理する
- テキストを使用する場合はアウトライン化の必要性を判断し、設定を行う
- マスク・グラデーション・パターンを使う要素は簡潔に保つかフラット化する
- エクスポート設定で「Ignore overlapping layers」「Include id attribute」「Simplify stroke」などを適切に選ぶ
- SVGを書き出した後、表示環境で確認（ブラウザ、モバイル、アプリ等）し、必要ならCSS調整を行う
よくある誤解とその正しい知識
「SVGだから拡大しても常に鮮明」というのは完全には正しくありません。また、「すべてのテキストをアウトライン化すれば問題なし」もまた万能ではないという点を押さえておきましょう。
SVGは万能ではないベクター形式
SVG はピクセルベースではないため縮小拡大には強いですが、背景のぼかしやグラデーションの滑らかさなどは環境に依存します。また、複雑なパスやベジェ曲線の処理が重くなると、レンダリング遅延や重さを感じることがあります。状況によっては PNG 等のラスタ形式の方が安定するケースもあります。
アウトラインテキストの利点と制限
テキストをアウトライン化することでフォント依存をなくし見た目を固定できますが、文字をあとから編集できなくなります。また、パス化された文字は見た目は同じでもパフォーマンス・ファイルサイズの面でデメリットが出ることがあります。用途に応じて可読性重視か編集性重視かを判断する必要があります。
まとめ
Figma から SVG を書き出して「崩れる」と感じる問題は多岐にわたりますが、多くはテキストの扱い、マスクや重なり要素、座標の小数点・サイズ整数性、グラデーションやパターンの互換性、使用環境の CSS やコンテナとの兼ね合いなどが原因です。最新の Figma の書き出し設定を理解し、目的に応じて Outline Text や Ignore overlapping layers などを使い分けることが重要です。さらに、書き出した後の環境での検証も怠らずに行うことで、見た目の崩れを未然に防げます。
コメント