preserveAspectRatio

preserveAspectRatio属性は、ビューポートの領域にビューボックスの領域をどのようにあてはめるかを指定する際に使われます。

preserveAspectRatio属性によって、新しいビューポートを確立する要素の確立したビューポートにビューボックスの領域をあてはめる際に縦横比を保つか保たないかが指定されます。

preserveAspectRatio属性の値は、ビューポートの領域へのビューボックスの領域のあてはめ方です。

"defer"、配置方法、"meet"の3つの値を記述します。defer"と"meet"は必要がなければ省略できます。

配置方法は、ビューポートとビューボックスで縦横比が異なる場合の配置方法を示します。
値は、"none"、"xMinYMin"、"xMidYMin"、"xMaxYMin"、"xMinYMid"、"xMidYMid"、"xMaxYMid"、"xMinYMax"、"xMidYMax"、"xMidYMax"です。
"none"の場合は、縦横比を保ちません。ビューポートの領域いっぱいにビューボックスの領域をあてはめます。
縦横比を保つ場合は、"none"以外の値になります。
xMinは、ビューボックスの最も小さなx座標をビューポートの最も小さなx座標にそろえることを示します。
xMidは、ビューボックスの中央のx座標をビューポートの中央のx座標にそろえることを示します。
xMaxは、ビューボックスの最も大きなx座標をビューポートの最も大きなx座標にそろえることを示します。
YMinは、ビューボックスの最も小さなy座標をビューポートの最も小さなy座標にそろえることを示します。
YMidは、ビューボックスの中央のy座標をビューポートの中央のy座標にそろえることを示します。
YMaxは、ビューボックスの最も大きなy座標をビューポートの最も大きなy座標にそろえることを示します。
"meet"は、縦横比を保ち、ビューボックスの領域全体がビューポートの領域に収まるように、できるだけ拡大することを示します。ビューポートとビューボックスで縦横比が異なる場合は、ビューポートの領域の一部は何も描かれないことになります。

例えば、
<svg width="240" height="320" viewBox="0 0 80 160" preserveAspectRatio="none"/>
のように書けば、幅240、高さ320の矩形領域がビューポートとなり、(0,0)(80,0)(80,160)(0,160)で囲まれるビューボックスの領域が縦3倍横2倍に拡大され、あてはめられます。また、
<svg width="240" height="320" viewBox="0 0 80 160" preserveAspectRatio="xMidYMid meet"/>
のように書けば、ビューボックスの領域が縦横それぞれ2倍に拡大され、x座標y座標とも中央をそろえてあてはめられます。結果として、左右に空白の領域ができることになります。

値の先頭に"defer"と加えた場合は、参照される側のpreserveAspectRatio属性を利用することを示します。animation要素のpreserveAspectRatio属性において有効です。(仕様では、imageおよびvideo要素のpreserveAspectRatio属性においても有効となっていますが、SVG Tiny 1.2でSVG文書を参照するのはanimation要素だけのような・・・)

例えば、
<animation xlink:href="sample.svg" preserveAspectRatio="deferxMidYMid meet" width="100" height="100"/>
のように書けば、sample.svgのルートのsvg要素のpreserveAspectRatio属性の値が利用されます。sample.svgのルートのsvg要素にpreserveAspectRatio属性がない場合は、animation要素のpreserveAspectRatio属性の値から"defer"を除いた"xMidYmid meet"が適用されます。

preserveAspectRatio属性がない場合は"xMidYMid meet"として扱われます。
preserveAspectRatio属性の付いた要素のviewBox属性によってあるいは暗黙のうちにビューボックスが指定されない場合は、無視されます。

animation

animation要素は、他のSVG文書の内容を描く際に使われます。

animation要素によって、他のSVG文書の内容が参照され指定された矩形領域に描かれます。
パラメータとして、参照するSVG文書のIRIと参照したSVG文書の内容を描く矩形の左上の頂点(x軸y軸ともに値の小さくなる頂点)と幅、高さ等を指定します。

参照するSVG文書のIRIを指定する属性がxlink:hrefです。
参照したSVG文書の内容を描く矩形の左上の頂点のx座標を指定する属性がx、y座標を指定する属性がy、幅を指定する属性がwidth、高さを指定する属性がheightです。
ビューボックスとビューポートとの関係を指定する属性がpreserveAspectRatioです。

例えば、
<animation xlink:href="sample.svg" x="10" y="10" width="100" height="100"/>
のように書けば、sample.svgの内容が左上の頂点が(10,10)、幅100、高さ100の矩形の領域に描かれます。
animation要素は新しいビューポートを確立します。ビューポートはanimation要素のx、y、width、height属性によって決定されます。参照されるSVG文書のルートのsvg要素のx、y、width、height属性は利用されません。
preserveAspectRatio、viewport-fillおよびviewport-fill-opacity属性についても、animation要素の属性が利用されます。
ビューポートの領域に、参照されるSVG文書のルートのsvg要素のviewBox属性によって指定されるビューボックスの領域をあてはめます。

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

animation要素は、use要素のように文書の一部を参照するのではなく、全体を参照します。
表示領域外のSVG文書をあらかじめ読み込んでおくのか、あるいは必要になってから読み込むのかは定められていません。あらかじめ読み込むめの手がかりを与えたい場合にはprefetch要素を利用します。

opacity

opacityプロパティは、オブジェクトおよびグループの不透明度を指定する際に使われます。

opacityプロパティによって、オブジェクトおよびグループの不透明度が指定されます。
SVG Tiny 1.2ではimage要素の不透明度のみを指定することができます。
SVG Tiny 1.2では外部のCSSをサポートしていないので、opacityプロパティの値を指定する場合はopacity属性を利用します。

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

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

例えば、
opacity="1"
のように書けば、opacity属性の付いたimage要素によって描かれる画像がもともと透過色で描かれていない限り、背景は全く透過しません。

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

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

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)に囲まれる矩形領域になり、ビューポートにあてはめるために縮小されて表示されます。