SVGのグラデーションについて。

〽️グラデーションコードの内容。 〽️円形グラデーション。。 〽️グラデーションの編集。 〽️いづれ動かそう。





⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

こんにちは、「ふ」です。
今回はSVGのグラデーションの仕組み、編集方法について紹介します。

SVGのグラデーション実装コードは少々複雑です。中身をじっくり理解して、自由にグラデーションを使いこなせるようになりましょう🎵

グラデーションとは、基準となるポイントとから隣のポイントへと、色を連続的に変化させて着色する仕組みのことをいいます。この基準のポイントは「カラーストップ」と呼ばれています。
Vectornatorなどのベクター描画ソフトでは、グラデーションの構造がわかりやすく表現されています。
ベースとして、始点と終点を持った、つまり「方向を持つ線分」が定義され、 それに対するカラーストップの位置と色によって塗りつぶしの状態が決定されます。

SVGには大きく分けて2種類のグラデーションが用意されています。
直線的に色が変化する線形グラデーション(linear-gradient)と円状に色が変わっていく円形グラデーション(radial-gradient)です。

SVGでグラデーションを操作するにあたっては、コードを使ってゼロの状態から描画するのは「手探り」的で、あまり向いていません。
ベクターソフトで視覚的に作成したものを書き出し→コードで編集を行ったほうが効率的です。当記事でもその手順で話を進めていきます。

グラデーションコードの内容。


SVGのグラデーションコードはどのようになっているのか、その内容を知りましょう。
イラレやVectornatorを使ってグラデーションの塗りを作成し、SVGで書き出してみます。手始めに線形グラデーションでやってみます。

長方形に対して、黄色から青へと変わるグラデーションを塗りました。
これをSVG形式で書き出したものが⬇︎のコードです。

<svg viewBox="0 0 841.9 595.3"> 「「1<!-- ③ 長方形の塗りを定義したグラデーションに指定-->」」 <style type="text/css"> .st0{ fill:url(「「5#SVGID_1_」」); } </style> 「「1<!-- ② グラデーションを定義してidをつける-->」」 <linearGradient 「「5id="SVGID_1_" 」」 gradientUnits="userSpaceOnUse" x1="167.9449" y1="297.6378" x2="673.9449" y2="297.6378" > 「「1<!-- ④ カラーストップ -->」」 <stop offset="0.1208" style="stop-color:#FFE88B"/> <stop offset="0.8923" style="stop-color:#8BD1FF"/> </linearGradient> 「「1<!-- ① 長方形 -->」」 <rect x="167.9" y="142.1" class="st0" width="506" height="311"/> </svg>

コードを上から順に読んでいくと、何をやっているのかわかりづらいかもしれません。
SVGのグラデーション実装は、あらかじめグラデーションの内容を定義しておき、要素の塗りを指定する際にその定義を呼び出す、という手順を踏みます。
その順番にしたがって、コードをみていきましょう。

① 長方形rectを描いています。これだけだと、まだ塗りは初期値の#000です。

② <linerGradient>〜</linearGradient>でグラデーションの内容を定義しています。このグラデーション定義にはあとから呼び出せるよう、id名「SVGID_1_」が付けられています。
<gradient>要素は描画要素ではなく、「定義」を行う要素なので、ブラウザに直接描画されることはありません。

③ CSSを使って①の長方形要素をセレクト。
fill(塗り)プロパティに対して、②で定義したlinerGradientを参照させています。
描画要素であるrectと定義要素であるlinearGradientをここで紐づけているのですね。



<rect x = "167.9".... 「「1fill = "url(#SVGID_1_)"」」/>

また⬆︎のように、gradient定義の呼び出しは描画タグのfill属性で参照させることもできます。

④ <linearGradient> 〜 </linearGradient>の内部にあるこの<stop>要素は、カラーストップの内容を指定します。
ベクターソフトで作成したのは「黄色→青」と2色のグラデーションなので、<stop>要素が2つ、記述されています。

線形グラデーションの大まかな構造が分かったところで、<linearGradient>要素と<stop>要素の属性について、詳しく見ていきましょう。

 ■ linearGradientの属性。

linearGradientの開始タグに記述されている属性です。

<linearGradient id="SVGID_1_"「「1 ....①」」 gradientUnits="userSpaceOnUse"「「1 ....②」」 x1="167.9449" y1="297.6378" x2="673.9449" y2="297.6378"「「1 ....③」」 >

① id名
通常グラデーション定義には、あとから紐付けできるようにid名を指定します。

② gradientUnits属性
聞き慣れない属性です。これは、次に記述しているグラデーションの始点と終点の指定を、何を元にして定めるかを指定します。

属性の初期値は「objectBoundingBox」。
これは要素のバウンディングボックス(要素を囲むことのできる最小の長方形)を基準にします。


例のように値を「userSpaceOnUse」とすると、viewBox(可視範囲)の座標空間が基準に成増。



③ グラデーションの始点と終点
グラデーションのもととなる「方向を持った線分」の始点(x1,y1)と終点(x2,y2)を指定します。②のgradientUnitsにuserSpaceOnUseが指定されているため、ここではviewBoxの座標値を元に値が記述されています。

 ■ stopの属性。

1つのグラデーションに含めるカラーストップの数は2つ以上あれば好きな数を設定することができますが、個々の中身はどうなっているのか。
先程書き出したコードから<stop>要素を1つ取り出し、内容をみてみましょう。

<stop offset="0.1208"「「1 ....①」」 style="stop-color:#FFE88B"「「1 ....②」」 />

① offset。
グラデーションの始点を0、終点を1としたときのカラーストップの位置を指定します。
例では「0.1208」となっているので、このカラーストップはかなり始点寄りに配置されていることがわかります。

② stop-colorの指定。
カラーストップの色は、style属性のstop-colorプロパティで指定します。stop-colorはスタイルシートのプロパティなので、外部CSSから指定することも可能です。

円形グラデーション。


次は円形グラデーションのコードを見てみましょう。
ベクターソフト上で作ったさっきの長方形。塗りを線形グラデーションから円形グラデーションに変更しました。
この状態でSVGとして書き出してみます。

<radialGradient「「1 ....①」」 id="SVGID_1_" cx="420.95" cy="297.65" r="209.9872"「「1 ....②」」 gradientUnits="userSpaceOnUse" > <stop offset="0.4097" style="stop-color:#FFE88B"/> <stop offset="0.8241" style="stop-color:#8BD1FF"/> </radialGradient>

コード上でも、グラデーションの定義部分だけが変更されています。

① radialGradient。
円形グラデーションにしたことによって、タグ名が「linearGradient」から「radialGradient」に変わっています。

② 中心位置と半径 線形グラデーションの場合、その範囲を始点と終点を持つ「線分」で定義したのに対し、円形グラデーションでは、グラデーションの範囲となる「円」を定義します。
円オブジェクトを描画する時のように、cxとcyで中心の座標値、rで半径を指定します。
グラデーションの始点は定義した円の中心です。
色の変化は放射状に広がっていくため、終点は定義した円の外周部、ということに成増。

グラデーションの編集。


SVGグラデーションの原型は、ベクターソフトで作り出したほうが直感的です。

が、のちの内容変更や複製・アニメーションなどの用途を考えたとき。
SVGコードで編集する手法も知っておいたほうが、効率の良いほうを選択することができます。

 ■ 始点と終点の編集

グラデーションの始点や終点は、なにもオブジェクトの端部や中心とは限りません。

例えば⬆︎のような始点と終点を持たせても、グラデーションは成立します。

線形グラデーションのときに作った水平な線分上で塗られているグラデーション。
x1,y1属性の値を変更し、始点をviewBoxの原点に移動させてみます。

<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1=「「1"0%"」」 y1=「「1"0%"」」 x2="673.9449" y2="297.6378" >

グラデーションがこの⬆︎ように変化しました。

始点と終点およびカラーストップを可視化したものです。
カラーストップのオフセット値は変更していないので、新しく指定された始点と終点をむすぶ線分に対して、同じ割合で移動します。

 ■ カラーストップの追加

次はカラーストップを追加してみましょう。
50%の位置に緑のカラーストップをおいてみます。

<linearGradient ..."> <stop offset="0.1208" style="stop-color:#FFE88B"/> 「「1<stop offset="0.5" style="stop-color:#8affb3"/>」」 <stop offset="0.8923" style="stop-color:#8BD1FF"/> </linearGradient>

カラーストップにはstop-colorとoffsetの情報を与えます。
黄色と青の間に要素を記述しました。

緑のストップが追加されました。

 ■ オフセットは順に記述。

追加したストップのオフセットを変更してみましょう。「0」にして始点の位置に動かしてみます。

<stop offset="0.1208" style="stop-color:#FFE88B"/> <stop 「「4offset="0"」」 style="stop-color:#8affb3"/> <stop offset="0.8923" style="stop-color:#8BD1FF"/>

結果⬆︎なのですが..変ですね💧
黄色の部分がグラデーションしていません。

<stop>要素は、オフセット小→大の順に記述しないとうまくレンダリングされない模様。
今の例では、オフセット「0.1208」の黄色が先に記述され、その後にオフセット「0」の緑が記述されていました。順番を整理しましょう。

「「3<!-- 黄色と緑の記述を入れ替え」」 「「1<stop offset="0" style="stop-color:#8affb3"/>」」 <stop offset="0.1208" style="stop-color:#FFE88B"/> <stop offset="0.8923" style="stop-color:#8BD1FF"/>

今度はちゃんとできました。

しかしオフセットの記述順(値の小さいほうから順に書く)を守らなければいけないとなると、「カラーストップの入れ替えを動的に行う」などの実装にはひと工夫を要しますね。

これまで見てきた、

・始点と終点
・カラーストップの追加/削除
・カラーストップのオフセット位置

ほかにもSVGのグラデーションを構成する要素は存在するのですが、基本的にはこの3つです。みなさんもいろいろ実験してみてくださいね。

いづれ動かそう。


最後までお読みくださり、ありがとうございました。
当コーナーではSVGアニメーションについての記事を発信しているのですが、ここまでみてきたように、SVGのグラデーション実装にはいろいろな属性が必要でした。
そのためアニメーションさせる前に、先づはグラデーションの構造自体を知っておく必要があると思い、今回はグラデーションそのものについて、お話しすることにしました。

扨(さて)次はグラデーションを動かしていきましょう。記事がまとまり次第アップさせていただきます。ではまた〜 ♪



HSL変換を使った配色や色指定。

2021.09.24
配色パターンを秒作。

SVGでニューモフィズムのアニメーション。

2021.10.01
拡張性のある実装にしています。












「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。