FigmaでSVG書き出しが崩れる原因は？きれいに出力する対策を解説

FigmaでデザインしたアイコンやイラストをSVGで書き出したとき、ブラウザで崩れて見えることはありませんか。テキストがズレる、グラデーションが消える、ストロークが変形するなどのトラブルは多くのデザイナーが経験します。本記事では、Figma SVG 書き出し 崩れるというキーワードに沿って、起こり得る原因を整理し、それぞれに対する実践的な対策を最新情報を交えて詳しく解説します。

Figma SVG 書き出し 崩れるとなる主な原因の把握

SVG書き出し時の「崩れ」が起こる原因は多岐にわたります。まずは、何が見た目と出力の差を生み出しているのかを整理します。複雑なパス、ストローク位置の扱い、テキストやフォント、マスク／ブレンドモード、レイヤー構造などが主な要因です。意図しない崩れを防ぐには、それぞれの原因を理解することが重要です。

パスの複雑さとノードの数

SVGではベクトルパスが座標やノードで定義されています。ノードが多すぎたり曲線が複雑すぎると、レンダリング時にズレたり省略されたりすることがあります。特にSVGをウェブ／モバイルで表示する際、ブラウザやレンダリングエンジンの挙動によってアンチエイリアスの影響が出ることがあります。

また、フィルタやぼかしのエフェクト、画像をラスタライズした要素を混在させると、SVGとして完全なベクター要素ではなくなり、崩れの原因となります。これらの要素がSVG書き出し時に対応されず、代替手段として画像化されてしまうケースがあります。

ストローク位置（Inside／Outside／Center）の扱い

ストローク（線）の位置は、図形の境界線に対して内側か外側か中心かで見た目が異なります。FigmaではInsideやOutsideのストロークを指定できますが、SVG仕様ではストロークは中心（Center）に描画されるのが標準です。そのため、Inside／Outside指定をしていてもSVGに書き出すとCenter扱いに「簡略化」されることがあります。これが原因で線幅が想定とずれたり、デザインが崩れて見える場合があります。

テキストとフォントの問題

書き出されたSVGでテキストが正しく表示されないケースがあります。これはテキストがフォントとしてではなくアウトラインやグリフに変換されていたり、フォントが利用先環境で読み込まれない、またはフォント名がSVG内部で正しく参照されていないことが原因です。テキストが小さい場合や複雑なスタイルがかかっているときに、特に問題が顕著になります。

マスク／クリップ／ブレンドモードの影響

Figmaデザインで使用されるマスクやクリップ機能、さらにブレンドモード（乗算、オーバーレイなど）がSVG書き出し時に想定外の動きをすることがあります。例えば、マスクしたグループはSVGでopacity maskとして書き出され、特定の環境（モバイルブラウザ／アプリなど）でそれが正しく描画されないことがあります。また、ブレンドモードがサポート外の場合、Figmaがラスタライズ処理を入れてしまい、ベクター性が失われ崩れた見た目になります。

SVG書き出しで具体的に“崩れる”症状のパターン

次に、「崩れる」と感じる具体的なパターンを把握します。症状によって対策のアプローチが異なりますので、まずはこの段階でどのような崩れが起きているかを特定することが重要です。

ストロークが細すぎたり途切れたりする

細いストロークが非常に複雑なパスに沿って描かれている場合、SVGで書き出すとブラウザの描画精度やアンチエイリアスの影響で線が途切れたり弱く見えたりすることがあります。また、Inside／Outside指定が無視されCenter扱いになるため、位置がずれたり重なりが生じたりします。

テキストがアウトライン化されて編集不能になる／見た目が変わる

テキストをアウトライン化（パス化）すると、どの環境でも見た目が保たれますが、テキストのクリアさや可読性が損なわれることがあります。反対にアウトラインしないと、フォントが存在しない環境で代替フォントが使われてしまい、意図しないデザイン崩れが起きます。

マスクやクリップで切り抜いたはずが表示されない／崩れる

マスクを使って切り抜き表現をしたグループが、SVGエクスポート後に意図しない形で切り抜きが失われたり、透明領域がおかしくなったりすることがあります。モバイル環境ではopacity maskがサポートされていない場合があるため、クリップパスを使うか形状をブーリアン操作で整える必要があります。

グラデーションや特殊な塗りが消える・変色する

グラデーション、パターン塗り、特殊なフィルタなどはSVG出力時に環境、設定、書き出し時の選択項目によって削除されたり単純化されたりします。例えばグラデーションのID名にコロンが含まれると外部参照で壊れることが報告されています。こうした特殊要素の扱いを確認することが重要です。

きれいにSVGを書き出すための具体的な対策と設定

崩れる症状を知ったうえで、実践できる対策を以下に示します。デザインの品質を維持しつつSVGを書き出すために使える最新の設定や手順を含めています。

ストロークはCenterに統一する

デザイン段階でストローク位置をCenterにするか、Inside／Outsideを避けて使うのが望ましいです。SVGはCenterストロークのみ正式にサポートしており、Inside／Outsideは簡略化されSurface（外側）または内部へ拡大して描画されるため、見た目が変わる原因となります。Figmaのストローク設定メニューでPositionをCenterにして統一しましょう。

テキストはOutline TextやOutline Strokeを使い分ける

テキストが環境によって異なる見た目になることを防ぐには、アウトライン化が有効です。Exportパネルの「Outline Text」オプションを使うか、テキストを選択して手動でアウトライン化（またはStrokeのアウトライン化）します。ただし編集性を失うことがあるため、可読性や将来的な修正を考慮しながら使い分けることが大切です。

マスクやクリップ、ブレンドモードを積極的に整理する

マスク機能を多用すると、SVGでopacity maskとして書き出されることがあり、モバイルブラウザ・アプリでの互換性に問題が出ることがあります。また、ブレンドモードがSVG仕様で非対応な場合、ラスタライズされてしまいます。これらを避けるために、切り抜きにはクリップパスやブーリアン演算を使い、デザインに影響が少ないブレンドモードを選定することが重要です。

不要なレイヤー・エフェクトを削除しフラットにする

隠れているレイヤー、オーバーレイ、複数のエフェクト（ドロップシャドウ、ぼかしなど）が重なっていると、SVG出力時に予期せぬ崩れを引き起こします。書き出す前にデザインを整理し、複雑な部分はフラット化（Flatten）やベクターパスに変換することで安定した出力が得られます。

エクスポート設定を正しくチェックする

Export設定パネル内のオプションは崩れ防止に直結します。以下は特に注意すべき項目です。

• Outline Text：テキストをパス化するかどうか
• Simplify Stroke：Inside/OutsideのストロークをCenter扱いに簡略化する
• Include “id” attribute：ID属性の有無がブラウザでの解釈に影響すること
• Ignore Overlapping Layers：不要な重なりを除外するか
• Color Profile：sRGB等、表示先環境に近いものを選ぶ

これらを調整することで、SVGが他の環境で「見た目崩れ」を起こす確率を大幅に下げられます。

環境別の注意点と応用例

SVGを書き出したあと、使用環境によって崩れるかどうかが左右されることが多いです。ここではブラウザ・モバイルアプリ・React／Flutterなどでの応用例と注意点を整理します。

ウェブブラウザでの表示崩れ

ブラウザによってSVG描画のサポートレベルが異なります。特にiOSのSafariやWebKitベースのビューではopacity maskや特定のフィルタ、特殊なグラデーションが正しく処理されないことがあります。ID属性にコロンなど特殊文字が含まれると、Gradient参照が壊れることが報告されており、これらの命名規則に注意が必要です。

React／Flutterなどフレームワークで使うとき

ReactやFlutterなどでSVGを読み込む際、SVGの内部構造（defsタグ、グラデーション、パターン定義など）が正しく解釈されないことがあります。Flutterではパターンやbase64画像をdefs内で使うとレンダリングが乱れることがあり、defs要素を先に記述する、id属性を省く、画像を別ファイルとして分けるなどの対策が有効です。

モバイルアプリでの互換性

AndroidやiOSのアプリ開発では、SVG表示ライブラリがWebKit／Skiaなどの描画エンジンを使います。opacity mask やフィルタが使われているSVGはうまく描画されないことがあります。マスクをブーリアン演算に置き換える、クリップパスを使う、そしてできるだけ効果を減らすことが推奨されます。

Figmaで書き出す手順チェックリスト

崩れを防ぐための実践的なチェックリストです。デザイン完成後から書き出しまでの作業ステップとして活用してください。

• 全レイヤーの位置・サイズが小数点ではなく整数値か確認する
• ストローク位置をすべてCenterに統一する
• テキストが必要ならOutline Text設定を有効に、必要ならテキストをパス化する
• マスクやブレンドモードを可能な限り簡略化または代替表現に置き換える
• 不要なレイヤー・重なり・見えない要素を削除する
• Export設定を次のようにチェックする：