画像形式SVG(Scalable Vector Graphics)学習

最近の主要PCブラウザはネイティブサポートしているSVG。
扱う機会があったので、少し勉強してみようと思います。

filter処理などは、svg要素の基本的な使い方まとめなどで解り易く解説されていますのでそちらを参照ください。
ここでは、非常に基礎的なところから。

SVG(Scalable Vector Graphics)

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

• W3C公式サイト
• SVG 1.1 仕様（第２版） - 日本語訳（非公式）

解説用サンプル

shields.ioにて生成されるバッジSVGを使います。

• バッジ仕様
• バッジテンプレート

http://img.shields.io/badge/subject-status-brightgreen.svg

1  <svg xmlns="http://www.w3.org/2000/svg" width="95" height="18">
2    <linearGradient id="a" x2="0" y2="100%">
3      <stop offset="0.0" stop-color="#fff" stop-opacity=".7"/>
4      <stop offset="0.1" stop-color="#aaa" stop-opacity=".1"/>
5      <stop offset="0.9" stop-color="#000" stop-opacity=".3"/>
6      <stop offset="1.0" stop-color="#000" stop-opacity=".5"/>
7    </linearGradient>
8    <rect rx="4" width="95" height="18" fill="#555"/>
9    <rect rx="4" x="51" width="44" height="18" fill="#4c1"/>
10   <path fill="#4c1" d="M51 0h4v18h-4z"/>
11   <rect rx="4" width="95" height="18" fill="url(#a)"/>
12   <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
13     <text x="26.5" y="14" fill="#010101" fill-opacity=".3">subject</text>
14     <text x="26.5" y="13">subject</text>
15     <text x="72.0" y="14" fill="#010101" fill-opacity=".3">status</text>
16     <text x="72.0" y="13">status</text>
17   </g>
18 </svg>

(解説用に整形、行番号を付加しています)

解説

svgドキュメント

1  <svg xmlns="http://www.w3.org/2000/svg" width="95" height="18">
...
18 </svg>

width、height属性で表示サイズを指定する。
viewBoxで表示範囲を指定することができる。

角丸矩形を描画する（subject背景）

8    <rect rx="4" width="95" height="18" fill="#555"/>

角丸矩形はrectタグを使って表現する。

属性	説明
rx	角丸の X 軸半径の長さ
ry	省略するとrxと同じ値となる
x	矩形の左辺の X 座標。省略は 0
y	矩形の上辺の Y 座標。省略は 0
width	矩形の幅
height	矩形の高さ
fill	指定した色で塗りつぶし

角丸矩形を描画する（status背景）

9    <rect rx="4" x="51" width="44" height="18" fill="#4c1"/>

角丸矩形は、「subject」同様rectタグを使う。

角丸矩形の左辺を矩形にする

10   <path fill="#4c1" d="M51 0h4v18h-4z"/>

角丸を塗りつぶすためにpathタグを使用する。

属性	説明
fill	指定した色で塗りつぶし
d	図形の外形線の定義

判り易くするために、塗りつぶす色を赤にすると以下のようになる。

rectタグで矩形描画するのと同じ。

<rect x="51" width="4" height="18" fill="#4c1"/>

グラデーションを重ねる

2    <linearGradient id="a" x2="0" y2="100%">
3      <stop offset="0.0" stop-color="#fff" stop-opacity=".7"/>
4      <stop offset="0.1" stop-color="#aaa" stop-opacity=".1"/>
5      <stop offset="0.9" stop-color="#000" stop-opacity=".3"/>
6      <stop offset="1.0" stop-color="#000" stop-opacity=".5"/>
7    </linearGradient>
...
11   <rect rx="4" width="95" height="18" fill="url(#a)"/>

linearGradientタグで線形グラデーションを定義する。
rectタグのfill属性で、定義したグラデーションを指定して描画する。

グラデーションを判り易くするために、不透明度100%にして描画すると以下のようになる。

文字を描画する

12   <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
13     <text x="26.5" y="14" fill="#010101" fill-opacity=".3">subject</text>
14     <text x="26.5" y="13">subject</text>
15     <text x="72.0" y="14" fill="#010101" fill-opacity=".3">status</text>
16     <text x="72.0" y="13">status</text>
17   </g>

gタグでグラフィックス要素（文字）をグループ化する。

属性	説明
fill	指定した色で塗りつぶし
text-anchor	指定された値に従いテキスト文字列を相対的に揃える
font-family	使用するフォントを優先順位付きのリストで師弟
font-size	フォントのサイズ

文字（影）

13     <text x="26.5" y="14" fill="#010101" fill-opacity=".3">subject</text>
...
15     <text x="72.0" y="14" fill="#010101" fill-opacity=".3">status</text>

textタグでテキストを描画する。
y+1、不透明度30%で影をつける。

文字

14     <text x="26.5" y="13">subject</text>
...
16     <text x="72.0" y="13">status</text>

textタグでテキストを描画する。