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"として扱われます。

font-weight

font-weightプロパティは、フォントのウェイト(weight)を指定する際に使われます。

font-weightプロパティによって、描かれる文字列のグリフの太さや暗さが指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、font-weightプロパティの値を指定する場合はfont-weight属性を利用します。

font-weight属性の値は、"normal"、"bold"、"bolder"、"lighter"、"100"、"200"、"300"、"400"、"500"、"600"、"700"、"800"、"900"、もしくは"inherit"です。
"normal"の場合は、"400"と同じです。
"bold"の場合は、"700"と同じです。
"bolder"の場合は、親要素のフォントと比べて1段階太いフォントに割り当てられた数字になります。そのようなフォントがない場合は数字だけが大きなものになります。また、親の値が"900"の場合は"900"になります。
"lighter"の場合は、親要素のフォントと比べて1段階細いフォントに割り当てられた数字になります。そのようなフォントがない場合は数字だけが小さなものになります。また、親の値が"100"の場合は"100"になります。
"100"から"900"までの数値は、数値の小さい順に順序づけられており、それぞれの値は1つ前の値と比べて少なくとも同じ太さのフォントを指定します。すなわち、数値の大きい方が太い(あるいは同じ太さ)フォントになります。

例えば、
font-weight="500"
のように書けば、フォントの太さはfont-weight="400"と書いた場合に比べて同じか太くなります。

例えば、
フォントウェイト400と700のフォントが利用できる場合、
font-size="bolder"
のように書けば、親要素のフォントウェイトが"400"の場合、"700"となります。また、親要素のフォントウェイトが"700"の場合は、"800"となります。

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

font-variant

font-variantプロパティは、小文字のグリフを指定する際に使われます。

font-variantプロパティによって、描かれる文字列の小文字のグリフが指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、font-variantプロパティの値を指定する場合はfont-variant属性を利用します。

font-variant属性の値は、"normal"、"small-caps"、もしくは"inherit"です。
"normal"の場合は、スモールキャピタル体に分類されないフォントを指定します。
"small-caps"の場合は、スモールキャピタル体に分類されるフォントを指定します。スモールキャピタル体は、大文字を小さくしたような字体です。本物のスモールキャピタル体のフォントが利用できない場合は、通常フォントの大文字を縮小したものを利用して表示したり、単に全ての文字を大文字で表示します。

例えば、
<text font-variant="small-caps">svg</text>
のように書けば、"svg"に対応したグリフはスモールキャピタル体になります。

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

font-style

font-styleプロパティは、フォントのスタイルを指定する際に使われます。

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

font-style属性の値は、"normal"、"italic"、"oblique"、もしくは"inherit"です。
"normal"の場合は、user agentのフォントデータベースで"normal"に分類されるフォントを指定します。
"italic"の場合は、user agentのフォントデータベースで"italic"に分類されるフォントを指定します。"italic"に分類されるフォントが利用できない場合は、"oblique"に分類されるフォントが利用されます。
"oblique"の場合は、user agentのフォントデータベースで"oblique"に分類されるフォントを指定します。実際には通常体を傾斜させていることもあります。

例えば、
font-style="italic"
のように書けば、イタリック体のフォントになります。

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

font-family

font-familyプロパティは、フォントファミリを指定する際に使われます。

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

font-family属性の値は、<family-name>型、<generic-family>型、もしくは"inherit"です。

<family-name>型の値は、フォントファミリ名になります。空白を含むフォントファミリ名は、引用符("や')で括られます。

例えば、
font-family="MS Mincho"
のように書けば、フォントファミリはMS明朝になります。

<generic-family>型の値は、"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"の5つです。
"serif"の場合は、線の端がはねていたり、末尾が太くあるいは細くなる等の特徴のあるグリフになります。日本語では明朝と呼ばれるものです。
"sans-serif"の場合は、線の端に広がりや、その他飾りのないグリフになります。日本語ではゴシックと呼ばれるものです。
"cursive"の場合は、一般に続け書きか、あるいはイタリック体以上に筆記体的特徴を有するグリフになります。
"fantasy"の場合は、文字を表してはいるが装飾が主体のグリフになります。
"monospace"の場合は、固定幅のグリフになります。

単一のフォントファミリが文書中のすべての文字を表示するのに十分なグリフを含むとは限らないので、一般に複数のフォントファミリをカンマ(",")で区切って並べたリスト(フォント集合)を指定します。
例えば、英語と日本語が混在する場合は、英語用の文字を含むフォントファミリと日本語用の文字を含むフォントファミリからなるフォント集合を指定します。フォント集合内のフォントが利用できない場合は、一般フォントファミリが利用されます。

font-family属性がない場合の扱いはuser agentに依存します。

text-anchor

text-anchorプロパティは、指定された位置に対する文字列の相対的な位置を指定する際に使われます。

text-anchorプロパティによって、text要素のx属性およびy属性によって指定された位置が文字列のどの部分の位置であるかが指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、text-anchorプロパティの値を指定する場合はtext-anchor属性を利用します。

text-anchor属性の値は、"start"、"middle"、"end"、もしくは"inherit"です。
"start"の場合は、文字列の開始点をx属性およびy属性によって指定された位置にあわせます。左から右へ書く場合には左揃えとなります。
(仕様には縦書き(上から下)の場合は上揃えになると書いてありますが、そもそも縦書きはSVG Tiny 1.2には存在しないような・・・)
"middle"の場合は、文字列の中央(描いて中央になる位置であって、中央の文字ではありません)をx属性およびy属性によって指定された位置にあわせます。
"end"の場合は、文字列の終了点をx属性およびy属性によって指定された位置にあわせます。左から右へ書く場合には右揃えとなります。

例えば、
<text x="100" y="100" text-anchor="start">テキスト</text>
のように書けば、文字列の左端のx座標が100になります。
<text x="100" y="100" text-anchor="end">テキスト</text>
のように書けば、文字列の右端のx座標が100になります。

text-anchor属性がない場合は"start"として扱われます。

tspan

tspan要素は、文字列のプロパティを変更する際に使われます。

tspan要素によって、text要素あるいはtextArea要素内の文字列の一部のプロパティが変更されます。

例えば、
<text x="100" y="100" fill="blue"><tspan fill="red">tspan</tspan>の例</text>
のように書けば、"tspan"に対応したグリフは赤、"の例"に対応したグリフの内部は青で塗りつぶされます。

tspan要素では、x、yおよびrotate属性は利用できません。すなわち、tspan要素を利用して位置を調整することはできません。
(仕様にはdx、dy属性も書いてありますが、そもそもdx、dy属性はSVG Tiny 1.2には存在しないような・・・)

baseline

baseline(基線)は、グリフのalignment-pointをつないだ線です。横書きでは文字の縦方向の位置を揃えるために横方向の線になります。

baselineの位置は、使用される文字の種類によって変わります。
横書きの場合、例えば、アルファベットでは大文字の下端に、極東の文字(表意文字ですかね)では下端か中央(日本語の文字は下端のようです)になります。北インドの文字では上端に近い横線の位置になります。
それぞれ、"alphabetic"、"ideographic"、"hanging"と呼ばれます。

text要素のy属性で指定される位置は、グリフのbaselineの位置に一致します。