Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【SVG】SVGもグラデーションを使って絵をかっこよくしてみる!

 どうも!LSSです!!

 

この間、

 SVGで初めて絵を描いてみました。

 

…といっても「全面を水色で塗りつぶす四角」「赤い丸」「下部を黄緑で塗る四角」を配置しただけのシンプルな絵でしたね。

 

で。

SVGCSSと同様に「グラデーション」を使う事ができます。

名前もよく似ています。

直線グラデーション
CSS「linear-gradient」 SVG「linearGradient」

円形グラデーション
CSS「radial-gradient」 SVG「radialGradient」

といった具合。

 

今回はその、SVGのグラデーション機能を試して「初めてのSVGお絵描き」をパワーアップさせてみます^^

 

 

まず、以前描いた画像

 

 青空、お日様、草原!

…お日様が真っ赤(red)なのが嘘くさいですがw

 

 

SVGグラデーションを用いたリメイク画像!

 

 

コード

<p>[]
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400">
 <defs>
  <radialgradient id="rg" cx="75%" cy="20%" r="20%">
   <stop offset="30%" stop-color="white"></stop>
   <stop offset="100%" stop-color="lightblue"></stop>
  </radialgradient>
  <lineargradient id="lg" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" stop-color="lightgreen"></stop>
   <stop offset="100%" stop-color="green"></stop>
  </lineargradient>
 </defs>
<rect x="0" y="0" width="300" height="400" fill="url(#rg)"></rect>
<rect x="0" y="300" width="300" height="100" fill="url(#lg)"></rect>
</svg>
[]</p>

  

 

SVGではグラデーションは定義しておいてから呼び出す

 定義している部分のコード

<defs>
 <radialgradient id="rg" cx="75%" cy="20%" r="20%">
  <stop offset="30%" stop-color="white"></stop>
  <stop offset="100%" stop-color="lightblue"></stop>
 </radialgradient>
 <lineargradient id="lg" x1="0%" y1="0%" x2="0%" y2="100%">
  <stop offset="0%" stop-color="lightgreen"></stop>
  <stop offset="100%" stop-color="green"></stop>
 </lineargradient>
</defs>

 

<defs>から</defs>までの内容は、「定義」するだけの部分となります。

予めここに、使いたいグラデーションの設定を書いておき、後から<defs>の外側に書いた図形コードで呼び出して、グラデーションで塗る、という感じですね。

 

で、円形グラデーションの設定に当たる部分は、

 

コード

<radialgradient id="rg" cx="75%" cy="20%" r="20%">
 <stop offset="30%" stop-color="white"></stop>
 <stop offset="100%" stop-color="lightblue"></stop>
</radialgradient>

 

この部分になります。

 

 

円形グラデーションの定義

<radialgradient id="rg" cx="75%" cy="20%" r="20%">

まず、円形グラデーションについて。

…手元の本には「radialGradient」とGだけ大文字で書く事になっていましたが、これがまた、はてなブログでは勝手に小文字に変更されてしまいます^^;

でも、小文字でもちゃんと表示されているようですねw

 

この一文は
「円形グラデーションを rg という名前で定義します。
円の中心となるのは、横位置が(全体の幅の)75%に当たる位置(左端を0%、右端を100%とした場合の)、縦位置が(全体の高さの)20%に当たる位置(上端を0%、下端を100%とした場合の)。
円の半径のサイズは全体の20%です。」
という意味の指定となります。

 

次の行、
<stop offset="30%" stop-color="white"></stop>

「グラデーションの30%の位置の色は白で。」

さらに次の行、
<stop offset="100%" stop-color="lightblue"></stop>

「グラデーションの100%の位置の色は水色で。」

 

…と、グラデーションの色を指定しており、こうしておくと、30%~100%の間が
「白から水色に徐々に変化するグラデーション」
となります。

 

この指定方法、書式(書き方)は違いますが、

 

考え方はCSSと全く同じですね!

 

 

直線グラデーションの定義

同様に、直線グラデーションについても

<lineargradient id="lg" x1="0%" y1="0%" x2="0%" y2="100%">
 <stop offset="0%" stop-color="lightgreen"></stop>
 <stop offset="100%" stop-color="green"></stop>
</lineargradient>

の部分で定義しています。

 

SVGの直線グラデーションの場合、グラデーションの向かう方向を
x1="0%" y1="0%" x2="0%" y2="100%"
という形で指定します。

 

ここでいう x1,y1 が始点、 x2,y2 が終点で、始点から終点に向かう方向のグラデーション、という指定の仕方になります(この場合、真下に向かうグラデーションになります)。

ここは、CSSの時は角度で指定していたのでだいぶ違う書き方になりますね。

 

で、

<stop offset="0%" stop-color="lightgreen"></stop>
<stop offset="100%" stop-color="green"></stop>

薄い緑から普通の緑に変化するように指定しました。

 

 

四角形を描画し、定義しておいたグラデーションで塗る

のが、

<rect x="0" y="0" width="300" height="400" fill="url(#rg)"></rect>
<rect x="0" y="300" width="300" height="100" fill="url(#lg)"></rect>

この部分になります。

 

まず1行目のほうは、
<rect x="0" y="0" width="300" height="400" fill="url(#rg)"></rect>

「座標0,0(左上の角)から始まり、幅300、高さ400の四角形で、rgというidで定義した塗り方で塗りつぶす。」
という指定になります。

rgというidで定義したのは「白から水色に変化する円形グラデーション」なので、
「白い太陽と水色の空をひとつの四角形で描画」
する事になります^^

 

次の2行目は、
<rect x="0" y="300" width="300" height="100" fill="url(#lg)"></rect>
「座標0,300から始まり、幅300、高さ100の四角形で、lgというidで定義した塗り方で塗りつぶす。」
という指定になります。

lgというidで定義したのは「薄い緑から普通の緑に変化する下向きの直線グラデーション」なので、
「画像下部の草原を、上のほうは薄い緑、下にいくほど緑色が濃くなる四角形で描画」
する事になります。

 

 

そうしてできた画像がこちら!

 

上記のコードで描くとこうなります^^

前作に比べると、だいぶマシになりましたね!

 

…でも、よく見ると、少々太陽が縦に間延びしているような…。

 

これはもしかするとあれかな。

「300×400の四角形にグラデーションを当てた事で、縦が長い分のびてしまっている」のかも?

 

ちょっとだけ修正します。

 

 

ひとつめの四角形のrectタグの、heightの部分だけを、

 <rect x="0" y="0" width="300" height="300" fill="url(#rg)"></rect>

と修正しました。

 

きれいな丸い太陽になりましたね^^

 

 

あとがき

SVGについてはまだまだ駆け出しもいいとこな自分ですが、やっぱりグラデーションを使うと一気に絵がかっこよくなりますね^^

 

まだまだSVGもできる事が色々残っていて、例えばクリッピング(切り抜き)だとか、アニメーションだとか。

画像の一部にリンクを仕込む、なんて事もできるそうなんですが、画像ファイルにしたSVGにもできるのか、こうしてHTML中にコードとして書いた場合だけなのか、も試してみたいですね。

 

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^