■SVG (Scalable Vector Graphics)

SVGはベクタ図形を描画するためのマークアップ言語である。
※ W3C / Scalable Vector Graphics (SVG) 2
※ W3C / SVG入門
※ MDN / SVG チュートリアル


SVG画像の表示方法

HTMLでSVG画像を表示するには、次の方法がある。

<svg> 要素で、HTML内に直接SVGマークアップを記述する。
<svg width="160" height="120">
  <rect width="100%" height="100%"
    fill="silver" />
  <circle cx="50%" cy="50%" r="40"
    stroke="darkred" fill="pink" />
</svg>

<object> 要素で、SVGファイルを読み込む。
<object width="160" height="120"
  data="sample.svg">

<object> タグを使う場合、
動的なスタイル変更やスクリプト処理も有効になる。
←たとえば左図は円をクリックできる。

<img> 要素で、SVGファイルを画像として読み込む。
<img width="160" height="120"
  src="sample.svg">

<img> タグを使う場合、
動的なスタイル変更やスクリプト処理は無効。
←上と同じSVGだがクリック不可。

座標系

デフォルト座標系
(70,30)
<svg width="160" height="120">

論理サイズ 160x120 （1単位=1ピクセル）
X範囲 [0～160)
Y範囲 [0～120)

viewBox="xmin, ymin, w, h"   // w と h で座標を拡大縮小する
(70,30)
<svg width="160" height="120"
  viewBox="0,0 200,150">

論理サイズ 200x150 （1単位=0.8ピクセル）
X範囲 [0～200)
Y範囲 [0～150)

viewBox="xmin, ymin, w, h"   // xmin と ymin で原点を移動する
(70,30)
<svg width="160" height="120"
  viewBox="-100,-75 200,150">

論理サイズ 200x150 （1単位=0.8ピクセル）
X範囲 [-100～100)
Y範囲 [-75～75)

viewBox の縦横比が svg と一致しなくても、座標系は適切に調整される
(70,30)
<svg width="160" height="120"
  viewBox="-90,-90 180,180">   ←縦横比が svg と違う

論理サイズ 240x180   ←viewBox 全体が入るサイズに調整
X範囲 [-120～120)   ←適切に調整される
Y範囲 [-90～90)

おもな図形の種類

長方形： rect (x, y, width, height, [rx, ry])
<rect x="10" y="20" width="70" height="50"
  fill="pink" />
<rect x="30" y="30" width="80" height="60"
  stroke="darkred" fill="none" />
<rect x="50" y="40" width="90" height="70"
  stroke="darkblue" fill="none" rx="20" ry="20" />

円： circle (cx, cy, r)
<circle cx="60" cy="50" r="30"
  fill="pink" />
<circle cx="90" cy="70" r="40"
  stroke="darkred" fill="none" />

楕円： ellipse (cx, cy, rx, ry)
<ellipse cx="60" cy="50" rx="30" ry="40"
  fill="pink" />
<ellipse cx="90" cy="70" rx="40" ry="20"
  stroke="darkred" fill="none" />

直線： line (x1, y1, x2, y2)
<line x1="10" y1="20" x2="150" y2="110"
  stroke="darkred" />
<line x1="30" y1="100" x2="150" y2="10"
  stroke="darkblue" stroke-width="4" />

連続直線： polyline (points)
<polyline points="10,30 80,50 20,100 50,20 60,100"
  stroke="darkred" fill="none" />
<polyline points="80,20 150,40 90,90 120,10 130,90"
  stroke="darkblue" fill="pink" />

多角形： polygon (points)
<polygon points="10,30 80,50 20,100 50,20 60,100"
  stroke="darkred" fill="none" />
<polygon points="80,20 150,40 90,90 120,10 130,90"
  stroke="darkblue" fill="pink" />

パス： path (d) 【pathコマンド】
<path stroke="darkred" fill="pink" d="
  M 40,50
  a 20,20,0 0,1 40,0
  a 20,20,0 0,1 40,0
  q 0,30 -40,50
  q -40,-20 -40,-50 z" />

画像： image (href, x, y, width, height)
<image href="fukureru.png"
  x="0" y="20" width="90" height="90" />
<image href="banzai.png"
  x="70" y="10" width="90" height="90" />

テキスト： text (x, y) 【font属性】
Hello, world!
<text x="10" y="40" font-size="32"
  font-family="roman,serif" font-weight="bold">
  Hello,</text>
<text x="10" y="90" font-size="48"
  font-family="arial,sans-serif" fill="darkred">
  world!</text>

パス沿いのテキスト： text + textPath
Hello, world!
<path id="foo" stroke="darkred" fill="none"
  d="M20,60 q60,-50,120,30" />
<text font-size="20"><textPath href="#foo">
  Hello, world!
</textPath></text>

線の引き方

stroke-width 属性： 線の太さ
幅=1 幅=4 幅=7
stroke-width="1" がデフォルト。

<line>, <polyline>, <polygon>, <path>,
<circle>, <ellipse> で利用可能。

stroke-dasharray 属性： 点線や鎖線の表示
7,3 2,2 7,3,2,3
stroke-dasharray="7,3" なら、
「長さ 7 の線 + 長さ 3 の空白」を繰り返す。

<line>, <polyline>, <polygon>, <path>,
<circle>, <ellipse> で利用可能。

stroke-linecap 属性： 端の処理
butt round square
stroke-linecap="butt"切断（デフォルト）
stroke-linecap="round"丸
stroke-linecap="square"四角
<line>, <polyline>, <polygon>, <path>
で利用可能。

stroke-linejoin 属性： 角の処理
miter bevel round
stroke-linejoin="miter"鋭角（デフォルト）
stroke-linejoin="round"丸カット
stroke-linejoin="bevel"直線カット
<polyline>, <polygon>, <path>
で利用可能。

色の塗り方

色の指定： stroke="線の色"、fill="面の色"
pink #99EE99 RGB(150,200,250) RGB(90%,65%,40%)
色の表現はいろいろな書き方がある。
pink[色名] で指定
#99EE99#RRGGBB（16進）
RGB(150,200,250)RGB 0～255
RGB(90%,65%,40%)RGB 0%～100%

色を塗らない： stroke="none"、fill="none"
色名 "none"（または "transparent"）で無色になる。

←上から順に
stroke="darkred" fill="pink"
stroke="darkred" fill="none"
stroke="none" fill="pink"

交差する図形の塗り方： fill-rule 属性
nonzero evenodd
2種類の塗り方がある。
fill-rule="nonzero"すべて塗る（デフォルト）
fill-rule="evenodd"交互に塗る

（メモ：交差する図形の外枠のみ描く）
次の手順で、外枠のみ描くことができる。
(1) 枠線のみを太めに描く
    stroke-width="2" fill="none"
(2) 枠線なしで面を塗りつぶす
    stroke="none" fill="pink"

不透明度の指定： opacity、stroke-opacity、fill-opacity
opacity=100%で通常色、opacity=0%で透明になる。
opacity="～%"すべての不透明度
stroke-opacity="～%"線の不透明度
fill-opacity="～%"面の不透明度
←白い円の上に赤緑青を opacity="40%" で表示。

グラデーション

直線グラデーション： linearGradient 要素
<linearGradient id="gL01">
    <stop stop-color="#000000" offset="0%" />
    <stop stop-color="#E00000" offset="50%" />
    <stop stop-color="#E0E000" offset="100%" />
</linearGradient>

放射状グラデーション： radialGradient 要素
<radialGradient id="gC01">
    <stop stop-color="#000000" offset="0%" />
    <stop stop-color="#E00000" offset="50%" />
    <stop stop-color="#E0E000" offset="100%" />
</radialGradient>

グラデーション変形： gradientTransform 属性
gL01 gL02 gC01 gC02
gL01: デフォルトの linearGradient
gL02: scale(0.2, 1) translate(1, 0)

gC01: デフォルトの radialGradient
gC02: scale(0.2, 1) translate(1, 0)

グラデーション拡張： spreadMethod 属性
pad repeat reflect pad repeat reflect
pad両端の色を拡張する（デフォルト）
repeat0% → 100% を繰り返す
reflect0% → 100% → 0% を繰り返す

←3種類の spreadMethod でグラデーションを拡張。

線形変換による図形の変形

※ W3C / Scalable Vector Graphics (SVG) 2
※ W3C / SVG入門
※ MDN / SVG チュートリアル
※ MDN / SVG 要素一覧
※ MDN / SVG 属性一覧