[Flutter]FigmaからSvgを呼び出した時にlinearGradientが効いていない時の対処法（備忘録）

はじめに

私が実装中に少々手こずった部分になります。
デザインをFigmaで作成しグラデーションがついたアイコン[svg]を保存、Flutterで表示する際に注意すべき点を紹介しておきます。

本題

SVGファイルを読み込んでもグラデーションが効いていない！？
Flutter側ではなくSVGファイル側に問題があるみたい...

SVGファイルを覗いてみる👀

<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">

<path d="M8.30308 1.23646C8.60909 0.693544 ..... 5.31234L8.30308 1.23646Z" fill="url(#paint0_linear_911_39757)" style="mix-blend-mode:multiply"/>

<defs>
<linearGradient id="paint0_linear_911_39757" x1="-1.46875" y1="3.82814" x2="14.6863" y2="-0.700582" gradientUnits="userSpaceOnUse">
<stop stop-color="#24ADFA"/>
<stop offset="0.545" stop-color="#2BBCCB"/>
<stop offset="1" stop-color="#2FC4B2"/>
</linearGradient>
</defs>

</svg>

本記事で出てくるタグは3種類

• svgタグ
• defsタグ
• pathタグ

<svg>要素

Scalable Vector Graphics（SVG）画像のルート要素です。SVG画像全体を定義します。width属性とheight属性はそれぞれSVG画像の幅と高さを指定します。

---

<path>要素

パス要素は線や形を描画するための主要な要素です。d属性はパスの座標データを指定します。このパスは矢印を定義しています。fill属性は塗りつぶしのスタイルを指定します。ここでは、url(#paint0_linear_911_39757)が指定されており、後述の<defs>内のグラデーションを参照しています。

---

<defs>要素

定義要素は定義セクションを示し、再利用可能な要素を定義します。ここでは、グラデーションを定義しています。

※上記の内容はすべてChatGPTに聞きました😇

defsがグラデーションに直接的に関わっているみたい...

解決策

タグ要素の順番を入れ替えるだけでOK(<defs>と<path>の場所を入れ替えてあげる)

<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">

<!-- defsをpathより上に記載してあげる -->
<defs> 
<linearGradient id="paint0_linear_911_39757" x1="-1.46875" y1="3.82814" x2="14.6863" y2="-0.700582" gradientUnits="userSpaceOnUse">
<stop stop-color="#24ADFA"/>
<stop offset="0.545" stop-color="#2BBCCB"/>
<stop offset="1" stop-color="#2FC4B2"/>
</linearGradient>
</defs>
<path d="M8.30308 1.23646C8.60909 0.693544 ..... 5.31234L8.30308 1.23646Z" fill="url(#paint0_linear_911_39757)" style="mix-blend-mode:multiply"/>
</svg>

まとめ

初めて遭遇したものであったのため個人的にはかなり良い勉強になったと思っています。

参考にしたサイト
https://stackoverflow.com/questions/73034225/flutter-svg-gradient-is-not-rendered-failed-to-find-definition-for-url