image

image要素は、他の画像ファイルの内容を描く際に使われます。

image要素によって、他の画像ファイルの内容が参照され指定された矩形領域に描かれます。
SVG Tiny 1.2ではimage要素はラスタ形式の画像ファイルを参照します。SVG Tiny 1.2に準拠したビューアはPNGおよびJPEG形式をサポートします。SVG形式のファイルを参照する場合はanimation要素を利用します。
パラメータとして、参照する画像ファイルのIRIと参照した画像ファイルの内容を描く矩形の左上の頂点(x軸y軸ともに値の小さくなる頂点)と幅、高さ等を指定します。

参照する画像ファイルのIRIを指定する属性がxlink:href、画像のメディアタイプを示す属性がtypeです。
参照した画像ファイルの内容を描く矩形の左上の頂点のx座標を指定する属性がx、y座標を指定する属性がy、幅を指定する属性がwidth、高さを指定する属性がheightです。
ビューボックスとビューポートとの関係を指定する属性がpreserveAspectRatioです。

例えば、
<image xlink:href="sample.png" x="10" y="10" width="100" height="100"/>
のように書けば、sample.pngの内容が左上の頂点が(10,10)、幅100、高さ100の矩形の領域に描かれます。
image要素は新しいビューポートを確立します。ビューポートの領域に参照される画像ファイルのビューボックスの領域をあてはめます。ビューボックスの領域はラスタ画像の全体になります。
例えば、sample.pngの内容が200×200ピクセルの画像であれば、縮小されて描かれます。

x属性およびy属性は指定されない場合は0として扱われます。すなわち、参照する画像ファイルの内容を描く矩形の左上の頂点のx座標(あるいはy座標)が0ということです。
width属性およびheight属性は必ず指定する必要があります。どちらかを0にすると何も描画されません。また、負の値を指定してはいけません。
xlink:href属性は指定されない場合は空の値("")として扱われます。空の値が指定された場合には何も描画されません。

image要素の処理結果は4チャンネルRGBAとなります。参照される画像が3チャンネルRGBの場合には不透明度を一様に1とする4チャンネルRGBAに変換されます。
不透明度を指定する場合はfill-opacity属性ではなく、opacity属性を利用します。
表示領域外の画像ファイルをあらかじめ読み込んでおくのか、あるいは必要になってから読み込むのかは定められていません。あらかじめ読み込むめの手がかりを与えたい場合にはprefetch要素を利用します。

use

use要素は、他の要素を参照する際に使われます。

use要素によって、他の要素が参照され指定された位置に描かれます。
パラメータとして、参照する要素のIRIと参照した要素を配置する座標を指定します。
参照された要素の(0,0)が指定された座標になるように平行移動して描かれます。

参照する要素のIRIを指定する属性がxlink:href、参照した要素を配置するx座標を指定する属性がx、y座標を指定する属性がyです。

例えば、
<use xlink:href="#elem00" x="100" y="100"/>
のように書けば、"elem00"で参照される要素(とその子孫)が(100,100)の位置に描かれます。
"elem00"で参照される要素が
<rect xml:id="elem00" width="200" height="100"/>
であれば、(100,100)を左上の頂点の座標として、幅200高さ100の矩形が描かれます。

x属性およびy属性は指定されない場合は0として扱われます。
xlink:href属性は指定されない場合は空の値("")として扱われます。空の値が指定された場合には何も描画されません。

use要素は、animation要素のように文書全体を参照するのではなく、一部を参照します。
svg要素を参照することはできません。また、use要素もしくはuse要素を子孫に持つ要素を参照して参照を循環させてはいけません。

defs

defs要素は、参照される要素を記述する際に使われます。

defs要素によって、defs要素の子孫の要素が他から参照される要素になります。
記述されているだけでは描かれず、他から参照されることで初めて描かれます。

例えば、
<rect xml:id="rect00" width="200" height="100"/>
のように書けば、矩形が描かれますが、
<defs>
<rect xml:id="rect00" width="200" height="100"/>
</defs>
のように書けば、何も描かれません。他から参照されることによって描かれます。

参照される要素は、読みやすさ等の観点から、defs要素の子孫として記述することが推奨されています。
また、参照のため、defs要素を他の要素よりも前に記述するべきです。

g

g要素は、いくつかの図形要素をグループ化する際に使われます。

g要素によって、g要素の子孫の要素に対応した図形等が1つのグループとしてまとめられます。

グループ化された要素にxml:id属性を利用して名前をつけることで、複数の図形要素を1つの名前で参照することができます。

例えば、
<g xml:id="g00">
<rect x="0" y="0" width="200" height="100"/>
<rect x="0" y="150" width="200" height="100"/>
</g>
のように書けば、2つの矩形がグループ化されます。このグループは"g00"という名前で参照することができます。

viewport-fill-opacity

viewport-fill-opacityプロパティは、ビューポートの不透明度を指定する際に使われます。

viewport-fill-opacityプロパティによって、確立されるビューポートの内部を塗りつぶす色の不透明度が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、viewport-fill-opacityプロパティの値を指定する場合はviewport-fill-opacity属性を利用します。

viewport-fill-opacity属性の値は不透明度を表す値、もしくは"inherit"です。

不透明度を表す値は、0.0(完全に透過)から1.0(全く透過しない)までの値になります。

例えば、
viewport-fill-opacity="1"
のように書けば、viewport-fill-opacity属性の付いた要素によって確立されるビューポートの内部はviewport-fill属性によって指定された色で塗りつぶされ、背景は全く透過しません。

0.0から1.0の範囲に収まらない値が指定された場合は、0.0(0.0よりも小さな場合)あるいは1.0(1.0よりも大きな場合)として扱われます。

viewport-fill-opacity属性がない場合は"1"として扱われます。すなわち、全く透過しません。

viewport-fill

viewport-fillプロパティは、ビューポートの色を指定する際に使われます。

viewport-fillプロパティによって、確立されるビューポートの内部を塗りつぶす色が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、viewport-fillプロパティの値を指定する場合はviewport-fill属性を利用します。

viewport-fill属性の値は"none"、<paint>型、もしくは"inherit"です。

例えば、
viewport-fill="red"
のように書けば、viewport-fill属性の付いた要素によって確立されるビューポートの内部が赤で塗りつぶされます。

"none"が指定された場合は、そのビューポートの内部は塗りつぶされません。

viewport-fill属性がない場合は"none"として扱われます。すなわち、塗りつぶされません。

ビューポートの塗りつぶしは最初に行われます。したがって、viewport-fill属性で指定された色は背景色のようになります。

初期表示

SVG文書片の初期表示領域や大きさは、ビューポートとビューボックスによって決まります。
ビューポートは、SVG文書片の内容を描く矩形領域です。また、ビューボックスは、SVG文書片中の表示される領域です。

SVG文書片が他の文書に埋め込まれていない場合には、svg要素のwidth属性およびheight属性によってビューポートの幅、高さが指定されます。

ビューボックスが指定されていない場合、初期に表示されるSVGの領域は、左上の頂点の座標を(0,0)として、SVGの座標系での1単位がビューポートの1ピクセルと等しくなるように設定された領域になります。すなわち、左上の頂点の座標が(0,0)、幅および高さがそれぞれビューポートの幅および高さのピクセル数に等しい領域となります。

例えば、
<svg width="240" height="320">
のように書けば、ビューポートの幅および高さはそれぞれ240、320になります。また、初期表示される領域は、(0,0)(240,0)(240,320)(0,320)に囲まれる矩形領域になります。

ビューボックスを指定することで、表示領域のピクセル数よりも大きな座標値を持つSVG文書片の全体を表示することや、小さな座標値の範囲に記述されたSVG文書片の内容を表示領域全体に拡大して表示することができます。

ビューボックスは、svg要素のviewBox属性によって指定されます。

例えば、
<svg width="240" height="320" viewBox="0 0 480 640">
のように書けば、ビューポートの幅および高さはそれぞれ240、320になります。また、初期表示される領域は(0,0)(480,0)(480,640)(0,640)に囲まれる矩形領域になり、ビューポートにあてはめるために縮小されて表示されます。

viewBox

viewBox属性は、ビューポートにあてはめる領域を指定する際に使われます。

viewBox属性によって、新しいビューポート(viewport)を確立する要素の確立したビューポートにあてはめる領域が指定されます。指定された領域は、拡大あるいは縮小されてビューポートの領域にあてはめられます。新しいビューポートを確立する要素は、svg、animation、imageおよびvideoです。

viewBox属性の値は、確立されたビューポートにあてはめる領域、もしくは"none"です。

ビューポートにあてはめる領域は、左上の頂点のx座標、y座標、領域の幅、高さの4つの数値です。それぞれの数値の間は半角スペース、カンマ(",")、あるいは半角スペースとカンマ(",")で区切ります。区切りのカンマは1つです。幅および高さのどちらかを0にすると何も描画されません。また、負の値を指定してはいけません。
"none"の場合は、viewBox属性が指定されていない場合と同じになります。

例えば、
<svg viewBox="0 0 240 320">
のように書けば、svg文書片の(0,0)(240,0)(240,320)(0,320)に囲まれる矩形領域が(必要なら拡大あるいは縮小されて)ビューポートにあてはめられます。

svg

svg要素は、SVG文書片(document fragment)を定義するために使われます。

svg要素によって、svg要素とsvg要素の内側が1つのSVG文書片となります。
SVG Tiny 1.2ではSVG文書片に入れ子のsvg要素を含めることはことはできないので、SVG文書片中のsvg要素は1つだけになります。
パラメータとして、バージョン、プロファイル、SVGの幅、高さ、表示する領域等を指定します。

バージョンを指定する属性がversion、プロファイルを指定する属性がbaseProfileです。
SVG文書片の内容を描く矩形領域(viewport)の幅を指定する属性がwidth、高さを指定する属性がheightです。
SVG文書片中の表示する領域(viewbox)を指定する属性がviewBox、viewboxとviewportとの関係を指定する属性がpreserveAspectRatioです。
SVGコンテンツが時間と共に変化する場合に代表する静止イメージが描かれる時刻を指定する属性がsnapshotTime、時間軸を遡ることの可否を指定する属性がplaybackOrder、時刻0を指定する属性がtimelineBeginです。
デフォルトのスクリプト言語を指定する属性がcontentScriptTypeです。
拡大縮小スクロールの可否を指定する属性がzoomAndPanです。

version属性の値は、"1.0"、"1.1"、もしくは"1.2"です。
baseProfile属性の値は、"tiny"と"none"です。
SVG Tiny 1.2に対応するのは、versin="1.2"およびbaseProfile="tiny"です。

width属性、height属性の値は、SVG文書片の内容を描く矩形領域(viewport)の幅あるいは高さの長さです。
例えば、
<svg width="240" height="320" version="1.2" baseProfile="tiny"/>
のように書けば、SVGのviewportは幅240、高さ320の矩形領域になります。

snapshotTime属性の値は、<Clock-value>型、もしくは"none"です。
"none"の場合は、snapshotTimeが利用できません。
playbackOrder属性の値は、"forwardOnly"と"all"です。
"forwardOnly"の場合は、時間軸を遡ることはできません。user agentの機能、ハイパーリンクやスクリプトによって時間軸を遡る方法は提供してはいけません。
"all"の場合は、時間軸を遡ることができます。例えば、いったん10秒まで再生した後に5秒から再生しなおすようなことができます。
timelineBegin属性の値は、"onLoad"と"onStart"です。時刻0を"onLoad"の場合はsvg要素のloadイベントの時刻、"onStart"の場合はsvg要素の開始タグ(start tag)が解釈、処理された時刻にします。

例えば、
<svg snapshotTime="5" timelineBegin="onLoad" version="1.2" baseProfile="tiny"/>
のように書けば、SVGコンテンツの静止イメージは5秒の時点のものとなります。時刻0はsvg要素のloadイベントの時刻になります。

baseProfile属性は指定されない場合は"none"として扱われます。
width属性およびheight属性は指定されない場合は"100%"として扱われます。どちらかを0にすると何も描画されません。また、負の値を指定してはいけません。
snapshotTime属性は指定されない場合は"none"として扱われます。
playbackOrder属性は指定されない場合は"all"として扱われます。
timelineBegin属性は指定されない場合は"onLoad"として扱われます。
contentScriptType属性は指定されない場合は"application/ecmascript"として扱われます。
zoomAndPan属性は指定されない場合は"magnify"として扱われます。

font-size

font-sizeプロパティは、フォントの大きさを指定する際に使われます。

font-sizeプロパティによって、描かれる文字列のフォントの大きさがbaseline間の間隔として指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、font-sizeプロパティの値を指定する場合はfont-size属性を利用します。

font-size属性の値は、<absolute-size>型、<relative-size>型、<length>型、もしくは"inherit"です。

<absolute-size>型の値は、小さいものから順に"xx-small"、"x-small"、"small"、"medium"、"large"、"x-large"、"xx-large"の7つです。コンピュータの画面においては、1.2倍ずつ大きさが変わります。

例えば、
font-size="large"
のように書けば、フォントの大きさはfont-size="medium"と書いた場合に比べて1.2倍大きくなります。

<relative-size>型の値は、"larger"と"smaller"です。親要素のフォントの大きさと比べて"larger"の場合は1段階大きな値、"smaller"の場合は1段階小さな値となります。

例えば、
font-size="larger"
のように書けば、親要素のフォントの大きさが"medium"の場合、"large"となります。

<length>型の値は、フォントの大きさを表す数値です。

例えば、
font-size="10"
のように書けば、フォントの大きさは10となります。

font-size属性がない場合は"medium"として扱われます。