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

blog-hero-imgグラデーションを含んだSVG画像が正しく表示されない時の原因と対処法を紹介します。

pen-icon2021.11.27rewrite-icon2021.12.01

Profile Pic

この記事の筆者:三好アキ(エンジニア)


ウェブデザイナーから『エンジニア』『プログラマー』へ成長したい人、独学で進んでいきたい人を応援しています。 HTMLとCSSの知識だけでアプリ開発を始められる入門書を多数執筆中📕📗👇


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて配信中。登録はこちらから → 無料メルマガ登録

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

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

process-desktop

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

gradient-not-working.svg

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

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


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_linearpaint0と書き換えていますが、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ペアずつあるために、両方を書き換える必要があるのだと思います。

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