１３　グラフィックス（SVG）

１３．１ Scalable Vector Graphics　(svg)

Scalable Vector Graphics（以下 SVG）は XML をベースとしたテキストベースの画像表現形式です。

SVG は PNG などの一般的な画像形式と異なり、ベクトルデータとして画像を表現します。このため、概念上は「画像サイズ」というものが存在しません。SVG では画像は平面上に無限に広がっており、その特定の場所に図形を配置しているだけと考えます。

そのため、HTML 文書などに画像を表示する場合は、svg 要素に viewbox、および width、height という属性が用意されており、表示範囲（viewbox）と表示領域のサイズ（width、height）が指定できるようになっています。

viewBox 属性は、元の画像の左上の X 座標と Y 座標、そして幅と高さを指定します。そして、width、height 属性でその画像を HTML 上に表示する表示領域の幅と高さを定義します。

なお、SVG は XML として定義されています。XML では内容のあるタグは必ず開始タグ（<tag>）と終了タグ（</tag>）とでその内容を挟んで記述します（HTML と同じ）。そして、内容を持たないタグも終了タグを必要としていないということを明示しなければなりません。具体的には、開始タグの終わりを /> で閉じる必要があります（HTML と異なる）。

例えば、終了タグがない circle タグは次のように記述します。

  <circle cx="100" cy="100" r="80"/>　　　　　　　　　←　/> でタグを閉じる

ただし、（終了タグのある）開始タグを閉じるのは、HTML と同じ > です。/> ではありませんので、間違えないようにしてください。

svg 要素

元の画像の表示範囲と HTML での表示領域の幅と高さを定義する。

SVG の場合は、左上隅が原点 (0, 0) になる。水平方向は右へ行くにつれて、垂直方向は下に行くほどそれぞれ値が増大する。

属性

属性名	属性値	説明	必須
viewbox	空白区切りの4つの整数	表示範囲の左上の X 座標と Y 座標、そして幅と高さ（規定値：0 0 300 150）ただし、ブラウザによる	×
width	ピクセル数	表示領域の幅（規定値：viewbox の幅）ただし、ブラウザによる	×
height	ピクセル数	表示領域の高さ（規定値：viewbox の高さ）ただし、ブラウザによる	×
preserveAspectRatio	拡縮方式（規定値：xMidYMid meet）		×
	none	均等な拡縮をしない。元の画像は、表示領域に合致するように必要なら不均等に拡縮し、すべてを表示領域内に表示する。
	meet	均等に拡縮し元の画像のすべてを表示領域内に表示する
	slice	均等に拡縮し表示領域をはみ出しても表示領域に隙間がないように元の画像を表示する
xmlns	http://www.w3.org/2000/svg	svg の名前空間	×
xmlns:xlink	http://www.w3.org/1999/xlink	xlink の名前空間	×

meet、slice のときはさらに xMin（左端寄せ）、xMid（中央寄せ）、xMax（右端寄せ）と YMin（上段寄せ）、YMid（中段寄せ）、YMax（下段寄せ）とを組み合わせたものと一緒に指定する。

（１） viewbox 属性

元の画像の表示したい範囲を、その範囲の X 座標、Y 座標、幅、高さの順に、空白もしくはカンマ（,）で区切って指定します。

例えば、次のように座標(50,50) 半径(40) の円が描かれていた場合、そのどこを範囲にするかによって表示される画像が変わります。

例えば、左上から縦横とも40ずつ（黄色い枠）切り取って表示すると次のようになります。

記述例

  <svg viewbox="0,0 40 40" width="40" height="40">
    <circle cx="50" cy="50" r="40" fill="lime" stroke="black" stroke-width="1"/>　中心(50,50)半径(40)の円
  </svg>

表示例
　　　　　　　　　←　ブラウザによっては表示範囲外も描いてしまうので擬似的に描いています

右半分（青い枠）を切り取って表示すると次のようになります。

記述例

  <svg viewbox="50,0 50 100" width="50" height="100">
    <circle cx="50" cy="50" r="40" fill="lime" stroke="black" stroke-width="1"/>　中心(50,50)半径(40)の円
  </svg>

表示例
　　　　　　　　　←　ブラウザによっては表示範囲外も描いてしまうので擬似的に描いています

（２） width 属性、height 属性

元の画像から切り取った範囲を描く表示領域の幅と高さを指定します。切り取った範囲と、幅や高さを変えることによって拡縮することができます。

そのとき、どのような方法で拡縮するかは preserveAspectRatio 属性で指定します。

例えば、(1) の最初の画像全体を幅 200、高さ 50 （元の画像の横２倍縦半分）で表示すると次のようになります。preserveAspectRatio ="none" は、切り取った画像の縦横比を維持しないで、表示領域に画像全体を表示することを指示しています。

  <svg viewbox="0,0 100 100" width="200" height="50" preserveAspectRatio="none">
    <circle cx="50" cy="50" r="40" fill="lime" stroke="black" stroke-width="1"/>　中心(50,50)半径(40)の円
  </svg>

表示例

（３） preserveAspectRatio 属性

SVG で画像を表示しようとしたときに、元の画像と表示しようとする領域とでサイズが異なる場合、何らかの方法で拡縮が必要になります。この方法を指定するのが preserveAspectRatio 属性です。

拡縮には３つの方法があり、これらと画像の拡縮の基準を表す xMinYMin～xMaxYMax とを組み合わせることで拡縮処理を定義します。

none	縦横比は維持されず、元の画像が表示領域いっぱいに表示される
meet	縦横比は維持されつつ、元の画像が表示領域にすべて表示される
slice	縦横比は維持されつつ、縦か横を表示領域の最大限に広げる（一部ははみ出ることになる。はみ出た部分は、表示されないはずだが、では、表示される）

記述例

  <svg viewbox="0 0 200 200" width="75" height="50" preserveAspectRatio="xMinYMin meet">
    <circle cx="100" cy="100" r="80" fill="lime" stroke="black" stroke-width="1"/>　中心(100,100)半径(80)の円
  </svg>

以下の表示例では、分かりやすいように svg の表示領域（width、height）を枠で囲っています。また、svg 要素の width、height、preserveAspectRatio は以下のようにいろいろ変更して表示しています。

表示例

<svg viewbox="0 0 200 200" width="75" height="50" preserveAspectRatio="none">
拡縮して全体を表示
<svg viewbox="0 0 200 200" width="50" height="75" preserveAspectRatio="????? meet">　　　????? に以下を記述
xMinYMin 　上段寄せ	xMinYMid 　中段寄せ	xMinYMax 　下段寄せ
<svg viewbox="0 0 200 200" width="75" height="50" preserveAspectRatio="????? meet">　　　????? に以下を記述
xMinYMin 　左端寄せ	xMidYMin 　中央寄せ	xMaxYMin 　右端寄せ
<svg viewbox="0 0 200 200" width="50" height="75" preserveAspectRatio="????? slice">　　　????? に以下を記述
xMinYMin 　左端寄せ	xMidYMin 　中央寄せ	xMaxYMin 　右端寄せ
<svg viewbox="0 0 200 200" width="75" height="50" preserveAspectRatio="????? slice">　　　????? に以下を記述
xMinYMin 　上段寄せ	xMinYMid 　中段寄せ	xMinYMax 　下段寄せ

（４） xmlns、xmlns:xlink 属性

xmlns="http://www.w3.org/2000/svg" は、svg 要素内の要素はすべて SVG であることを宣言します。また、xmlns:xlink="http://www.w3.org/1999/xlink" は、svg 要素内でリンクが xmlns:xlink 属性であることを宣言しています。

ただし、記述しなくても多くのブラウザは正しく動きますので、この後の例では多くの場合省略してあります。ただし、　Safari など一部のブラウザは記述がないと表示されないこともありますので、その場合は正しく記述してください。

１３．２属性

線の種類や色などを変更するための属性、および図形を変形するための属性について説明します。

１３．２．１色

参考：Web カラー一覧

カラーネーム	１６進数

SVG では、HTML と同じく、色を名称や１６進数で指定することができます。

また、特別な色として、塗らないことを指示する none や transparent、親要素の色を継承する inherit があります。

（１）線の色　(stroke)

stroke 属性は、線、テキストまたは要素の輪郭の色を定義します。

stroke 属性

線、テキストまたは要素の輪郭の色を定義する。

ただし、水平、垂直方向のグラデーションは表示されない。

属性

属性名	属性値	説明	必須
stroke	線の色（規定値：無色）		×
	#rrggbb	赤緑青、各色16進数2ケタ
	カラーネーム	代表的ない色に付けられた名称（Web カラー一覧参照）
	url(#ID)	グラデーションを定義した linearGradient 要素や radialGradient 要素の ID パターンを定義した pattern 要素の ID

記述例

  <svg viewbox="0 0 400 100" width="400" height="100">
    <line x1="30" y1="20" x2="170" y2="20" stroke="black"/>　　　　　黒
    <line x1="30" y1="50" x2="170" y2="50" stroke="#0000FF"/>　　　　青
    <circle cx="150" cy="40" r="30" stroke="red"/>　　　　　　　　　　赤（塗りつぶしの色は指定していないので黒）
    <text x="20" y="80" font-size="32" stroke="green">文字列</text>　緑（塗りつぶしの色は指定していないので黒）
    <defs>
      <linearGradient id="g0">
        <stop offset="0.2" stop-color="red"/>
        <stop offset="0.8" stop-color="violet"/>
      </linearGradient>
    </defs>
    <line x1="200" y1="20" x2="280" y2="20" stroke-width="20" stroke="url(#g0)"/>　水平、垂直だとなぜか表示されない
    <line x1="200" y1="60" x2="280" y2="80" stroke-width="20" stroke="url(#g0)"/>　グラデーション
  </svg>

表示例

（２）面の色　(fill)

fill 属性は、面の色を定義します。つまり、塗りつぶす色を定義します。

fill 属性

塗りつぶす面の色を定義する。

属性

属性名	属性値	説明	必須
fill	塗りつぶす面の色（規定値：黒）		×
	#rrggbb	赤緑青、各色16進数2ケタ
	カラーネーム	代表的ない色に付けられた名称（Web カラー一覧参照）
	url(#ID)	グラデーションを定義した linearGradient 要素や radialGradient 要素の ID パターンを定義した pattern 要素の ID

記述例

  <svg viewbox="0 0 200 100" width="200" height="100">
    <rect x="30" y="20" width="140" height="50" fill="blue"/>　　　　　青
    <circle cx="150" cy="40" r="30" stroke="red" fill="none"/> 　　　　透明（線の色は赤）
    <text x="20" y="80" font-size="32" fill="green">文字列</text>　　　緑
    <defs>
      <linearGradient id="g0">
        <stop offset="0.2" stop-color="red"/>
        <stop offset="0.8" stop-color="violet"/>
      </linearGradient>
    </defs>
    <rect x="200" y="20" width="80" height="50" fill="url(#g0)"/> 　　グラデーション
  </svg>

表示例

１３．２．２不透明度

（１）線の不透明度　(stroke-opacity)

stroke-opacity 属性は、線の色の不透明度を定義します。

stroke-opacity 属性

線、テキストまたは要素の輪郭の不透明度を定義する。

属性

属性名	属性値	説明	必須
stroke-opacity	0 ～ 1	線の不透明度　0（透明）～ 1（不透明）（規定値：1）	×

記述例

  <svg viewbox="0 0 300 120" width="300" height="120">
    <rect x="40" y="10" width="20" height="99" fill="red" />
    <rect x="60" y="10" width="20" height="99" fill="blue" />
    <rect x="80" y="10" width="20" height="99" fill="green" />
    <line x1="20" y1="20" x2="80" y2="20" stroke-width="20" stroke="yellow" stroke-opacity="0" />　不透明度
    <line x1="20" y1="40" x2="80" y2="40" stroke-width="20" stroke="yellow" stroke-opacity="0.2" />
    <line x1="20" y1="60" x2="80" y2="60" stroke-width="20" stroke="yellow" stroke-opacity="0.4" />
    <line x1="20" y1="80" x2="80" y2="80" stroke-width="20" stroke="yellow" stroke-opacity="0.6" />
    <line x1="20" y1="100" x2="80" y2="100" stroke-width="20" stroke="yellow" stroke-opacity="0.8" />

    <line x1="150" y1="17" x2="200" y2="103" stroke-width="40" stroke="red" stroke-opacity="0.4" />
    <line x1="200" y1="17" x2="150" y2="103" stroke-width="40" stroke="blue" stroke-opacity="0.4" />
    <line x1="125" y1="60" x2="225" y2="60" stroke-width="40" stroke="green" stroke-opacity="0.4" />
  </svg>

表示例

（２）面の不透明度　(fill-opacity)

fill-opacity 属性は、面の色の不透明度を定義します。

fill-opacity 属性

塗りつぶす面の不透明度を定義する。

属性

属性名	属性値	説明	必須
fill-opacity	0 ～ 1	面の不透明度　0（透明）～ 1（不透明）（規定値：1）	×

記述例

  <svg viewbox="0 0 300 120" width="300" height="120">
    <rect x="40" y="10" width="20" height="99" fill="red" />
    <rect x="60" y="10" width="20" height="99" fill="blue" />
    <rect x="80" y="10" width="20" height="99" fill="green" />
    <rect x="20" y="10" width="80" height="20" fill="yellow" fill-opacity="0" />　不透明度
    <rect x="20" y="30" width="80" height="20" fill="yellow" fill-opacity="0.2" />
    <rect x="20" y="50" width="80" height="20" fill="yellow" fill-opacity="0.4" />
    <rect x="20" y="70" width="80" height="20" fill="yellow" fill-opacity="0.6" />
    <rect x="20" y="90" width="80" height="20" fill="yellow" fill-opacity="0.8" />

    <circle cx="175" cy="40" r="30" fill="red" fill-opacity="0.4" />
    <circle cx="158" cy="70" r="30" fill="blue" fill-opacity="0.4" />
    <circle cx="192" cy="70" r="30" fill="green" fill-opacity="0.4" />
  </svg>

表示例

（３）不透明度　(opacity)

opacity 属性は、図形全体の不透明度を定義します。

opacity 属性

図形全体の不透明度を定義する。

属性

属性名	属性値	説明	必須
opacity	0 ～ 1	図形全体の不透明度　0（透明）～ 1（不透明）（規定値：1）	×

線の色や面の色の不透明度を個別に変えた上で、全体の不透明度をさらに 0.5 としています。g 要素は図形をグループ化するために使用しています。

記述例

  <svg viewbox="0 0 300 120" width="300" height="120">
    <g opacity="0.5">　　　　　　　　　　　　　　　　　　　全体の不透明度
      <rect x="40" y="10" width="20" height="99" fill="red" />
      <rect x="60" y="10" width="20" height="99" fill="blue" />
      <rect x="80" y="10" width="20" height="99" fill="green" />
      <line x1="20" y1="20" x2="80" y2="20" stroke-width="20" stroke="yellow" stroke-opacity="0" />
      <line x1="20" y1="40" x2="80" y2="40" stroke-width="20" stroke="yellow" stroke-opacity="0.2" />
      <line x1="20" y1="60" x2="80" y2="60" stroke-width="20" stroke="yellow" stroke-opacity="0.4" />
      <line x1="20" y1="80" x2="80" y2="80" stroke-width="20" stroke="yellow" stroke-opacity="0.6" />
      <line x1="20" y1="100" x2="80" y2="100" stroke-width="20" stroke="yellow" stroke-opacity="0.8" />

      <circle cx="175" cy="40" r="30" fill="red" fill-opacity="0.4" />
      <circle cx="158" cy="70" r="30" fill="blue" fill-opacity="0.4" />
      <circle cx="192" cy="70" r="30" fill="green" fill-opacity="0.4" />
    </g>
  </svg>

表示例

１３．２．３線種

線の太さや種類を設定します。

（１）線の太さ　(stroke-width)

stroke-width 属性は、線の太さを定義します。

stroke-width 属性

線の太さを定義する。

属性

属性名	属性値	説明	必須
stroke-width	整数	線の太さ（規定値：1）	×

記述例

  <svg viewbox="0 0 200 100" width="200" height="100">
    <line x1="30" y1="10" x2="270" y2="10" stroke="blue" stroke-width="1"/>　　　　　　線の太さ  1
    <line x1="30" y1="30" x2="270" y2="30" stroke="blue" stroke-width="5"/>　　　　　　線の太さ  5
    <line x1="30" y1="50" x2="270" y2="50" stroke="blue" stroke-width="10"/> 　　　　　線の太さ 10
    <line x1="30" y1="80" x2="270" y2="80" stroke="blue" stroke-width="20"/> 　　　　　線の太さ 20
  </svg>

指定された座標を中央に線が引かれます。下の例では、分かりやすいように指定された座標で幅１の黄色い破線を引いています。

表示例

（２）線の両端の形状　(stroke-linecap)

stroke-linecap 属性は、線の両端の形状を定義します。

stroke-linecap 属性

線の両端の形状を定義する。

属性

属性名	属性値	説明	必須
stroke-linecap	線の両端の形状		×
	butt	線の両端に何もつかない（そのまま）（規定値）
	round	線の両端に、直径が線の幅と同じとなる半円が付く
	square	線の両端に、線の半分の幅となる矩形が付く

記述例

  <svg viewbox="0 0 200 100" width="200" height="100">
    <line x1="30" y1="20" x2="170" y2="20" stroke="blue" stroke-width="20" stroke-linecap="butt"/>　そのまま
    <line x1="30" y1="40" x2="170" y2="40" stroke="blue" stroke-width="20" stroke-linecap="round"/> 両端に半円
    <line x1="30" y1="60" x2="170" y2="60" stroke="blue" stroke-width="20" stroke-linecap="square"/>両端に矩形
  </svg>

両端にライン・キャップが付きます。下の例では、分かりやすいように本来の幅で黄色い破線を引いています。

表示例

（３）線の頂点の形状　(stroke-linejoin、stroke-miterlimit)

stroke-linecap 属性は、線の頂点の形状を定義します。

stroke-linejoin 属性

線の頂点の形状を定義する。

属性

属性名	属性値	説明	必須
stroke-linejoin	線の頂点の形状		×
	miter	鋭角（そのまま）（規定値）
	round	円形
	bevel	面取り（カット）

記述例

  <svg viewbox="0 0 400 180" width="400" height="180">
    <polyline points="20,20 80,20 100,50 120,20 180,20" stroke="blue"
                    stroke-width="20" fill="none" stroke-linejoin="miter"/>　鋭角
    <polyline points="20,70 80,70 100,100 120,70 180,70" stroke="blue"
                    stroke-width="20" fill="none" stroke-linejoin="round"/>　円形
    <polyline points="20,120 80,120 100,150 120,120 180,120" stroke="blue"
                    stroke-width="20" fill="none" stroke-linejoin="bevel"/>　面取り
  </svg>

頂点の形状を指定しています。

表示例

stroke-miterlimit 属性は、stroke-linejoin="miter" のときの、鋭角な頂点を面取りする閾値を定義します。

stroke-miterlimit 属性

stroke-linejoin="miter" のときの、鋭角な頂点を面取りする閾値を定義する。

属性

属性名	属性値	説明	必須
stroke-miterlimit	１以上の数値	stroke-linejoin="miter" のとき、鋭角すぎるとき面取りする閾値（規定値：4）（頂点が為す角度から計算された値が指定された値より大きいと面取りされる）	×

記述例

  <svg viewbox="0 0 400 180" width="400" height="180">
    <polyline points="20,20 80,20 100,50 120,20 180,20" stroke="blue"
                    stroke-width="20" fill="none" stroke-linejoin="miter" stroke-miterlimit="1"/>　　　全て面取り
    <polyline points="20,70 80,70 100,100 120,70 180,70" stroke="blue"
                    stroke-width="20" fill="none" stroke-linejoin="miter" stroke-miterlimit="1.802"/>　１か所のみ
    <polyline points="20,120 80,120 100,150 120,120 180,120" stroke="blue"
                    stroke-width="20" fill="none" stroke-linejoin="miter" stroke-miterlimit="1.803"/>　面取りなし
  </svg>

stroke-miterlimit を指定して面取りをしています。一番上は３か所すべての頂点が面取りされていますが、真中は下向きの頂点だけです。

表示例

（４）破線パターン　(stroke-dasharray、stroke-dashoffset)

stroke-dasharray 属性は、破線パターン（直線と空白の長さ）を定義します。この破線パターンを繰り返して線が引かれます。

stroke-dasharray 属性

線の破線パターンを定義する。

属性

属性名	属性値	説明	必須
stroke-dasharray	空白区切りのピクセル値	直線を引く長さと引かない長さの繰り返し（規定値：none）	×

記述例

  <svg viewbox="0 0 200 60" width="200" height="60">
    <line x1="30" y1="10" x2="170" y2="10" stroke="blue"/> 　　　　　　　　　　　　　　　　　実線
    <line x1="30" y1="20" x2="170" y2="20" stroke="blue" stroke-dasharray="2 4"/>　　　　　点線
    <line x1="30" y1="30" x2="170" y2="30" stroke="blue" stroke-dasharray="10 4"/> 　　　　破線
    <line x1="30" y1="40" x2="170" y2="40" stroke="blue" stroke-dasharray="2 4 10 4"/> 　　一点鎖線
    <line x1="30" y1="50" x2="170" y2="50" stroke="blue" stroke-dasharray="2 2 2 4 10 4"/> 二点鎖線
  </svg>

破線パターンを指定して描いています。

表示例

stroke-dashoffset 属性は、破線パターンの開始位置を定義します。指定された位置の破線パターンから描きます。

stroke-dashoffset 属性

破線パターンの開始位置を定義する。

属性

属性名	属性値	説明	必須
stroke-dashoffset	ピクセル値	破線パターンの開始位置（規定値：0）	×

記述例

  <svg viewbox="0 0 200 60" width="200" height="60">
    <line x1="30" y1="10" x2="170" y2="10" stroke="blue" stroke-dasharray="20 5"/>
    <line x1="30" y1="20" x2="170" y2="20" stroke="blue" stroke-dasharray="20 5" stroke-dashoffset="5"/>
    <line x1="30" y1="30" x2="170" y2="30" stroke="blue" stroke-dasharray="20 5" stroke-dashoffset="10"/>
    <line x1="30" y1="40" x2="170" y2="40" stroke="blue" stroke-dasharray="20 5" stroke-dashoffset="15"/>
    <line x1="30" y1="50" x2="170" y2="50" stroke="blue" stroke-dasharray="20 5" stroke-dashoffset="20"/>
  </svg>

すべての線は 20 引いて 5 引かないの繰り返しです。ただし、、その繰り返しの開始を 5 ずつずらして描いています。

表示例

１３．２．４変形　(transform)

図形に対して平行移動や回転などの変形（座標変換）が適用できます。transform の属性値として次の関数を指定することができます。

関数は、空白またはコンマ(,)区切りで複数指定できますが、左側（先に書かれた方）から順に座標軸に適用されていきます。

transform 属性

平行移動や回転などの変形をする際に使用し、matrix 以外の関数を組み合させることもできる。

また、それらの関数、あるいは関数の組み合わせを１つの matrix 関数で置き換えることもできる。

関数

関数名	説明	matrix
translate(tx, ty)	平行移動	matrix(1, 0, 0, 1, tx, ty)
scale(sx, sy)	拡大・縮小	matrix(sx, 0, 0, sy, 0, 0)
rotate(a, cx, cy)	回転	matrix(cos(a), sin(a), -sin(a), cos(a), -cxcos(a)+cysin(a)+cx, -cxsin(a)-cycos(a)+cy)
skewX(ax)	横方向の傾斜	matrix(1, 0, tan(ax), 1, 0, 0)
skewY(ay)	縦方向の傾斜	matrix(1, tan(ay), 0, 1, 0, 0)
matrix(a, b, c, d, e, f)	変換行列による変形

（１）平行移動　(translate)

平行移動を表す関数で、指定した値の分だけ座標軸をその方向にずらします。

translate(tx, ty) 関数

平行移動に使用する。

matrix(1, 0, 0, 1, tx, ty) と記述することもできる。

1	0	tx
0	1	ty
0	0	1

引数

引数名	引数値	説明	必須
tx	数値	X 座標方向の移動量	○
ty	数値	Y 座標方向の移動量（規定値：0）	×

  <svg viewbox="-10 -10 200 100" width="200" height="100">
    <rect x="10" y="10" width="100" height="50" stroke="blue" fill="none" transform="translate(40,20)" />
  </svg>

グレイの線は、移動前の図形や座標軸です。うすい青い線は移動後の座標軸です。理解の助けになるように別途描いています。

表示例

（２）拡大・縮小　(scale)

拡大・縮小を表す関数で、指定した値の分だけ座標軸方向に拡縮します。

scale(sx, sy) 関数

拡大・縮小に使用する。

matrix(sx, 0, 0, sy, 0, 0) と記述することもできる。

sx	0	0
0	sy	0
0	0	1

引数

引数名	引数値	説明	必須
sx	数値	X 座標方向の倍率	○
sy	数値	Y 座標方向の倍率（規定値：sx）	×

拡縮すると図形の線も軸方向に太くなったり細くなったりします。また、倍率としてマイナスの数値を指定すると図形の反転もできます。

  <svg viewbox="-120 0 400 200" width="400" height="200">
    <circle cx="50" cy="50" r="40" stroke="blue" fill="none" transform="scale(3,1.5)" /> 　　　　円
    <path d="M10,110 l80,50 l-100,0 z" stroke="blue" fill="none" transform="scale(-1,1)" />　　　三角（反転）
  </svg>

グレイの線などは、拡縮前の図形です。理解の助けになるように別途描いています。

表示例

（３）回転　(rotate)

回転を表す関数で、座標軸を指定した値の分だけ回転します。またその際の回転の中心を設定することができます。

rotate(angle, cx, cy) 関数

回転に使用する。

matrix(cos(angle), sin(angle), -sin(angle), cos(angle), -cx*cos(angle)+cy*sin(angle)+cx, -cx*sin(angle)-cy*cos(angle)+cy) と記述することもできる。

cos(angle)	-sin(angle)	-cxcos(angle)+cysin(angle)+cx
sin(angle)	cos(angle)	-cxsin(angle)-cycos(angle)+cy
0	0	1

引数

引数名	引数値	説明	必須
angle	角度（度）	回転角度（時計回りが正）単位は指定できない	○
cx	数値	回転の中心の X 座標（規定値：0）	×
cy	数値	回転の中心の Y 座標（規定値：0）	×

回転の中心を指定しないと座標の原点を中心に回転します。

  <svg viewbox="-120 -20 400 200" width="400" height="200">
    <rect x="10" y="10" width="100" height="50" stroke="blue" fill="none" transform="rotate(45)" />
  </svg>

グレイの線は、回転前の図形と座標軸です。うすい青い線は回転後の座標軸です。理解の助けになるように別途描いています。

表示例

回転の中心を指定するとそれを中心に回転します。次の例は矩形の対角線の交点を中心にしています。座標軸も回転していることに注意してください。

  <svg viewbox="-100 -40 400 180" width="400" height="180">
    <rect x="10" y="10" width="100" height="50" stroke="blue" fill="none" transform="rotate(45,60,35)" />
  </svg>

グレイの線は、回転前の図形と座標軸です。うすい青い線は回転後の座標軸です。理解の助けになるように別途描いています。

表示例

（４）横方向の傾斜　(skewX)

横方向の傾斜を表す関数で、Y 軸を指定した角度だけ傾けます。

skewX(angle) 関数

横方向の傾斜に使用する。

matrix(1, 0, tan(angle), 1, 0, 0) と記述することもできる。

1	tan(angle)	0
0	1	0
0	0	1

引数

引数名	引数値	説明	必須
angle	角度（度）	傾斜角度（X 軸の正方向が正）	○

  <svg viewbox="-40 -20 400 140" width="400" height="140">
    <circle cx="50" cy="50" r="40" stroke="blue" fill="none" transform="skewX(30)" />
  </svg>

グレイの線は、傾斜前の座標軸や図形です。うすい青い線は傾斜後の座標軸です。理解の助けになるように別途描いています。

表示例

（５）縦方向の傾斜　(skewY)

縦方向の傾斜を表す関数で、X 軸を指定した角度だけ傾けます。

skewY(angle) 関数

縦方向の傾斜に使用する。

matrix(1, tan(angle), 0, 1, 0, 0) と記述することもできる。

1	0	0
tan(angle)	1	0
0	0	1

引数

引数名	引数値	説明	必須
angle	角度（度）	傾斜角度（Y 軸の正方向が正）	○

  <svg viewbox="-40 -20 400 160" width="400" height="160">
    <circle cx="50" cy="50" r="40" stroke="blue" fill="none" transform="skewY(30)" />
  </svg>

グレイの線は、傾斜前の座標軸や図形です。うすい青い線は傾斜後の座標軸です。理解の助けになるように別途描いています。

表示例

（６）変換行列による変形　(matrix)

移動・拡縮・傾き・回転を一度に行います。

matrix(a, b, c, d, e, f) 関数

移動・拡縮・傾き・回転を一度に行う。

matrix の引数と行列の関係は次のようになる。

a	c	e
b	d	f
0	0	1

translate、scale、rotate、skewX、skewY の各関数は matrix 関数で記述することができる。

複数の関数を指定した場合は、それぞれの行列の積で求まる値が matrix 関数の引数になる。

引数

引数名	引数値	説明	必須
a	数値	X軸方向の伸縮	○
b	数値	Y軸方向の傾き	○
c	数値	X軸方向の傾き	○
d	数値	Y軸方向の伸縮	○
e	数値	X軸方向の移動	○
f	数値	Y軸方向の移動	○

transform="translate(20, 50) rotate(-30, 10, 25)" と同様な変形を matrix で行うと次のようになります。

  <svg viewbox="-50 -20 400 180" width="400" height="180">
  <rect x="40" y="40" width="100" height="40" stroke="blue" fill="none"
        transform="matrix(0.866025, -0.5, 0.5, 0.866025, 8.83975, 58.3494)" />
  </svg>

translate(20, 50) は matrix(1, 0, 0, 1, 20, 50)

rotate(-30, 10, 25) は matrix(cos(-π/6), sin(-π/6), -sin(-π/6), cos(-π/6), -10*cos(-π/6)+25*sin(-π/6)+10, -10*sin(-π/6)-25*cos(-π/6)+25)

です。　これを行列の積で表すと

1	0	20
0	1	50
0	0	1

cos(-π/6)	-sin(-π/6)	-10cos(-π/6)+25sin(-π/6)+10
sin(-π/6)	cos(-π/6)	-10sin(-π/6)-25cos(-π/6)+25
0	0	1

cos(-π/6)	-sin(-π/6)	-10cos(-π/6)+25sin(-π/6)+10+20
sin(-π/6)	cos(-π/6)	-10sin(-π/6)-25cos(-π/6)+25+50
0	0	1

0.866025	0.5	8.83975
-0.5	0.866025	58.3494
0	0	1

グレイの線は、変形前の図形と座標軸です。うすい青い線は translate を行った場合の図形と座標軸です。理解の助けになるように別途描いています。

表示例

関数の組み合わせ時の注意

関数を組み合わせた場合はその順番によって変形後の図形が変わります。

次の例は、先に平行移動させてから回転させています。

  <svg viewbox="-60 -30 400 150" width="400" height="150">
  <rect x="10" y="10" width="100" height="40" stroke="blue" fill="none"
        transform="translate(40,20) rotate(45,60,35)" />
  </svg>

グレイの線は、変形前の図形と座標軸です。うすい青い線は translate を行った後の図形と座標軸です。理解の助けになるように別途描いています。

表示例

次の例は、先に回転させてから平行移動させています。

  <svg viewbox="-70 -40 400 180" width="400" height="180">
  <rect x="10" y="10" width="100" height="40" stroke="blue" fill="none"
        transform="rotate(45,60,35) translate(40,20)" />
  </svg>

グレイの線は、変形前の図形と座標軸です。うすい青い線は rotate を行った後の図形と座標軸です。理解の助けになるように別途描いています。

rotate 後は X 軸、Y 軸の方向も回転していることに注意してください。

表示例

１３．３図形

１３．３．１矩形　(rect)

矩形を作成するために使用します

rect 要素

矩形を作成する際に使用する。

属性

属性名	属性値	説明	必須
x	数値	左上の X 座標（規定値：0）	×
y	数値	左上の Y 座標（規定値：0）	×
width	数値	矩形の幅	○
height	数値	矩形の高さ	○
rx	数値	矩形の角を丸めるために用いられる楕円の X 軸半径の長さ（規定値：0）	×
ry	数値	矩形の角を丸めるために用いられる楕円の Y 軸半径の長さ（規定値：0）	×

rx、ry は、どちらかのみ指定されていたら、共に指定されている値になる。また、rx は width、ry は height のそれぞれ半分を超えない値にされる。

記述例

  <svg viewbox="0 0 500 150" width="500" height="150">
  <rect x="10" y="10" width="100" height="50" stroke="blue" fill="none" />
  <rect x="10" y="70" width="100" height="50" fill="blue" />
  <rect x="120" y="10" width="100" height="50" rx="20" ry="10" stroke="blue" fill="none" />
  <rect x="120" y="70" width="100" height="50" rx="20" ry="10" fill="blue" />
  <rect x="230" y="10" width="100" height="50" rx="20" ry="10" stroke="blue" fill="yellow"
                                  fill-opacity="0.2" stroke-width="5" />
  <rect x="230" y="70" width="100" height="50" rx="20" ry="10" stroke="gray" fill="blue"
                                  fill-opacity="0.2" stroke-width="5" stroke-dasharray="10 2" />
  <rect x="350" y="50" width="100" height="50" rx="20" ry="10" stroke="blue" fill="none"
                                  transform="rotate(-15, 350, 75)" />
  </svg>

左側は枠のみ、塗りつぶしのみです。２列目は頂点を丸くしています。３列目はいろいろです。４列目は回転させています。

表示例

１３．３．２円　(circle)

円を作成するために使用します

circle 要素

円を作成する際に使用する。

属性

属性名	属性値	説明	必須
cx	数値	中心の X 座標（規定値：0）	×
cy	数値	中心の Y 座標（規定値：0）	×
r	数値	半径	○

記述例

  <svg viewbox="0 0 300 150" width="300" height="150">
    <circle cx="40" cy="40" r="30" stroke="blue" fill="none" />
    <circle cx="40" cy="110" r="30" stroke="blue" />
    <circle cx="120" cy="40" r="30" stroke="blue" fill="yellow" fill-opacity="0.2" stroke-width="5" />
    <circle cx="120" cy="110" r="30" stroke="gray" fill="blue" fill-opacity="0.2"
                                    stroke-width="5" stroke-dasharray="10 2" />
    <circle cx="160" cy="40" r="30" stroke="blue" fill="none" transform="skewX(60)" />
  </svg>

左側は枠のみ、塗りつぶしのみです。２列目はいろいろです。３列目は右方向に傾けけています。

表示例

１３．３．３楕円　(ellipse)

楕円を作成するために使用します

ellipse 要素

楕円を作成する際に使用する。

属性

属性名	属性値	説明	必須
cx	数値	中心の X 座標（規定値：0）	×
cy	数値	中心の Y 座標（規定値：0）	×
rx	数値	水平方向の半径	○
ry	数値	垂直方向の半径	○

記述例

  <svg viewbox="0 0 400 150" width="400" height="150">
  <ellipse cx="50" cy="40" rx="50" ry="30" stroke="blue" fill="none" />
  <ellipse cx="50" cy="110" rx="50" ry="30" stroke="blue" />
  <ellipse cx="160" cy="40" rx="50" ry="30" stroke="blue" fill="yellow" fill-opacity="0.2" stroke-width="5" />
  <ellipse cx="160" cy="110" rx="50" ry="30" stroke="blue" fill="yellow" fill-opacity="0.2"
                                  stroke-width="5" stroke-dasharray="10 2" />
  <ellipse cx="50" cy="40" rx="50" ry="30" stroke="blue" fill="none" transform="rotate(45,285,75)" />
  </svg>

左側は枠のみ、塗りつぶしのみです。２列目はいろいろです。３列目は回転させています。

表示例

１３．３．４直線　(line)

直線を作成するために使用します

line 要素

直線を作成する際に使用する。

属性

属性名	属性値	説明	必須
x1	数値	開始点の X 座標（規定値：0）	×
y1	数値	開始点の Y 座標（規定値：0）	×
x2	数値	終了点の X 座標（規定値：0）	×
y2	数値	終了点の Y 座標（規定値：0）	×

記述例

  <svg viewbox="0 0 400 150" width="400" height="150">
  <line x1="10" y1="90" x2="100" y2="10" stroke="blue" />
  <line x1="110" y1="10" x2="200" y2="50" stroke="blue" stroke-opacity="0.4" stroke-width="5" />
  <line x1="110" y1="50" x2="200" y2="90" stroke="gray" stroke-opacity="0.4"
                                  stroke-width="5" stroke-dasharray="10 2" />
  </svg>

左側は単なる直線です。２列目はいろいろです。

表示例

１３．３．５折線　(polyline)

折線を作成するために使用します

polyline 要素

折線を作成する際に使用する。

属性

属性名	属性値	説明	必須
points	座標	空白区切りの、折れ線の各頂点の座標(x, y)列	○
fill-rule	塗りつぶし		×
	nonzero	閉じた領域^注１を全面塗りつぶす（規定値）
	evenodd	閉じた領域を規則^注２に従って塗り分ける

　　　注１）polyline の場合も最後の頂点から最初の頂点に線が引かれていると考えます。

　　　注２）領域内から外に向かって線を引いて、折線と交わるのが奇数本ならば塗りつぶす。

記述例

  <svg viewbox="0 0 400 110" width="400" height="110">
    <polyline points="30,10 10,30 110,30 60,50 60,10" stroke="blue" fill="none" />
    <polyline points="30,60 10,80 110,80 60,100 60,60" fill="blue" />
    <polyline points="150,10 130,30 230,30 180,50 180,10" stroke="blue" fill="yellow" fill-opacity="0.2"
                                    stroke-width="5" />
    <polyline points="150,60 130,80 230,80 180,100 180,60" stroke="gray" fill="blue" fill-opacity="0.2"
                                    stroke-width="5" stroke-dasharray="10 2" />
  </svg>

左側は枠のみ、塗りつぶしのみです。２列目はいろいろです。

表示例

fill-rule 属性を指定することによって、塗り分けことができます。

記述例

  <svg viewbox="0 0 400 120" width="400" height="120">
    <polyline points="10,30 110,30 110,130, 10,130 85,55 100,120 30,50" stroke="black" fill="lightgreen"
                                    fill-rule="nonzero" />　　全面
    <polyline points="150,30 250,30 250,130, 150,130 225,55 240,120 170,50" stroke="black" fill="lightgreen"
                                    fill-rule="evenodd" />　　塗り分け
  </svg>

左側は全面を塗りつぶしていて、右側は塗り分けています。塗り分けは、折れ線で囲まれた領域内から外に向かって線を引いて、交わる折れ線が奇数本ならば塗りつぶし、そうでないなら塗りつぶさないという方式で行われています。

表示例

１３．３．６多角形　(polygon)

多角形を作成するために使用します。

polygon 要素

多角形を作成する際に使用する。

属性

属性名	属性値	説明	必須
points	座標	空白区切りの、折れ線の各頂点の座標(x, y)列　（最後の頂点から最初の頂点に線が引かれる）	○
fill-rule	塗りつぶし		×
	nonzero	閉じた領域を全面塗りつぶす（規定値）
	evenodd	閉じた領域を規則^注１に従って塗り分ける

　　　注１）領域内から外に向かって線を引いて、折線と交わるのが奇数本ならば塗りつぶす。

記述例

  <svg viewbox="0 0 400 110" width="400" height="110">
    <polygon points="30,10 10,30 110,30 60,50 60,10" stroke="blue" fill="none" />
    <polygon points="30,60 10,80 110,80 60,100 60,60" fill="blue" />
    <polygon points="150,10 130,30 230,30 180,50 180,10" stroke="blue" fill="yellow" fill-opacity="0.2"
                                    stroke-width="5" />
    <polygon points="150,60 130,80 230,80 180,100 180,60" stroke="gray" fill="blue" fill-opacity="0.2"
                                    stroke-width="5" stroke-dasharray="10 2" />
  </svg>

左側は枠のみ、塗りつぶしのみです。２列目はいろいろです。

表示例

fill-rule 属性を指定することによって、塗り分けことができます。

記述例

  <svg viewbox="0 0 400 120" width="400" height="120">
    <polygon points="10,30 110,30 110,130, 10,130 85,55 100,120 30,50" stroke="black" fill="lightgreen"
                                    fill-rule="nonzero" />　　全面
    <polygon points="150,30 250,30 250,130, 150,130 225,55 240,120 170,50" stroke="black" fill="lightgreen"
                                    fill-rule="evenodd" />　　塗り分け
  </svg>

表示例

１３．３．７パス　(path)

パスデータによって図形を作成します。

path 要素

パスデータによって図形を作成する。

属性

属性名	属性値	説明	必須
d	パスデータ	空白区切りのコマンド群	○
pathlength	数値	パスの形式的な全長（stroke-dashoffsetやstroke-dasharray属性等はこの値を基準として描画される）	×
fill-rule	塗りつぶし		×
	nonzero	閉じた領域を全面塗りつぶす（規定値）
	evenodd	閉じた領域を規則^注１に従って塗り分ける

　　　注１）領域内から外に向かって線を引いて、折線と交わるのが奇数本ならば塗りつぶす。

パスデータ
コマンド	引数	説明
M、m	x,y	(x, y) を現在の座標とする
Z、z	（なし）	コマンド M で指定した座標まで直線を引いて図形を閉じる
L、l	x,y	現在の座標から、(x, y) へ直線を引く
H、h	x	現在の座標から、x まで水平線を引く
V、v	y	現在の座標から、y まで垂直線を引く
A、a	rx,ry r l s x,y	現在の点から点 (x, y) へ半径 (rx, ry) の楕円形の弧を引く
Q、q	x1,y1 x,y	(x1, y1) を用いて点 (x, y) へ二次ベジェ曲線を引く
T、t	x,y	現在の点から (x, y) へ二次ベジェ曲線を引く
C、c	x1,y1 x2,y2 x,y	現在の座標から、(x1, y1) と (x2, y2) を用いて (x, y) へ三次ベジェ曲線を引く
S、s	x2,y2 x,y	前の (x2, y2) の点対称の地点と (x2, y2) を用いて (x, y) へ三次ベジェ曲線を引く

　　　○座標は、コマンドが大文字のときは絶対位置（左上点からの位置）、小文字のときは相対位置（前の座標からの位置）

　　　○引数の区切りは、空白でもカンマ(,)でもよい。また、コマンド間の区切りは空白だがなくてもよい。

（１）初期位置　(M、m)

  Mx,y

(x, y) が、開始点となる座標（現在の座標）として新しく設定されます。パスデータの途中に出現した場合はそこで部分パスが区切られ、別の図形となります。

M は、絶対位置（左上点からの位置）、m は、相対位置（前の座標からの位置）です。

記述例

  <svg viewbox="0 0 400 100" width="400" height="100">
    <path d="M10,10"/>　　　　　　　これだけでは何も表示されない
  </svg>

（２）終了　(Z、z)

現在の部分パスの終了を意味し、現在の点から現在の部分パスの始点（M、m で指定した座標）への直線が自動的に描かれます。

記述例

  <svg viewbox="0 0 400 100" width="400" height="100">
    <path d="M10,10 Z"/>　　　　　　　これだけでは何も表示されない
  </svg>

（３）直線　(L、l)

  Lx,y

現在の座標から (x, y) まで直線が描かれます。

L は、絶対位置（左上点からの位置）、l は、相対位置（前の座標からの位置）です。

記述例

  <svg viewbox="0 0 400 100" width="400" height="100">
    <path d="M10,10 L110,10 l0,50 Z" stroke="blue" fill="lightgreen"/>　
  </svg>

(10, 10)-(110, 10)-(110, 60)-(10, 10) のように直線を引きます。

表示例

（４）水平線　(H、h)

Hx

現在の座標から水平に x 座標まで直線が描かれます。

H は、絶対位置（左上点からの位置）、h は、相対位置（前の座標からの位置）です。

記述例

  <svg viewbox="0 0 400 50" width="400" height="50">
    <path d="M10,10 H110 M10,40 h100" stroke="blue"/>　
  </svg>

(10, 10)-(110, 10) と (10, 40)-(110, 40) のように直線を引きます。

表示例

（５）垂直線　(V、v)

Vy

現在の座標から垂直に y 座標まで直線が描かれます。

V は、絶対位置（左上点からの位置）、v は、相対位置（前の座標からの位置）です。

記述例

  <svg viewbox="0 0 400 120" width="400" height="120">
    <path d="M10,10 V110 M40,10 v100" stroke="blue"/>　
  </svg>

(10, 10)-(10, 110) と (40, 10)-(40, 110) のように直線を引きます。

表示例

（６）円弧　(A、a)

  A rx,ry r l s x,y

現在の座標から、半径 (rx, ry) の楕円が (x, y) まで描かれます。ただし、

r (x-axis-rotation)	: 軸を傾ける角度（度）
l (large-arc-flag)	: 弧の選択（0:短いほうの弧、1:長いほうの弧）
s (sweep-flag)	: 向きの選択（0:反時計回り、1:時計回り）

A は、絶対位置（左上点からの位置）、a は、相対位置（前の座標からの位置）です。

円弧の傾けたい場合は、x-axis-rotation に傾ける角度（度）を指定します。

記述例

  <svg viewbox="0 0 400 200" width="400" height="200">
    <path d="M10,215 L60,165 A30,50 0 0 1 112,112 L122,102 A30,50 -45 0 1 165,60 L215,10"
                                    stroke="blue" fill="none"/>
  </svg>

一つ目（左側）の円弧は x-axis-rotation が 0 なので円弧が通る楕円が直立しています。それに対して二つ目（右側）の円弧は x-axis-rotation が -45 度になっていますので、左に 45度回転されて描かれています。
なお、グレイの点線は理解の助けになるように別途描いています。

表示例

円弧は直線と違い、開始点と終了点を指定しただけでは図形が一意に決まりません。large-arc-flag と sweep-flag を指定することによりどう描くかを指定します。

記述例

  <svg viewbox="0 0 400 200" width="400" height="200">
    <path d="M30,30 A30,30 0 0 0 60,60" stroke="blue" stroke-width="3" fill="none"/>　　　短い弧、反時計回り
    <path d="M230,30 A30,30 0 0 1 260,60" stroke="blue" stroke-width="3" fill="none"/>　　短い弧、時計回り
    <path d="M30,130 A30,30 0 1 0 60,160" stroke="blue" stroke-width="3" fill="none"/>　　長い弧、反時計回り
    <path d="M230,130 A30,30 0 1 1 260,160" stroke="blue" stroke-width="3" fill="none"/>　長い弧、時計回り
  </svg>

(30, 30)-(60, 60) のように左上から右下に向かって描いています。large-arc-flag と sweep-flag の指定により次のように描画されます。
なお、グレイの点線などは理解の助けになるように別途描いています。

表示例

（７）二次ベジェ曲線　(Q、q、T、t)

制御点を 1 つだけ必要とし、始点（現在の座標）側と終点 (x, y) 側両方の曲線の傾斜を定義します。

Q や q の場合は (x1, y1) でその制御点を与えますが、T や t の場合は開始点を中心に前の制御点の点対称の位置を新しい制御点とします（略式二次ベジェ曲線とも呼ばれています）。

  Q x1,y1 x,y
  T x,y

記述例

  <svg viewbox="0 0 400 180" width="400" height="180">
    <path d="M50,10 Q100,160 150,110 T250,110" stroke="blue" fill="none" stroke-width="3"/>
  </svg>

●(50,10) から ●(100,160) を制御点にして ●(150,110) まで曲線を引いています。そのあと、●(150,110) を中心に ●(100,160) の点対象の位置 ●(200,60) を次の制御点にして引き続き ●(150,110) から ●(250,110) まで曲線を引いています。
なお、グレイの破線や色の薄い図形などは理解の助けになるように別途描いています。

表示例

２次ベジェ曲線で描くとしても、適切な制御点を見つけるのは簡単ではありません。そこで簡易的な２つの方法で描いてみます。

ポイントを一つ置きに曲線の通る点と制御点にする
ポイントの中点を曲線の通る点とし、ポイントを制御点にする

ポイント	X 座標	Y 座標
1	90	45
2	75	30
3	45	30
4	20	45
5	45	65
6	65	75
7	45	90
8	30	105
9	45	113
10	75	120
11	90	105
12	110	70

なお、グレイの線はポイントを直線で結んだ場合の図形です。

（８）三次ベジェ曲線　(C、c、S、s)

制御点を 2 つにして、始点（現在の座標）側と終点 (x, y) 側両方の曲線の傾斜を定義します。

C や c の場合は (x1, y1) と (x2, y2) でその制御点を与えますが、S や s の場合は2つ目の制御点は指定しますが、1つ目の制御点は開始点を中心に前の制御点の点対称の位置とします（略式三次ベジェ曲線とも呼ばれています）。

  C x1,y1 x2,y2 x,y
  S x2,y2 x,y

記述例

  <svg viewbox="0 0 420 180" width="420" height="180">
    <path d="M50,10 C170,60 60,160 200,160 S350,110 250,60" stroke="blue" fill="none" stroke-width="3"/>
  </svg>

●(50,10) から ●(170,60) と ●(60,160) を制御点にして ●(200,160) まで曲線を引いています。そのあと、●(200,160) を中心に ●(60,160) の点対象の位置 ●(340,160) を次の1つ目の制御点にして、指定されている2つ目の制御点 ●(350,110) とで引き続き ●(200,160) から ●(250,60) まで曲線を引いています。
なお、グレイの破線や色の薄い図形などは理解の助けになるように別途描いています。

表示例

fill-rule 属性を指定することによって、全面塗りつぶすか、塗り分けをするかを指定することができます。

evenodd（塗り分け）は、d で指定された線で囲まれた領域内から外に向かって線を引いて、交わる線が奇数本ならば塗りつぶし、そうでないなら塗りつぶさないという方式で行われています。

nonzero（全面塗りつぶし）の場合は基本的にすべてを塗りつぶしますが、左下の例のように nonzero であっても塗りわけが行われることがあります。

交わる線の向きが左から右のものと右から左のものとが同数のときは塗りつぶされません。

矢印は d で指定された線の描かれる向きです。別途描いています。

記述例

  <svg viewbox="0 0 600 240" width="600" height="240">
  <path d="M110,30 L190,30 L190,170 L110,170 Z
           M130,70 A20,20 0 0 1 170,70 A20,20 0 0 1 130,70
           M130,130 A20,20 0 0 0 170,130 A20,20 0 0 0 130,130"
           stroke="black" fill="lightgreen" fill-rule="nonzero"/>

  <path d="M210,30 L290,30 L290,170 L210,170 Z
           M230,70 A20,20 0 0 1 270,70 A20,20 0 0 1 230,70
           M230,130 A20,20 0 0 0 270,130 A20,20 0 0 0 230,130"
           stroke="black" fill="lightgreen" fill-rule="evenodd"/>
  </svg>

表示例

真ん中に穴を開けて背景が表示されるようにすることもできます。

記述例

  <svg viewbox="0 0 400 100" width="400" height="100">
    <image x="300" y="10" width="64" height="64" xlink:href="bear.png"/>
    <path d="M100,10 L174,10 L174,74 L100,74 Z M160,70 A25,35 0 1 0 120,70 Z" fill="blue" fill-rule="evenodd"/>
  </svg>

表示例

参考：等高線図

参考：等高線図　　立体等高線図　　ワイヤーフレーム立体図　　ポリゴン立体図　　（別ウィンドウで開きます）

１３．４テキスト

１３．４．１テキスト　(text)

テキストを図形として作成します。テキストは <text>～</text> の間に記述します。

text 要素

テキストを図形として図形を作成する。

属性の詳細については以降の説明を参照してください。

属性

属性名	説明
テキストを表示する位置や角度など
x	文字が描画される位置の X 座標
y	文字が描画される位置の Y 座標
dx	本来文字が描画されるべき位置からの X 軸方向の差分値
dy	本来文字が描画されるべき位置からの Y 軸方向の差分値
rotate	テキストの回転角度（グリフ定義の原点を中心として回転）
フォントスタイル
font-family	フォント名
font-size	フォントサイズ
font-weight	フォントの太さ
font-style	フォントの形状
font-variant	小文字の形態
text-decoration	テキスト装飾
文字の間隔
kerning	カーニングの指定
letter-spacing	文字間隔
word-spacing	単語間隔
テキスト全体の幅
textLength	テキスト全体の幅
lengthAdjust	幅の調整方法
テキストの配置
text-anchor	テキストの基準位置
テキストの方向
writing-mode	テキストの横書き・縦書き
glyph-orientation-vertical	縦書き時の文字の表記
glyph-orientation-horizontal	横書き時の文字の表記
direction	文字列の方向
unicode-bidi	双方向性
テキスト幅のオーバーフロー
text-overflow	文字列の描画幅
文字の基底線
dominant-baseline	文字の描画に用いる基底線

（１）文字位置

テキストを表示する位置や角度などを指定します。

なお、テキストの描画は文字の下部を基準に行われるため、Y 座標の指定を適切に行わないと文字が描画されないことがあります。また、改行文字やタブ文字等は空白文字として扱われるため、改行を表現するには描画位置を指定し直す必要があります。

text 要素　（文字位置に関する属性）

テキストを図形として図形を作成する。

属性

属性名	属性値	説明	必須
x	数値	文字が描画される位置の X 座標	○
y	数値	文字が描画される位置の Y 座標	○
dx	数値	本来文字が描画されるべき位置からの X 軸方向の差分値（規定値：0）	×
dy	数値	本来文字が描画されるべき位置からの Y 軸方向の差分値（規定値：0）	×
roate	角度（度）	テキストの回転角度（グリフ定義の原点を中心として回転）（規定値：0）	×

　　　○すべてカンマ(,)で区切って複数記述すれば、テキストの一文字ずつを指定できる。

記述例

  <svg viewbox="0 0 400 120" width="400" height="120">
    <text x="10" y="20" fill="blue">テキスト</text>　　　　　　　　　　　　　　　　　　　標準の表示
    <text x="10,30,50,70" y="40" fill="blue">テキスト</text>　　　　　　　　　　　　　　　一文字ずつ位置を指定
    <text x="10" y="60" dx="10,10,10,10" fill="blue">テキスト</text>　　　　　　　　　　一文字ずつ本来の位置からのずれを指定
    <text x="110" y="20" fill="blue" font-size="24" rotate="30">テキスト</text>　　　　　　　　　　　一文字ずつ 30度回転
    <text x="110" y="70" fill="blue" font-size="24" rotate="0,30,60,90">テキスト</text>　　　　　　　順に回転角増
    <text x="-350" y="20" fill="blue" font-size="24" transform="scale(-1,1)">テキスト</text>　　　　横方向に反転
    <text x="220" y="60" fill="blue" font-size="24" transform="skewX(30)">テキスト</text>　　　　　　横方向に傾斜
    <text x="230" y="90" fill="blue" font-size="24" transform="rotate(-15,280,80)">テキスト</text>　文字列の中央で回転
  </svg>

左側は表示位置を指定しています。２列目は文字を回転しています。回転の中心はグリフ定義の原点（たいていは文字の左下）です。３列目はいろいろ変形をしています。
なお、グレイの文字などは理解の助けになるように別途描いています。

表示例

（２）フォントスタイル

フォントスタイルに関わる属性を設定すれば見栄えを変えることができます。

text 要素　（フォントスタイルに関する属性）

フォントスタイルを変更する。

属性

属性名

属性値

説明

必須

font-family

文字列

フォント名

フォントファミリ名

名称	意味
serif	明朝体のように文字の上下にヒゲのある書体
sans-serif	ゴシック体や "Arial" のようにヒゲのない書体
cursive	手書き風（草書体・筆記体）書体
fantasy	"Western" などの装飾系の書体
monospace	"ＭＳゴシック" や "Courier New" のような等幅書体

font-size

数値

フォントサイズ（規定値：12）

font-weight

フォントの太さ

normal

標準（規定値）

bold

太く

bolder

より太く（現状は bold と同じ）

lighter

より細く（現状は normal と同じ）

font-style

フォントの形状

normal

通常（規定値）

italic

イタリック体（専用フォントがあればそのフォントで表示する。
なければ oblique と同じ）

oblique

斜体（標準フォントを傾けて表示する）

font-variant

小文字の形態

normal

通常（規定値）

small-caps

スモールキャプス体（小文字ではなく大文字を小さく表示する）

text-decoration

テキスト装飾

none

なし（規定値）

underline

上線

overline

下線

line-through

取り消し線

フォントファミリの例です

記述例

  <svg viewbox="0 0 700 140" width="700" height="140">
    <g fill="blue" font-size="16">
      <text x="10" y="20">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text>　　　　　　　　　　　　　標準
      <text x="10" y="40" font-family="serif">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text>　　serif
      <text x="10" y="60" font-family="sans-serif">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text>　　sans-serif
      <text x="10" y="80" font-family="cursive">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text>　　cursive
      <text x="10" y="100" font-family="fantasy">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text>　　fantasy
      <text x="10" y="120" font-family="monospace">ABCDE hijkl 01234 あかさたな アカサタナ 安加左太奈</text>　　monospace
    </g>
  </svg>

いろいろなフォントファミリで表示しています。

表示例

フォントスタイルの例です

記述例

  <svg viewbox="0 0 500 130" width="500" height="130">
    <text x="10" y="40" fill="blue" font-size="20" font-weight="normal">Text文書</text>　　標準の太さ
    <text x="10" y="60" fill="blue" font-size="20" font-weight="bold">Text文書</text>　　　太く
    <text x="10" y="80" fill="blue" font-size="20" font-weight="bolder">Text文書</text>　　より太く
    <text x="10" y="100" fill="blue" font-size="20" font-weight="lighter">Text文書</text>　より細く
    <text x="110" y="40" fill="blue" font-size="20" font-style="normal">Text文書</text>　　標準
    <text x="110" y="60" fill="blue" font-size="20" font-style="italic">Text文書</text>　イタリック体
    <text x="110" y="80" fill="blue" font-size="20" font-style="oblique">Text文書</text> 　斜体
    <text x="60" y="120" fill="blue" font-size="20"
    font-weight="bold" font-style="italic">Text文書</text>　　太いイタリック体
    <text x="210" y="40" fill="blue" font-size="20" font-variant="normal">Text文書</text>　標準
    <text x="210" y="60" fill="blue" font-size="20"
    font-variant="small-caps">Text文書</text>　　　スモールキャプス体
    <text x="310" y="40" fill="blue" font-size="20" text-decoration="normal">Text文書</text> 　　標準
    <text x="310" y="60" fill="blue" font-size="20" text-decoration="underline">Text文書</text>　上線
    <text x="310" y="90" fill="blue" font-size="20" text-decoration="overline">Text文書</text> 　下線
    <text x="310" y="110" fill="blue" font-size="20"
    text-decoration="line-through">Text文書</text> 　　　取り消し線
  </svg>

いろいろなフォントスタイルで表示しています。

表示例

（３）文字の間隔

文字の間隔を変えることができます。

text 要素　（文字の間隔に関する属性）

文字の間隔を変えることができる。

属性

属性名	属性値	説明	必須
kerning	カーニングの指定		×
	auto	自動調整（規定値）
	数値	カーニング幅
	inherit	継承
letter-spacing	文字間隔		×
	normal	文字間隔:0
	数値	文字間隔（規定値:1）
	inherit	継承
word-spacing	単語間隔		×
	normal	単語間隔:0（規定値）
	数値	単語間隔
	inherit	継承

記述例

  <svg viewbox="0 0 500 160" width="500" height="160">
    <g font-family="Times Roman" font-size="16">
      <text x="10" y="20" fill="blue" kerning="auto">Give Peace a Chance</text>　　カーニング auto
      <text x="10" y="35" fill="blue" kerning="100">Give Peace a Chance</text>　　　カーニング 100
      <text x="10" y="60" fill="blue" letter-spacing="-1">Give Peace a Chance</text>　　　　文字間 -1
      <text x="10" y="75" fill="blue" letter-spacing="normal">Give Peace a Chance</text>　　文字間 auto
      <text x="10" y="90" fill="blue" letter-spacing="1">Give Peace a Chance</text> 　　　　文字間 1
      <text x="10" y="113" fill="blue" word-spacing="-1">Give Peace a Chance</text>　　　　　単語間 -1
      <text x="10" y="130" fill="blue" word-spacing="normal">Give Peace a Chance</text>　　　単語間 auto
      <text x="10" y="145" fill="blue" word-spacing="1">Give Peace a Chance</text> 　　　　　単語間 1
    </g>
  </svg>

いろいろな文字間隔で表示しています。

表示例

（４）テキスト全体の幅

テキスト全体の幅を変えることができます。

text 要素　（テキスト全体の幅に関する属性）

テキスト全体の幅を変えることができる。

属性

属性名	属性値	説明	必須
textLength	数値	テキスト全体の幅	×
lengthAdjust	幅の調整方法		×
	spacing	幅の調整を空白で行う（規定値）
	spacingAndGlyphs	幅の調整を文字幅で行う

記述例

  <svg viewbox="0 0 500 130" width="500" height="130">
    <text x="10" y="20" fill="blue" textLength="100">期待はあらゆる苦悩のもと</text>　　テキスト全体の幅 100
    <text x="10" y="40" fill="blue">期待はあらゆる苦悩のもと</text>　　　　　　　　　　　テキスト全体の幅 指定なし
    <text x="10" y="60" fill="blue" textLength="200">期待はあらゆる苦悩のもと</text>　　テキスト全体の幅 200
    <text x="10" y="90" fill="blue" textLength="300"
          lengthAdjust="spacing">期待はあらゆる苦悩のもと</text>　テキスト全体の幅 300 spacing
    <text x="10" y="110" fill="blue" textLength="300"
          lengthAdjust="spacingAndGlyphs">期待はあらゆる苦悩のもと</text>　テキスト全体の幅 300 spacingAndGlyphs
  </svg>

テキスト全体をいろいろな幅で表示しています。

表示例

（５）テキストの配置

設定された座標に表示する、テキストの位置を指定します。

text 要素　（テキストの配置に関する属性）

設定された座標に表示する、テキストの位置を指定することができる。

属性

属性名	属性値	説明	必須
text-anchor	テキストの基準位置		×
	start	開始（規定値）
	middle	真ん中
	end	終了

記述例

  <svg viewbox="0 0 500 100" width="500" height="100">
    <text x="200" y="20" fill="blue" text-anchor="start">芸術は長く、人生は短し</text> テキストの開始位置
    <text x="200" y="50" fill="blue" text-anchor="middle">芸術は長く、人生は短し</text>テキストの中央
    <text x="200" y="80" fill="blue" text-anchor="end">芸術は長く、人生は短し</text> 　テキストの終了位置
  </svg>

テキストをいろいろな基準位置で表示しています。
なお、グレイの破線は理解の助けになるように別途描いています。

表示例

（６）テキストの方向

テキストの方向を指定します。

text 要素　（テキストの方向に関する属性）

テキストの方向を指定することができる。

属性

属性名	属性値	説明	必須
writing-mode	テキストの横書き・縦書きを制御する		×
	lr	横書き（左から右方向）（規定値）
	rl	横書き（右から左方向）
	tb	縦書き（上から下方向）
glyph-orientation-vertical	縦書き時の文字の表記		×
	auto	90度回転して配置（規定値）
	0,90,180,270	回転させる角度
glyph-orientation-horizontal	横書き時の文字の表記		×
	auto	そのまま（規定値）
	0,90,180,270	回転させる角度
direction	文字列の方向		×
	ltr	左から右（規定値）
	rtl	右から左
unicode-bidi	双方向性（ブラウザによって動作が異なる）		×
	normal	そのまま（規定値）
	embed	Unicodeによる文字表記の方向設定を組み込む
	bidi-override	Unicodeによる文字表記の方向設定を無効にする
	inherit	継承

記述例

  <svg viewbox="0 0 600 200" width="600" height="200">
    <text x="10" y="20" fill="blue" writing-mode="lr">令和元年は「2019年」です。</text>　横書き（左から右方向）
    <text x="200" y="20" fill="blue" writing-mode="rl">令和元年は「2019年」です。</text> 横書き（右から左方向）
    <text x="400" y="20" fill="blue" writing-mode="lr"
                 glyph-orientation-horizontal="270">令和元年は「2019年」です。</text>　　　横書き　270
    <text x="10" y="30" fill="blue" writing-mode="tb">令和元年は「2019年」です。</text> 　　縦書き
    <text x="10" y="30" fill="blue" writing-mode="tb"
                 glyph-orientation-vertical="90">令和元年は「2019年」です。</text> 　　　　縦書き　90
  </svg>

表示例

（７）テキスト幅のオーバーフロー

テキスト幅を超えた場合の表示方法の設定をします。

text 要素　（テキスト幅に関する属性）

テキスト幅を超えた場合の表示方法の設定する。

属性

属性名	属性値	説明	必須
text-overflow	文字列の描画幅		×
	clip	そのまま（規定値）
	ellipsis	... と省略される

記述例

  <svg viewbox="0 0 400 80" width="400" height="80">
    <text x="10" y="20" fill="blue" width="150"
    text-overflow="clip">最も大きな危険は勝利の瞬間にある。</text>　そのまま
    <text x="10" y="20" fill="blue" width="150"
    text-overflow="ellipsis">最も大きな危険は勝利の瞬間にある。</text>　省略
  </svg>

なお、グレイの破線などは理解の助けになるように別途描いています。

表示例

（８）文字の基底線

文字を配置する際の基準となる線を基底線の設定をします。

text 要素　（文字の基底線に関する属性）

文字を配置する際の基準となる線を基底線の設定する。

属性

属性名	属性値	説明	必須
dominant-baseline	文字の描画に用いる基底線		×
	auto	そのまま（規定値）
	use-script
	no-change	親の設定
	reset-size	フォントサイズ変更
	ideographic	ideographic基底線を利用する（ひらがな、漢字、ハングル等）
	alphabetic	alphabetic基底線を利用する（アルファベット等）
	hanging	hanging基底線を利用する（インド系言語）
	mathematical	mathematical基底線を利用する（数学記号）
	central	central基底線を利用する
	middle	middle基底線を利用する
	text-after-edge	text-after-edge基底線を利用する
	text-before-edge	text-before-edge基底線を利用する

記述例

  <svg viewbox="0 0 500 180" width="500" height="180">
    <text x="0" y="25" fill="blue" font-size="20" dominant-baseline="auto">あ:auto</text>
    <text x="0" y="50" fill="blue" font-size="20" dominant-baseline="use-script">あ:use-script</text>
    <text x="0" y="75" fill="blue" font-size="20" dominant-baseline="no-change">あ:no-change</text>
    <text x="0" y="100" fill="blue" font-size="20" dominant-baseline="reset-size">あ:reset-size</text>
    <text x="0" y="125" fill="blue" font-size="20" dominant-baseline="ideographic">あ:ideographic</text>
    <text x="0" y="150" fill="blue" font-size="20" dominant-baseline="alphabetic">あ:alphabetic</text>
    <text x="200" y="25" fill="blue" font-size="20" dominant-baseline="hanging">あ:hanging</text>
    <text x="200" y="50" fill="blue" font-size="20" dominant-baseline="mathematical">あ:mathematical</text>
    <text x="200" y="75" fill="blue" font-size="20" dominant-baseline="central">あ:central</text>
    <text x="200" y="100" fill="blue" font-size="20" dominant-baseline="middle">あ:middle</text>
    <text x="200" y="125" fill="blue" font-size="20"
    dominant-baseline="text-after-edge">あ:text-after-edge</text>
    <text x="200" y="150" fill="blue" font-size="20"
    dominant-baseline="text-before-edge">あ:text-before-edge</text>
  </svg>

なお、グレイの破線などは理解の助けになるように別途描いています。

表示例

１３．４．２部分テキスト　(tspan)

一連のテキストの一部分だけを調整したい場合、text 要素の内部に子要素として tspan 要素を指定します。

tspan 要素には、親要素である text 要素とは異なる書式や位置を含めることができます。

tspan 要素

テキストを図形として図形を作成する。

text 要素と同様の属性があります。text 要素の説明を参照してください。

それ以外に次のような属性もあります。

属性

属性名	属性値	説明	必須
baseline-shift	基底線の調整（規定値：0）		×
	sub	下付き文字
	super	上付き文字
	パーセンテージ	ずらす割合
	ピクセル数	ずらす幅

記述例

  <svg viewbox="0 0 500 60" width="500" height="60">
    <text x="10" y="20" fill="blue" font-size="14">テキストを部分的に
                                <tspan text-decoration="line-through">削除したり</tspan>、
                                <tspan font-weight="bold" fill="red">強調したり</tspan>できます。</text>
    <text x="10" y="40" fill="blue" font-size="14">C<tspan baseline-shift="sub">27</tspan>
                                                  H<tspan baseline-shift="sub">46</tspan>O</text>
  </svg>

表示例

１３．４．３テキストパス　(textPath)

textPath 要素を用いると予め定義しておいた曲線の上に文字列を配置することが出来ます。文字描画の基底線が曲線に接するように配置されます。

textPath 要素

予め定義しておいた曲線の上に文字列を配置する。

属性

属性名	属性値	説明	必須
xlink:href	ID	path 要素の ID	×
startOffset	数値	文字配置の開始位置（規定値：0）	×
method	文字の変形方法		×
	align	位置のみ
	stretch	パスに沿って変形する
spacing	文字間のスペースの調整方法		×
	exact	そのままの文字間の幅で並べる
	auto	文字間の調整をする

  <svg viewbox="0 0 500 140" width="500" height="140">
    <defs>　　　　　　　　　　　　　　　　　　　　　　　　　　　　defs 要素内は定義のみで描画しない
      <path id="tp1" d="M100,60 a40,40 0 1 1 -40,-40"/>
      <path id="tp2" d="M200,20 a40,40 0 1 0 40,40"/>
    </defs>
    <text fill="blue" font-size="16">
      <textPath xlink:href="#tp1">表面張力で丸くなる</textPath>
      <textPath xlink:href="#tp2">表面張力で丸くなる</textPath>
    </text>
  </svg>

テキストは、パスの進行方向左側に表示されます。
なお、グレイの線などは理解の助けになるように別途描いています。

表示例

参考：グラフ

参考：円グラフ　　積層グラフ　　レーダーチャート　　　（別ウィンドウで開きます）

１３．５イメージ　(image)

画像を表示します。

image 要素

画像を表示する。

属性

属性名	属性値	説明	必須
x	数値	左上の X 座標（規定値：0）	×
y	数値	左上の Y 座標（規定値：0）	×
width	数値	画像を表示する領域の幅	○
height	数値	画像を表示する領域の高さ	○
xlink:href	ID	画像の URI	○

  <svg viewbox="0 0 200 100" width="200" height="100">
    <image x="10" y="10" width="74" height="74" xlink:href="bear.png"/>
    <image x="100" y="10" width="74" height="74" xlink:href="bear.png" transform="rotate(60,137,47)"/>
  </svg>

右側のイメージは回転させています。

表示例

参考：時計

参考：ミッキー時計　　　（別ウィンドウで開きます）

１３．６グラデーション

グラデーションは塗り潰しに用いる色を徐々に変化させることで、単色によるものに比べて滑らかな見た目をもたらします。

SVG においても帯状にグラデーションを掛ける linearGradient 要素と放射状に掛ける radialGradient 要素が提供されています。

また、実際にグラデーションを始めるたり終わらせたりする位置や色は、<linearGradient>～</linearGradient> などの間に記述した stop 要素や xlink:href 属性で指定します。

１３．６．１色傾斜　(stop)

stop 要素は、linearGradient 要素やradialGradient 要素などで定義された勾配ベクトルに基準となる色の位置を指定します。また、色の他に不透明度を設定することも可能で、stop 要素間の色は線形に補間されます。なお、stop 要素で設定された範囲外は通常単色で塗りつぶされます。

stop 要素

色の位置を指定する。

属性

属性名	属性値	説明	必須
offset	0～1、0%～100%	グラデーションを始めるあるいは終わらせる位置（規定値：0）	×
stop-color	色	グラデーションの基準色（規定値：black）	×
stop-opacity	グラデーションの基準色の不透明度（規定値：1）		×
	パーセンテージ	不透明度
	inherit	不継承

　　　stop 要素は offset 値の小さい順に並べます。

　　　offset 値は、radialGradient 要素のときは焦点 (fx,fy) から最大／最外円までの距離に対する比率です。

  <svg viewbox="0 0 400 220" width="400" height="220">
    <defs>
      <linearGradient id="g1">
        <stop offset="20%" stop-color="blue"/>　　　　　20% より左は blue 単色
        <stop offset="50%" stop-color="green"/>
        <stop offset="80%" stop-color="yellow"/>　　　　80% より右は yellow 単色
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="300" height="100" fill="url(#g1)"/>　　g1 を利用してグラデーションにする

    <defs>
      <radialGradient id="g2">
        <stop offset="20%" stop-color="blue"/>　　　　　20% より左は blue 単色
        <stop offset="50%" stop-color="green"/>
        <stop offset="80%" stop-color="yellow"/>　　　　80% より右は yellow 単色
      </radialGradient>
    </defs>
    <rect x="0" y="110" width="300" height="100" fill="url(#g2)"/>　　g2 を利用してグラデーションにする
  </svg>

20% ～ 80% が勾配ベクトルとなります。

0% ～ 20% は青単色、80% ～ 100% は黄単色です。その間は、20% ～ 50% は、青と緑の、50% ～ 80% は、緑と黄のグラデーションになります。

なお、"勾配ベクトル"とその下のグレイの線などは理解の助けになるように別途描いています。

表示例

また、offset が同じ stop 要素があった場合は、そこでグラデーションは終了し左右が別のグラデーションになります。

  <svg viewbox="0 0 400 220" width="400" height="220">
    <defs>
      <linearGradient id="g1">
        <stop offset="20%" stop-color="yellow"/>　　　　20% より左は yellow 単色
        <stop offset="50%" stop-color="blue"/>　　　　　50% で blue と green に分かれる
        <stop offset="50%" stop-color="green"/>
        <stop offset="80%" stop-color="yellow"/>　　　　80% より右は yellow 単色
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="300" height="100" fill="url(#g1)"/>　　g1 を利用してグラデーションにする

    <defs>
      <radialGradient id="g2">
        <stop offset="20%" stop-color="yellow"/>　　　　20% より左は yellow 単色
        <stop offset="50%" stop-color="blue"/>　　　　　50% で blue と green に分かれる
        <stop offset="50%" stop-color="green"/>
        <stop offset="80%" stop-color="yellow"/>　　　　80% より右は yellow 単色
      </radialGradient>
    </defs>
    <rect x="0" y="110" width="300" height="100" fill="url(#g2)"/>　　g2 を利用してグラデーションにする
  </svg>

offset が 50% の stop 要素が２つあるので、そこで左右が別のグラデーションになります。

なお、"勾配ベクトル"とその下のグレイの線などは理解の助けになるように別途描いています。

表示例

１３．６．２線形グラデーション　(linearGradient)

linearGradient 要素は帯状に色が広がるグラデーションを定義します。

グラデーションの色の指定には stop 要素を用います。グラデーションの勾配ベクトルは x1，y1 でその始点を x2，y2 でその終点を表現します。始点から終点に向かって色を変化させます。

linearGradient 要素

帯状に色が広がるグラデーションを定義する。

始点 (x1,y1) と終点 (x2,y2) で指定した勾配ベクトルの間でグラデーションが描かれる。

属性

属性名	属性値	説明	必須
gradientUnits	グラデーションをかける座標系		×
	userSpaceOnUse	図形が描画される座標系（SVG 全体の座標）
	objectBoundingBox	図形が内包する座標系（図形内の座標）（規定値）
gradientTransform	変形関数（transform と同じ）　　　ただし、translate(tx,ty)のtxやtyは 0～1 の範囲		×
spreadMethod	敷き詰め方法		×
	pad	1回のみ（規定値）
	repeat	繰り返し
	reflect	グラデーション方向を逆にして繰り返し
xlink:href	ID	別の linearGradient の ID	×（注）

　　　（注）記述しない場合は、<linearGradient>～</linearGradient> の間にstop 要素が必要

属性名	gradientUnits="userSpaceOnUse"		gradientUnits="objectBoundingBox"		必須
属性名	属性値	説明	属性値	説明	必須
x1	数値	始点の X 座標（規定値：0）	0～1、0%～100%	始点の、左からの位置（規定値：0）	×
y1	数値	始点の Y 座標（規定値：0）	0～1、0%～100%	始点の、上からの位置（規定値：0）	×
x2	数値	終点の X 座標（規定値：viewboxの幅）	0～1、0%～100%	終点の、左からの位置（規定値：1）	×
y2	数値	終点の Y 座標（規定値：0）	0～1、0%～100%	終点の、上からの位置（規定値：0）	×

（１） gradientUnits 属性

グラデーションをかける座標系の設定をします。

userSpaceOnUse は、図形が描画されている SVG の座標系で、transform 属性が指定されていなければ通常 SVG 要素などの viewBox から定まるものです。

objectBoundingBox は、図形を囲む矩形を考え、その左上を原点（0,0）とし、左下を（1,1）としたものです。

<svg viewbox="0 0 200 100" width="200" height="100">
 <defs>
  <linearGradient id="g" gradientUnits="userSpaceOnUse">
   <stop offset="0" stop-color="green"/>
   <stop offset="1" stop-color="cyan"/>
  </linearGradient>
 </defs>
 <rect x="0" y="0" width="200" height="50"
  stroke="none" fill="url(#g)"/>
 <ellipse cx="100" cy="50" rx="60" ry="30"
  stroke="none" fill="url(#g)"/>
</svg>

この例のグラデーションは userSpaceOnUse なので、楕円は viewbox 全幅のグラデーションの一部を切り取ったグラデーションになります。

なお、グレイの線は viewbox を表しています。理解の助けになるように別途描いています。

表示例　userSpaceOnUse

<svg viewbox="0 0 200 100" width="200" height="100">
 <defs>
  <linearGradient id="g" gradientUnits="objectBoundingBox">
   <stop offset="0" stop-color="green"/>
   <stop offset="1" stop-color="cyan"/>
  </linearGradient>
 </defs>
 <rect x="0" y="0" width="200" height="50"
  stroke="none" fill="url(#g)"/>
 <ellipse cx="100" cy="50" rx="60" ry="30"
  stroke="none" fill="url(#g)"/>
</svg>

この例のグラデーションは objectBoundingBox なので、楕円は自身の幅でのグラデーションになります。

なお、グレイの線は viewbox を表しています。理解の助けになるように別途描いています。

表示例　objectBoundingBox

（２） gradientTransform 属性

radientTransform属性によって、グラデーションを変換することができます。グラデーションを施す際の基準となる（gradientUnitsから定まる）座標軸が予めこの属性によって変換されてから塗り潰しが行われます。

transform　属性と同様に、matrix、translate、rotate、scale、skewX、skewY 関数を空白またはカンマ区切りで列挙します。

注意：translate(tx, ty) の tx や ty は 0～1 の範囲で指定します。

  <svg viewbox="-10 0 400 160" width="400" height="160">
    <defs>
      <linearGradient id="g1">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="100" height="100" fill="url(#g1)"/>

    <defs>
      <linearGradient id="g2" gradientTransform="rotate(45)">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </linearGradient>
    </defs>
    <rect x="120" y="0" width="100" height="100" fill="url(#g2)"/>
    
    <defs>
      <linearGradient id="g3" gradientTransform="translate(0.2,0) scale(0.5,1) skewX(30)">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </linearGradient>
    </defs>
    <rect x="240" y="0" width="100" height="100" fill="url(#g3)"/>
  </svg>

なお、「勾配ベクトル」とその下のグレイの線は理解の助けになるように別途描いています。

表示例

（３） spreadMethod 属性

グラデーションは spreadMethod 属性によってその敷き詰め方法を設定することができます。

pad では、グラデーションは１回だけです。グラデーション以外の部分は両端の単色で塗られます。

repeat では、グラデーションは繰り返し行われます。グラデーションの勾配は一定です。

reflect では、グラデーションは、グラデーションの勾配が逆になり繰り返し行われます。

次の図は青い線の通っている場所の色のようにグラデーションが変化していくことを示しています。

  <svg viewbox="0 0 300 160" width="300" height="160">
    <defs>
      <linearGradient id="g1" gradientUnits="userSpaceOnUse" x1="120" y1="0" x2="220" y2="0"
                                                                                spreadMethod="pad">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </linearGradient>
      <linearGradient id="g2" gradientUnits="userSpaceOnUse" x1="120" y1="0" x2="220" y2="0"
                                                                                spreadMethod="repeat">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </linearGradient>
      <linearGradient id="g3" gradientUnits="userSpaceOnUse" x1="120" y1="0" x2="220" y2="0"
                                                                                spreadMethod="reflect">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </linearGradient>
    </defs>
    <rect x="20" y="20" width="300" height="30" fill="url(#g1)"/>
    <rect x="20" y="70" width="300" height="30" fill="url(#g2)"/>
    <rect x="20" y="120" width="300" height="30" fill="url(#g3)"/>
  </svg>

spreadMethod 属性によってグラデーションの敷き詰め方法が変わります。なお、点線は理解の助けになるように別途描いています。

表示例

（４） x1、y1、x2、y2 属性

始点 (x1,y1) から終点(x2,y2) に向かう勾配ベクトルになります。

y1 と y2 が等しい場合は、水平方向のベクトルになり、x1 と x2 が等しい場合は、垂直方向のベクトルになります。

gradientUnits="userSpaceOnUse" の場合は、X 座標、Y 座標で、gradientUnits="objectBoundingBox" の場合は、0～1 あるいは 0%～100% を指定します。

  <svg viewbox="0 0 500 140" width="500" height="140">
    <defs>
      <linearGradient id="g1">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="azure"/>
      </linearGradient>
      <linearGradient id="g2" x2="0" y2="1">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="azure">
      </linearGradient>
      <linearGradient id="g3" x1="20%" y1="20%" x2="80%" y2="80%">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="azure"/>
      </linearGradient>
    </defs>
    <rect x="20" y="20" width="100" height="100" fill="url(#g1)"/>
    <rect x="140" y="20" width="100" height="100" fill="url(#g2)"/>
    <rect x="260" y="20" width="100" height="100" fill="url(#g3)"/>
  </svg>

左は、省略してあるので、x1="0"、y1="0"、x2="1"、y2="0" となり水平方向のグラデーションになります。

二番目は、x1="0"、y1="0"、x2="0"、y2="1" となり垂直方向のグラデーションになります。

表示例

また、グラデーションの始点と終点は、x1、y1、x2、y2 属性だけでなく、stop 要素の offset でも決まります。

  <svg viewbox="0 0 500 140" width="500" height="140">
    <defs>
      <linearGradient id="g1" x1="20%" y1="0%" x2="80%" y2="0%">
        <stop offset="10%" stop-color="green"/>
        <stop offset="90%" stop-color="azure"/>
      </linearGradient>
      <linearGradient id="g2" x1="10%" y1="0%" x2="90%" y2="0%">
        <stop offset="20%" stop-color="green"/>
        <stop offset="80%" stop-color="azure"/>
      </linearGradient>
    </defs>
    <rect x="20" y="20" width="300" height="50" fill="url(#g1)"/>
    <rect x="20" y="100" width="300" height="50" fill="url(#g2)"/>
  </svg>

上は、linearGradient 要素で指定された 20% ～ 80%（グレイの実線）が勾配ベクトルになりますが、stop 要素で 10% ～ 90% となっているのでので、実際のグラデーションは 26%（=20%+(80%-20%)*10%）～ 74%（=20%+(80%-20%)*90%）になります。

下は、linearGradient 要素で指定された 10% ～ 90%（グレイの実線）が勾配ベクトルになりますが、stop 要素で 20% ～ 80% となっているのでので、実際のグラデーションは 26%（=10%+(90%-10%)*20%）～ 74%（=10%+(90%-10%)*80%）になります。

表示例

１３．６．３放射型グラデーション　(radialGradient)

linearGradient 要素は放射状（円形）に色が広がるグラデーションを定義します。

グラデーションの色の指定には stop 要素を用います。グラデーションの勾配ベクトルは焦点 (fx,fy) を中心とした半径 r の円になり、焦点から円周に向かって色を変化させます。グラデーションは (cx,cy) を中心とした半径 r の円で描かれます。

radialGradient 要素

帯状に色が広がるグラデーションを定義する。

中心点 (cx，y) と半径 (r) で指定した勾配ベクトルの間でグラデーションが描かれる。

属性

属性名	属性値	説明	必須
gradientUnits	グラデーションをかける座標系		×
	userSpaceOnUse	図形が描画される座標系（SVG 全体の座標）
	objectBoundingBox	図形が内包する座標系（図形内の座標）（規定値）
gradientTransform	変形関数（transform と同じ）　　　ただし、translate(tx,ty)のtxやtyは 0～1 の範囲		×
spreadMethod	敷き詰め方法		×
	pad	1回のみ（規定値）
	repeat	繰り返し
	reflect	グラデーション方向を逆にして繰り返し
xlink:href	ID	別の linearGradient の ID	×（注）

　　　（注）記述しない場合は、<linearGradient>～</linearGradient> の間にstop 要素が必要

属性名	gradientUnits="userSpaceOnUse"		gradientUnits="objectBoundingBox"		必須
属性名	属性値	説明	属性値	説明	必須
cx	数値	中心点の X 座標（規定値：0）	0～1、0%～100%	中心点の、左からの位置（規定値：0.5）	×
cy	数値	中心点の Y 座標（規定値：0）	0～1、0%～100%	中心点の、上からの位置（規定値：0.5）	×
r	数値	グラデーションの半径（規定値：viewboxの幅の半分）	0～1、0%～100%	グラデーションの半径（規定値：0.5）	×
fx	数値	グラデーションの焦点の X 座標（規定値：cx）	0～1、0%～100%	焦点の、左からの位置（規定値：cx）	×
fy	数値	グラデーションの焦点の Y 座標（規定値：cy）	0～1、0%～100%	焦点の、上からの位置（規定値：cy）	×

（１） gradientUnits 属性

グラデーションをかける座標系の設定をします。

userSpaceOnUse は、図形が描画されている SVG の座標系で、transform 属性が指定されていなければ通常 SVG 要素などの viewBox から定まるものです。

objectBoundingBox は、図形を囲む矩形を考え、その左上を原点（0,0）とし、左下を（1,1）としたものです。

<svg viewbox="0 0 200 100" width="200" height="100">
 <defs>
  <radialGradient id="g"
                 gradientUnits="userSpaceOnUse">
   <stop offset="0" stop-color="green"/>
   <stop offset="1" stop-color="cyan"/>
  </radialGradient>
 <defs>
 <rect x="0" y="0" width="200" height="50"
                   stroke="none" fill="url(#g)"/>
 <ellipse cx="100" cy="50" rx="60" ry="30"
                   stroke="none" fill="url(#g)"/>
</svg>

この例のグラデーションは userSpaceOnUse なので、楕円は viewbox 全幅のグラデーションの一部を切り取ったグラデーションになります。

なお、グレイの線は viewbox を表しています。理解の助けになるように別途描いています。

表示例　userSpaceOnUse

<svg viewbox="0 0 200 100" width="200" height="100">
 <defs>
  <radialGradient id="g"
                 gradientUnits="objectBoundingBox">
   <stop offset="0" stop-color="green"/>
   <stop offset="1" stop-color="cyan"/>
  </radialGradient>
 </defs>
 <rect x="0" y="0" width="200" height="50"
                   stroke="none" fill="url(#g)"/>
 <ellipse cx="100" cy="50" rx="60" ry="30"
                   stroke="none" fill="url(#g)"/>
</svg>

この例のグラデーションは objectBoundingBox なので、楕円は自身の幅でのグラデーションになります。

なお、グレイの線は viewbox を表しています。理解の助けになるように別途描いています。

表示例　objectBoundingBox

（２） gradientTransform 属性

transform　属性と同様に、matrix、translate、rotate、scale、skewX、skewY 関数を空白またはカンマ区切りで列挙します。

注意：translate(tx, ty) の tx や ty は 0～1 の範囲で指定します。

  <svg viewbox="-10 0 400 160" width="410" height="160">
    <defs>
      <radialGradient id="g1">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </radialGradient>
    <defs>
    <rect x="0" y="0" width="100" height="100" fill="url(#g1)"/>
    <path d="M50,50 h50" stroke="black" stroke-width="3">
    <text x="50" y="45" text-anchor="start" font-size="9">勾配ベクトル</text>

    <defs>
      <radialGradient id="g2" gradientTransform="rotate(-45,0.5,0.5) scale(1,0.5) translate(0,0.5)">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </radialGradient>
    <defs>
    <rect x="120" y="0" width="100" height="100" fill="url(#g2)"/>
    
    <defs>
      <radialGradient id="g3" gradientTransform="skewX(20) translate(-0.2,0)">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </radialGradient>
    <defs>
    <rect x="240" y="0" width="100" height="100" fill="url(#g3)"/>
  </svg>

なお、グレイの × はグラデーションの中心です。理解の助けになるように別途描いています。

表示例

（３） spreadMethod 属性

グラデーションは spreadMethod 属性によってその敷き詰め方法を設定することができます。

pad では、グラデーションは１回だけです。グラデーション以外の部分は両端の単色で塗られます。

repeat では、グラデーションは繰り返し行われます。グラデーションの勾配は一定です。

reflect では、グラデーションは、グラデーションの勾配が逆になり繰り返し行われます。

次の図は青い線の通っている場所の色のようにグラデーションが変化していくことを示しています。

  <svg viewbox="0 0 440 160" width="440" height="160">
    <defs>
      <radialGradient id="g1" gradientUnits="userSpaceOnUse" cx="80" cy="80" r="30" spreadMethod="pad">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </radialGradient>
      <radialGradient id="g2" gradientUnits="userSpaceOnUse" cx="220" cy="80" r="30" spreadMethod="repeat">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </radialGradient>
      <radialGradient id="g3" gradientUnits="userSpaceOnUse" cx="360" cy="80" r="30" spreadMethod="reflect">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </radialGradient>
    </defs>
    <rect x="20" y="20" width="120" height="120" fill="url(#g1)"/>
    <rect x="160" y="20" width="120" height="120" fill="url(#g2)"/>
    <rect x="300" y="20" width="120" height="120" fill="url(#g3)"/>
  </svg>

spreadMethod 属性によってグラデーションの敷き詰め方法が変わります。なお、点線は理解の助けになるように別途描いています。

表示例

（４） cx、cy、r、fx、fy 属性

焦点 (fx,fy) から半径 r の円周に向かう勾配ベクトルになります。fx、fy が指定されていなければ cx、cy と同じになります。

cx、cy や fx、fy は、gradientUnits="userSpaceOnUse" の場合は、X 座標、Y 座標で、gradientUnits="objectBoundingBox" の場合は、0～1 あるいは 0%～100% を指定します。

  <svg viewbox="0 0 500 140" width="500" height="140">
    <defs>
      <radialGradient id="g1">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </radialGradient>
      <radialGradient id="g2" fx="0.25">
        <stop offset="0" stop-color="green"/>
        <stop offset="1" stop-color="cyan"/>
      </radialGradient>
      <radialGradient id="g3" cx="0.5" cy="0.5" fx="0.3" fy="0.3">
        <stop offset="0" stop-color="cyan"/>
        <stop offset="0.99" stop-color="green"/>
        <stop offset="1" stop-color="white"/>
      </radialGradient>
    </defs>
    <rect x="20" y="20" width="100" height="100" fill="url(#g1)"/>
    <rect x="140" y="20" width="100" height="100" fill="url(#g2)"/>
    <rect x="260" y="20" width="100" height="100" fill="url(#g3)"/>
  </svg>

左は、省略してあるので、中心 (cx,cy)、焦点 (fx,fy) とも矩形の中央になり、中心からのグラデーションになります。

二番目は、中心 (cx,cy) は矩形の中央ですが、焦点 (fx,fy) は左から 25% の位置になり、そこを中心としたグラデーションになります。

表示例

また、グラデーションの始点と終点は、fx、fy、r 属性だけでなく、stop 要素の offset でも決まります。

  <svg viewbox="0 0 500 160" width="500" height="160">
    <defs>
      <radialGradient id="g1" r="40%">
        <stop offset="50%" stop-color="green"/>
        <stop offset="100%" stop-color="azure"/>
      </radialGradient>
      <radialGradient id="g2" r="80%">
        <stop offset="25%" stop-color="green"/>
        <stop offset="50%" stop-color="azure"/>
      </radialGradient>
    </defs>
    <rect x="20" y="20" width="300" height="50" fill="url(#g1)"/>
    <rect x="20" y="100" width="300" height="50" fill="url(#g2)"/>
  </svg>

上は、radialGradient 要素で指定された 0% ～ 40%（グレイの実線）が勾配ベクトルになりますが、stop 要素で 50% ～ 100% となっているのでので、実際のグラデーションは 20%（=40%*50%）～ 40%（=40%*100%）になります。

下は、radialGradient 要素で指定された 0% ～ 80%（グレイの実線）が勾配ベクトルになりますが、stop 要素で 25% ～ 50% となっているのでので、実際のグラデーションは 20%（=80%*25%）～ 40%（=80%*50%）になります。

表示例

１３．７パターン　(pattern)

pattern 要素を用いると矩形パターンを用いた敷き詰めを指定することができます。

pattern 要素

パターンの敷き詰めを行う。

属性

属性名	属性値	説明	必須
patternUnits	pattern 要素の x、y、width、height 属性の座標系		×
	userSpaceOnUse	図形が描画される座標系（SVG 全体の座標）
	objectBoundingBox	図形が内包する座標系（図形内の座標）（規定値）
patternContentUnits	パターン（敷き詰める図形）の座標系		×
	userSpaceOnUse	図形が描画される座標系（SVG 全体の座標）（規定値）
	objectBoundingBox	図形が内包する座標系（図形内の座標）
patternTransform	変形関数（transform と同じ）　　　ただし、複数の関数を指定した場合は後ろから演算される		×
viewBox	空白区切りの4つの整数	パターンの左上の X 座標と Y 座標、そして幅と高さ（規定値：0 0 width height）	×
preserveAspectRatio	拡縮方式（規定値：xMidYMid meet）		×
	none	均等な拡縮をしない。元の画像は、表示領域に合致するように必要なら不均等に拡縮し、すべてを表示領域内に表示する。
	meet	均等に拡縮し元の画像のすべてを表示領域内に表示する
	slice	均等に拡縮し表示領域をはみ出しても表示領域に隙間がないように元の画像を表示する
xlink:href	ID	画像の URI	○

属性名	userSpaceOnUse		objectBoundingBox		必須
属性名	属性値	説明	属性値	説明	必須
x	数値	基準点の X 座標（規定値：0）	0～1、0%～100%	基準点の、左からの位置（規定値：0）	×
y	数値	基準点の Y 座標（規定値：0）	0～1、0%～100%	基準点の、上からの位置（規定値：0）	×
width	数値	パターンを繰り返す幅（規定値：0）	0～1、0%～100%	パターンを繰り返す幅（規定値：0）	×
height	数値	パターンを繰り返す高さ（規定値：0）	0～1、0%～100%	パターンを繰り返す高さ（規定値：0）	×

　　　基準点：パターンを埋め始める基準となる点（この座標に埋め込むパターンの左上点が位置付けられる）

（１） patternUnits 属性

pattern 要素の座標系（x、y、width、height）の設定をします。

userSpaceOnUse は、図形が描画されている SVG の座標系で、transform 属性が指定されていなければ通常 SVG 要素などの viewBox から定まるものです。

objectBoundingBox は、図形を囲む矩形を考え、その左上を原点（0,0）とし、左下を（1,1）としたものです。


楕円をパターンで敷き詰めることをします。敷き詰めるパターンはです。
<svg viewbox="0 0 200 100" width="200" height="100"> <pattern id="p" x="5" y="10" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse"> <circle cx="15" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p)"/> </svg>	<svg viewbox="0 0 200 100" width="200" height="100"> <pattern id="p" x="0.036" y="0.125" width="0.143" height="0.25" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse"> <circle cx="15" cy="10" r="10" fill="orange"/> </pattern> <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p)"/> </svg>
この例のパターンは userSpaceOnUse なので、楕円に隙間なくパターンを敷き詰めようとしたら、pattern 要素の width や height は、パターンの幅や高さになります。また、パターンは viewbox の (x,y) から埋められ、楕円はその一部を切り取った模様になります。なお、色の薄いパターンなどは理解の助けになるように別途描いています。	この例のパターンは objectBoundingBox なので、楕円に隙間なくパターンを敷き詰めようとしたら、pattern 要素の width はパターンの幅／楕円の幅、height はパターンの高さ／楕円の高さ　になります。また、パターンは楕円を内接する矩形の左上から (x,y) の位置から埋められ、楕円はその一部を切り取った模様になります。なお、色の薄いパターンなどは理解の助けになるように別途描いています。
表示例　userSpaceOnUse	表示例　objectBoundingBox

（２） patternContentUnits 属性

パターン（敷き詰める図柄）の座標系（circle の cx、cy、r や rect の x、y、width、height など）の設定をします。

楕円をパターンで敷き詰めることをします。敷き詰めるパターンはです。

<svg viewbox="0 0 200 100" width="200" height="100">
 <pattern id="p" x="0" y="0" width="20" height="20"
              patternUnits="userSpaceOnUse"
              patternContentUnits="userSpaceOnUse">
  <circle cx="10" cy="10" r="10" fill="orange"/>
 </pattern>
 <ellipse cx="100" cy="50" rx="70" ry="40"
                                   fill="url(#p)"/>
</svg>

<svg viewbox="0 0 200 100" width="200" height="100">
 <pattern id="p" x="0" y="0" width="20" height="20"
              patternUnits="userSpaceOnUse"
              patternContentUnits="objectBoundingBox">
  <circle cx="0.071" cy="0.125" r="0.071"
                                fill="orange"/>
 </pattern>
 <ellipse cx="100" cy="50" rx="70" ry="40"
                                   fill="url(#p)"/>
</svg>

この例のパターンは userSpaceOnUse なので、パターンの座標系は viewbox の座標になります。

なお、色の薄いパターンなどは理解の助けになるように別途描いています。

この例のパターンは objectBoundingBox なので、座標系は塗りつぶす楕円に対する割合になります。circle の cx と r は patern 要素の width／楕円の幅／２、cy は pattern 要素の height／楕円の高さ／２　になります。

なお、色の薄いパターンなどは理解の助けになるように別途描いています。

表示例　userSpaceOnUse

表示例　objectBoundingBox

（３） patternTransform 属性

patternTransform属性によって、パターンを変換することができます。パターンを施す際の基準となる（gradientUnitsから定まる）座標軸が予めこの属性によって変換されてからパターンの敷き詰めが行われます。

transform　属性と同様に、matrix、translate、rotate、scale、skewX、skewY 関数を空白またはカンマ区切りで列挙します。

ただし、patternTransform は後ろから実行されます。

<svg viewbox="0 0 600 100" width="600" height="100">
 <pattern id="p1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"
                  patternContentUnits="userSpaceOnUse" patternTransform="rotate(-45)">
  <circle cx="10" cy="10" r="10" fill="orange"/>
 </pattern>
 <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p1)"/>
 <pattern id="p2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"
                  patternContentUnits="userSpaceOnUse" patternTransform="scale(0.5,1) rotate(-45)"/>
  <circle cx="10" cy="10" r="10" fill="orange"/>
 </pattern>
 <ellipse cx="300" cy="50" rx="70" ry="40" fill="url(#p2)"/>
 <pattern id="p3" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"
                  patternContentUnits="userSpaceOnUse" patternTransform="rotate(-45) scale(0.5,1)">
  <circle cx="10" cy="10" r="10" fill="orange"/>
 </pattern>
 <ellipse cx="300" cy="50" rx="70" ry="40" fill="url(#p3)"/>
</svg>

左の例では、反時計回りに 45度回転させています。中央の例では、反時計回りに 45度回転させてから、横方向に半分の大きさにしています。右の例では、横方向に半分の大きさにしてから、反時計回りに 45度回転させています。
なお、グレイの線は理解の助けになるように別途描いています。

表示例

（４） viewbox 属性

図形を埋めるために使用するパターンの範囲を指定します。

<svg viewbox="0 0 400 100" width="400" height="100">
 <pattern id="p1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"
                  patternContentUnits="userSpaceOnUse" viewbox="10 10 10 10">
  <circle cx="10" cy="10" r="10" fill="orange"/>
 </pattern>
 <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p1)"/>

 <pattern id="p2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"
                  patternContentUnits="userSpaceOnUse" viewbox="0 0 10 10">
  <circle cx="10" cy="10" r="10" fill="orange"/>
 </pattern>
 <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p2)"/>
</svg>

左側は、グレイの枠で囲ったパターンの一部（左上(10,10)で幅10高さ10の矩形）を幅20高さ20に拡大して埋めています。右側は、グレイの枠で囲ったパターンの一部（左上(0,0)で幅10高さ10の矩形）をやはり幅20高さ20に拡大して埋めています。

表示例

（５） preserveAspectRatio 属性

viewbox で指定したパターンと width、height で指定した領域とでサイズが異なる場合、何らかの方法で拡縮が必要になります。この方法を指定するのが preserveAspectRatio 属性です。

拡縮には３つの方法があり、これらと画像の拡縮の基準を表す xMinYMin～xMaxYMax とを組み合わせることで拡縮処理を定義します。

none	縦横比は維持されず、元の画像が表示領域いっぱいに表示される
meet	縦横比は維持されつつ、元の画像が表示領域にすべて表示される
slice	縦横比は維持されつつ、縦か横を表示領域の最大限に広げる（一部ははみ出ることになる。はみ出た部分は、表示されない）

記述例

<svg viewbox="0 0 450 100" width="450" height="100">
 <pattern id="p1" x="0" y="0" width="20" height="40" patternUnits="userSpaceOnUse"
                  patternContentUnits="userSpaceOnUse" viewbox="0 0 20 20" preserveAspectRatio="xMidYMin meet">
  <circle cx="10" cy="10" r="10" fill="orange"/>
 </pattern>
 <ellipse cx="100" cy="50" rx="70" ry="40" fill="url(#p1)"/>

 <pattern id="p2" x="0" y="0" width="20" height="40" patternUnits="userSpaceOnUse"
                  patternContentUnits="userSpaceOnUse" viewbox="0 0 20 20" preserveAspectRatio="xMinYMid slice">
  <circle cx="10" cy="10" r="10" fill="orange"/>
 </pattern>
 <ellipse cx="300" cy="50" rx="70" ry="40" fill="url(#p2)"/>

</svg>

左側は、xMidYMin meet なので縮小してパターンの全体を上詰めに埋められます。右側は、xMinYMid slice なので左詰めにしてはみ出た部分を切り捨てた形のパターンで埋められます。

表示例

１３．８マーカー　(marker)

marker 要素は、矢印などのマーカーを描画するグラフィックを定義します。

マーカーは通常図形の右側が線の向きに合わされて描画されますが、orient 属性を指定することで向きを固定することも出来ます。

marker 要素

矢印などのマーカーを描画するグラフィックを定義する。

マーカーにする図形の座標は、viewbox の範囲（viewbox の指定がなければ (0,0)～(markerWidth,markerHeight) ）で指定する。

属性

属性名	属性値	説明	必須
refX	数値	基準点（マーカーが回転するときの中心）の X 座標（規定値：0）	×
refY	数値	基準点の Y 座標（規定値：0）	×
markerUnits	marker 要素の x、y、width、height 属性の座標系		×
	userSpaceOnUse	図形が描画される座標系（SVG 全体の座標）
	strokeWidth	線の太さを基準とする座標系（規定値）
viewBox	空白区切りの4つの整数	マーカーの左上の X 座標と Y 座標、そして幅と高さ（規定値：0 0 markerWidth markerHeight）	×
orient	端点の描画方向		×
	auto	自動
	角度	描画角度（規定値：0）

属性名	userSpaceOnUse		strokeWidth		必須
属性名	属性値	説明	属性値	説明	必須
markerWidth	数値	マーカーの幅（規定値：3）	倍率	線の太さに対する倍率で指定した幅（規定値：3）	×
markerHeight	数値	マーカーの高さ（規定値：3）	倍率	線の太さに対する倍率で指定した高さ（規定値：3）	×

line、path、polyline、polygon の各要素は、marker 要素で定義したマーカー図形を marker-start（始点）、marker-mid（頂点）、marker-end（終点）属性から参照します。

line、path、polyline、polygon 要素

矢印などのマーカーを描画するグラフィックを定義する。

属性

属性名	属性値	説明	必須
marker-start	ID	始点のマーカーの ID	×
marker-mid	ID	中間点のマーカーの ID	×
marker-end	ID	終点のマーカーの ID	×

（１） refX、refY 属性

マーカーの位置を正確に揃えるための基準となる点の座標です。マーカーが回転するときの中心にもなります。

この例では、マーカーの左上、中央、右下を基準点にしています。

記述例

<svg viewbox="0 0 400 120" width="400" height="120">
 <marker id="m1" refX="0" refY="0" markerWidth="20" markerHeight="20" viewbox="0 0 20 20">
  <rect x="0" y="0" width="20" height="20" stroke="none" fill="red" fill-opacity="0.2"/>
 </marker>
 <marker id="m2" refX="10" refY="10" markerWidth="20" markerHeight="20" viewbox="0 0 20 20">
  <rect x="0" y="0" width="20" height="20" stroke="none" fill="red" fill-opacity="0.2"/>
 </marker>
 <marker id="m3" refX="20" refY="20" markerWidth="20" markerHeight="20" viewbox="0 0 20 20">
  <rect x="0" y="0" width="20" height="20" stroke="none" fill="red" fill-opacity="0.2"/>
 </marker>
 <line x1="10" y1="20" x2="110" y2="20" stroke="black" stroke-width="1" marker-end="url(#m1)"/>
 <line x1="10" y1="60" x2="110" y2="60" stroke="black" stroke-width="1" marker-end="url(#m2)"/>
 <line x1="10" y1="100" x2="110" y2="100" stroke="black" stroke-width="1" marker-end="url(#m3)"/>
</svg>

表示例

（２） markerUnits 属性

markerUnits 属性は、userSpaceOnUse を指定してマーカーのサイズを描画カンバスにおける絶対サイズ（marker 要素の viewbox）にするか、もしくは strokeWidth を指定して先端の太さに対する倍率にするかを指定します。

userSpaceOnUse の場合に、marker 要素に viewbox が記述されていない場合は、規定値の viewbox="0 0 markerWidth markerHeight" が使用されます。

なお、マーカーにする図形の座標は、viewbox の範囲で指定します。

記述例

<svg viewbox="0 0 400 100" width="400" height="100">
 <marker id="m1" refX="15" refY="15" markerWidth="30" markerHeight="30" markerUnits="userSpaceOnUse">
  <polygon points="0,0 15,15 0,30 30,15" stroke="none" fill="red"/>
 </marker>
 <marker id="m2" refX="1.5" refY="1.5" markerWidth="3" markerHeight="3" markerUnits="strokeWidth">
  <polygon points="0,0 1.5,1.5 0,3 3,1.5" stroke="none" fill="red"/>
 </marker>
 <text x="10" y="20" font-size="16" fill="chocolate">userSpaceOnUse</text>
 <line x1="10" y1="35" x2="170" y2="35" stroke="black" stroke-width="5" marker-end="url(#m1)"/>
 <line x1="10" y1="75" x2="170" y2="75" stroke="black" stroke-width="10" marker-end="url(#m1)"/>
 <text x="210" y="20" font-size="16" fill="chocolate">strokeWidth</text>
 <line x1="210" y1="35" x2="370" y2="35" stroke="black" stroke-width="5" marker-end="url(#m2)"/>
 <line x1="210" y1="75" x2="370" y2="75" stroke="black" stroke-width="10" marker-end="url(#m2)"/>
</svg>

左側は線の太さに関係なく矢印の大きさは 30×30 ですが、右側は線の太さの３倍と指定していますので、上は 15×15、下は 30×30 になります。

なお、viewbox は指定していませんので、左側のマーカー（m1）は viewbox="0 0 30 30"、右側のマーカー（m2）は viewbox="0 0 3 3" が使用されます。

表示例

（３） viewbox 属性

マーカーを描く座標の基準を指定します。例えば次の polygon 要素の points 属性で指定する座標やサイズは viewbox で指定された座標内で描かれます。

ただし、実際に描かれるマーカーの大きさは、markerWidth と markerHeight によっても変わります。

記述例

<svg viewbox="0 0 500 200" width="500" height="200">
 <marker id="m1" refX="5" refY="5" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 10 10">
  <polygon points="0,0 5,5 0,10 10,5" stroke="none" fill="red"/>
 </marker>
 <marker id="m2" refX="10" refY="10" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 10 10">
  <polygon points="0,0 10,10 0,20 20,10" stroke="none" fill="red"/>
 </marker>
 <marker id="m3" refX="5" refY="5" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 20 20">
  <polygon points="0,0 5,5 0,10 10,5" stroke="none" fill="red"/>
 </marker>
 <marker id="m4" refX="10" refY="10" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 20 20">
  <polygon points="0,0 10,10 0,20 20,10" stroke="none" fill="red"/>
 </marker>

 <text x="10" y="20" font-size="14" fill="chocolate">viewbox="0 0 10 10"</text>
 <line x1="10" y1="50" x2="170" y2="50" stroke="black" stroke-width="10" marker-end="url(#m1)"/>
 <line x1="10" y1="140" x2="170" y2="140" stroke="black" stroke-width="10" marker-end="url(#m2)"/>
 <text x="250" y="20" font-size="14" fill="chocolate">viewbox="0 0 20 20"</text>
 <line x1="250" y1="50" x2="410" y2="50" stroke="black" stroke-width="10" marker-end="url(#m3)"/>
 <line x1="250" y1="140" x2="410" y2="140" stroke="black" stroke-width="10" marker-end="url(#m4)"/>
</svg>

実際に描かれるマーカーの座標は viewbox に対する比率によって決まります。

例えば、マーカーにする図形の X座標が同じ 10 でも、viewbox の幅が 10 のときは viewbox の右端になりますが、20 のときは viewbox の中央になります。そして、viewbox 自体の大きさも markerUnits が strokeWidth のときには線の太さによって変わります。

この例では、markerUnits が strokeWidth、すべての markerWidth と markerHeight が共に 5 で、線の太さは 10 なので、すべての viewbox が横（5×10）、縦（5×10）の 50 四方の大きさになります。そして、マーカーは viewbox に対する比率で大きさが決まり描かれます。

なお、グレイの線は viewbox で、ピンクは viewbox をはみ出して描かれなかったマーカーです。理解の助けになるように別途描いています。

表示例

svg タグを記述したファイルを img タグで指定して画像ファイルのように表示することができます。

しかし、では viewbox が無視されてしまうようです。

記述例

<svg viewbox="0 0 250 100" width="250" height="100">
 <marker id="m1" refX="5" refY="5" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 10 10">
  <polygon points="0,0 5,5 0,10 10,5" stroke="none" fill="red"/>
 </marker>

 <text x="10" y="20" font-size="14" fill="chocolate">svg タグを直接記述</text>
 <line x1="10" y1="50" x2="170" y2="50" stroke="black" stroke-width="10" marker-end="url(#m1)"/>
</svg>
<img src="arrow.svg" width="250" height="100">

arrow.svg

<svg viewbox="0 0 250 100" width="250" height="100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <marker id="m1" refX="5" refY="5" markerWidth="5" markerHeight="5" markerUnits="strokeWidth" viewbox="0 0 10 10">
  <polygon points="0,0 5,5 0,10 10,5" stroke="none" fill="red"/>
 </marker>

 <text x="10" y="20" font-size="14" fill="chocolate">img タグで埋め込み</text>
 <line x1="10" y1="50" x2="170" y2="50" stroke="black" stroke-width="10" marker-end="url(#m1)"/>
</svg>

表示例

（４） orient 属性

マーカーがどのように回転されるかを指示します。

記述例

<svg viewbox="0 0 400 130" width="400" height="130">
 <marker id="m1" refX="25" refY="32" markerWidth="50" markerHeight="32" markerUnits="userSpaceOnUse" orient="auto">
  <image x="0" y="0" width="50" height="32" xlink:href="car.png"/>
 </marker>
 <marker id="m2" refX="0" refY="35" markerWidth="30" markerHeight="40" markerUnits="userSpaceOnUse">
  <image x="0" y="0" width="30" height="40" xlink:href="flag.png"/>
 </marker>
 <path d="M40,100Q70,20 120,70T220,40" stroke="black" stroke-width="3" fill="none"
                              marker-start="url(#m1)" marker-mid="url(#m1)" marker-end="url(#m1)"/>
 <path d="M240,100Q270,20 320,70T420,40" stroke="black" stroke-width="3" fill="none"
                              marker-start="url(#m2)" marker-mid="url(#m2)" marker-end="url(#m2)"/>
</svg>

左はマーカーを表示する要素の向きに添うようにマーカーを回転させています。右は回転させずに常に垂直に表示しています。

表示例

（５） marker-start、marker-mid、marker-end 属性

記述例

<svg viewbox="0 0 550 150" width="550" height="150">
 <marker id="m1" refX="15" refY="15" markerWidth="30" markerHeight="30" markerUnits="userSpaceOnUse" orient="auto">
  <polygon points="0,0 15,15 0,30 30,15 " stroke="none" fill="red"/>
 </marker>
 <marker id="m21" refX="6" refY="6" markerWidth="12" markerHeight="12" markerUnits="userSpaceOnUse">
  <circle cx="6" cy="6" r="6" stroke="none" fill="blue"/>
 </marker>
 <marker id="m22" refX="3" refY="3" markerWidth="6" markerHeight="6" markerUnits="userSpaceOnUse">
  <circle cx="3" cy="3" r="3" stroke="none" fill="green"/>
 </marker>
 <marker id="m23" refX="4" refY="4" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse">
  <circle cx="4" cy="4" r="4" stroke="none" fill="red"/>
 </marker>
 <path d="M20,80 l80,-50 l80,30 l-30,50 l-70,20" stroke="black" stroke-width="3" fill="none"
                              marker-start="url(#m1)" marker-mid="url(#m1)" marker-end="url(#m1)"/>
 <path d="M220,80 l80,-50 l80,30 l-30,50 l-70,20 z" stroke="black" stroke-width="3" fill="none"
                              marker-start="url(#m1)" marker-mid="url(#m1)" marker-end="url(#m1)"/>
 <polyline points="430,20 430,40 530,40 480,60 480,20" stroke="black" stroke-width="3" fill="none"
                              marker-start="url(#m21)" marker-mid="url(#m22)" marker-end="url(#m23)"/>
 <polygon points="430,100 430,120 530,120 480,140 480,100" stroke="black" stroke-width="3" fill="none"
                              marker-start="url(#m21)" marker-mid="url(#m22)" marker-end="url(#m23)"/>
</svg>

表示例

注意

path を Z で閉じて始点と終点が同じにしたとき、は２つ表示される。

polygon の場合は、すべてのブラウザで始点と終点が共に表示される。

１３．９グループ化、定義

１３．９．１グループ化　(g)

g 要素は図形をグループ化します。複数の図形を論理的にグループ化しグラフィック構造を明確化し、スタイルの設定を容易にします。ただし、位置やサイズについては g 要素にまとめることはできません。

また、g 要素はネストして指定することができ、同じ属性が指定されていた場合はより内側に指定されている属性が優先されます。

記述例

<svg viewbox="0 0 400 100" width="400" height="100">
  <g stroke="blue" stroke-width="3" fill="none">
    <g stroke="green" stroke-dasharray="5 2">
     <line x1="20" y1="20" x2="100" y2="20"/>
     <line x1="20" y1="40" x2="100" y2="40" stroke="red"/>
    </g>
    <line x1="20" y1="60" x2="100" y2="60"/>
  </g>
</svg>

それぞれの図形は、属しているグループの属性を引き継ぎますが、図形自身に指定されていればそれが優先されます。中央の直線はグループで指定された緑ではなく赤で表示されています。

表示例

ただし、opacity のような属性は、それまでの属性値にさらに影響を与えます。

記述例

<svg viewbox="0 0 400 100" width="400" height="100">
  <g stroke="none" fill="blue" opacity="0.4">
   <rect x="20" y="20" width="60" height="60"/>
   <rect x="100" y="20" width="60" height="20"/>
   <rect x="100" y="20" width="60" height="20" opacity="0.6"/>
  </g>
</svg>

右下の矩形は、opacity の属性値が 0.4 から 0.6 に置き換えられるのならば色が濃くなっていなけれなならないはずですが、さらに薄くなっているのがわかります。

表示例

１３．９．２定義　(defs)

defs 要素は各種情報（テンプレートとなる図形やグラデーション等）を定義します。<defs>～</defs> の間に記述しておけば、どのような要素も描画されません。

そのため、marker や pattern 要素などのもともと描画対象ではない要素は defs 要素内に入れておく必要はありませんが、用途や意味合いを含めて defs 要素を使って整理しておいたほうが良いでしょう。

defs 要素

他の要素から参照するための各種情報を定義する。

属性

なし

記述例

<svg viewbox="0 0 400 60" width="400" height="60">
  <defs>
    <path id="d1" d="M50,20 Q80,50 110,30 T180,40"/>
  </defs>
  <text fill="blue" font-size="12">
    <textPath xlink:href="#d1">碧い地球をゆらゆら泳いでく</textPath>
  </text>
</svg>

表示例

注意

では defs 要素は必須です。path 要素などを defs 要素で囲まないと描画されません。

１３．９．３シンボル　(symbol)

symbol 要素を用いると、複数の図形を一括して一つの図形として扱うことができます。viewBox 属性によって独自の座標系を定義し、<symbol>～</symbol> の間にシンボル化したい図形を記述します。symbol 要素とその中の要素はそれだけで描画されることはありません。

symbol 要素

定義された各種情報を利用する。

属性

属性名	属性値	説明	必須
viewBox	空白区切りの4つの整数	シンボルの左上の X 座標と Y 座標、そして幅と高さ（規定値：0 0 最大幅最大高）	×
preserveAspectRatio	拡縮方式（規定値：xMidYMid meet）		×
	none	均等な拡縮をしない。元の画像は、表示領域に合致するように必要なら不均等に拡縮し、すべてを表示領域内に表示する。
	meet	均等に拡縮し元の画像のすべてを表示領域内に表示する
	slice	均等に拡縮し表示領域をはみ出しても表示領域に隙間がないように元の画像を表示する

（１） viewbox 属性

シンボルの描画領域を定義します。

<svg viewbox="0 0 400 100" width="400" height="100">
  <symbol id="s1" viewbox="0 0 20 40" preserveAspectRatio="none">
    <rect x="0" y="0" width="40" height="40" fill="blue"/>
    <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/>
  </symbol>
  <symbol id="s2" viewbox="0 0 40 40" preserveAspectRatio="none">
    <rect x="0" y="0" width="40" height="40" fill="blue"/>
    <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/>
  </symbol>
  <symbol id="s3" viewbox="0 0 40 20" preserveAspectRatio="none">
    <rect x="0" y="0" width="40" height="40" fill="blue"/>
    <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/>
  </symbol>
  <use xlink:href="#s1" x="0" y="60" width="40" height="40"/>
  <use xlink:href="#s2" x="100" y="60" width="40" height="40"/>
  <use xlink:href="#s3" x="280" y="0" width="40" height="40"/>
</svg>

背景色がグレーの部分が symbol 要素の定義部分のイメージです。その中のグレーの枠の中の色の濃い部分が viewbox です。

そして、そのシンボルを使用した use 要素が width と height のサイズ（すべて 40 と 40）に拡縮され表示されます。

上の例で表示されるのは、下2つと一番右の1つです。あとは理解の助けになるように別途描いています。

表示例

（２） preserveAspectRatio 属性

拡縮には３つの方法があり、これらと画像の拡縮の基準を表す xMinYMin～xMaxYMax とを組み合わせることで拡縮処理を定義します。

none	縦横比は維持されず、元の画像が表示領域いっぱいに表示される
meet	縦横比は維持されつつ、元の画像が表示領域にすべて表示される
slice	縦横比は維持されつつ、縦か横を表示領域の最大限に広げる（一部ははみ出ることになる。はみ出た部分は、表示されない）

記述例

<svg viewbox="0 0 400 150" width="400" height="150">
  <symbol id="s1" viewbox="0 0 40 40" preserveAspectRatio="none">
    <rect x="0" y="0" width="40" height="40" fill="blue"/>
    <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/>
  </symbol>
  <symbol id="s2" viewbox="0 0 40 40" preserveAspectRatio="xMidYMid meet">
    <rect x="0" y="0" width="40" height="40" fill="blue"/>
    <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/>
  </symbol>
  <symbol id="s3" viewbox="0 0 40 40" preserveAspectRatio="xMidYMid slice">
    <rect x="0" y="0" width="40" height="40" fill="blue"/>
    <circle cx="20" cy="20" r="20" stroke="none" fill="yellow"/>
  </symbol>
  <use xlink:href="#s1" x="100" y="0" width="20" height="40"/>
  <use xlink:href="#s1" x="200" y="0" width="40" height="40"/>
  <use xlink:href="#s1" x="300" y="0" width="40" height="20"/>
  <use xlink:href="#s2" x="100" y="50" width="20" height="40"/>
  <use xlink:href="#s2" x="200" y="50" width="40" height="40"/>
  <use xlink:href="#s2" x="300" y="50" width="40" height="20"/>
  <use xlink:href="#s3" x="100" y="100" width="20" height="40"/>
  <use xlink:href="#s3" x="200" y="100" width="40" height="40"/>
  <use xlink:href="#s3" x="300" y="100" width="40" height="20"/>
</svg>

グレイの線は、use 要素で指定された width と height で決定する矩形です。理解の助けになるように別途描いています。

表示例

１３．９．４利用　(use)

defs 要素はある要素の共通の属性を定義する場合にも使用できます。そして、それを使用して図形を描くのに use 要素を使用します。

定義された情報を参照するには、利用する defs 要素の ID を xlink:href 属性に記述します。

use 要素

定義された各種情報を利用する。

属性

属性名	属性値	説明	必須
xlink:href	ID	利用する定義の ID	○

記述例

<svg viewbox="0 0 400 120" width="400" height="120">
  <defs>
    <circle id="d1" r="40" stroke="blue" stroke-width="3"/>
  </defs>
  <use xlink:href="#d1" x="60" y="30" stroke="green"/>
  <use xlink:href="#d1" x="100" y="50" stroke="none" fill="green"/>
  <use xlink:href="#d1" x="130" y="70" r="50" stroke-width="1" stroke-dasharray="5 1" fill="none"/>
</svg>

defs 要素内で指定された属性は基本的に変更できないようです。

表示例

よく使用する図形を定義しておいて再利用することもできます。

記述例

<svg viewbox="0 0 500 100" width="500" height="100">
  <defs>
    <polygon id="triangle" d="50,15 10,85 90,85"/>
    <path id="moon" d="M 20,20 A 35,35 0 1,1 20,80 A 20,20 0 1,0 20,20 Z"/>
    <polygon id="pentagon" points="40,0 2,28 16,72 64,72 78,28"/>
    <polygon id="hexagon" points="40,0 5,20 5,60 40,80 75,60 75,20"/>
    <polygon id="star" points="40,0 16,72 78,28 2,28 64,72"/>
  </defs>
  <use xlink:href="#triangle" x="0" y="0" fill="green"/>
  <use xlink:href="#moon" x="100" y="0" fill="yellow"/>
  <use xlink:href="#pentagon" x="200" y="0" fill="pink"/>
  <use xlink:href="#hexagon" x="300" y="0" fill="skyblue"/>
  <use xlink:href="#star" x="400" y="0" fill="orange"/>
</svg>

表示例

１３．１０クリッピングとマスキング

クリッピングはある要素のうち、他の場所で定義された一部分を取り除くことを指します。この場合は半透明効果をかけることはできず、完全に表示するか全く表示しないかの扱いになります。

マスキングは半透明効果やマスクの濃淡値を考慮することで、ソフトエッジ効果をかけることができます。

１３．１０．１クリッピング　(clipPath)

クリッピングを行う際には、クリッピングパスとクリッピング領域という２つの概念が重要となります。クリッピングパスは、要素を切り取る形を現すパス（基本的なシェイプや複雑な多角形）で、クリッピング領域を区切り取るものです。clipPath 要素で定義します。クリッピング領域は、クリッピングパス内の範囲をすべて含む領域のことです。

基本的な図形である rect や circle、画像を表示する image 要素などに clip-path 属性でクリッピングパスを指定することでクリッピングを実現します。

ようするにクリッピングパスとクリッピング領域とが重なる部分のみが表示されます。

clipPath 要素

clipPath 要素で囲い定義した形で、他の場所で定義された一部分を取り除く。

属性

なし

左側は青色の矩形を星型でクリッピングしています。中央は画像を同じ星型でクリッピングしています。右側はグラデーションされた矩形を CLIP という文字列でクリッピングしています。

記述例

<svg viewbox="0 0 500 100" width="500" height="100">
 <!-- クリッピングパス -->
 <clipPath id="clip1">
  <polygon points="40,0 16,72 78,28 2,28 64,72"/>
 </clipPath>
 <clipPath id="clip2">
  <text font-weight="bold" font-size="72pt" textLength="180" dominant-baseline="text-before-edge">CLIP</text>
 </clipPath>
 <!-- グラデーション -->
 <defs>
  <linearGradient id="gr" gradientUnits="objectBoundingBox">
   <stop offset="0" stop-color="blue"/>
   <stop offset="1" stop-color="yellow"/>
  </linearGradient>
 </defs>
 <!-- クリッピング領域 -->
 <rect width="100" height="72" stroke="none" fill="blue" clip-path="url(#clip1)"/>
 <image width="74" height="74" xlink:href="bear.png" clip-path="url(#clip1)" transform="translate(100,0)"/>
 <rect width="180" height="100" stroke="none" fill="url(#gr)" clip-path="url(#clip2)" transform="translate(200,0)"/>
</svg>

表示例

アニメーションでクリッピングすることもできます。アニメーションについては「１３．１２アニメーション」を参照してください。

記述例

<svg viewbox="0 0 100 100" width="100" height="100">
 <!-- クリッピングパス -->
 <clipPath id="clip3">
  <circle cx="46" cy="25">
   <animate attributeType="XML" attributeName="r" begin="0" dur="5" from="0" to="50" repeatCount="indefinite"/>
  </circle>
 </clipPath>
 <!-- クリッピング領域 -->
 <img xlink:href="bear.png" clip-path="url(#clip3);"/>
</svg>

表示例

１３．１０．２マスク　(mask)

マスキングでもクリッピングと同じように、マスキングパスとマスキング領域という２つの概念が重要となります。

マスキングパスは、要素を切り取る形を現すパス（基本的なシェイプや複雑な多角形）で、マスキング領域を区切り取るものです。mask 要素で定義します。

マスキング領域は、マスキングパス内の範囲をすべて含む領域のことです。基本的な図形である rect や circle、画像を表示する image 要素などに mask 属性でマスキングパスを指定することでマスキングを実現します。

ようするにマスキングパスとマスキング領域とが重なる部分のみが表示されます。ただし、マスキングパスの色や透明度によって濃淡の差をつけることができます。

mask 要素

mask 要素で囲い定義した形で、他の場所で定義された一部分を取り除く。

属性

なし

上段は星型のマスキングパスの色を白から黒に近い灰色（黒にすると表示されなくなる）まで変えてマスキングしています。

下段は星型のマスキングパスの不透明度（opacity）を 1 から 0.1（0 にすると表示されなくなる）まで変えてマスキングしています。

マスキングの、色チャンネルとアルファチャンネル（透明度）の値から計算されます。詳しい計算方法は省略しますが、輝度が高いほうがよりマスク領域が表示されます。

記述例

<svg viewbox="0 0 700 220" width="700" height="220">
 <!-- マスキングパス -->
 <mask id="mask1">
  <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#FFFFFF"/>
 </mask>
 <mask id="mask2">
  <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#888888"/>
 </mask>
 <mask id="mask3">
  <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#111111"/>
 </mask>
 <mask id="mask4">
  <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#FFFFFF" opacity="1"/>
 </mask>
 <mask id="mask5">
  <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#FFFFFF" opacity="0.5"/>
 </mask>
 <mask id="mask6">
  <polygon points="40,0 16,72 78,28 2,28 64,72" fill="#FFFFFF" opacity="0.1"/>
 </mask>
 <!-- マスキング領域 -->
 <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask1)"/>
 <image width="74" height="74" xlink:href="bear.png" mask="url(#mask1)" transform="translate(100,0)"/>
 <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask2)" transform="translate(200,0)"/>
 <image width="74" height="74" xlink:href="bear.png" mask="url(#mask2)" transform="translate(300,0)"/>
 <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask3)" transform="translate(400,0)"/>
 <image width="74" height="74" xlink:href="bear.png" mask="url(#mask3)" transform="translate(500,0)"/>
 
 <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask4)" transform="translate(0,100)"/>
 <image width="74" height="74" xlink:href="bear.png" mask="url(#mask4)" transform="translate(100,100)"/>
 <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask5)" transform="translate(200,100)"/>
 <image width="74" height="74" xlink:href="bear.png" mask="url(#mask5)" transform="translate(300,100)"/>
 <rect width="78" height="72" stroke="none" fill="blue" mask="url(#mask6)" transform="translate(400,100)"/>
 <image width="74" height="74" xlink:href="bear.png" mask="url(#mask6)" transform="translate(500,100)"/>
</svg>

表示例

アニメーションでマスクすることもできます。アニメーションについては「１３．１２アニメーション」を参照してください。

記述例

<svg viewbox="0 0 100 100" width="100" height="100">
 <!-- マスキングパス -->
 <mask id="mask7">
  <circle cx="46" cy="25" fill="#FFFFFF">
   <animate attributeType="XML" attributeName="r" begin="0" dur="5" from="0" to="50" repeatCount="indefinite"/>
   <animate attributeType="CSS" attributeName="opacity" begin="0" dur="5" from="0" to="1" repeatCount="indefinite"/>
  </circle>
 </mask>
 <!-- マスキング領域 -->
 <img xlink:href="bear.png" mask="url(#mask7);"/>
</svg>

表示例

１３．１１フィルター

CSS にもフィルターがありますが、それは SVG が持つフィルタ効果の一部を最適化したものです。

CSS に比べ、SVG にはより多くのフィルタ効果があり、SVG フィルタの方が遥かに強力で複雑な効果を生み出せます。

一般に画像はその構成する画素毎にrgb値と不透明度（alpha）値とを定めますが、フィルターはこの色に関わる4つの値を画素毎に編集するだけです。

ただし、フィルターによる画像効果は暗黙的なラスタライズを引き起こし、本質的に処理が重いため、掛け過ぎないようにすべきです。また、ブラウザごとの実装状況に大きな隔たりが存在します。基本的な機能は概ね問題なくても、複雑な効果を得ようとした際に、環境によって見た目や動作が異なるばかりか一切動かないといったことも有り得ます。従って、できる限り構造を簡潔にしたり充分な検証を行う必要があります。

filter 要素の子要素として、複数の原始フィルターを記述します。原始フィルターは基本的な画像操作で、これを組み合わせることでより複雑なフィルター操作を定義します。原始フィルターは上から順に実行され、原始フィルターごとに記述された in 属性に設定された画像にフィルターを掛け、result 属性に設定した名称でその結果を保持します。つまり、前のフィルターの結果を次のフィルターの in 属性に指定することによって繰り返し画像効果を重ねることができるわけです。そして、最後に実行されたフィルターの結果が描画されることになります。

注意

Internet Explorer や Edge では image 要素の width と height 属性は必須のようです。指定しないと描画されません。

記述例

<svg viewbox="0 0 240 120" width="240" height="120">
 <defs>
  <filter id="filter">
   <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <!-- 図形の影を取得しぼかす。結果を blur として保持する -->
   <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>           <!-- ぼかした結果をずらして、offsetBlurとして保持する -->
   <feMerge>                <!-- offsetBlur の上に元のグラフィックを重ねる -->
     <feMergeNode in="offsetBlur"/>       <!-- ずらした影 -->
     <feMergeNode in="SourceGraphic"/>    <!-- 元の図形 -->
   </feMerge>
  </filter>
 </defs>

 <image x="20" y="0" width="74" height="74" href="bear.png" filter="url(#filter)"/>    <!-- 指定あり -->
 <image x="20" y="0" href="bear.png" filter="url(#filter)"/>　　　　　　　　　　　　     <!-- 指定なし（IE、Edge では表示されない）-->
</svg>

表示例

上の例は次のように原始フィルターが適用されて画像に影が付けられます。

１３．１１．１フィルター　(filter)

フィルタ効果は filter 要素により定義されます。

filter 要素は一連の 原始フィルター を子要素として持ちます。それぞれの原始フィルタは、一つ以上の入力から単機能の基礎的なグラフィックス演算（ぼかしや照明効果など）を行い，グラフィック結果を生成します。

元のソースグラフィックや原始フィルタからの生成結果は、他の原始フィルタの入力に利用できます。

filter 要素

元の画像の表示範囲と HTML での表示領域の幅と高さを定義する。

SVG の場合は、左上隅が原点 (0, 0) になる。水平方向は右へ行くにつれて、垂直方向は下に行くほどそれぞれ値が増大する。

属性

属性名	属性値	説明	必須
x	整数	フィルター領域の左上 X座標（規定値：-10%）	×
y	整数	フィルター領域の左上 Y座標（規定値：-10%）	×
width	ピクセル数	フィルター領域の幅（規定値：120%）	×
height	ピクセル数	フィルター領域の高さ（規定値：120%）	×
filterUnits	x、y、width、height に対する座標系		×
	userSpaceOnUse	現在の利用座標系における値
	objectBoundingBox	要素内部の相対比率（規定値）
primitiveUnits	原始フィルターの用いる座標系		×
	userSpaceOnUse	現在の利用座標系における値（規定値）
	objectBoundingBox	要素内部の相対比率
filterRes	X方向画素数 Y方向画素数	中間画像の幅と高さを画素数で指示する	×
href		SVG 文書片内の別の filter 要素への参照	×

フィルター定義を参照するには、SVG では filter 属性でフィルター定義の ID を指定します。また、一般の HTML 要素からはスタイルシートで指定します。

記述例

<!-- フィルター定義 -->
<svg viewbox="0 0 0 0" width="0" height="0">
 <defs>
  <filter id="filter">
   <feGaussianBlur stdDeviation="2"/>    <!-- 原始フィルター（ぼかし） -->
  </filter>
 </defs>
</svg>

<img src="bear.png" style="filter:url(#filter)">    <!-- img 要素からの参照 -->

<svg viewbox="0 0 74 74" width="74" height="74">
 <image x="0" y="0" width="74" height="74" href="bear.png" filter="url(#filter)"/> <!-- SVG image 要素からの参照 -->
</svg>

表示例

img 要素

SVG image 要素

○ filterUnits 属性

userSpaceOnUse が objectBoundingBox のときは、x、y、width、height は 0.3 や 20% のような元の画像に対する比率を指定します。

userSpaceOnUse が userSpaceOnUse のときは、x、y、width、height は単位をつけない数値で長さを指定します。

記述例

<svg viewbox="0 0 140 100" width="140" height="100">
 <defs>
  <filter id="filter1" filterUnits="objectBoundingBox" x="0.3" y="20%" width="60%" height="0.5">
   <feGaussianBlur stdDeviation="1"/>    <!-- 原始フィルター（ぼかし） -->
  </filter>
 </defs>
 <image width="74" height="74" href="bear.png" filter="url(#filter1)"/>
</svg>

<svg viewbox="0 0 120 100" width="120" height="100">
 <defs>
  <filter id="filter2" filterUnits="userSpaceOnUse" x="10" y="20" width="60" height="40">
   <feGaussianBlur stdDeviation="1"/>    <!-- 原始フィルター（ぼかし） -->
  </filter>
 </defs>
 <image width="74" height="74" href="bear.png" filter="url(#filter2)"/>
</svg>

薄い画像や矩形、矢印などは理解の助けになるように別途表示しています。

表示例

○ primitiveUnits 属性

入力画像をその画像空間における現在の位置から指定された移動量だけずらした矩形を指定します。

その矩形と filler 要素の x、y、width、height で定まる矩形とが重なる部分がフィルタリングされます。

userSpaceOnUse が objectBoundingBox のときは、x、y、width、height は 0.3 や 20% のような元の画像に対する比率を指定します。ただし、feGaussianBlur など、機能しない原始フィルターもあるようです。

userSpaceOnUse が userSpaceOnUse のときは、x、y、width、height は単位をつけない数値で長さを指定します。

記述例

<!-- primitiveUnits なし -->
<svg viewbox="0 0 140 100" width="140" height="100">
 <defs>
  <filter id="filter" filterUnits="objectBoundingBox" x="10" y="20" width="40" height="30">
   <feGaussianBlur stdDeviation="1"/>    <!-- 原始フィルター（ぼかし） -->
  </filter>
 </defs>
 <image href="bear.png" width="74" height="74" filter="url(#filter)"/>
</svg>

<!-- primitiveUnits="objectBoundingBox" -->
<svg viewbox="0 0 140 100" width="140" height="100">
 <defs>
  <filter id="filter1" filterUnits="userSpaceOnUse" x="10" y="20" width="40" height="30" filterUnits="objectBoundingBox">
   <feGaussianBlur stdDeviation="0"/>    <!-- 原始フィルター（ぼかし、0 以外を指定するとフィルタリングされない） -->
   <feOffset x="30%" y="0.4"/>           <!-- 原始フィルター（移動） -->
  </filter>
 </defs>
 <image href="bear.png" width="74" height="74" filter="url(#filter1)"/>
</svg>


<!-- primitiveUnits="userSpaceOnUse" -->
<svg viewbox="0 0 140 100" width="140" height="100">
 <defs>
  <filter id="filter2" filterUnits="userSpaceOnUse" x="10" y="20" width="40" height="30" filterUnits="userSpaceOnUse">
   <feGaussianBlur stdDeviation="1"/>    <!-- 原始フィルター（ぼかし） -->
   <feOffset x="30" y="10"/>             <!-- 原始フィルター（移動） -->
  </filter>
 </defs>
 <image href="bear.png" width="74" height="74" filter="url(#filter2)"/>
</svg>

userSpaceOnUse が objectBoundingBox のときは、feGaussianBlur が機能しないようなので、0 を指定しています。

薄い画像や矩形、矢印などは理解の助けになるように別途表示しています。

表示例

○ filterRes 属性

中間画像の幅と高さを画素数で指示します。

小さ過ぎる値は画質の低下をもたらし、大き過ぎる値は処理速度の低下と多量のメモリ消費をもたらします。

ただし、多くのブラウザでは機能しないようです。

記述例

<!-- filterRes なし -->
<svg viewbox="0 0 100 100" width="100" height="100">
 <defs>
  <filter id="filter1" filterUnits="userSpaceOnUse" x="10" y="20" width="40" height="30">
   <feGaussianBlur stdDeviation="1"/>    <!-- 原始フィルター（ぼかし） -->
  </filter>
 </defs>
 <image href="bear.png" width="74" height="74" filter="url(#filter1)"/>
</svg>

<!-- filterRes="20 15" -->
<svg viewbox="0 0 100 100" width="100" height="100">
 <defs>
  <filter id="filter2" filterUnits="userSpaceOnUse" x="10" y="20" width="40" height="30" filterRes="1 1">
   <feGaussianBlur stdDeviation="1"/>    <!-- 原始フィルター（ぼかし） -->
  </filter>
 </defs>
 <image href="bear.png" width="74" height="74" filter="url(#filter2)"/>
</svg>

表示例

○ href 属性

href 属性を指定した要素に定義されていない属性が href 属性で指定された filter 要素で定義されているときは、この要素に継承されます。

また、古いブラウザでは href ではなく xlink:href でないと機能しないかもしれません。

記述例

<svg viewbox="0 0 300 120" width="300" height="120">
 <defs>
  <filter id="filterA" filterUnits="userSpaceOnUse" x="0" y="20" width="220" height="100"/>
  <filter id="filterB" href="#filterA">
   <feGaussianBlur stdDeviation="1"/>    <!-- 原始フィルター（ぼかし） -->
  </filter>
  <filter id="filterC" xlink:href="#filterA">
   <feGaussianBlur stdDeviation="1"/>    <!-- 原始フィルター（ぼかし） -->
  </filter>
 </defs>
 <image href="bear.png" x="0" y="20" width="74" height="74" filter="url(#filterB)"/>    <!-- filterA を継承した filterB を参照 -->
 <image href="bear.png" x="100" y="20" width="74" height="74" filter="url(#filterC)"/>  <!-- filterA を継承した filterC を参照 -->
</svg>

表示例

１３．１１．２光源

原始フィルターには光源を必要とするものがあります。グラフィックを立体化し，影もしくは反射光を得るために用いられます。

光源を表す要素として次の3つが定義されており、原始フィルターの子要素として配置します。

（１）平行光源（feDistantLight）

太陽光のような並行な光線になる遠い光源を定義します。

feDistantLight 要素

太陽光のような並行な光線になる遠い光源を定義する。

属性

属性名	属性値	説明	必須
azimuth	整数	光源方向（XY 平面における X 軸からの角度）（規定値：0）	×
elevation	整数	光源方向（XY 平面から Z 軸への角度）（規定値：0）	×

太陽からの光のような並行な光線になる遠い光源からの光線による影を表示します。

記述例

<svg viewbox="0 0 800 220" width="800" height="220">
 <defs>
  <filter id="filter000_30">
   <feDiffuseLighting surfaceScale="5"/>    <!-- 原始フィルター（照明効果） -->
     <feDistantLight azimuth="0" elevation="30"/>    <!-- 原始フィルター（平行光源） -->
   </feDiffuseLighting>
  </filter>
  <filter id="filter030_30">
   <feDiffuseLighting surfaceScale="5"/>    <!-- 原始フィルター（照明効果） -->
     <feDistantLight azimuth="30" elevation="30"/>    <!-- 原始フィルター（平行光源） -->
   </feDiffuseLighting>
  </filter>

  <!-- 途中略 -->

  <filter id="filter180_60">
   <feDiffuseLighting surfaceScale="5"/>    <!-- 原始フィルター（照明効果） -->
     <feDistantLight azimuth="180" elevation="60"/>    <!-- 原始フィルター（平行光源） -->
   </feDiffuseLighting>
  </filter>
 </defs>

 <image href="bear.png" x="20" y="20" width="50" height="74" filter="url(#filter000_30)"/>
 <image href="bear.png" x="90" y="20" width="50" height="74" filter="url(#filter030_30)"/>

 <!-- 途中略 -->

 <image href="bear.png" x="440" y="120" width="50" height="74" filter="url(#filter180_60)"/>
</svg>

矢印などは理解の助けになるように別途表示しています。

表示例

（２）平行光源（fePointLight）

電灯のような放射状の光線になる近い光源を定義します。

fePointLight 要素

電灯のような放射状の光線になる近い光源を定義する。

属性

属性名	属性値	説明	必須
x	整数	光源の X 座標（規定値：0）	×
y	整数	光源の Y 座標（規定値：0）	×
z	整数	光源の Z 座標（規定値：0）	×

記述例

<svg viewbox="0 0 750 320" width="750" height="320">
 <defs>
  <filter id="filter10_10_20">
   <feDiffuseLighting surfaceScale="5"/>    <!-- 原始フィルター（照明効果） -->
     <fePointLight x="10" y="10" z="20"/>    <!-- 原始フィルター（点光源） -->
   </feDiffuseLighting>
  </filter>
  <filter id="filter47_10_20">
   <feDiffuseLighting surfaceScale="5"/>    <!-- 原始フィルター（照明効果） -->
     <fePointLight x="130" y="10" z="20"/>    <!-- 原始フィルター（点光源） -->
   </feDiffuseLighting>
  </filter>

  <!-- 途中略 -->

  <filter id="filter94_94_50">
   <feDiffuseLighting surfaceScale="5"/>    <!-- 原始フィルター（照明効果） -->
     <fePointLight x="570" y="250" z="50"/>    <!-- 原始フィルター（点光源） -->
   </feDiffuseLighting>
  </filter>
 </defs>

 <image href="bear.png" x="20" y="20" width="60" height="60" filter="url(#filter10_10_20)"/>
 <image href="bear.png" x="100" y="20" width="60" height="60" filter="url(#filter47_10_20)"/>

 <!-- 途中略 -->

 <image href="bear.png" x="510" y="180" width="60" height="60" filter="url(#filter94_94_50)"/>
</svg>

光源を表す円などは理解の助けになるように別途表示しています。

表示例

（３）スポットライト光源（feSpotLight）

光源を与えて任意方向に照明効果を与える光源を定義します。照明の当たる角度と光の広がりを設定します。

feSpotLight 要素

電灯のような放射状の光線になる近い光源を定義する。

属性

属性名	属性値	説明	必須
x	整数	光源の X 座標（規定値：0）	×
y	整数	光源の Y 座標（規定値：0）	×
z	整数	光源の Z 座標（規定値：0）	×
pointsAtX	整数	光が射す地点の X 座標（規定値：0）	×
pointsAtY	整数	光が射す地点の Y 座標（規定値：0）	×
pointsAtZ	整数	光が射す地点の Z 座標（規定値：0）	×
specularExponent	整数	光の収束度合い（値を大きくするに従い明るい部分が狭まる）（規定値：1）	×
limitingConeAngle	整数	光源が投射される範囲を限定する角度	×

記述例

<svg viewbox="0 0 800 320" width="800" height="320">
 <defs>
  <!-- pointsAtX、pointsAtY -->
  <filter id="filter30_30_0">
   <feDiffuseLighting surfaceScale="5"/>    <!-- 原始フィルター（照明効果） -->
     <feSpotLight x="110" y="10" z="50" pointsAtX="30" pointsAtY="30" pointsAtZ="0"
                         limitingConeAngle="20" specularExponent="1" />    <!-- 原始フィルター（スポットライト） -->
   </feDiffuseLighting>
  </filter>

  <!-- 途中略 -->

  <!-- specularExponent -->
  <filter id="filter20_1">
   <feDiffuseLighting surfaceScale="5"/>    <!-- 原始フィルター（照明効果） -->
     <feSpotLight x="110" y="110" z="50" pointsAtX="50" pointsAtY="150" pointsAtZ="0"
                         limitingConeAngle="20" specularExponent="1" />    <!-- 原始フィルター（スポットライト） -->
   </feDiffuseLighting>
  </filter>

  <!-- 途中略 -->

  <!-- limitingConeAngle -->
  <filter id="filter10_30">
   <feDiffuseLighting surfaceScale="5"/>    <!-- 原始フィルター（照明効果） -->
     <feSpotLight x="110" y="210" z="50" pointsAtX="50" pointsAtY="250" pointsAtZ="0"
                         limitingConeAngle="10" specularExponent="30" />    <!-- 原始フィルター（スポットライト） -->
   </feDiffuseLighting>
  </filter>

  <!-- 途中略 -->
   
 </defs>

 <image href="bear.png" x="20" y="20" width="74" height="74" filter="url(#filter30_30_0)"/>
 <image href="bear.png" x="120" y="20" width="74" height="74" filter="url(#filter50_50_0)"/>
 <image href="bear.png" x="220" y="20" width="74" height="74" filter="url(#filter80_80_0)"/>

 <image href="bear.png" x="20" y="120" width="74" height="74" filter="url(#filter20_1)"/>
 <image href="bear.png" x="120" y="120" width="74" height="74" filter="url(#filter20_50)"/>
 <image href="bear.png" x="220" y="120" width="74" height="74" filter="url(#filter20_100)"/>

 <image href="bear.png" x="20" y="220" width="74" height="74" filter="url(#filter10_30)"/>
 <image href="bear.png" x="120" y="220" width="74" height="74" filter="url(#filter15_30)"/>
 <image href="bear.png" x="220" y="220" width="74" height="74" filter="url(#filter20_30)"/>
</svg>

光源を表す円や矢印などは理解の助けになるように別途表示しています。

表示例

１３．１１．３原始フィルターの共通属性

原始フィルターには様々な種類がありますが、次の属性は共通して定義されています。

属性名	属性値	説明	必須
x	長さまたは比率	フィルター領域の左上 X座標（注１）（規定値：0%）	×
y	長さまたは比率	フィルター領域の左上 Y座標標（注１）（規定値：0%）	×
width	長さまたは比率	フィルター領域の幅（注１）（規定値：100%）	×
height	長さまたは比率	フィルター領域の高さ（注１）（規定値：100%）	×
in	フィルターの入力画像（規定値：直前の処理結果）		×
	SourceGraphic	元画像情報
	SourceAlpha	影（元画像の不透明度情報を黒の不透明度で取得）
	ID名	ID名で指定された原始フィルターの結果
color-interpolation-filters	画像合成の際の色空間		×
	auto	自動
	sRGB	色補間がガンマ補正されたRGB色空間で行われる
	linearRGB	色補間がガンマ補正されていないRGB色空間で行われる（規定値）
result	名前	フィルターを施した結果	×

（注１） <filter> と <mask> 要素では、x と y は -10%、width と height は 120% となります。

（１）フィルターの範囲（x、y、width、height）

フィルターを施す範囲を指定します。

記述例

<svg viewbox="0 0 120 100" width="120" height="100">
 <defs>
  <filter id="filter">
   <feImage href="bear.png" x="30" y="20" width="74" height="74"/>
   <feBlend in2="SourceGraphic" mode="difference">
  </filter>
 </defs>
 <circle filter="url(#filter)" cx="50" cy="60" r="25" fill="yellow" stroke="none">
</svg>

表示例

（２）フィルターの入力画像（in）

フィルターの入力画像を指定します。

記述例

<svg viewbox="0 0 800 120" width="800" height="120">
 <defs>
  <filter id="filter1">
   <feGaussianBlur in="SourceGraphic" stdDeviation="0"/>
  </filter>
  <filter id="filter2">
   <feGaussianBlur in="SourceAlpha" stdDeviation="0"/>
  </filter>
 </defs>
 <image href="bear.png" x="20" y="20" width="74" height="74" filter="url(#filter1)"/>
 <image href="bear.png" x="120" y="20" width="74" height="74" filter="url(#filter2)"/>
</svg>

表示例

（３）画像合成の際の色空間（color-interpolation-filters）

画像合成の際の色空間を与えます。

RGB の値が物理的な実際の色とどう対応するかの規格は色々ありますが、Web でやり取りする画像データの殆どは sRGB 規格に合わせたものです。そして、sRGB 規格は多くの場合物理的な輝度と正比例ではなくガンマ補正がかかっています。これは、昔のブラウン管テレビが陰極管の物理特性により入力信号の電圧に対して出力する輝度が比例しなかったので、信号側で補正する事にしたからだそうです。また、人の目は低輝度の変化に敏感、高輝度には鈍感なため、それを補正すると言う意味もあったそうです。

それに対して、ガンマ補正をしていないものを linearRGB をいいます。物理的な輝度に対して素直に比例する値を使うのが linearRGB です。

原始フィルター要素 feDisplacementMap において、color-interpolation-filters 属性を指定していますが、それが機能しているかどうかはよくわかりません。ただし、属性によってズレる量は異なっています。

記述例

<svg viewbox="0 0 100 100" width="100" height="100">
 <defs>
  <filter id="filter1" filterUnits="userSpaceOnUse" x="0" y="0" width="74" height="74">
   <feFlood flood-color="#D00" x="10" y="5" width="45" height="50" result="img1"/>
   <feDisplacementMap in="SourceGraphic" in2="img1" xChannelSelector="R" yChannelSelector="A" scale="40"
            color-interpolation-filters="sRGB" x="0" y="0" width="74" height="74"/>
  </filter>
  <filter id="filter2" filterUnits="userSpaceOnUse" x="0" y="0" width="74" height="74">
   <feFlood flood-color="#D00" x="10" y="5" width="45" height="50" result="img2"/>
   <feDisplacementMap in="SourceGraphic" in2="img2" xChannelSelector="R" yChannelSelector="A" scale="40"
            color-interpolation-filters="linearRGB" x="0" y="0" width="74" height="74"/>
  </filter>
 </defs>
 <image href="bear.png" filter="url(#filter1)" width="74" height="74"/>    <!-- color-interpolation-filters = sRGB -->
 <image href="bear.png" filter="url(#filter2)" width="74" height="74"/>    <!-- color-interpolation-filters = linearRGB -->
</svg>

表示例

sRGB	linearRGB

（４）フィルターを施した結果（result）

原始フィルターでフィルターを施した結果を result 属性に設定した名称で保持します。この名称を他の原始フィルターの in に設定することで新たな画像効果を生成することができます。

なお、result 属性を記述しなくても次の原始フィルターの入力になります（その場合は in 属性も必要ありません）。

記述例

<svg viewbox="0 0 74 74" width="74" height="74">
 <defs>
  <filter id="filter">
  <feColorMatrix result="gray"/>   <!-- グレイスケール -->
  <feGaussianBlur stdDeviation="1" result="blur"/>    <!-- ぼかし -->
  <feConvolveMatrix in="gray"/>    <!-- 輪郭抽出（result を記述しなくても次の原始フィルターの入力になる） -->
  <feColorMatrix result="edge"/>   <!-- 輪郭を黒の不透明度に変換 -->
  <feFlood flood-color="lightgrey" result="bg"/>          <!-- 背景色 -->
  <feMerge>     <!-- 背景色→ぼかし→輪郭の順に重ねる -->
    <feMergeNode in="bg"/>
    <feMergeNode in="blur"/>
    <feMergeNode in="edge"/>
  </feMerge>
  <feColorMatrix type="saturate" values="0" result="noise"/>             <!-- ノイズを生成 -->
  </filter>
 </defs>
 <image href="bear.png" filter="url(#filter)" width="74" height="74"/>
</svg>

表示例

１３．１１．４基本フィルター

原始フィルター要素の中でも比較的単純に用いることができる基本フィルターの種類を示します。ただし、ブラウザにより対応状況や効果の程度等が異なることもあるので、見た目の確認が必要です。

（１）画像のブレンド（feBlend）

画像を合成します。

feBlend 要素

画像を合成する。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
in2	入力画像	合成したい画像（規定値：直前の処理結果）	×
mode	合成法		×
	normal	（通常）　下の色にかかわらず上の色になる（規定値）
	multiply	（乗算）　下の色と上の色を掛け合わせた結果になる
	screen	（スクリーン合成）　色を反転して乗算を行い、さらに色を反転した結果になる
	overlay	（オーバーレイ合成）　下の色が暗ければ multiply、下の色が明るければ screen の結果になる
	darken	（比較暗）　色成分ごとに最も暗い値が最終的な結果になる
	lighten	（比較明）　色成分ごとに最も明るい値が最終的な結果になる
	color-dodge	（覆い焼き）　下の色を、反転した上の色で除算した結果になる
	color-burn	（焼きこみ）　反転した下の色を上の色で除算して、さらに反転した結果になる
	hard-light	（ハードライト）　上の色が暗い色であれば multiply 、明るい色であれば screen の結果になる
	soft-light	（ソフトライト）　最終的な色は hard-light に似ているが、よりソフトになる
	difference	（差の絶対値）　2つの色のうち明るい色から、暗い色を減算した結果が最終的な結果になる
	exclusion	（除外）　最終的な色は difference に似ているが、コントラストが低くなる
	hue	（色相）　最終的な色は上の色の色調を持つが、彩度および明度は下の色の値を使用する
	saturation	（彩度）　最終的な色は上の色の彩度を持つが、色調および明度は下の色の値を使用する
	color	（カラー）　最終的な色は上の色の色調および彩度を持つが、明度は下の色の値を使用する
	luminosity	（輝度）　最終的な色は上の色の明度を持つが、色調および彩度は下の色の値を使用する

mode の名前は別途表示しています。

記述例

<svg viewbox="0 0 800 200" width="800" height="200">
 <defs>
  <filter id="filter1">
   <feImage href="bear.png" x="10" y="10" width="74" height="74"/>
   <feBlend in2="SourceGraphic" mode="normal"/>
  </filter>
  <filter id="filter2">
   <feImage href="bear.png" x="110" y="10" width="74" height="74"/>
   <feBlend in2="SourceGraphic" mode="multiply"/>
  </filter>
  
  <!-- 途中略 -->
  
 </defs>
 <circle cx="30" cy="30" r="30" fill="darkorange" filter="url(#filter1)"/></circle>
 <circle cx="130" cy="30" r="30" fill="darkorange" filter="url(#filter2)"/></circle>
  
 <!-- 途中略 -->
  
</svg>

表示例

（２）色の行列変換（feColorMatrix）

三原色＋不透明度の4要素を5×4行列によって変換する。色味を交換したり、色を透明度に変換したりします。

feColorMatrix 要素

三原色＋不透明度の4要素を5×4行列によって変換する。色味を交換したり、色を不透明度に変換したりする。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
type	合成法　（r' g' b' a' 変換後の三原色＋不透明度）		○
	matrix	行列演算 r' = a00r + a01g + a02b + a03a + a04 g' = a10r + a11g + a12b + a13a + a14 b' = a20r + a21g + a22b + a23a + a24 a' = a30r + a31g + a32b + a33a + a34
	saturate	彩度変換　（s は values の値） r' = (0.213+0.787s)r + (0.715-0.715s)g + (0.072-0.072s)b g' = (0.213-0.213s)r + (0.715-0.285s)g + (0.072-0.072s)b b' = (0.213+0.213s)r + (0.715-0.715s)g + (0.072-0.928s)b
	hueRotate	色相回転　（deg は values の値） a00 a01 a02 a10 a11 a12 a20 a21 a22 = 0.213 0.715 0.072 0.213 0.715 0.072 0.213 0.715 0.072 + cos(deg) * +0.787 -0.715 -0.072 -0.213 +0.285 -0.072 -0.213 -0.715 +0.928 + sin(deg) * -0.213 -0.715 +0.928 +0.143 +0.140 -0.283 -0.787 +0.715 +0.072
	luminanceToAlpha	明度抽出（不透明度として取得する） a' = 0.2125r + 0.7154g + 0.0721*b
values	typeにより意味が異なる		×
	matrix	行列値（a00,a01・・・a33,a34の順で指定する）
	saturate	割合（0～1）
	hueRotate	角度（0～360）

type の種類は別途表示しています。

記述例

<svg viewbox="0 0 500 120" width="500" height="120">
 <defs>
  <filter id="filter1">
   <feColorMatrix type="matrix" values="10 0 0 0 0  0 1 0 0 0  0 0 5 0 0  0 0 0 1 0"/>
  </filter>
  <filter id="filter2">
   <feColorMatrix type="saturate" values="0.5"/>
  </filter>
  <filter id="filter3">
   <feColorMatrix type="hueRotate" values="135"/>
  </filter>
  <filter id="filter4">
   <feColorMatrix type="luminanceToAlpha"/>
  </filter>
 </defs>
  
 <image href="bear.png" x="100" y="20" width="74" height="74" filter="url(#filter1)"/>
 <image href="bear.png" x="200" y="20" width="74" height="74" filter="url(#filter2)"/>
 <image href="bear.png" x="300" y="20" width="74" height="74" filter="url(#filter3)"/>
 <image href="bear.png" x="400" y="20" width="74" height="74" filter="url(#filter4)"/>
</svg>

表示例

（３）色の変換（feComponentTransfer）

すべての画素に対し転写関数を実行し、減色（discrete）、ネガポジ変換（linear）、色調補正（gamma）、切り抜きなどをします。

feComponentTransfer 要素

すべての画素に対し、次のような転写関数を実行し、データの成分ごとの置換を行う。

feFuncR －赤色成分に対する転写関数
feFuncG －緑色成分に対する転写関数
feFuncB －青色成分に対する転写関数
feFuncA －不透明度に対する転写関数

減色（discrete）、ネガポジ変換（linear）、色調補正（gamma）、切り抜きなどに用いる。

feFuncR、feFuncG、feFuncB、feFuncA 要素

三原色＋透過度の4要素に対して、明度調整, コントラスト調整, 色バランス, 閾値によるふるい（ thresholding ）などの演算を行う。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
type（注）	変換方法		○
	identity	恒等変換（同じ画像）
	table	折れ線
	discrete	階段
	linear	線形
	gamma	ガンマ補正
tableValues	空白やコンマで区切られた数値	table、discrete のとき、重みの値	△
slope	数値	linear のとき、一次関数の傾き（規定値：1）	×
intercept	数値	linear のときに、一次関数の切片（規定値：0）	×
amplitude	数値	gamma のときに、ガンマ補正関数の増幅率（規定値：1）	×
exponent	数値	gamma のときに、ガンマ補正関数の指数（規定値：1）	×
offset	数値	gamma のときに、ガンマ補正関数のオフセット（規定値：0）	×

（注）type

記述例

<svg viewbox="0 0 500 120" width="500" height="120">
 <defs>
  <filter id="filter1">
   <feComponentTransfer>
    <feFuncR type="identity"/>
    <feFuncG type="identity"/>
    <feFuncB type="identity"/>
   </feComponentTransfer>
  </filter>
  <filter id="filter2">
   <feComponentTransfer>
    <feFuncR type="table" tableValues="0 1 1 2"/>
    <feFuncG type="table" tableValues="0 1 1 0"/>
    <feFuncB type="table" tableValues="2 1 1 0"/>
   </feComponentTransfer>
  </filter>
  <filter id="filter3">
   <feComponentTransfer>
    <feFuncR type="discrete" tableValues="0,0,1"/>
    <feFuncG type="discrete" tableValues="0,1,0"/>
    <feFuncB type="discrete" tableValues="1,0,0"/>
   </feComponentTransfer>
  </filter>
  <filter id="filter4">
   <feComponentTransfer>
    <feFuncR type="linear" slope="0.5" intercept="0.25"/>
    <feFuncG type="linear" slope="0.5" intercept="0.5"/>
    <feFuncB type="linear" slope="0.5" intercept="0"/>
   </feComponentTransfer>
  </filter>
  <filter id="filter5">
   <feComponentTransfer>
    <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
    <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
    <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
   </feComponentTransfer>
  </filter>
 </defs>

 <image href="bear.png" x="20" y="20" width="74" height="74" filter="url(#filter1)"/>
 <image href="bear.png" x="120" y="20" width="74" height="74" filter="url(#filter2)"/>
 <image href="bear.png" x="220" y="20" width="74" height="74" filter="url(#filter3)"/>
 <image href="bear.png" x="320" y="20" width="74" height="74" filter="url(#filter4)"/>
 <image href="bear.png" x="420" y="20" width="74" height="74" filter="url(#filter5)"/>
</svg>

表示例

（４）Porter-Duff組成演算（feComposite）

２つの入力画像の組に対し、画像空間における画素ごとの組成演算を行います。

feComposite 要素

画素ごとの組成演算を行う。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
in2	入力画像	合成したい画像（規定値：直前の処理結果）	×
operator（注）	合成方法		○
	over	inの画像を優先
	in	inとin2の共通部分
	out	in2の部分をくり抜く
	atop	in2の領域に、in2と共通な部分のinを重ねる
	xor	共通部をくり抜く
	arithmetic	2つの画像の共通部分に応じた合成演算
k1～k4	数値	operator="arithmetic" のときに、ガンマ補正関数のオフセット k1:inとin2の共通部分 k2:inのみの部分 k3:in2のみの部分 k4:in でも in2 でもない部分（規定値：0）	×

同じ画像を入力しています。左上の画像が in、右下の画像が in2 からの入力です。

記述例

<svg viewbox="0 0 610 150" width="610" height="150">
 <defs>
  <filter id="filter1">
   <feOffset in="SourceGraphic" dx="-10" dy="-5" result="img1a"/>
   <feOffset in="SourceGraphic" dx="10" dy="5" result="img1b"/>
   <feComposite in="img1a" in2="img1b" operator="over"/>
  </filter>
  <filter id="filter2">
   <feOffset in="SourceGraphic" dx="-10" dy="-5" result="img2a"/>
   <feOffset in="SourceGraphic" dx="10" dy="5" result="img2b"/>
   <feComposite in="img2a" in2="img2b" operator="in"/>
  </filter>
  
  <!-- 途中略 -->
  
  <filter id="filter6">
   <feOffset in="SourceGraphic" dx="-10" dy="-5" result="img6a"/>
   <feOffset in="SourceGraphic" dx="10" dy="5" result="img6b"/>
   <feComposite in="img6a" in2="img6b" operator="arithmetic" k1="1" k2="0.3" k3="0.7" k4="0"/>
  </filter>
 </defs>
  
 <image href="bear.png" x="20" y="20" width="74" height="74" filter="url(#filter1)"/>
 <image href="bear.png" x="120" y="20" width="74" height="74" filter="url(#filter2)"/>
  
 <!-- 途中略 -->
  
 <image href="bear.png" x="520" y="20" width="74" height="74" filter="url(#filter6)"/>
</svg>

arithmetic 以外の、色の薄い部分は理解の助けになるように別途表示しています。

表示例

（５）単色による塗りつぶし（feFlood）

フィルタ範囲を指定の色で塗りつぶします。

feFlood 要素

フィルタ範囲を指定の色で塗りつぶす。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
flood-color	色	塗りつぶしの色（規定値：black）	×
flood-opacity	0～1	塗りつぶしの不透明度（規定値：1）	×

フィルターが図形と重なった部分だけ表示されます。

ただし、図形は上下左右に図形の 10% ずつ広げられ、120% の大きさでとられます。

記述例

<svg viewbox="0 0 650 140" width="650" height="140">
 <defs>
  <filter id="filter1">
   <feFlood flood-color="green" flood-opacity="0.8" x="30" y="30" width="120" height="40"/>
  </filter>
 </defs>

 <image href="bear.png" x="20" y="20" width="74" height="74" filter="url(#filter1)"/>
 <image href="bear.png" x="120" y="60" width="74" height="74" filter="url(#filter1)"/>
 <image href="bear.png" x="140" y="0" width="37" height="37" filter="url(#filter1)"/>
</svg>

オレンジ色の矩形がフィルターの範囲です。図形の周りのグレイの実線は図形の本来の大きさ、グレイの破線は図形を 120% 広げた範囲です。

フィルターと図形の重なった部分がフィルターの色で塗りつぶされています。

説明のために、図形やグレイの実線と破線、オレンジ色の矩形を別途表示しています。

表示例

（６）ガウスぼかし（feGaussianBlur）

フィルタ範囲を、ガウス関数を用いてぼかします。

feGaussianBlur 要素

フィルタ範囲をガウスぼかしする。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
stdDeviation	空白やコンマで区切られた数値	X 軸方向と Y 軸方向のぼかし幅（規定値：0）１つだけの場合は X 軸方向と Y 軸方向とも同じぼかし幅	×

記述例

<svg viewbox="0 0 600 150" width="600" height="150">
 <defs>
  <filter id="filter1">
   <feGaussianBlur stdDeviation="0"/>
  </filter>
  <filter id="filter2">
   <feGaussianBlur stdDeviation="1 4"/>
  </filter>
  <filter id="filter3">
   <feGaussianBlur stdDeviation="6 2"/>
  </filter>
  <filter id="filter4">
   <feGaussianBlur stdDeviation="3"/>
  </filter>
 </defs>
  
 <image href="bear.png" x="20" y="40" width="74" height="74" filter="url(#filter1)"/>
 <image href="bear.png" x="120" y="40" width="74" height="74" filter="url(#filter2)"/>
 <image href="bear.png" x="220" y="40" width="74" height="74" filter="url(#filter3)"/>
 <image href="bear.png" x="320" y="40" width="74" height="74" filter="url(#filter4)"/>
</svg>

表示例

（７）画像の挿入（feImage）

フィルタ範囲に、外部の画像を読み込みます。

feImage 要素

フィルタ範囲に外部の画像を読み込む。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
preserveAspectRatio	空白やコンマで区切られた数値	フィルタ範囲と画像サイズが異なる場合の拡縮方法（規定値：xMidYMid meet）（preserveAspectRatio 属性を参照）	×

記述例

<svg viewbox="0 0 400 150" width="400" height="150">
 <defs>
  <filter id="filter1" filterUnits="userSpaceOnUse" x="0" y="30" width="74" height="74">
   <feImage href="bear.png" x="0" y="30" width="74" height="74" preserveAspectRatio="xMidYMin meet"/>
  </filter>
 </defs>
  
 <circle cx="50" cy="60" r="30" fill="blue" filter="url(#filter1)"/>
</svg>

feImage は機能していないようですが、よくわかりません。

表示例

（８）画像の重ね合わせ（feMerge、feMergeNode）

画像を順に重ねます。

feMerge 要素

feMergeNode 要素で指定された画像を順に重ねる。

feMergeNode 要素

画像を指定する。

記述例

<svg viewbox="0 0 100 100" width="100" height="100">
 <defs>
  <filter id="filter">
   <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
   <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
   <feFlood flood-color="lightgreen" result="bg"/>
   <feMerge>
     <feMergeNode in="bg"/>                 <!-- 背景色 -->
     <feMergeNode in="offsetBlur"/>         <!-- 影 -->
     <feMergeNode in="SourceGraphic"/>      <!-- 元の画像 -->
   </feMerge>
  </filter>
 </defs>

 <image x="20" y="0" width="74" height="74" href="bear.png" filter="url(#filter)"/>
</svg>

表示例

（９）画像ずらし（feOffset）

画像を現在の位置から相対的に移動します。

feOffset 要素

画像を現在の位置から相対的に移動する。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
dx	数値	X 方向への移動量（規定値：0）	×
dy	数値	Y 方向への移動量（規定値：0）	×

記述例

<svg viewbox="0 0 500 140" width="500" height="140">
 <defs>
  <filter id="filter" filterUnits="userSpaceOnUse" x="20" y="20" width="150" height="120">
   <feOffset in="SourceGraphic" dx="-10" dy="-10" result="offset1"/>
   <feOffset in="SourceGraphic" dx="40" dy="10" result="offset2"/>
   <feOffset in="SourceGraphic" dx="0" dy="20" result="offset3"/>
   <feMerge>
     <feMergeNode in="offset1"/>
     <feMergeNode in="offset2"/>
     <feMergeNode in="offset3"/>
   </feMerge>
  </filter>
 </defs>

 <image x="30" y="30" width="74" height="74" href="bear.png" filter="url(#filter)"/>
</svg>

表示例

（１０）画像の敷き詰め（feTile）

画像をタイル状に並べる等の用途に使用します。

feTile 要素

画像をタイル状に並べる。

記述例

<svg viewbox="0 0 300 180" width="300" height="180">
 <defs>
  <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="250" height="160">
  <image x="0" y="0" width="74" height="74" href="bear.png"/>
  <feTile x="0" y="0" width="250" height="160"/>
  </filter>
 </defs>

 <rect x="0" y="0" width="300" height="300" filter="url(#filter)"/>
</svg>

表示例

１３．１１．５拡張フィルター

基本フィルターよりも動作が複雑なものが多く、工夫次第で様々な効果を得ることができます。

（１）行列による畳み込み（feConvolveMatrix）

入力画像内の画素を近隣の画素と組み合せて、結果の画像を生産します。畳み込みを通せば、次に挙げるような、幅広い画像処理演算を達成できます。

ぼかし（ blurring ）
輪郭検出（ edge detection ）
明瞭化（ sharpening ）
浮き彫り（ embossing ）
隆起（ beveling ）

feConvolveMatrix 要素

入力画像内の画素を近隣の画素と組み合せて、結果の画像を生産する。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
order	空白やコンマで区切られた数値	行サイズ、列サイズ（規定値：3）１つだけの場合は行、列とも同じサイズ	×
targetX	数値（0≦targetX＜列サイズ）	処理対象画素の列内での位置（規定値：0）	×
targetY	数値（0≦targetY＜行サイズ）	処理対象画素の行内での位置（規定値：0）	×
edgeMode（注１）	入力画像の端で、はみ出した領域の色		×
	duplicate	inの各辺上の色を繰り返す（同色）（規定値）
	wrap	各辺上の色を対辺（反対側）からとる
	none	透明
kernelMatrix	空白やコンマで区切られた数値	コンボリューションのためのカーネル行列（注２）	○
divisor	空白やコンマで区切られた数値	kernelMatrixで重み付けした後の分母値（規定値：kernelMatrixの総和）（注３）	×
bias	0～1	計算結果に加えられる値（規定値：0）	×
preserveAlpha	true/false	不透明度の維持（規定値：false）	×

（注１）中央の白い枠からはみ出たところには、矢印のように色が設定される。→

（注２）要素数は order の行サイズ×列サイズ

（注３）kernelMatrixの総和が０のときは１に設定される。

記述例

<svg viewbox="0 0 600 120" width="600" height="120">
 <defs>
  <filter id="filter1" filterUnits="userSpaceOnUse" x="0" y="0" width="80" height="100">
  <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="0 1 0 1 1 1 0 1 0" divisor="5" bias="0" preserveAlpha="true"/>
  </filter>
  <filter id="filter2" filterUnits="userSpaceOnUse" x="80" y="0" width="80" height="100">
  <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" bias="0" preserveAlpha="true"/>
  </filter>
  <filter id="filter3" filterUnits="userSpaceOnUse" x="160" y="0" width="80" height="100">
  <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="-1 0 1 -2 0 2 -1 0 1" divisor="1" bias="0" preserveAlpha="true"/>
  </filter>
  <filter id="filter4" filterUnits="userSpaceOnUse" x="240" y="0" width="80" height="100">
  <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="0 0 0 0 1 0 0 0 -1" divisor="1" bias="0" preserveAlpha="true"/>
  </filter>
  <filter id="filter5" filterUnits="userSpaceOnUse" x="320" y="0" width="80" height="100">
  <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="-1 0 1 -1 0 1 -1 0 1" divisor="1" bias="0" preserveAlpha="true"/>
  </filter>
  <filter id="filter6" filterUnits="userSpaceOnUse" x="400" y="0" width="80" height="100">
  <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="0 -1 0 -1 5 -1 0 -1 0" divisor="1" bias="0" preserveAlpha="true"/>
  </filter>
  <filter id="filter7" filterUnits="userSpaceOnUse" x="480" y="0" width="80" height="100">
  <feConvolveMatrix order="3 3" edgeMode="none" kernelMatrix="-1 0 0 0 1 0 0 0 0" divisor="1" bias="0.8" preserveAlpha="true"/>
  </filter>
 </defs>

 <image x="0" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter1)"/>
 <image x="80" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter2)"/>
 <image x="160" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter3)"/>
 <image x="240" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter4)"/>
 <image x="320" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter5)"/>
 <image x="400" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter6)"/>
 <image x="480" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter7)"/>
</svg>

表示例

（２）空間変異（feDisplacementMap）

元画像を変形し様々な効果を得ます。

feDisplacementMap 要素

元画像を変形し様々な効果を得る。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
order	空白やコンマで区切られた数値	行サイズ、列サイズ（規定値：3）１つだけの場合は行、列とも同じサイズ	×
in2	ID	効果を表す画像	○
xChannelSelector	R\|G\|B\|A	X軸方向の変換に用いる、in2の色要素（規定値：A）	×
yChannelSelector	R\|G\|B\|A	Y軸方向の変換に用いる、in2の色要素（規定値：A）	×
scale	数値	ずらす幅（規定値：0）	×

記述例

<svg viewbox="0 0 600 120" width="600" height="120">
 <defs>
  <filter id="filter1" filterUnits="userSpaceOnUse" x="100" y="0" width="100" height="100">
   <feTurbulence type="fractalNoise" baseFrequency="0.995" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/>
   <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="R" scale="20"/>
  </filter>
  
 <!-- 途中略 -->
  
  <filter id="filter4" filterUnits="userSpaceOnUse" x="400" y="0" width="100" height="100">
   <feTurbulence type="fractalNoise" baseFrequency="0.995" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/>
   <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="A" yChannelSelector="A" scale="20"/>
  </filter>

  <filter id="filter11" filterUnits="userSpaceOnUse" x="100" y="0" width="100" height="100">
   <feTurbulence type="fractalNoise" baseFrequency="0.995" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/>
   <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="R" scale="10"/>
  </filter>
  
 <!-- 途中略 -->
  
  <filter id="filter15" filterUnits="userSpaceOnUse" x="500" y="0" width="100" height="100">
   <feTurbulence type="fractalNoise" baseFrequency="0.995" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/>
   <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="R" scale="50"/>
  </filter>
 </defs>

 <image x="100" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter1)"/>
  
 <!-- 途中略 -->
  
 <image x="400" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter4)"/>

 <image x="100" y="120" width="74" height="74" xlink:href="bear.png" filter="url(#filter11)"/>
  
 <!-- 途中略 -->
  
 <image x="500" y="120" width="74" height="74" xlink:href="bear.png" filter="url(#filter15)"/>
</svg>

表示例

（３）画像の侵食、膨張（feMorphology）

周辺画素の明るさを元に中心の色を決定します。

feMorphology 要素

周辺画素の明るさを元に中心の色を決定する。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
operator	処理の切り替え		×
	dilate	膨張…明るい/値の大きい所が広がる
	erode	侵食…暗い/値の小さい所が広がる（規定値）
radius	空白やコンマで区切られた数値	X方向半径、Y方向半径（規定値：0）１つだけの場合は同じ半径	×

記述例

<svg viewbox="0 0 600 220" width="600" height="220">
 <defs>
  <filter id="filter1" filterUnits="userSpaceOnUse" x="100" y="0" width="100" height="100">
   <feMorphology operator="dilate" radius="1"/>
  </filter>
  <filter id="filter2" filterUnits="userSpaceOnUse" x="200" y="0" width="100" height="100">
   <feMorphology operator="dilate" radius="2"/>
  </filter>
  <filter id="filter3" filterUnits="userSpaceOnUse" x="300" y="0" width="100" height="100">
   <feMorphology operator="dilate" radius="3"/>
  </filter>

  <filter id="filter11" filterUnits="userSpaceOnUse" x="100" y="100" width="100" height="100">
   <feMorphology operator="erode" radius="1"/>
  </filter>
  <filter id="filter12" filterUnits="userSpaceOnUse" x="200" y="200" width="100" height="100">
   <feMorphology operator="erode" radius="2"/>
  </filter>
  <filter id="filter13" filterUnits="userSpaceOnUse" x="300" y="300" width="100" height="100">
   <feMorphology operator="erode" radius="3"/>
  </filter>

  <filter id="filter21" filterUnits="userSpaceOnUse" x="400" y="50" width="150" height="150" filterres="200,200">
   <feMorphology in="SourceAlpha" operator="dilate" radius="4"/>
   <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic">
   </feMerge>
  </filter>
 </defs>

 <image x="100" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter1)"/>
 <image x="200" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter2)"/>
 <image x="300" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter3)"/>
 
 <image x="100" y="120" width="74" height="74" xlink:href="bear.png" filter="url(#filter11)"/>
 <image x="200" y="120" width="74" height="74" xlink:href="bear.png" filter="url(#filter12)"/>
 <image x="300" y="120" width="74" height="74" xlink:href="bear.png" filter="url(#filter13)"/>

 <g filter="url(#filter21)">
  <image x="420" y="70" width="74" height="74" xlink:href="bear.png"/>
  <image x="450" y="100" width="74" height="74" xlink:href="bear.png"/>
 </g>
</svg>

表示例

（４）パーリンノイズによる描画（feTurbulence）

雲や大理石模様等の自然界にしばしば現れる紋様を擬似的に生成します。

feTurbulence 要素

パーリンノイズによる描画をする。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
baseFrequency	空白やコンマで区切られた1より小さい値	X方向の基底周波数、Y方向の基底周波数　　（規定値：0）１つだけの場合は同じ周波数	×
numOctaves	1以上の整数	ノイズ関数に対するオクターブ（規定値：1）	×
seed	1以上の整数	乱数の初期数（規定値：0）	×
stitchTiles	継ぎ目の処理方法		×
	stitch	継ぎ目をつなぐ
	noStitch	継ぎ目をつながない（規定値）
type	ノイズ関数か、ゆらぎ関数かの指定		×
	fractalNoise	ノイズ関数
	turbulence	ゆらぎ関数（規定値）

記述例

<svg viewbox="0 0 750 150" width="750" height="150">
 <defs>
  <filter id="filter1" filterUnits="userSpaceOnUse" x="20" y="20" width="100" height="100">
   <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4" seed="3" stitchTiles="noStitch"/>
  </filter>
  <filter id="filter2" filterUnits="userSpaceOnUse" x="140" y="20" width="100" height="100">
   <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4" seed="3" stitchTiles="stitch"/>
  </filter>
  <filter id="filter3" filterUnits="userSpaceOnUse" x="260" y="20" width="100" height="100">
   <feTurbulence type="fractalNoise" baseFrequency="0.1 0.05" numOctaves="1" seed="3" stitchTiles="noStitch"/>
  </filter>
  
  <filter id="filter4" filterUnits="userSpaceOnUse" x="380" y="20" width="100" height="100">
   <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" seed="3" stitchTiles="noStitch"/>
  </filter>
  <filter id="filter5" filterUnits="userSpaceOnUse" x="500" y="20" width="100" height="100">
   <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2" seed="3" stitchTiles="stitch"/>
  </filter>
  <filter id="filter6" filterUnits="userSpaceOnUse" x="620" y="20" width="100" height="100">
   <feTurbulence type="turbulence" baseFrequency="0.01 0.05" numOctaves="8" seed="3" stitchTiles="noStitch"/>
  </filter>
 </defs>

 <rect x="20" y="20" width="80" height="80" filter="url(#filter1)"/>
 <rect x="140" y="20" width="80" height="80" filter="url(#filter2)"/>
 <rect x="260" y="20" width="80" height="80" filter="url(#filter3)"/>
 
 <rect x="380" y="20" width="80" height="80" filter="url(#filter4)"/>
 <rect x="500" y="20" width="80" height="80" filter="url(#filter5)"/>
 <rect x="620" y="20" width="80" height="80" filter="url(#filter6)"/>
</svg>

表示例

（５）影を付ける（feDropShadow）

複数の原始フィルターを組み合わせることで実現していた影を簡単に生成します。

feDropShadow 要素

影を簡単に生成する。

属性（この他に、共通属性がある）

属性名	属性値	説明	必須
dx	数値	影の、元の画像との X 方向の変位（規定値：2）	×
dy	数値	影の、元の画像との Y 方向の変位（規定値：2）	×
stdDeviation	数値	影の広がり（規定値：2）	×
flood-color	色	影の色（規定値：black）	×
flood-opacity	0～1	影の不透明度（規定値：1）	×

記述例

<svg viewbox="0 0 300 120" width="300" height="120">
 <defs>
  <filter id="filter1">
   <feDropShadow/>
  </filter>
  <filter id="filter2">
   <feDropShadow dx="3" dy="3" stdDeviation="0" flood-color="blue" flood-opacity="0.5"/>
  </filter>
 </defs>
  
 <image x="100" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter1)"/>
 <image x="200" y="20" width="74" height="74" xlink:href="bear.png" filter="url(#filter2)"/>
</svg>

表示例

１３．１２アニメーション

SVG でも一般的なアニメーションと同じくグラフィックを時系列的に少しずつ変化させることで実現させています。

SVG のアニメーション要素を利用し図形要素のプロパティを操作することで、モーションパス、フェードイン／フェードアウト効果、オブジェクトの増大・縮小、回転、色の変化などを定義できます。

１３．１２．１アニメーション　(animate)

animate 要素は対象となる図形要素のプロパティ値の時系列的変化を表します。animate で変更可能な属性は、数値や色等の何らかの大きさを表すものです。連続的に変更できない場合はその変化は離散的（跳び跳び）になります。

animate 要素

一つの要素に対するアニメーションを指定する。

属性

属性名	説明
アニメーションの対象など
attributeName	アニメーションの対象とする図形の属性名
attributeType	アニメーションの対象とする図形の属性の種類
xlink:href	アニメーションの対象とする図形の ID
アニメーションの属性値の変化など
from	初期値
to	終了値
by	増減値
values	dur や keyTimes のタイミングでの値の変化。この値は from、to、by に優先する。
calcMode	値の変化の関数
keySplines	keyTimes のタイミングでの（3次ベジェスプライン曲線）値の変化。0～1.0の割合で指定
アニメーションのタイミングなど
begin	アニメーションを開始するタイミング
dur	アニメーションの持続時間
end	アニメーションを終了するタイミング
min	アニメーションの最短持続時間
max	アニメーションの最長持続時間
restart	アニメーションのリスタート可能条件
repeatCount	アニメーションの繰り返し回数
repeatDur	アニメーションの繰り返し時間
アニメーション設定値の扱いなど
fill	アニメーション終了時の状態
additive	animate で設定する値の算出法
accumulate	リピートした際の値の設定

（１）アニメーションの対象

アニメーションの対象となる図形の ID や属性の名前を指定します。

animate 要素

アニメーションの対象を指定する。

属性

属性名	属性値	説明	必須
attributeName	属性名	アニメーションの対象とする図形の属性名	○
attributeType	アニメーションの対象とする図形の属性の種類		○
	CSS	CSS プロパティ名
	XML	XML 属性名
	auto	CSS プロパティ名 → XML 属性名（規定値）
xlink:href	ID	アニメーションの対象とする図形の ID（規定値：animate 要素を囲む図形）	×

attributeName 属性は、アニメーションの対象となる属性の名前を指定します。

attributeType 属性は、attributeName 属性で指定された名前が定義されている名前空間を指定します。次のどれか（大文字小文字の区別がある）を指定します。ただし、どれを指定しても違いがないように感じます。

CSS: アニメーション可能なスタイルシート（CSS）のプロパティ名
XML: アニメーション可能な XML 属性名
auto: CSS プロパティ名の一覧を最初に検索し、見つからない場合はその要素に対する既定の XML 名前空間を検索

また、通常アニメーションさせたい図形要素の中に animate 要素を記述しますが、別のところに記述した図形をアニメーションさせたい場合は xlink:href 属性を使用して、その要素の ID を指定します。

記述例

<svg viewbox="0 0 400 180" width="400" height="180">
  <circle cx="100" cy="80" fill="red" stroke="orange" stroke-width="1">
    <animate attributeType="XML" attributeName="r" begin="0" dur="5" from="0" to="80" repeatCount="indefinite"/>
    <animate attributeType="CSS" attributeName="fill-opacity" begin="0" dur="5" from="1" to="0"
    repeatCount="indefinite"/>
  </circle>

  <rect id="a" x="300" y="10" width="100" height="100" fill="blue"/>
  <animate xlink:href="#a" attributeType="XML" attributeName="rx" begin="0" dur="5" from="0" to="50"
  repeatCount="indefinite"/>
  <animate xlink:href="#a" attributeType="XML" attributeName="ry" begin="0" dur="5" from="0" to="50"
  repeatCount="indefinite"/>
</svg>

左は circle 要素の中に animate 要素を記述していますが、右は別の場所（この例では直後）にある animate 要素でアニメーションさせたい要素の ID を指定しています。

表示例

（２）アニメーションの属性値の変化

属性の初期値、終了値、増減値あるいは取りうる値を指定します。

animate 要素

属性の初期値、終了値、増減値あるいは取りうる値を指定する。

属性

属性名	属性値	説明	必須
from	属性値	初期値	values とどちらか
to	属性値	終了値
by	数値	増減値
values	セミコロン区切りの値リスト	dur や keyTimes のタイミングでの値の変化。この値は from、to、by に優先する。	from、to、by とどちらか
calcMode	値の変化の関数		×
	discrete	離散変化（次の値に一気に変化する）
	linear	線形変化（次の値に一定割合で変化する）（規定値）
	paced	定速（dur 属性値の時間をかけて from 値から to 値に変化する）
	spline	3次ベジェスプライン曲線による変化（values，keyTimes，keySplinesと一緒に用いる）
keyTimes	セミコロン区切りの値リスト	変化が起こるタイミングのリスト linear、splineの場合は 0～1、discreteの場合は 0～	×（spline のとき○）
keySplines	セミコロン区切りの(x1 y1 x2 y2)リスト	keyTimes のタイミングでの（3次ベジェスプライン曲線）値の変化。0～1.0の割合で指定	×（spline のとき○）

from、to は初期値と終了値を指定します。数値あるいは色の名前を指定することができます。

by を指定した場合は (from+by) が終了値となります。to と by の両方を指定した場合は to が優先されます。

values は変化させる値のリストを与えます。リストに指定された値を順次とります。

記述例

<svg viewbox="0 0 400 100" width="400" height="100">
  <circle cy="20" r="10" fill="green">
　<animate attributeName="cx" dur="5" from="20" to="100" repeatCount="indefinite"/>
  </circle>
  <circle cy="50" r="10" fill="green">
　<animate attributeName="cx" dur="5" from="20" by="80" repeatCount="indefinite"/>
  </circle>
  <circle cy="80" r="10" fill="green">
　<animate attributeName="cx" dur="5" values="10;30;80;60;100" repeatCount="indefinite"/>
  </circle>

  <circle cx="200" cy="50" r="40">
　<animate attributeName="fill" dur="5" from="blue" to="red" repeatCount="indefinite"/>
  </circle>
</svg>

左は円の中心の X 座標を from～to、from～by、values で変化させています。右は from～to で色を変化させています。

表示例

calcMode 属性は値の変化のさせ方を指定します。

discrete: 次の値に一気に変化する
linear: 次の値に徐々に変化する（values を指定でき変化を変えられる）
paced: 最終値に一定割合で徐々に変化する（to や by を指定し最後まで一定に変化する）
spline: 3次ベジェ曲線で変化する（keyTimes，keySplines を指定する）

記述例

<svg viewbox="0 0 500 130" width="500" height="130">
  <line x1="20" y1="110" x2="20" stroke="blue" stroke-width="20">
    <animate calcMode="discrete" attributeName="y2" begin="0" dur="5"
　values="80;30;60;10" keyTimes="0;0.3;0.5;0.9" repeatCount="indefinite"/>
  </line>
  <line x1="130" y1="110" x2="130" stroke="blue" stroke-width="20">
    <animate calcMode="linear" attributeName="y2" begin="0" dur="5"
    values="110;40;70;10" keyTimes="0;0.2;0.6;1" repeatCount="indefinite"/>
  </line>
  <line x1="240" y1="110" x2="240" stroke="blue" stroke-width="20">
    <animate calcMode="paced" attributeName="y2" begin="0" dur="5"
    from="110" to="10" repeatCount="indefinite"/>
  </line>
  <line x1="350" y1="110" x2="350" stroke="blue" stroke-width="20">
    <animate calcMode="spline" attributeName="y2" begin="0" dur="5"
    values="110;60;10" keyTimes="0;0.5;1" keySplines="0.5 0 1 0.5;0 0.5 0.5 1"
    repeatCount="indefinite"/>
  </line>
</svg>

青い線の y2 座標をそれぞれの方法で変化させています。なお、グレイの点線などは理解の助けになるように別途描いています。

表示例

（３）アニメーションのタイミング

animate 要素

タイミングを指定する。

属性

属性名	属性値	説明	必須
begin	セミコロン区切りの時間リスト	アニメーションを開始するタイミング（注）（規定値:0）	×
dur	時間	アニメーションの持続時間	×
end	セミコロン区切りの時間リスト	アニメーションを終了するタイミング（注）	×
min	時間	アニメーションの最短持続時間	×
max	時間	アニメーションの最長持続時間	×
restart	アニメーションのリスタート可能条件		×
	always	いつでも
	whenNotActive	止まってたら
	never	できない
repeatCount	アニメーションの繰り返し回数（規定値：1）		×
	回数	繰り返し回数
	indefinite	無限回
repeatDur	アニメーションの繰り返し時間		×
	時間	繰り返し時間（規定値:秒）
	indefinite	無制限

時間の記述形式

01:15:30	1時間15分30秒
00:00:10.25	10秒250ミリ秒
02:30	2分30秒
00:03.5	3秒500ミリ秒
15min	15分
30s	30秒
500ms	500ミリ秒
7.5	7秒500ミリ秒

（注）ID.begin±時間や ID.end±時間などの形式で、他の要素の開始時刻や終了時刻を基準としたタイミングを指定できる

記述例

<svg viewbox="0 0 500 130" width="500" height="130">
  <circle cx="10" cy="10" r="green">
    <animate attributeName="cx" from="10" to="110" begin="0" dur="10" repeatCount="indefinite"/>
  </circle>
  <circle cx="10" cy="40" r="green">
    <animate attributeName="cx" from="10" to="110" dur="10" end="4" repeatCount="indefinite"/>
  </circle>
  <circle cx="10" cy="70" r="green">
    <animate attributeName="cx" from="10" to="110" begin="0" dur="10" end="10" max="5" repeatCount="indefinite"/>
  </circle>
  <circle cx="10" cy="100" r="green">
    <animate attributeName="cx" from="10" to="110" begin="0" dur="10" end="4" min="6" repeatCount="indefinite"/>
  </circle>
</svg>

一番上は無限に繰り返します。二番目は end 属性が指定してあるので指定された時間後に止まります。三番目は max 属性に小さな値が指定してあるので end 属性で指定した時間より前に止まります。一番下は min 属性に大きな値が指定してあるので end 属性で指定した時間より後に止まります。

表示例　　　[再実行]されなければ、

repeatCount 属性は繰り返しの回数を指定します。repeatDur 属性は繰り返しの時間を指定します。単位を省略すると秒になります。また、repeatCount も repeatDur も指定しなければ繰り返しは行われず１回だけの実行になります。

記述例

<svg viewbox="0 0 500 70" width="500" height="70">
  <circle cx="10" cy="10" r="10" fill="green">
    <animate attributeName="cx" from="10" to="110" begin="0" dur="5" repeatCount="2"/>
  </circle>
  <circle cx="10" cy="40" r="10" fill="green">
    <animate attributeName="cx" from="10" to="110" begin="0" dur="7" repeatDur="10"/>
  </circle>
</svg>

次の例では、上は２回繰り返して終わります。二番目は１０秒間で終わります。結果的には２つとも同時に終わります。

表示例

再実行

　　　[再実行]されなければ、

begin 属性に他の要素の ID.end を指定することによって、開始のタイミングを他の要素の終了に合わせることができます。

記述例

<svg viewbox="0 0 400 120" width="400" height="120">
  <rect id="r" x="20" y="10" width="100" height="100" fill="blue"/>
  <animate id="r1" xlink:href="#r" attributeName="rx" begin="0;r3.end" dur="5" from="0" to="50"/>
  <animate id="r2" xlink:href="#r" attributeName="ry" begin="0;r4.end" dur="5" from="0" to="50"/>
  <animate id="r3" xlink:href="#r" attributeName="rx" begin="r1.end" dur="5" from="50" to="0"/>
  <animate id="r4" xlink:href="#r" attributeName="ry" begin="r2.end" dur="5" from="50" to="0"/>
</svg>

次の例では、ID が r1 と r3 はそれぞれ互いの終了直後に開始されます。ID が r2 と r4 でも同様です。

結果的に、rx と ry を 0 ～ 50 ～ 0 というように繰り返します。

表示例

（４）アニメーション設定値の扱い

fill 属性ではアニメーション終了時の状態を制御することができます。

animate 要素

アニメーション終了時の状態や属性値の取扱いを設定する。

属性

属性名	属性値	説明	必須
fill	アニメーション終了時に効果を初期値に戻すかどうか		×
	freeze	戻さない
	remove	戻す（規定値）
additive	animate で設定する値の算出法を設定する		×
	sum	差分値として加算する
	replace	絶対値として設定する（規定値）
accumulate	リピートした際に値を蓄積するかどうかを設定する		×
	sum	前回の結果に足しこんでいく（累積）
	none	リピートする都度値をリセットする（規定値）

fill 属性ではアニメーション終了時の状態を制御することができます。

記述例

<svg viewbox="0 0 500 110" width="500" height="110">
  <circle cx="50" cy="50" r="10" fill="green">
    <animate attributeName="r" from="0" to="50" begin="0" dur="5" fill="freeze"/>
  </circle>
  <circle cx="170" cy="50" r="10" fill="green">
    <animate attributeName="r" from="0" to="50" begin="0" dur="5" fill="remove"/>
  </circle>
</svg>

左は終了状態のままですが、右は初期状態に戻ります。

表示例

再実行

　　　[再実行]されなければ、

additive 属性では animate で設定する値の算出法を設定します。

記述例

<svg viewbox="0 0 500 70" width="500" height="70">
  <circle cx="80" cy="20" r="10" fill="green">
    <animate attributeName="cx" from="0" to="-60" begin="0" dur="5" repeatCount="indefinite"/>
    <animate attributeName="cx" from="80" to="140" begin="0" dur="5" repeatCount="indefinite" additive="sum"/>
  </circle>
  <circle cx="80" cy="50" r="10" fill="green">
    <animate attributeName="cx" from="0" to="-60" begin="0" dur="5" repeatCount="indefinite"/>
    <animate attributeName="cx" from="80" to="140" begin="0" dur="5" repeatCount="indefinite" additive="replace"/>
  </circle>
</svg>

上は from 同士（0+80） to 同士（-60+140）の値が加算され新しい属性値となります。結果的に from も to も属性値が 80 となり移動しません。下は後から指定された属性値が前に指定されていた値を置き換えるので 80～140 の間を移動することになります。

表示例

accumulate 属性ではリピートした際に値を蓄積するかどうかを設定します。

記述例

<svg viewbox="0 0 500 70" width="500" height="70">
  <circle cx="50" cy="30" r="10" fill="blue">
    <animate attributeName="r" from="0" to="10" begin="0" dur="3" repeatCount="3" accumulate="sum"/>
  </circle>
  <circle cx="170" cy="30" r="10" fill="blue">
    <animate attributeName="r" from="0" to="10" begin="0" dur="3" repeatCount="3" accumulate="none"/>
  </circle>
</svg>

左は、2回目の繰り返しでの r の値が、1回目の繰り返し後に 10 になった値に加算されるので、10～20 の範囲で変化することになります。右は加算されませんので、0～10 の範囲で変化することになります。

表示例

再実行

　　　[再実行]されなければ、

参考：公転運動

参考：公転運動　（別ウィンドウで開きます）

１３．１２．２設定　(set)

set 要素は、指定された持続時間だけ属性に値を設定します。

set 要素

属性に値を設定する。

属性

属性名	属性値	説明	必須
attributeName	属性名	変更する属性名	○
to	属性値	attributeName で指定した属性に設定する値	×

その他、animate 要素の属性も指定できる。

記述例

<svg viewbox="0 0 100 50" width="100" height="50">
  <circle cx="10" cy="20" r="10" fill="red">
    <animate id="c" attributeName="cx" dur="10;90;10" begin="0;c.end" repeatCount="3"/>
    <set attributeName="fill" begin="c.begin" to="red"/>
    <set attributeName="fill" begin="c.repeat(1)" to="blue"/>
    <set attributeName="fill" begin="c.repeat(2)" to="green"/>
  </circle>
</svg>

下の例は３回繰り返しますが、begin 属性で、その終了が次の開始のタイミングに設定されていますので、永久に繰り返します。

ただし、set 要素で最初は「赤」、１回目の繰り返しは「青」、２回目の繰り返しは「緑」に設定しています。

表示例

また、attributeName 属性では、スタイルシートの属性名も指定できます。

記述例

<svg viewbox="0 0 100 50" width="100" height="50">
  <circle cx="10" cy="20" r="10" fill="red" style="visibility:hidden;">
    <animate id="c" attributeName="cx" dur="2" begin="0;c.end"/>
    <set attributeName="visibility" begin="c.begin" to="visible"/>
    <set attributeName="visibility" begin="c.begin+1" to="hidden"/>
  </circle>
</svg>

下の例は１秒ごとに表示と非表示を繰り返します。visibility を visible にすると表示、hidden にすると非表示になります。

表示例

は、SVG のアニメーションを img タグで指定したとき、表示されないことがあるようです。他の例は問題ないようですが、なぜかこの例だけ表示されません。（表示例の下あたりで右ボタン）「新しいタブで画像を開く(I)」を選び別タブで表示させると問題なく表示されます。

１３．１２．３モーションパス　(animateMotion)

animateMotion 要素を用いると図形を任意の曲線に沿って移動させることができます。

animateMotion 要素

図形を任意の曲線に沿って移動させる。

属性

属性名	属性値	説明	必須
path	path 要素のd属性と同じ	モーションパス	mpath 要素とどちらか
keyPoints	0～1	曲線全体の長さにおける位置	mpath 要素とどちらか
rotate	図形の回転角（規定値：0）		×
	auto	自動
	auto-reverse	自動(逆)
	角度	回転角

　　animate 要素と同じ属性も記述できる

mpath 要素

モーションパスを指定する。

属性

属性名	属性値	説明	必須
xlink:href	ID	モーションパスを指定した path 要素の ID	○

path 属性や mpath 要素で移動するパスを指定します。

記述例

<svg viewbox="0 0 400 110" width="400" height="110">
  <circle cx="10" cy="50" r="10" fill="green">
    <animateMotion id="m1" dur="1" path="M0,0 Q 30,-80 60,0" begin="0;m1.end" repeatCount="5" accumulate="sum"/>
  </circle>
  <defs>
    <path id="m2" d="m0,0 q 30,-80 60,0"/>
  </defs>
  <circle cx="10" cy="100" r="10" fill="green">
    <animateMotion id="m3" dur="1" begin="0;m3.end" repeatCount="5" accumulate="sum"/>
      <mpath xlink:href="#m2"/>
    </animateMotion>
  </circle>
</svg>

上は path で指定した２次ベジェスプライン曲線にそって移動します。５回繰り返していますが、繰り返しごとに値を蓄積していきます。下は mpath 要素で同様な定義をしていますが、この場合の path 要素では相対位置を指定する必要があるようです。

表示例

rotate 属性で図形の回転角を指定します。

記述例

<svg viewbox="0 0 400 200" width="400" height="200">
  <path d="M -10,-5 L 10,0 -10,5 Z" fill="green">
    <animateMotion rotate="auto" dur="6" repeatCount="indefinite"
                                 path="M 60,40 c 0,-80 240,80 240,0 s -240,80 -240,0"/>
  </path>
  <path d="M -10,-5 L 10,0 -10,5 Z" fill="green">
    <animateMotion rotate="auto-reverse" dur="6" repeatCount="indefinite"
                                 path="M 60,100 c 0,-80 240,80 240,0 s -240,80 -240,0"/>
  </path>
  <path d="M -10,-5 L 10,0 -10,5 Z" fill="green">
    <animateMotion rotate="45" dur="6" repeatCount="indefinite"
                                 path="M 60,160 c 0,-80 240,80 240,0 s -240,80 -240,0"/>
  </path>
</svg>

１番上は図形が自動的に進行方向に向きます。２番目は進行方向と反対向きになります。３番目は４５度の角度を指定していますが機能していないようです。
なお、グレイの点線は理解の助けになるように別途描いています。

表示例

１３．１２．４変形アニメーション　(animateTransform)

animateTransform 要素では図形の変形アニメーションを定義します。

animateTransform 要素

図形の変形アニメーションを定義する。

属性

属性名	属性値	説明	必須
attributeName	transform	アニメーションの対象とする図形の属性名	○
type	変形の種類	rotate、translate、skewX、skewY、scale（１３．２．４変形　(transform) 参照）	○

　　animate 要素と同じ属性も記述できる

　　ただし、from、to、values 属性などの記述は type 属性によって変わる

記述例

<svg viewbox="0 0 600 150" width="600" height="150">
  <rect x="50" y="10" width="50" height="50" rx="10" ry="10" fill="orange">
    <animateTransform attributeName="transform" type="rotate"
                                     from="0 75,35" to="360 75,35" dur="6" repeatCount="indefinite"/>
  </rect>

  <circle cx="40" cy="100" r="10" fill="green">
    <animateTransform attributeName="transform" type="translate"
                                     dur="3" values="40,10; 100,10; 40,10" repeatCount="indefinite"/>
  </circle>

  <g transform="translate(200,20)">
    <rect x="0" y="0" width="40" height="40" rx="10" ry="10" fill="blue">
      <animateTransform attributeName="transform" type="skewX"
                                     dur="6" values="45; -45; 45" repeatCount="indefinite"/>
    </rect>
  </g>

  <g transform="translate(300,50)">
    <rect x="0" y="0" width="40" height="40" rx="10" ry="10" fill="blue">
      <animateTransform attributeName="transform" type="skewY"
                                     dur="6" values="45; -45; 45" repeatCount="indefinite"/>
    </rect>
  </g>

  <g transform="translate(420,10)">
    <circle cx="0" cy="35" r="25" fill="red">
      <animateTransform attributeName="transform" type="scale"
                                     dur="6" values="1 2; 2 1; 1 2" repeatCount="indefinite"/>
    </circle>
  </g>
</svg>

表示例

参考：転がり運動

参考：転がり運動　（別ウィンドウで開きます）

参考：回転する正十二面体

参考：回転する正十二面体　（別ウィンドウで開きます）

参考：迷路

迷路から地上へ脱出してください。下のリンクから実行できます。

左はイメージ画像

参考：迷路　（別ウィンドウで開きます）

１３ グラフィックス（SVG）

１３．１ Scalable Vector Graphics (svg)

svg 要素

属性

（１） viewbox 属性

記述例

記述例

（２） width 属性、height 属性

（３） preserveAspectRatio 属性

記述例

（４） xmlns、xmlns:xlink 属性

１３．２ 属性

１３．２．１ 色

参考：Web カラー一覧

（１） 線の色 (stroke)

stroke 属性

属性

記述例

（２） 面の色 (fill)

fill 属性

属性

記述例

１３．２．２ 不透明度

（１） 線の不透明度 (stroke-opacity)

stroke-opacity 属性

属性

記述例

（２） 面の不透明度 (fill-opacity)

fill-opacity 属性

属性

記述例

（３） 不透明度 (opacity)

opacity 属性

属性

記述例

１３．２．３ 線種

（１） 線の太さ (stroke-width)

stroke-width 属性

属性

記述例

（２） 線の両端の形状 (stroke-linecap)

stroke-linecap 属性

属性

記述例

（３） 線の頂点の形状 (stroke-linejoin、stroke-miterlimit)

stroke-linejoin 属性

属性

記述例

stroke-miterlimit 属性

属性

記述例

（４） 破線パターン (stroke-dasharray、stroke-dashoffset)

stroke-dasharray 属性

属性

記述例

stroke-dashoffset 属性

属性

記述例

１３．２．４ 変形 (transform)

transform 属性

関数

（１） 平行移動 (translate)

translate(tx, ty) 関数

引数

（２） 拡大・縮小 (scale)

scale(sx, sy) 関数

引数

（３） 回転 (rotate)

rotate(angle, cx, cy) 関数

引数

（４） 横方向の傾斜 (skewX)

skewX(angle) 関数

引数

（５） 縦方向の傾斜 (skewY)

skewY(angle) 関数

引数

（６） 変換行列による変形 (matrix)

matrix(a, b, c, d, e, f) 関数

引数

関数の組み合わせ時の注意

１３　グラフィックス（SVG）

１３．１ Scalable Vector Graphics　(svg)

１３．２属性

１３．２．１色

（１）線の色　(stroke)

（２）面の色　(fill)

１３．２．２不透明度

（１）線の不透明度　(stroke-opacity)

（２）面の不透明度　(fill-opacity)

（３）不透明度　(opacity)

１３．２．３線種

（１）線の太さ　(stroke-width)

（２）線の両端の形状　(stroke-linecap)

（３）線の頂点の形状　(stroke-linejoin、stroke-miterlimit)

（４）破線パターン　(stroke-dasharray、stroke-dashoffset)

１３．２．４変形　(transform)

（１）平行移動　(translate)

（２）拡大・縮小　(scale)

（３）回転　(rotate)

（４）横方向の傾斜　(skewX)

（５）縦方向の傾斜　(skewY)

（６）変換行列による変形　(matrix)

１３．３図形

１３．３．１矩形　(rect)

１３．３．２円　(circle)

１３．３．３楕円　(ellipse)

１３．３．４直線　(line)

１３．３．５折線　(polyline)

１３．３．６多角形　(polygon)

１３．３．７パス　(path)

（１）初期位置　(M、m)

（２）終了　(Z、z)

（３）直線　(L、l)

（４）水平線　(H、h)

（５）垂直線　(V、v)

（６）円弧　(A、a)

（７）二次ベジェ曲線　(Q、q、T、t)

（８）三次ベジェ曲線　(C、c、S、s)

１３．４テキスト

１３．４．１テキスト　(text)

（１）文字位置

text 要素　（文字位置に関する属性）

（２）フォントスタイル

text 要素　（フォントスタイルに関する属性）

（３）文字の間隔

text 要素　（文字の間隔に関する属性）

（４）テキスト全体の幅

text 要素　（テキスト全体の幅に関する属性）