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の位置に一致します。

text

text要素は、文字列を描く際に使われます。

text要素によって、text要素内の文字列に対応したグリフが1本のまっすぐな線にそって描かれます。
途中で改行は行われません。
パラメータとして、文字列の位置と回転角を指定します。
文字列は、方向やフォント等の指定にしたがって描かれます。

文字列の位置のx座標を指定する属性がx、y座標を指定する属性がyです。
回転角を指定する属性がrotateです。

例えば、
<text x="100" y="100">テキスト</text>
のように書けば、(100,100)に"テ"に対応したグリフが描かれます。"キ"以降は、直前のグリフの位置にadvance値を加えた位置に描かれます。
指定した座標がグリフに対してどの位置になるかは、フォント等によります。横書き(左から右)の日本語の場合は、通常左下になります。

x属性、y属性の値がカンマ(",")あるいは、半角スペースで区切られた複数の数字の場合は、順に1文字目のx座標(y座標)、2文字目のx座標(y座標)・・・となります。

例えば、
<text x="100,120" y="100,110">テキスト</text>
のように書けば、(100,100)に"テ"に対応したグリフが、(120,110)に"キ"に対応したグリフが描かれます。"ス"以降は、直前のグリフの位置にadvance値を加えた位置に描かれます。

rotate属性の値は、カンマ(",")あるいは、半角スペースで区切られた複数の数字で、順に1文字目の回転角、2文字目の回転角・・・となります。

例えば、
<text x="100" y="100" rotate="10,20">テキスト</text>
のように書けば、"テ"に対応したグリフは10度、"キ"、"ス"および"ト"に対応したグリフは20度回転して描かれます。位置には影響を与えません。

x属性およびy属性は指定されない場合は0として扱われます。すなわち、文字列の位置のx座標(あるいはy座標)が0ということです。
rotate属性で指定された値の数が文字の数よりも少ない場合は、多い分の文字についてはrotate属性で指定された最後の値が適用されます。rotate属性で指定された値の数が文字の数よりも多い場合は、多い分の回転角の値については無視されます。複数の文字が1つのグリフに割り当てられる場合には、最初の文字に対応する回転角が適用され2文字目以降に対応する回転角の値は無視されます。

vector-effect

vector-effectプロパティは、輪郭線の幅が変わらないことを指定する際に使われます。

vector-effectプロパティによって、描かれる図形の輪郭線の幅が拡大/縮小によって変わらないことが指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、vector-effectプロパティの値を指定する場合はvector-effect属性を利用します。

vector-effect属性の値は"non-scaling-stroke"、"none"、もしくは"inherit"です。
"non-scaling-stroke"の場合は、輪郭線の描かれる領域を"host coordinate space"(SVG 1.2では常に"screen coordinate space"と一致します)上で求めます。輪郭線の幅はtransform属性や拡大/縮小操作の影響を受けなくなります。
"none"の場合は、デフォルトの描画が適用されます。輪郭線の幅はtransform属性や拡大/縮小操作によって変化します。

例えば、
<path d="M10,10L100,100" stroke="#000000" fill="none" stroke-width="2" vector-effect="non-scaling-stroke"/>
のように書けば、描かれる図形の輪郭線は拡大/縮小操作によらず常に2ピクセル分の幅になります。

vector-effect属性がない場合は"none"として扱われます。

fill-rule

fill-ruleプロパティは、図形の内部領域を指定する際に使われます。

fill-ruleプロパティによって、描かれる図形の内部領域が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、fill-ruleプロパティの値を指定する場合はfill-rule属性を利用します。

fill-rule属性の値は"nonzero"、"evenodd"、もしくは"inherit"です。
内側か外側かを判定したい点から無限遠まで(と書いてありますが、SVG文書の図形が存在していない領域なら問題ないかと)直線を引き、その直線と図形の輪郭線が交わる箇所を調べます。
"nonzero"の場合は、図形の輪郭線が左から右に交わっていたら+1、右から左に交わっていたら-1とし、全ての交わった箇所について足し合わせます。結果が0でなければその点は図形の内部と、0であれば図形の外部と判定します。交わった向きによるので、図形がどのような順で描画されたのかに影響されます。
"evenodd"の場合は、交わった回数が奇数なら図形の内側、偶数なら図形の外側と判定します。右から左に交わるか左から右に交わるかは関係ありません。

例えば、
<path d="M50,50L150,50 150,150 50,150Z M75,75L125,75 125,125 75,125Z" fill-rule="nonzero">
のように書けば、(100,100)は図形の内部になります。
<path d="M50,50L150,50 150,150 50,150Z M75,75L125,75 125,125 75,125Z" fill-rule="evenodd">
のように書けば、(100,100)は図形の外部になります。

fill-rule属性がない場合は"nonzero"として扱われます。

fill-rule属性は任意の図形要素の属性となりますが、rect、circleおよびellipse要素ではどちらの値をとっても同じように描画されます。