blog-hero-img

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

pen-icon2021.11.27rewrite-icon2021.12.01

この記事は約3分で読めます

Profile Pic

この記事の筆者:三好アキ


🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。

🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。


Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2



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

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

Profile Pic

メルマガ配信中
(from 三好アキ/エンジニア)


React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)