SVGベクターグラフィックガイド

SVGについて

カラー指定

ビューポート

スタイルシート

SVGの基本的なグラフィック

矩形描画（rect）
円描画（circle）
楕円描画（ellipse）
直線描画（line）
連続した折れ線描画（polyline）
多角形描画（polygon）
線の端点の形状（linecap）
角の接続点の形状（linejoin）
破線のパターン（dasharray）
輪郭線（パス）描画（path）
テキストを描画（text）
テキストの属性を部分変更（tspan）
テキストをパスに沿って配置（textPath）
グラフィックをグループ化（g）
グループの再利用（use）
グラフィックをグループ定義（symbol）
グラフィックを定義（defs）
リンクの設定（link）
描画範囲（クリッピングパス）の定義（clipPath）
画像を表示（image）

線と塗りつぶしの共通属性

グラフィックの要素には、線と塗りつぶしについて共通して次の属性を指定できます。

stroke属性	グラフィックの輪郭の線の太さと色を指定する。 stroke="色" stroke-width="2" stroke属性を省略した場合は、輪郭を描画しない。
fill	属性塗りつぶしを指定する。 fill="色" fill="none" ※ 内部を塗りつぶさない fill属性を省略した場合は通常は黒の塗りつぶしになる。塗りつぶさない場合は明示的にnoneを指定する必要がある。
opacity属性 stroke-opacity属性 fill-opacity属性	グラフィック内部の不透明度を指定する。 opacity="不透明度" 0.0 = 完全に透明 1.0 = 完全に不透明最大値が完全な不透明を示すので透明度ではない。線の不透明度はstroke-opacity、塗りつぶしの不透明度はfill-opacity属性、グラフィック全体の不透明度はopacity属性で指定する。

fill属性を指定しない場合は、黒の塗りつぶしになり、stroke属性の指定がない場合は輪郭線は描画しないことに注意してください。

矩形描画 rect 要素

属性
x y	左上の座標
width height	横・縦の長さ
rx ry	角を丸くするときの楕円の横・縦の半径 ry省略時はrxと同値。

矩形（四角形）を描画します。

矩形の座標は、線の太さの中心が基準になります。幅の広い線の半分の幅が、長方形の座標の外側に出ています。

円描画 circle 要素

属性
cx cy	円の中心座標
r	半径

円を描画します。

楕円描画 ellipse 要素

属性
cx cy	円の中心座標
rx ry	x軸方向・y軸方向の半径

楕円を描画します。

直線描画 line 要素

属性
x1 y1	始点座標
x2 y2	終点座標

直線を描画します。stroke属性を指定しないと描画されません。

連続した折れ線描画 polyline 要素

属性
points	折れ線の各頂点の座標のリストXnとYnのペアをカンマか空白で区切って並べる。 points="X1 Y1 X2 Y2 X3 Y3 ..." points="X1,Y1 X2,Y2 X3,Y3 ..."

連続した直線を描画します。
stroke属性を指定しないと描画されません。fill属性にnoneを指定しないと直線で閉じた部分を塗りつぶそうとします。

多角形描画 polygon 要素

属性
points	多角形の各頂点の座標のリストXnとYnのペアをカンマか空白で区切って並べる。 points="X1 Y1 X2 Y2 X3 Y3 ..." points="X1,Y1 X2,Y2 X3,Y3 ..." 終点を始点と同じ座標にしなくても、最後から先頭の座標へ自動で閉じる。

３点以上の頂点を持つ直線で構成する閉じた図形を描画します。
六角形や星形のような幾何学的な多角形だけではなく、頂点を自由に設定して不規則な多角形を描画できます。

線は交差できます。fillの指定は線で閉じた部分をなるべく塗りつぶそうとします。

線の端点の形状 stroke-linecap 線の属性

属性値
butt	端点で断ち切る
round	端点を中心にした半円
square	端点を中心にした四角

線を描画するときの端点の形状を指定します。
suqareとroundは、端点座標を中心とした丸と四角で終端します。この場合line要素で指定する長さよりも線の太さの分だけ長くなります。

角の接続点の形状 stroke-linejoin 線の属性

属性値
miter	とがった形
round	丸
bevel	角を削る（面取り）

線を描画するときの角の接続点の形状を指定します。

破線のパターン stroke-dasharray 線の属性

属性
stroke-dasharray	破線の線と空白の長さのパターンをカンマで区切って並べる。 stroke-dasharray="線, 空白, 線 ..."

破線の白黒の長さのパターンを定義します。
線と空白の繰り返しパターンなので通常は偶数個を指定することになります。
奇数の場合はパターンが繰り返されるときに、線と空白の長さが逆転します。たとえば「8,3,5」とすると、1パターン目は「線8、空白3、線5」となりますが、2パターン目は「空白8、線3、空白5」となり線と空白の長さが入れ替わります。

輪郭線（パス）描画 path 要素

属性

描画方法と座標を組み合わせたコマンドを指定する。
コマンドは1文字のアルファベットに続けて座標やパラメータを指定する。コマンドやパラメータはカンマか空白で区切って並べる（コマンド・パラメータ間はつなげてもよい）。座標はX、Yの順とする。
コマンドの大文字と小文字は座標指定方法で区別する。

大文字：絶対座標
小文字：相対座標

描画方法のコマンド列に従いグラフィックの輪郭を描画します。
描画する以外に、マスキング領域やクリッピング領域の指定にも利用されます。

d属性に指定するコマンドは以下があります。

d属性コマンド
M(m)	現在位置の移動描画位置の座標を移動する。移動の軌跡は描画されない。 d="M 30,15 m 50,40" 最初の描画位置を決めるために、d属性の先頭は必ずMコマンドから開始する。
L(l)	直線の描画現在位置から指定する座標へ直線を描画する。 d="M 30,15 l 40,0 l 0,40 l -40,0 l 0,-40"
H(h)	水平線の描画現在位置のY座標を維持し、X座標まで直線を描画する。 d="M 30,15 H 80"
V(v)	垂直線の描画現在位置のX座標を維持し、Y座標まで直線を描画する。 d="M 20,50 v -20"
Z(z)	直線で図形を閉じる現在位置から開始点へ直線を描画して図形を閉じる。 Z(z)はパラメータを指定しない。また大文字と小文字に区別はない。 d="M 10,10 l 40,0 l 0,40 l -40,0 Z"
Q(q)	二次ベジェ曲線の描画現在位置を起点とし、続く制御点によりカーブする曲線を描画し最後の制御点に到達する曲線を描画する。制御点は２つ指定する。d="M 10,20 Q 40,0 60,20"
C(c)	三次ベジェ曲線の描画現在位置を起点とし、続く2つの制御点によりカーブする曲線を描画し最後の制御点に到達する曲線を描画する。制御点は３つ指定する。d="M 20,20 C 10,35 40,50 20,70"
A(a)	楕円弧の描画現在位置を起点とし、指定する座標までを楕円弧で描画する。次の7つのパラメータを指定する。 ① X軸方向の楕円弧の半径 ② Y軸方向の楕円弧の半径 ③ 楕円の x軸の回転角度 ④ 1なら長弧(large arc:180 度以上)、0なら短弧(small arc:180 度未満) ⑤ 1なら時計回り(clockwise)、0なら反時計回り(counterclockwise) ⑥ 楕円弧が終了するx座標 ⑦ 楕円弧が終了するy座標 d="M 30,50 a 35,30 0 0,0 60,20"

テキストを描画 text 要素

属性
x	テキストのx座標（デフォルトで先頭）
y	テキストベースラインのy座標
font-size	フォントサイズ
font-family	フォントファミリ名以下のジェネリックフォントファミリは環境に応じたフォントが選択される。 serif／sans-serif／cursive／fantasy／monospace
font-weight	フォントの太さ normal／bold
font-style	フォントスタイル normal／italic／oblique
text-decoration	テキスト装飾 none（なし＝デフォルト） underline（下線） overline（上線） line-through（取り消し線）
word-spacing	単語の間隔（normalを指定すると標準間隔になる）
letter-spacing	文字の間隔（normalを指定すると標準間隔になる）
text-anchor	テキストの基準 start（先頭にあわせる） middle（中央にあわせる） end（終了にあわせる）
baseline-shift	垂直方向の移動 super（上付き） sub（下付き）パーセンテージ（負数の場合はベースライン下方向） emなど長さ（負数の場合はベースライン下方向）

テキストを描画します。
テキストの属性は一般的なCSSで使われるものと共通です。

テキストの属性を部分変更 tspan 要素

text要素の途中のテキストに異なる属性を適用します。

baseline-shift属性では途中の文字からベースラインを移動して上付き文字や下付き文字を表現できます。
この機能は環境により正しく表示されないことがあります。

テキストをパスに沿って配置 textPath 要素

属性
xlink:href	テキストを配置するガイドとなるパスのid名を指定する。名前空間「xmlns:xlink="http://www.w3.org/1999/xlink"」の宣言が必要。

パスの線上に沿ってテキストを表示します。
ガイドとなるパスは、path要素にid属性で名前を設定します。
表示するテキストは、text要素の中でtextPath要素にパスのid名を参照します。

path要素をdefs要素の中に入れると、パスが描画目的ではないガイドラインの定義であることをより明確にできます。

グラフィックをグループ化 g 要素

属性
id	グループの名称

g要素の中に記述されるグラフィックは、複数のグラフィックの集まりを、グループ化したオブジェクトとして扱うことができます。
g要素に設定する属性は、グループ内のグラフィックに共通して適用されます。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http:/awww.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <g id="square"
        stroke-width="2" stroke="blueviolet" fill="lime">
        <rect x="10" y="10" width="60" height="60"/>
        <rect x="20" y="20" width="40" height="40"/>
        <rect x="30" y="30" width="20" height="20" fill="yellow"/>
    </g>
</svg>

グループの再利用 use 要素

属性
xlink:href	参照するグループのid名グループ名の前に「#」を付ける。名前空間「xmlns:xlink="http://www.w3.org/1999/xlink"」の宣言が必要。

グループ化したグラフィックのid属性に設定された名称をhref属性で参照することで、グラフィックを再描画できます。

グラフィックをグループ定義 symbol 要素

属性
id	グループの名称

g要素と同様にグラフィックをグループ化します。
g要素がグループ内のグラフィックを描画するのに対し、symbol要素の中は描画されません。use要素で利用することを前提として定義のみを行います。

グラフィックを定義 defs 要素

属性
id	グループの名称

defs要素の中のグラフィックを定義します。
defs要素で囲んだグラフィックは描画はされません。
id名を設定するグラフィックを、それ自体は描画せずにid名で他のグラフィックで利用できます。

リンクの設定 link 要素

属性
xlink:href	参照するグループのid名。名前空間「xmlns:xlink="http://www.w3.org/1999/xlink"」の宣言が必要。

SVGグラフィックをアンカーとする別のデータへのリンクを作成します。
リンク先はhref属性でURIを指定します。

描画範囲（クリッピングパス）の定義 clipPath 要素

属性
id	クリッピングパスの名称

clipPath要素が定義するグラフィックを「クリッピングパス」として、その内側の領域だけを切り抜いて表示します。
任意のグラフィックの clip-path属性にクリッピングパスの名前を指定すると、そのグラフィックはクリッピングパスの内側だけが表示されます。また、クリッピングパス自体は表示されません。

クリッピングパス適用属性
clip-path	クリッピングパスを指定する。 clip-path="url(#クリッピングパスの名称)"

画像を表示 image 要素

属性
xlink:href	画像ファイルのURIを指定する。名前空間「xmlns:xlink="http://www.w3.org/1999/xlink"」の宣言が必要。
x y	領域の左上の点の座標
width height	領域の幅と高さ

長方形の領域内にラスター画像ファイル、または別のSVGを貼りつけて描画します。
width/height属性の指定範囲に元画像を拡大・縮小して表示します。ラスター画像はJPEGとPNGをサポートします。