display

displayプロパティは、図形の描画を制御する際に使われます。

displayプロパティによって、図形もしくはコンテナ(子孫の図形を含めて)を描く/描かないが指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、displayプロパティの値を指定する場合はdisplay属性を利用します。
コンテナとなる要素は、svg、g、defs、aおよびswitchです。

display属性の値は"inline"、"block"、"list-item"、"run-in"、"compact"、"marker"、"table"、"inline-table"、"table-row-group"、"table-header-group"、"table-footer-group"、"table-row"、"table-column-group"、"table-column"、"table-cell"、"table-caption"、"none"、もしくは"inherit"です。
"inline"、"block"、"list-item"、"run-in"、"compact"、"marker"、"table"、"inline-table"、"table-row-group"、"table-header-group"、"table-footer-group"、"table-row"、"table-column-group"、"table-column"、"table-cell"、"table-caption"の場合は、図形を描くことを示します。
"none"の場合は、図形を描かないことを示します。

例えば、
display="none"
のように書けば、図形は描かれません。コンテナの場合は、子孫の図形も描かれません。

display="none"の場合は、visibility="hidden"の場合と異なり領域の計算を行いません。

display属性がない場合は"inline"として扱われます。すなわち、描かれます。

visibility

visibilityプロパティは、図形の描画を制御する際に使われます。

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

visibility属性の値は"visible"、"hidden"、"collapse"、もしくは"inherit"です。
"visible"の場合は、図形を描くことを示します。
"hidden"あるいは"collapse"の場合は、図形を描かないことを示します。

例えば、
visibility="hidden"
のように書けば、図形は描かれません。

tspan要素のvisibility属性の値が"hidden"の場合、文字列は描かれませんが、続く文字列のレイアウトのために領域は計算されます。

visibility属性がない場合は"visible"として扱われます。すなわち、描かれます。

stop

stop要素は、グラデーションの色の勾配を指定する際に使われます。

stop要素によって、グラデーション領域内の指定された位置の色が定義されます。
領域内の色は定義された色の間を連続的に変化します。
パラメータとして、グラデーション領域内の位置とその位置の色および不透明度を指定します。

グラデーション領域内の位置を指定する属性が、offsetです。
色を指定する属性が、stop-colorです。
不透明度を指定する属性が、stop-opacityです。

offset属性の値は、グラデーション領域内の位置を表す値です。
通常、0(直線のグラデーションにおいてはgradient vectorの始点、放射状のグラデーションにおいては円の中心)から1(直線のグラデーションにおいてはgradient vectorの終点、放射状のグラデーションにおいてはグラデーションの最も外側の円の円周)までの値になります。

stop-color属性の値は、"currentColor"、<color>、もしくは"inherit"です。
currentColorは、現在のcolorプロパティの値を表します。
<color>は、sRGB色空間の色を表します。

stop-opacity属性の値は不透明度を表す値、もしくは"inherit"です。
不透明度を表す値は、0.0(完全に透過)から1.0(全く透過しない)までの値になります。
0.0から1.0の範囲に収まらない値が指定された場合は、0.0(0.0よりも小さな場合)あるいは1.0(1.0よりも大きな場合)として扱われます。

例えば、
<linearGradient xml:id="gradient02">
<stop offset="0" stop-color="white"/>
<stop offset="1" stop-color="black"/>
</linearGradient">
のように書けば、白から黒へ連続的に変化する直線のグラデーションとなります。

グラデーションの効果を得るためには、linearGradient要素およびradialGradient要素は、子要素に最低2つのstop要素が必要です。
stop要素が1つもない場合は、参照した属性の値に"none"が指定されたものとして扱われます。
stop要素が1つの場合は、参照した属性の値にstop要素で指定された色が指定されたものとして扱われます。すなわち、単色となります。

例えば、
<linearGradient xml:id="gradient03">
<stop offset="0" stop-color="white"/>
</linearGradient">
のように書けば、白となります。

1つのlinearGradient要素およびradialGradient要素の子であるstop要素のoffset属性の値は、先に記述されたstop要素のoffset属性の値と同じか大きなものである必要があります。そうでない場合は、先に記述されたstop要素の最も大きなoffset属性の値と同じものとして扱われます。

例えば、
<linearGradient xml:id="gradient04">
<stop offset="0.6" stop-color="white"/>
<stop offset="0.5" stop-color="black"/>
</linearGradient">
のように書けば、
<linearGradient xml:id="gradient04">
<stop offset="0.6" stop-color="white"/>
<stop offset="0.6" stop-color="black"/>
</linearGradient">
と同じように扱われます。

2つのstop要素のoffset属性の値が同じ場合は、offset属性の位置で色が切り替わります。

例えば、
<linearGradient xml:id="gradient05">
<stop offset="0" stop-color="green"/>
<stop offset="0.5" stop-color="green"/>
<stop offset="0.5" stop-color="red"/>
<stop offset="1" stop-color="red"/>
</linearGradient">
<path d="M0,50L100,50" stroke="url(#gradient05)"/>
のように書けば、path要素の図形の輪郭線は(0,50)から(50,50)までが緑、(50,50)から(100,50)までが赤になります。

offset属性は指定されない場合は"0"として扱われます。すなわち、直線のグラデーションにおいてはgradient vectorの始点、放射状のグラデーションにおいては円の中心となります。
stop-color属性は指定されない場合は"black"として扱われます。すなわち、黒となります。
stop-opacity属性は指定されない場合は"1"として扱われます。すなわち、全く透過しません。

radialGradient

radialGradient要素は、放射状のグラデーションを定義する際に使われます。

radialGradient要素によって、ある色から別の色へ連続的に変化する放射状のグラデーションが定義されます。
記述されているだけでは描かれず、fillやstrokeプロパティの値として参照されることで参照した図形の色となります。
パラメータとして、グラデーションの最も外側の円、円の座標系を指定します。

グラデーションの最も外側の円の中心のx座標を指定する属性がcx、y座標を指定する属性がcyです。
グラデーションの最も外側の円の半径を指定する属性がrです。
ベクトルの座標系を指定する属性がgradientUnitsです。

利用する色は子のstop要素で指定します。

gradientUnits属性の値は、"userSpaceOnUse"と"objectBoundingBox"です。
"userSpaceOnUse"の場合は、グラデーションが参照された時点の座標系になります。
"objectBoundingBox"の場合は、グラデーションを参照した図形を包含する矩形領域の左上の頂点を(0,0)、右下の頂点を(1,1)とする座標系になります。

例えば、
<radialGradient xml:id="gradient01" cx="0.5" cy="0.5" r="0.5"/>
のように書けば、グラデーションの最も外側の円は、グラデーションを参照した図形を包含する矩形領域の左上の頂点を(0,0)、右下の頂点を(1,1)とする座標系の(0.5,0.5)を中心とした半径0.5の円になります。すなわち、矩形領域の中心から外側に色が変化するグラデーションとなります。

グラデーションの領域が、参照した図形の領域よりも狭かった場合は、残りの部分はグラデーションの端と同じ色になります。

cx属性、cy属性およびr属性は指定されない場合は0.5として扱われます。
cx属性、cy属性およびr属性が全て指定されない場合は、(0.5,0.5)を中心とする半径0.5の円になります。
gradientUnits属性は指定されない場合はobjectBoundingBoxとして扱われます。すなわち、グラデーションを参照した図形を包含する矩形領域の左上の頂点を(0,0)、右下の頂点を(1,1)とする座標系になります。

linearGradient

linearGradient要素は、直線のグラデーションを定義する際に使われます。

linearGradient要素によって、ある色から別の色へ連続的に変化する直線のグラデーションが定義されます。
記述されているだけでは描かれず、fillやstrokeプロパティの値として参照されることで参照した図形の色となります。
パラメータとして、グラデーションを示すベクトル(gradient vector)、ベクトルの座標系を指定します。

gradient vectorの始点のx座標を指定する属性がx1、y座標を指定する属性がy1です。
gradient vectorの終点のx座標を指定する属性がx2、y座標を指定する属性がy2です。
gradient vectorの座標系を指定する属性がgradientUnitsです。

利用する色は子のstop要素で指定します。

gradientUnits属性の値は、"userSpaceOnUse"と"objectBoundingBox"です。
"userSpaceOnUse"の場合は、グラデーションが参照された時点の座標系になります。
"objectBoundingBox"の場合は、グラデーションを参照した図形を包含する矩形領域の左上の頂点を(0,0)、右下の頂点を(1,1)とする座標系になります。

例えば、
<linearGradient xml:id="gradient00" x1="0" y1="0" x2="1" y2="0"/>
のように書けば、gradient vectorは、グラデーションを参照した図形を包含する矩形領域の左上の頂点を(0,0)、右下の頂点を(1,1)とする座標系の(0,0)から(1,0)になります。すなわち、水平方向に色が変化するグラデーションとなります。

x1属性とx2属性に指定された値が等しく、かつ、y1属性とy2属性に指定された値が等しい場合は、全体が最後に指定された色になります。すなわち、単色となります。

グラデーションの領域が、参照した図形の領域よりも狭かった場合は、残りの部分はグラデーションの端と同じ色になります。

x1属性、y1属性およびy2属性は指定されない場合は"0"として扱われます。
同様に、x2属性は指定されない場合は"1"として扱われます。
x1属性、y1属性、x2属性およびy2属性が全て指定されない場合は、gradient vectorの始点は(0,0)、終点は(1,0)になります。
gradientUnits属性は指定されない場合は"objectBoundingBox"として扱われます。すなわち、グラデーションを参照した図形を包含する矩形領域の左上の頂点を(0,0)、右下の頂点を(1,1)とする座標系になります。

カラーキーワード

カラーキーワードで指定される色は、以下のようになります。

blackは、rgb( 0, 0, 0)と同じ色です。
silverは、rgb(192, 192, 192)と同じ色です。
grayは、rgb(128, 128, 128)と同じ色です。
whiteは、rgb(255, 255, 255)と同じ色です。
maroonは、rgb(128, 0, 0)と同じ色です。
redは、rgb(255, 0, 0)と同じ色です。
purpleは、rgb(128, 0, 128)と同じ色です。
fuchsiaは、rgb(255, 0, 255)と同じ色です。
greenは、rgb( 0, 128, 0)と同じ色です。
limeは、rgb( 0, 255, 0)と同じ色です。
oliveは、rgb(128, 128, 0)と同じ色です。
yellowは、rgb(255, 255, 0)と同じ色です。
navyは、rgb( 0, 0, 128)と同じ色です。
blueは、rgb( 0, 0, 255)と同じ色です。
tealは、rgb( 0, 128, 128)と同じ色です。
aquaは、rgb( 0, 255, 255)と同じ色です。

System Paint Servers

システムカラーを利用する場合は、system paint serverを表す名前を指定します。

system paint serversで指定される色は、以下のようになります。

ActiveBorderは、アクティブウィンドウのボーダの色です。
ActiveCaptionは、アクティブウィンドウのキャプションの色です。
AppWorkspaceは、multiple document interfaceの背景の色です。
Backgroundは、デスクトップの背景の色です。
ButtonFaceは、3次元表現された要素(ボタン?)の表面の色です。
ButtonHighlightは、3次元表現された要素(ボタン?)の光源とは遠い側の面の色(11.14.1節の記述は、Dark shadow for three-dimensional display elements)です。
ButtonShadowは、3次元表現された要素(ボタン?)の影の色です。
ButtonTextは、ボタンのテキストの色です。
CaptionTextは、キャプションのテキストの色です。
GrayTextは、選択できないテキストの色です。
Highlightは、選択された項目の色です。
HighlightTextは、選択された項目のテキストの色です。
InactiveBorderは、非アクティブウィンドウのボーダの色です。
InactiveCaptionは、非アクティブウィンドウのキャプションの色です。
InactiveCaptionTextは、非アクティブキャプションのテキストの色です。
InfoBackground は、ツールチップの背景の色です。
InfoTextは、ツールチップのテキストの色です。
Menuは、メニューの背景の色です。
MenuTextは、メニューのテキストの色です。
Scrollbarは、ストロークバーの色です。
ThreeDDarkShadowは、3次元表現された要素の光源とは遠い側の面の色です。
ThreeDFaceは、3次元表現された要素の表面の色(11.14.1節の記述では、ButtonFaceと同じ説明)です。
ThreeDHighlightは、3次元表現された要素のハイライトの色です。
ThreeDLightShadowは、3次元表現された要素の光源の側の面の色です。
ThreeDShadowは、3次元表現された要素の光源とは遠い側の面の色(11.14.1節の記述では、ButtonHighlight、ThreeDDarkShadowと同じ説明)です。
Windowは、ウィンドウの背景の色です。
WindowFrameは、ウィンドウのフレームの色です。
WindowTextは、ウィンドウのテキストの色です。

color

colorプロパティは、currentColorを指定する際に使われます。

colorプロパティによって、currentColorキーワードによって指定される色が指定されます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、colorプロパティの値を指定する場合はcolor属性を利用します。
CSS2のcolorプロパティはフォアグラウンドカラーを指定しますが、SVGのcolorプロパティは図形や文字の色に直接の影響を与えません。
currentColorを指定することのできるプロパティは、fill、stroke、solid-colorおよびstop-colorです。

color属性の値は<color>型、もしくは"inherit"です。

例えば、
color="red"
のように書けば、
fill="currentColor"
のようにcurrentColorキーワードによって指定される色が赤になります。

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

solidColor

solidColor要素は、ペイントサーバを定義する際に使われます。

solidColor要素によって、不透明度の設定された単色を提供する組み込みペイントサーバが定義されます。
定義されたペイントサーバは、同一リソースから参照されます。
パラメータとして、色と不透明度を指定します。

色を指定する属性がsolid-colorです。
不透明度を指定する属性がsolid-opacityです。

solid-color属性の値は、"currentColor"、<color>、もしくは"inherit"です。
currentColorは、現在のcolorプロパティの値を表します。
<color>は、sRGB色空間の色を表します。

solid-opacity属性の値は不透明度を表す値、もしくは"inherit"です。
不透明度を表す値は、0.0(完全に透過)から1.0(全く透過しない)までの値になります。
0.0から1.0の範囲に収まらない値が指定された場合は、0.0(0.0よりも小さな場合)あるいは1.0(1.0よりも大きな場合)として扱われます。

例えば、
<solidColor xml:id="solidColor00" solid-color="red" solid-opacity="0.5"/>
のように書けば、不透明度0.5の赤を提供するペイントサーバが定義されます。このペイントサーバは"solidColor00"という名前で参照することができます。

solid-color属性は指定されない場合は"black"として扱われます。すなわち、黒となります。
solid-opacity属性は指定されない場合は"1"として扱われます。すなわち、全く透過しません。

image-rendering

image-renderingプロパティは、ラスタ画像の処理の最適化の手がかりを与える際に使われます。

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

image-rendering属性の値は"auto"、"optimizeSpeed"、"optimizeQuality"、もしくは"inherit"です。
"auto"の場合は、ユーザエージェントが速度と品質の適切なバランスをとるべきことを示しますが、品質が速度より重要視されるべきです。少なくともnearest neighbor resamplingと同等の品質のアルゴリズムが用いられるべきですが、bilinear resamplingが強く好まれます。
"optimizeSpeed"の場合は、ユーザエージェントが速度を品質よりも優先するべきことを示します。少なくともnearest neighbor resamplingと同等の品質の高速に描くことのできるアルゴリズムが用いられるべきです。
"optimizeQuality"の場合は、ユーザエージェントが品質を速度よりも優先するべきことを示します。少なくともbilinear resamplingと同等の品質のアルゴリズムが用いられるべきです。

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

image-rendering属性の値にかかわらず、リサンプリングは24bit色空間で行われなければなりません。

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