Figmaのグラデーションがブラウザで表示されない時の直し方
2021.11.27
2021.12.01
この記事は約3分で読めます
この記事の筆者：三好アキ
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／2024年）』著者。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
🔹 UdemyでReact・JavaScript・Node.jsの入門動画を無料で公開中 → 無料の入門動画
Figmaで作ったグラデーションが表示されない
私は普段Figmaを画像やイメージの制作に使っており、先日グラデーションを使った下のようなSVG画像を当サイトのために作りました。
しかしこれを当サイトで読み込み、Googleクロームで表示させると、下のようにグラデーションが消えて、ベタ塗りの色となっていました。
グラデーションを表示させる方法
調べてみると、下のような情報を見つけました。
• 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ペアずつあるために、両方を書き換える必要があるのだと思います。
なぜこれで直るのかは不明ですが、グラデーションが正しく表示されない時は当記事で紹介した方法を試してみましょう。
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*メールアドレスだけで簡単登録／配信登録の解除はいつでも可能です）
関連記事
