Figmaのグラデーションがブラウザで表示されない時の直し方

Figmaで作ったグラデーションが表示されない

私は普段Figmaを画像やイメージの制作に使っており、先日グラデーションを使った下のようなSVG画像を当サイトのために作りました。

しかしこれを当サイトで読み込み、Googleクロームで表示させると、下のようにグラデーションが消えて、ベタ塗りの色となっていました。

グラデーションを表示させる方法

調べてみると、下のような情報を見つけました。

• SVG gradient not working

• Figma exported SVGs with gradients not working as expected

これらのサイトでは、SVG画像内の<linearGradient>というタグに含まれるidを変更することで、グラデーションが表示されると書かれています。

それを試したところ、クロームでもグラデーションが表示されるようになりました。

具体的には次のようなステップです。

ア SVG画像をVSコードなどのエディタで開く

イ <linearGradient>タグを探す

ウ <linearGradient>タグ内のidの文字列（例えばpaint0_linear）をpaint0に書き換える

エ 通常、いま修正した文字列paint0_linearは別のタグでも使われているので、そこも同じようにpaint1に書き換える（補足は下記）

オ 保存する

ここで注意が二つあります。

1つ目は文字列の書き方に特に指定はないことです。

上の例ではpaint0_linearをpaint0と書き換えていますが、paint2でもpaint3でも大丈夫です。

この点の理由は不明で、上のサイトでも説明はありません。

そして2つ目がエで触れたところです。

私の場合、グラデーションを含んだSVG画像を作ってそのファイルを開くと、<linearGradient>タグ内のidでつかわれている文字列が、<path>タグのfillでも使われていることがよくあります。

例としては下のようなコードで、paint0_linearが2ヶ所で使われています。

<path d="M796 2070L-2.47534 1426.5L1594.48 1426.5L796 2070Z" fill="url(#paint0_linear)"/>

...

<linearGradient id="paint0_linear" x1="23.0001" y1="2070" x2="1589" y2="1440" gradientUnits="userSpaceOnUse">

この2つのpaint0_linearを同じ文字列に書き換えるようにしないと、グラデーションはうまく表示されません。

つまり次のように書き換えます。

<path d="M796 2070L-2.47534 1426.5L1594.48 1426.5L796 2070Z" fill="url(#paint0)"/>

<linearGradient id="paint0" x1="23.0001" y1="2070" x2="1589" y2="1440" gradientUnits="userSpaceOnUse">

おそらくグラデーション一つあたり、このような<linearGradient>と<path>が1ペアずつあるために、両方を書き換える必要があるのだと思います。

なぜこれで直るのかは不明ですが、グラデーションが正しく表示されない時は当記事で紹介した方法を試してみましょう。