Figmaのグラデーションがブラウザで表示されない時の直し方
2021.11.27
2021.12.01
この記事の筆者：三好アキ（ウェブエンジニア）
「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。
ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。
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ペアずつあるために、両方を書き換える必要があるのだと思います。
なぜこれで直るのかは不明ですが、グラデーションが正しく表示されない時は当記事で紹介した方法を試してみましょう。
ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein。
monoteinについての案内資料の無料ダウンロードはこちら。
「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。
無料相談
