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

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

filter処理などは、[svg要素の基本的な使い方まとめ](http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_11.htm)などで解り易く解説されていますのでそちらを参照ください。
ここでは、非常に基礎的なところから。

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

* [W3C公式サイト](http://www.w3.org/Graphics/SVG/) 
* [SVG 1.1 仕様（第２版）](http://www.w3.org/TR/SVG11/) - [日本語訳（非公式）](http://www.hcn.zaq.ne.jp/___/SVG11-2nd/index.html#minitoc)

# 解説用サンプル
[shields.io](http://shields.io/)にて生成されるバッジSVGを使います。

* [バッジ仕様](https://github.com/badges/shields/blob/master/spec/SPECIFICATION.md)
* [バッジテンプレート](https://github.com/badges/shields/blob/master/templates/default-template.svg)

http://img.shields.io/badge/subject-status-brightgreen.svg
![Badge](http://img.shields.io/badge/subject-status-brightgreen.svg)

```xml
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](http://www.w3.org/TR/SVG11/struct.html#SVGElement)ドキュメント
```xml
1  <svg xmlns="http://www.w3.org/2000/svg" width="95" height="18">
...
18 </svg>
```
<code>width</code>、<code>height</code>属性で表示サイズを指定する。
<code>viewBox</code>で表示範囲を指定することができる。

## 角丸矩形を描画する（subject背景）
```xml
8    <rect rx="4" width="95" height="18" fill="#555"/>
```
![sample_01.png](https://qiita-image-store.s3.amazonaws.com/0/24703/d441b320-70c8-630f-27c9-5c54dd8ff176.png)

角丸矩形は[<code>rect</code>](http://www.w3.org/TR/SVG11/shapes.html#RectElement)タグを使って表現する。

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

## 角丸矩形を描画する（status背景）
```xml
9    <rect rx="4" x="51" width="44" height="18" fill="#4c1"/>
```
![sample_02.png](https://qiita-image-store.s3.amazonaws.com/0/24703/94164d2b-7de6-1960-06a0-936065f23356.png)

角丸矩形は、「subject」同様[<code>rect</code>](http://www.w3.org/TR/SVG11/shapes.html#RectElement)タグを使う。

## 角丸矩形の左辺を矩形にする
```xml
10   <path fill="#4c1" d="M51 0h4v18h-4z"/>
```
![sample_03.png](https://qiita-image-store.s3.amazonaws.com/0/24703/64602b8e-8713-72de-02f1-4ed2e4a9dfcf.png)

角丸を塗りつぶすために<code>[path](http://www.w3.org/TR/SVG11/paths.html#PathElement)</code>タグを使用する。

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

判り易くするために、塗りつぶす色を赤にすると以下のようになる。
![sample_03b.png](https://qiita-image-store.s3.amazonaws.com/0/24703/8b01acae-8e5a-7bee-fdc4-984d96a2c2f1.png)

<code>rect</code>タグで矩形描画するのと同じ。

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

## グラデーションを重ねる
```xml
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)"/>
```
<code>[linearGradient](http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement)</code>タグで線形グラデーションを定義する。
<code>rect</code>タグの<code>fill</code>属性で、定義したグラデーションを指定して描画する。
![sample_04.png](https://qiita-image-store.s3.amazonaws.com/0/24703/9fab3e3c-918e-0859-5b8b-c0f370c6b94b.png)

グラデーションを判り易くするために、不透明度100%にして描画すると以下のようになる。
![sample_06.png](https://qiita-image-store.s3.amazonaws.com/0/24703/058ffc3a-8a61-9302-abee-c6b8d56f13c5.png)

## 文字を描画する
```xml
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>
```
<code>[g](http://www.w3.org/TR/SVG11/struct.html#GElement)</code>タグでグラフィックス要素（文字）をグループ化する。

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

### 文字（影）
```xml
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>
```
<code>[text](http://www.w3.org/TR/SVG11/text.html#TextElement)</code>タグでテキストを描画する。
y+1、不透明度30%で影をつける。
![sample_07.png](https://qiita-image-store.s3.amazonaws.com/0/24703/919f44b2-9bb4-2c76-4a8d-178b37dd154e.png)

### 文字
```xml
14     <text x="26.5" y="13">subject</text>
...
16     <text x="72.0" y="13">status</text>
```
<code>[text](http://www.w3.org/TR/SVG11/text.html#TextElement)</code>タグでテキストを描画する。
![sample_05.png](https://qiita-image-store.s3.amazonaws.com/0/24703/65783bc6-f45a-d4d2-a17c-608ba79c28e3.png)