最近の主要PCブラウザはネイティブサポートしているSVG。
扱う機会があったので、少し勉強してみようと思います。
filter処理などは、svg要素の基本的な使い方まとめなどで解り易く解説されていますのでそちらを参照ください。
ここでは、非常に基礎的なところから。
SVG(Scalable Vector Graphics)
Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。
解説用サンプル
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
タグでテキストを描画する。