【打倒Retinaその2】SVG入門〜いろいろなスタイル指定〜

2014年9月2日

Pocket

svg2

前回はSVGでの簡単な図形の描画方法について説明しました。
簡単な図形でしたが、複雑な図形を描くには、曲線のコマンドをうまく使うのが大変そうですね。
Illustratorで描いたパスをSVG形式で保存して描くこともできるので、Illustratorと応用したらかなり高度なデザインができそうです。
 
それでは、引き続きSVG第二弾をお送りします。
 
今回はグラデーションやテキスト、transformなどスタイルについてのレポートです。
 
 

グループ

<svg width="400" height="150">
   <g fill="blue">
      <rect x="50" y="50" width="50" height="50"/>
      <rect x="150" y="50" width="50" height="50" fill="red"/>
      <rect x="250" y="50" width="50" height="50"/>
   </g>
</svg>

gタグでくくった中身がグループ化されます。
一度にスタイルを設定したりする時に便利です。

スタイル

<style type="text/css">
   #group1{
      fill: yellow;
      stroke: red;
   }
   .groupclass{
      fill: green;
   }
</style>
<svg width="400" height="200">
   <rect id="group1" x="50" y="50" width="50" height="50"/>
   <rect id="group1" x="150" y="50" width="50" height="50" fill="red"/>
   <rect class="groupclass" x="250" y="50" width="50" height="50"/>
</svg>

idやclassをふってスタイルを付けれます。

グラデーションタグ

linearGradient 線形グラデーション
radialGradient 放射形グラデーション

 

linearGradient座標

yx011

グラデーション開始点(0,0)、終了点(1,1)
x1=”0″ y1=”0″ x2=”1″ y2=”1″
linearGradientでは、グラデーションの開始位置と終了位置を指定して、グラデーションの方向を指定します。

線形グラデーション

(1,0)→(1,1)(0,1)→(1,1)

<svg width="400" height="200">
   <defs>
      <linearGradient id="linear_grad1" x1="1" y1="0" x2="1" y2="1">
         <stop offset="0" stop-color="skyblue"/>
         <stop offset="1" stop-color="yellow"/>
      </linearGradient>
      <linearGradient id="linear_grad2" x1="0" y1="1" x2="1" y2="1">
         <stop offset="0.5" stop-color="salmon"/>
         <stop offset="1" stop-color="green"/>
      </linearGradient>
   </defs>
   <rect x="50" y="50" width="100" height="100" fill="url(#linear_grad1)"/>
   <rect x="200" y="50" width="100" height="100" fill="url(#linear_grad2)"/>
</svg>

linearGradientタグにidをふって、グラデーションを適用したいfill属性にurl(id名)を設定します。
offsetを変更するとグラデーション開始位置を変更できます。
左はグラデーション開始(1,0)、終了(1,1)の上から下にグラデーションをかけています。
右はグラデーション開始(0,1)、終了(1,1)の左から右にグラデーションをかけています。
開始(0,0)、終了(1,1)とすると左上から右下に斜めにグラデーションをかけることもできます。
 
今回新しく出てきたタグ

defs 定義 : スタイルやグラデーションなど、定義を書く

 

radialGradient座標

offset10 中心(cx,cy)

radialGradientでは、cx、cyで指定したグラデーションの開始位置から放射線状に外側にグラーデーションをかけます。

放射形グラデーション

中心点 (0.5,0.5)中心点 (0.3,0.3)

<svg width="400" height="200">
   <defs>
      <radialGradient id="radial_grad1" cx="0.5" cy="0.5" r="0.5">
         <stop offset="0" stop-color="skyblue"/>
         <stop offset="1" stop-color="yellow"/>
      </radialGradient>
      <radialGradient id="radial_grad2" cx="0.3" cy="0.3" r="0.5">
         <stop offset="0" stop-color="salmon"/>
         <stop offset="1" stop-color="green"/>
      </radialGradient>
   </defs>
   <circle cx="100" cy="100" r="50" fill="url(#radial_grad1)" />
   <circle cx="250" cy="100" r="50" fill="url(#radial_grad2)" />
</svg>

左は、グラデーション開始位置cx=0.5、cy=0.5の円の中心に指定しています。
右は、グラデーション開始位置cx=0.3、cy=0.3の円の左上に指定しています。

テキスト

SVGでテキストを挿入することもできます。
TEXT TEST1TEXT TEST2

<svg width="300" height="150">
   <text x="50" y="50" font-size="30" fill="black">TEXT TEST1</text>
   <text x="50" y="100" font-size="30" fill="yellow" stroke="red" stroke-width="1">TEXT TEST2</text>
</svg>

Illustratorと考え方は同じで、fillが塗り、strokeが枠線です。

パステキスト

texttesttexttest

<svg width="300" height="150">
   <defs>
      <path id="text_path" d="M 50 100 Q 120 50 190 100" stroke="black" fill="none"/>
   </defs>
   <text font-size="30" fill="black">
      <textPath xlink:href="#text_path">texttesttexttest</textPath>
   </text>
</svg>

テキストを乗せたいpathを定義しidをふっておき、textPathタグのリンクにidを指定します。

Transform

css指定するTransform属性も使えます。

■回転

<svg width="200" height="200">
   <rect x="50" y="50" width="100" height="100" fill="blue"
transform="rotate(30,100,100)"/>
</svg>

「rotate」:回転
rotate(回転角度,回転中心X,回転中心Y)

■拡大

<svg width="200" height="200">
   <rect x="25" y="35" width="50" height="50" fill="blue" transform="scale(2,1.5)"/>
</svg>

「scale」:拡大
scale(拡大値X,拡大値Y)
scale(2,1.5)では、X軸2倍、Y軸1.5倍に拡大しています。

■変形

<svg width="200" height="200">
   <rect x="30" y="50" width="100" height="100" fill="blue" transform="skewX(20)"/>
</svg>

「skewX」:X軸変形
「skewY」:Y軸変形
skewX(移動値)

 
 
 
他にもいろいろスタイル指定方法がありますが、とりあえず基本を押さえました。
ここまで、できるとだいぶデザインが自由になってきたのではないでしょうか!
次回は、SVGでのアニメーションについてリポートしたいと思います。
 
 
【打倒Retinaその1】劣化知らず!伸縮自在のベクター画像『SVG』
【打倒Retinaその3】SVG入門〜すぐに使える簡単アニメーション〜

このサイトについて


『意識低い系女と高い系男の一年戦争』はクリエイティブ会社エアゼの代表2人が運営するブログです。エアゼは、アプリ・Web・IoT・インタラクティブコンテンツのデザイン・開発を手がけています。

エアゼ ホームページ