text-rendering

text-renderingプロパティは、文字列の描画処理の最適化の手がかりを与える際に使われます。

text-renderingプロパティによって、文字列を描く際に速度、読みやすさ、幾何学的な正確さのどれを優先して行うかを判断するための手がかりが与えられます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、text-renderingプロパティの値を指定する場合はtext-rendering属性を利用します。

text-rendering属性の値は"auto"、"optimizeSpeed"、"optimizeLegibility"、"geometricPrecision"、もしくは"inherit"です。
"auto"の場合は、ユーザエージェントが速度、読みやすさ、幾何学的な正確さの適切なバランスをとるべきことを示しますが、読みやすさが最も重要視されるべきです。
"optimizeSpeed"の場合は、ユーザエージェントが速度を読みやすさや幾何学的な正確さよりも優先するべきことを示します。時として、アンチエイリアス処理を行わないことがあります。
"optimizeLegibility"の場合は、ユーザエージェントが読みやすさを速度や幾何学的な正確さよりも優先するべきことを示します。しばしば、アンチエイリアス処理、組み込みのフォントヒンティングの一方あるいは両方を行います。
"geometricPrecision"は、ユーザエージェントが幾何学的な正確さを速度や読みやすさよりも優先するべきことを示します。通常、フォントヒンティングを行いません。

例えば、
text-rendering="auto"
のように書けば、文字列を描く際にユーザエージェントが速度、読みやすさ、幾何学的な正確さのバランスをとるべきことを示します。

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

shape-rendering

shape-renderingプロパティは、図形の描画処理の最適化の手がかりを与える際に使われます。

shape-renderingプロパティによって、図形を描く際に速度、ふちの鮮明さ、幾何学的な正確さのどれを優先して行うかを判断するための手がかりが与えられます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、shape-renderingプロパティの値を指定する場合はshape-rendering属性を利用します。

shape-rendering属性の値は"auto"、"optimizeSpeed"、"crispEdges"、"geometricPrecision"、もしくは"inherit"です。
"auto"の場合は、ユーザエージェントが速度、ふちの鮮明さ、幾何学的な正確さの適切なバランスをとるべきことを示しますが、幾何学的な正確さが最も重要視されるべきです。
"optimizeSpeed"の場合は、ユーザエージェントが速度をふちの鮮明さや幾何学的な正確さよりも優先するべきことを示します。時として、アンチエイリアス処理を行わないことがあります。
"crispEdges"の場合は、ユーザエージェントがふちの鮮明さを速度や幾何学的な正確さよりも優先するべきことを示します。直線や曲線(可能であれば垂直線や水平線に近いものだけ)に対してアンチエイリアス処理を行わない場合や位置や線幅をデバイスの画素にあわせるように修正することがあります。
"geometricPrecision"は、ユーザエージェントが幾何学的な正確さを速度やふちの鮮明さよりも優先するべきことを示します。

例えば、
shape-rendering="auto"
のように書けば、図形を描く際にユーザエージェントが速度、ふちの鮮明さ、幾何学的な正確さのバランスをとるべきことを示します。

shape-rendering属性がない場合は"auto"として扱われます。

color-rendering

color-renderingプロパティは、色の補間や合成処理の最適化の手がかりを与える際に使われます。

color-renderingプロパティによって、色の補間や合成の処理について速度と品質のどちらを優先して行うかを判断するための手がかりが与えられます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、color-renderingプロパティの値を指定する場合はcolor-rendering属性を利用します。

color-rendering属性の値は"auto"、"optimizeSpeed"、"optimizeQuality"、もしくは"inherit"です。
"auto"の場合は、ユーザエージェントが速度と品質の適切なバランスをとるべきことを示しますが、品質が速度より重要視されるべきです。
"optimizeSpeed"の場合は、ユーザエージェントが速度を品質よりも優先するべきことを示します。RGB表示デバイスにおいては時として、色の補間や合成の処理をデバイスの色空間で行います。
"optimizeQuality"の場合は、ユーザエージェントが品質を速度よりも優先するべきことを示します。

例えば、
color-rendering="auto"
のように書けば、色の補間や合成の処理についてユーザエージェントが速度と品質のバランスをとるべきことを示します。

color-rendering属性がない場合は"auto"として扱われます。

SVG文書内へのリンク

fragment identifierを利用することで、SVG文書の特定の部分を表示することを指定することができます。

表示する部分を指定することで、例えば、初期表示を変えることができます。

SVGのfragment identifierには、対象とする要素をIDによって指定する場合と、SVG view specification(SVGビュー仕様)の場合があります。

対象とする要素をIDによって指定する場合は、SVG文書のIRIに続けて"#"と対象のIDを記述します。

例えば、
sample.svg#elem00
のように書けば、sample.svg中のIDがelem00である要素の中心がビューポートの中心に一致するように表示されます。elem00が<rect xml:id="elem00" width="200" height="100"/>で記述される矩形の場合、矩形の中心((100,50)の位置)がビューポートの中心になります。回転角は保たれます。
指定された要素の領域がビューポートよりも大きかった場合は、svg要素のzoomAndPan属性によって拡大縮小が制限されていなければ、指定された要素の全体が表示されるように縮小されます。
指定された要素が存在しない場合は、fragment identifierが指定されなかった場合と同じように扱われます。

SVG view specificationの場合は、SVG文書のIRIに続けて"#"と"svgView("、")"に囲まれた変換のリストを記述します。

例えば、
sample.svg#svgView(transform(scale(2)))
のように書けば、sample.svgにtransform(scale(2))という変換を適用した領域が表示されます。すなわち、svg要素のviewBox属性等によって決まる初期表示から2倍に拡大した状態で表示されます。
fragment identifierには半角スペースを用いることはできないので、SVG view specification中の数値の間はカンマ(",")で区切ります。

fragment identifierが指定されない場合は、初期表示はSVG文書のsvg要素のviewBox属性等によって決まります。

例えば、
sample.svg
のように書けば、sample.svgのsvg要素のviewBox属性の値が"0 0 100 100"の場合、左上の頂点が(0,0)、幅100、高さ100の矩形領域が表示されます。

a

a要素は、リンクを示す際に使われます。

a要素によって、ハイパーリンクやウェブリンクとしても知られるリンクが指定された要素に関連付けられます。
SVG Tiny 1.2ではXLink仕様で定義される単純リンクをサポートします。単純リンクは、ローカルとリモートの2つのリソースの間のローカルからリモートへの一方向リンクです。
クリック等によりリンクが活性化されるとローカルからリモートへリンクがたどられます。
パラメータとして、リモートのリソース(リンク先)のIRI等を指定します。

リモートのリソースのIRIを指定する属性がxlink:hrefです。
リンクの種類を指定する属性がxlink:type、リモートのリソースのプロパティについて記述されたリソースのIRIを指定する属性がxlink:role、その内容を人間にわかりやすいように記述する属性がxlink:title、リモートのリソースのローカルのリソースに対する関係について記述されたリソースのIRIを指定する属性がxlink:arcroleです。
リモートのリソースを再生する対象を指定する属性がtargetです。

a要素の子孫の要素がローカルのリソースとなります。

例えば、
<a xlink:href="sample.svg">
<rect x="10" y="10" width="200" height="100"/>
</svg>
のように書けば、左上の頂点が(10,10)、幅200、高さ100の矩形がローカルのリソース、sample.svgがリモートのリソースになり、矩形をクリックすることで表示内容がsample.svgの内容に変わります。

xlink:href属性は指定されない場合は空の値("")として扱われます。空の値が指定された場合にはリンクはたどられません。
xlink:type属性の値は常に"simple"です。xlink:type属性を記述する必要はありません。
target属性は指定されない場合は"_self"として扱われます。すなわち、リンクをたどることでSVG文書の内容が表示されている領域がリンク先のコンテンツに置き換えられます。

ref()

ref()は、svg要素のビューボックスをビューポートにあてはめる変換と追加の移動を適用することを指定します。
transform属性の値になります。

refは、ref(svg, x, y)のようにパラメータとして最大3つの値を指定します。
svgは決められた値です。xがsvg要素の座標系でのx軸方向の移動量、yがy軸方向の移動量になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx + xに、svg要素のビューボックスをビューポートにあてはめる変換を適用したもの
新しい座標系でのy = 元の座標系でのy + yに、svg要素のビューボックスをビューポートにあてはめる変換を適用したもの

新しい座標系は、ビューポートの座標系になります。すなわち、新しい座標系での(x,y)は表示領域内の位置を表します。

例えば、
<svg width="200" height="200" viewBox="0 0 100 100">
<g transform="ref(svg, 50, 50)">
</g>
</svg>
のように書けば、
ビューボックスは(0,0)を左上の頂点とする幅および高さが100の矩形領域、ビューポートは幅および高さが200の矩形領域であり、
ビューボックスをビューポートにあてはめる変換は2倍に拡大する変換となり、
新しい座標系でのx = 2 * (元の座標系でのx + 50)
新しい座標系でのy = 2 * (元の座標系でのy + 50)
のようになり、元の座標系での(0,0)は新しい座標系の(100,100)になります。

パラメータが1つしか指定されない場合は、xおよびyが指定されないものとして扱われます。

例えば、
<svg width="200" height="200" viewBox="0 0 100 100">
<g transform="ref(svg)">
</g>
</svg>
のように書けば、
新しい座標系でのx = 2 * 元の座標系でのx
新しい座標系でのy = 2 * 元の座標系でのy
のようになり、元の座標系での(50,50)は新しい座標系の(100,100)になります。

ref()は、移動、拡大/縮小、回転操作による位置の変化の影響を受けますが、図形が拡大/縮小、回転することはありません。
したがって、同じ大きさ、同じ向きで表示されつづけることになります。
パラメータが1つしか指定されない場合は、移動、拡大/縮小、回転操作の影響を受けません。
したがって、同じ位置に表示されつづけることになります。
(初期表示において3pxで表示された文字列は拡大しても3pxのままです。多分読めません。便利な変換だとは思いますが。)

変換の適用

transform属性による座標変換は、他の座標や長さに関する処理よりも前に適用されます。
したがって、他の座標や長さは新しい座標系での値に変換されて処理されます。

例えば、
<rect x="10" y="10" width="200" height="100" transform="scale(2)"/>
のように書けば、x属性、y属性、width属性、height属性(およびstroke-width等の記述されていないその他の属性)の値をtransform属性によって変換した後に矩形を描きます。
<g transform="scale(2)"/>
<rect x="10" y="10" width="200" height="100"/>
</g>
</g>
と同じにように、左上の頂点が(20,20)、幅400、高さ200の矩形が描かれます。

変換のリスト(2)

リスト内の変換は順に適用されます。

例えば、
<g transform="scale(2) translate(20,10)">
</g>
のように書けば、
<g transform="scale(2)">
<g transform="translate(20,10)">
</g>
</g>
と同じ変換を表します。
すなわち、x軸方向に20，y軸方向に10平行移動した後にx軸方向y軸方向ともに2倍に拡大されます。元の座標系での(0,0)は新しい座標系の(40,20)になります。

変換のリスト

変換のリストは、どのような変換を適用するのかを指定します。
transform属性の値になります。

変換のリストは、半角スペース、カンマ(",")、あるいは半角スペースとカンマ(",")で区切られたいくつかの変換の組み合わせで表します。

変換には、
matrix(行列)、
translate(平行移動)、
scale(拡大縮小)、
rotate(回転)、
skewX(x軸の傾き)、
skewY(y軸の傾き)
があります。

matrixは、matrix(a b c d e f)のようにパラメータとして6つの値を指定します。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = a × 元の座標系でのx + c × 元の座標系でのy + e
新しい座標系でのy = b × 元の座標系でのx + d × 元の座標系でのy + f

例えば、
matrix(1,0,0,1,20,10)
のように書けば、
新しい座標系でのx = 1 × 元の座標系でのx + 20
新しい座標系でのy = 1 × 元の座標系でのy + 10
のようになり、元の座標系での(0,0)は新しい座標系の(20,10)になります。

translateは、translate(tx ty)のようにパラメータとして最大2つの値を指定します。
txがx軸方向の移動量、tyがy軸方向の移動量になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx + tx
新しい座標系でのy = 元の座標系でのy + ty

例えば、
translate(20,10)
のように書けば、
新しい座標系でのx = 元の座標系でのx + 20
新しい座標系でのy = 元の座標系でのy + 10
のようになり、元の座標系での(0,0)は新しい座標系の(20,10)になります。

translate(tx, ty)はmatrix(1,0,0,1,tx,ty)と同じ変換を表します。

パラメータが1つしか指定されない場合は、tyが指定されないものとして扱われます。tyは指定されない場合は0として扱われます。
したがって、y軸方向の移動量が0の場合は省略できますが、y軸方向の移動量が0の場合は"0"と記述する必要があります。

scaleは、scale(sx sy)のようにパラメータとして最大2つの値を指定します。
sxがx軸方向の拡大率、syがy軸方向の拡大率になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = sx × 元の座標系でのx
新しい座標系でのy = sy × 元の座標系でのy

例えば、
scale(2,1)
のように書けば、
新しい座標系でのx = 2 × 元の座標系でのx
新しい座標系でのy = 1 × 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(20,10)になります。

scale(sx, sy)はmatrix(sx,0,0,sy,0,0)と同じ変換を表します。

パラメータが1つしか指定されない場合は、syが指定されないものとして扱われます。syは指定されない場合はsxと同じ値が指定されたものとして扱われます。
すなわち、y軸方向の拡大率と、y軸方向の拡大率は等しいものとして扱われます。

rotateは、rotate(a cx cy)のようにパラメータとして最大3つの値を指定します。
aが回転角度、cxが回転中心のx座標、cyが回転中心のy座標になります。
それぞれのパラメータの間は、カンマ(",")あるいは、半角スペース等(半角スペース以外にはタブや改行が該当します。文字コードで、#x20、#x9、#xD、#xAの4つ。)で区切ります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = cos(a) × 元の座標系でのx - sin(a) × 元の座標系でのy + (-cx × cos(a) + cy × sin(a) + cx)
新しい座標系でのy = sin(a) × 元の座標系でのx + cos(a) × 元の座標系でのy + (-cx × sin(a) - cy × cos(a) + cy)

例えば、
rotate(90, 10, 10)
のように書けば、
新しい座標系でのx = -1 × 元の座標系でのy + 10 × 1 + 10
新しい座標系でのy = 1 × 元の座標系でのx - 10 × 1 + 10
のようになり、元の座標系での(20,20)は新しい座標系の(0,20)になります。

回転中心が(0,0)の場合は、元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = cos(a) × 元の座標系でのx - sin(a) × 元の座標系でのy
新しい座標系でのy = sin(a) × 元の座標系でのx + cos(a) × 元の座標系でのy

rotate(a cx cy)はmatrix(cos(a),sin(a),-sin(a),cos(a),-cx×cos(a)+cy×sin(a)+cx,-cx×sin(a)-cy×cos(a)+cy)と同じ変換を表します。

aの単位は度です。
パラメータが1つしか指定されない場合は、回転中心が指定されないものとして扱われます。回転中心は指定されない場合は回転中心は(0,0)として扱われます。

skewXは、skewX(a)のようにパラメータとして1つの値を指定します。
aがx軸の傾き角度になります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx + tan(a) × 元の座標系でのy
新しい座標系でのy = 元の座標系でのy

例えば、
skewX(45)
のように書けば、
新しい座標系でのx = 元の座標系でのx + 1 × 元の座標系でのy
新しい座標系でのy = 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(20,10)になります。

skewX(a)はmatrix(1,0,tan(a),1,0,0)と同じ変換を表します。

aの単位は度です。

skewYは、skewY(a)のようにパラメータとして1つの値を指定します。
aがy軸の傾き角度になります。

元の座標系での(x,y)と新しい座標系での(x,y)は次のような関係になります。
新しい座標系でのx = 元の座標系でのx
新しい座標系でのy = tan(a) × 元の座標系でのx + 元の座標系でのy

例えば、
skewX(45)
のように書けば、
新しい座標系でのx = 元の座標系でのx
新しい座標系でのy = 1 × 元の座標系でのx + 元の座標系でのy
のようになり、元の座標系での(10,10)は新しい座標系の(10,20)になります。

skewX(a)はmatrix(1,tan(a),0,1,0,0)と同じ変換を表します。

aの単位は度です。

transform

transform属性は、図形を変形して描く際に使われます。

transform属性によって、図形に適用される座標系の変換が指定されます。

transform属性の値は、変換のリスト、制限を与える変換(ref())、もしくは"none"です。

例えば、
<g transform="matrix(1,0,0,1,20,10)">
<rect width="200" height="100"/>
</g>
のように書けば、g要素およびその子要素にmatrix(1,0,0,1,20,10)で表される変換が適用されることを表します。
結果として左上の左上の頂点が(20,10)、幅200、高さ100の矩形が描かれます。

全ての値が0の行列(matrix(0,0,0,0,0,0))が指定された場合は、その図形(および子要素)は描かれません。
正しくない値が指定された場合は、単位行列が適用されます。
transofrom属性がない場合は"none"として扱われます。"none"が指定された場合は、単位行列が適用されます。