14 January 2003, 翻訳更新: 2010/04/25

3 描画モデル


目次


3.1 概要

SVG の実装には、この章で述べられる描画(画像化)モデルに従って実装されたかのようにふるまうことが求められている。現実の実装がこのモデルに従わなくともよいが、実装でサポートされる全ての装置に現れる結果はこのモデルに適合しなければならない。

Implementations of SVG are expected to behave as though they implement a rendering (or imaging) model corresponding to the one described in this chapter. A real implementation is not required to implement the model in this way, but the result on any device supported by the implementation shall match that described by this model.

付録 適合性の要件 において、現実の実装がここでの記述から逸脱しても良い範囲を述べる。現実問題として、出力装置の限界(例えば、表現可能な色の範囲が限られているかもしれない)、あるいは精度の数学モデルを実装するための実地上の限界(例えば、現実の実行においては要求された基準が満たされる程度に曲線を直線で近似させることなど)により、実装が多少異なってくることが予想される。

The appendix on conformance requirements describes the extent to which an actual implementation may deviate from this description. In practice an actual implementation will deviate slightly because of limitations of the output device (e.g. only a limited range of colors might be supported) and because of practical limitations in implementing a precise mathematical model (e.g. for realistic performance curves are approximated by straight lines, the approximation need only be sufficiently precise to match the conformance requirements).

3.2 画家のモデル

SVG の描画では「画家のモデル」が用いられる。出力装置に対する一連の操作は 塗り の適用によって行われる。各々の操作は出力装置のある領域に対する塗りである。領域が前の操作による領域と重なりあう場合は、前の塗りが部分的あるいは完全に隠される。塗りが完全に不透明でなければ、出力装置に現れる結果は アルファ混色 で述べられる(数学的な)合成規則に従う。

SVG uses a "painters model" of rendering. Paint is applied in successive operations to the output device such that each operation paints over some area of the output device. When the area overlaps a previously painted area the new paint partially or completely obscures the old. When the paint is not completely opaque the result on the output device is defined by the (mathematical) rules for compositing described under Alpha Blending.

3.3 描画順序

SVG 文書片の要素には暗黙の塗り順序がある。文書片に現れる最初の要素が最初に塗られる。後に続く要素は前に塗られた要素の上に塗られる。

Elements in an SVG document fragment have an implicit drawing order, with the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements.

3.4 グループの描画

'g' などの要素をグループ化する要素 (コンテナ要素 を見よ)の描画においては、まず黒地透明( transparent black )に初期化された一時的なキャンバスが別途用意され、その上にすべての子要素が塗られる。次に、グループに フィルタ効果 が指定されていれば、それらが一時的キャンバスに適用され、キャンバスは変更される。変更された一時的キャンバスは、グループレベルの マスク とグループに指定された 不透明度 を計算に織り込んで、背景に合成される。

Grouping elements such as the 'g' (see container elements) have the effect of producing a temporary separate canvas initialized to transparent black onto which child elements are painted. Upon the completion of the group, any filter effects specified for the group are applied to create a modified temporary canvas. The modified temporary canvas is composited into the background, taking into account any group-level masking and opacity settings on the group.

3.5 要素の描画

個々の グラフィックス要素 はあたかもそれ自身が一つのグループをなすものとして描画される。したがって、グラフィックス要素ごとに別々の一時的なキャンバスが用意されることになる。グラフィックス要素は最初に一時的なキャンバスに塗られた後(下の 図形とテキストの塗りラスター画像の塗り を見よ)、その要素に指定された フィルタ効果 が適用され、変更された一時的なキャンバスが、その要素に指定された クリッピング, マスク, オブジェクトの不透明度 を計算に織り込んで背景に合成される。

Individual graphics elements are rendered as if each graphics element represented its own group; thus, the effect is as if a temporary separate canvas is created for each graphics element. he element is first painted onto the temporary canvas (see Painting shapes and text and Painting raster images below). Then any filter effects specified for the graphics element are applied to create a modified temporary canvas. The modified temporary canvas is then composited into the background, taking into account any clipping, masking and object opacity settings on the graphics element.

3.6 グラフィックス要素の種類

SVG においては、キャンバスへ描画され得るものとして、3種類の基本的な グラフィックス要素 がサポートされている:

SVG supports three fundamental types of graphics elements that can be rendered onto the canvas:

3.6.1 図形とテキストの塗り

図形とテキストには フィル (塗りを図形の内部に適用すること)および ストローク (塗りを図形の外形線に適用すること)が可能である。ストローク操作ではオブジェクトの外形線が中央線に据えられる。その結果、塗りの半分は図形の内部になされ、残り半分は図形の外部になされる。

Shapes and text can be filled (i.e., apply paint to the interior of the shape) and stroked (i.e., apply paint along the outline of the shape). A stroke operation is centered on the outline of the object; thus, in effect, half of the paint falls on the interior of the shape and half of the paint falls outside of the shape.

ある種の図形には指定した頂点に マーカシンボル (それ自身、図形, テキスト, 画像の任意の組み合わせで構成され得る)を描くことが可能である。それぞれのマーカシンボルは、あたかも SVG 文書木においてそのグラフィック内容がそれを利用している図形の直後に挿入されたかのようにして、塗られる。マーカシンボルのグラフィック内容はグラフィックス要素と同じ方法で描画される。マーカシンボルはテキストには適用できない。

For certain types of shapes, marker symbols (which themselves can consist of any combination of shapes, text and images) can be drawn at selected vertices. Each marker symbol is painted as if its graphical content were expanded into the SVG document tree just after the shape object which is using the given marker symbol. The graphical contents of a marker symbol are rendered using the same methods as graphics elements. Marker symbols are not applicable to text.

最初にフィル, 次にストローク, 最後にマーカシンボルが塗られる。各マーカシンボルは図形の外形線に沿って始点から終点に向かう順番で塗られる。

The fill is painted first, then the stroke, and then the marker symbols. The marker symbols are rendered in order along the outline of the shape, from the start of the shape to the end of the shape.

フィルとストロークはそれぞれ別々の不透明度を持つ。したがって図形においては、フィルとストローク操作に対して不透明度の異なる色を別々に指定することができる。

Each fill and stroke operation has its own opacity settings; thus, you can fill and/or stroke a shape with a semi-transparently drawn solid color, with different opacity values for the fill and stroke operations.

フィルとストローク操作は互いに全く独立した塗り操作である。したがって図形に対してフィルとストロークの両方を行った場合、ストロークの半分はフィルを上塗りする。

The fill and stroke operations are entirely independent painting operations; thus, if you both fill and stroke a shape, half of the stroke will be painted on top of part of the fill.

SVG では、フィルとストローク操作に適用できる塗りとして、次の種類のものが組み込まれている:

SVG supports the following built-in types of paint which can be used in fill and stroke operations:

3.6.2 ラスター画像の塗り

ラスター画像が描画される際には、出力装置上の領域に合わせた標本を生成をするために、元の標本が標準的なアルゴリズムを用いて「再標本化」される。再標本化における要件は 適合性基準 にて明らかにする。

When a raster image is rendered, the original samples are "resampled" using standard algorithms to produce samples at the positions required on the output device. Resampling requirements are discussed under conformance requirements.

3.7 塗られた領域へのフィルタの適用

SVG においては、任意の塗り操作に対しフィルタを適用することができる( フィルタ効果 を見よ)。

SVG allows any painting operation to be filtered. (See Filter Effects.)

この場合、まず塗り操作が黒地透明に初期化された中間処理用キャンバスに対してなされる。キャンバスの大きさは フィルタ効果 で与えられた規則に従って定まる。その後 フィルタ効果 に定義された処理を適用したものが結果となる。

In this case the result must be as though the paint operations had been applied to an intermediate canvas initialized to transparent black, of a size determined by the rules given in Filter Effects then filtered by the processes defined in Filter Effects.

3.8 クリッピング, マスク, オブジェクトの不透明度

SVG においては、任意の塗り操作に対し、その領域をクリッピングとマスクを用いて出力装置の一部分に限定させることができる。詳細は クリッピング, マスク, 合成 で述べる。

SVG allows any painting operation to be limited to a subregion of the output device by clipping and masking. This is described in Clipping, Masking and Compositing.

クリッピングにおいては、塗りの対象となる出力装置の領域を定義するパスが利用される。クリッピングが適用される全ての塗り操作では、出力装置のクリッピング領域内のみが影響を受ける。クリッピングパスを次のように考えることもできる:それは一種のマスクであり、領域外の画素はアルファ値0の黒、領域内の画素はアルファ値1の白となっているものである。塗り操作におけるクリッピングの「内部」はパスの内部を定義する規則と同じ規則により定義される。低解像度の出力装置においては、クリッピングパスは概してアンチエイリアス処理が施される( 'shape-rendering' プロパティ を見よ)。クリッピングについては クリッピングパス で述べる。

Clipping uses a path to define a region of the output device to which paint can be applied. Any painting operation executed within the scope of the clipping must be rendered such that only those parts of the device that fall within the clipping region are affected by the painting operation. A clipping path can be thought of as a mask wherein those pixels outside the clipping path are black with an alpha value of zero and those pixels inside the clipping path are white with an alpha value of one. "Within" is defined by the same rules used to determine the interior of a path for painting. The clipping path is typically anti-aliased on low-resolution devices (see 'shape-rendering'). Clipping is described in Clipping paths.

マスク処理においては、まず参照される SVG 要素の色チャンネルとアルファチャンネルの輝度を利用してマスク処理に用いるためのアルファ値が生成され、そのアルファ値がマスクを適用するグラフィックのアルファ値に掛け合わせられる。マスクについては マスク でとりあげる。

Masking uses the luminance of the color channels and alpha channel in a referenced SVG element to define a supplemental set of alpha values which are multiplied to the alpha values already present in the graphics to which the mask is applied. asking is described in Masking.

一連の描画操作に対し「大域的」不透明度を適用することにより、マスク演算を追加指定することもできる。この場合のマスクは、与えられた不透明度のアルファチャンネルと白色の色チャンネルを持つ、広さ無限の領域である( 'opacity' プロパティ を見よ)。

A supplemental masking operation may also be specified by applying a "global" opacity to a set of rendering operations. In this case the mask is infinite, with a color of white and an alpha channel of the given opacity value. (See 'opacity' property.)

いかなる場合においても、 SVG の実装は、あたかも全ての塗り操作とフィルタ演算が黒地透明に初期化された中間処理用のキャンバスに対して最初に実行されたかのように、ふるまわねばならない。しかる後、中間処理用のキャンバスのアルファ値に、クリッピングパスによる暗黙のアルファ値, マスクのアルファ値, 'opacity' プロパティ のアルファ値が順に掛け合わされる。この処理結果のキャンバスが 単純アルファ合成 によって背景に合成される。したがって、グループ不透明度 50% のもとに不透明な赤色に続けて不透明な緑色が塗られた場合、出力装置における結果は不透明度 50% の緑色で塗られたのと同じこととなる。何故なら、出力装置に中間キャンバスが描画される前の段階で、中間キャンバス上においては不透明な緑色が赤色の塗りを完全に覆うからである。

In all cases the SVG implementation must behave as though all painting and filtering is first performed to an intermediate canvas which has been initialized to transparent black. Then, alpha values on the intermediate canvas are multiplied by the implicit alpha values from the clipping path, the alpha values from the mask, and the alpha values from the 'opacity' property . The resulting canvas is composited into the background using simple alpha blending. Thus if an area of the output device is painted with a group opacity of 50% using opaque red paint followed by opaque green paint the result is as though it had been painted with just 50% opaque green paint. This is because the opaque green paint completely obscures the red paint on the intermediate canvas before the intermediate as a whole is rendered onto the output device.

3.9 親への合成

SVG 文書片は半透明にすることもできる。多くの環境においては(例えばウェブブラウザなど)、最終的な合成の段階で SVG 文書片が全体として半透明に背景のキャンバスと混色される。

SVG document fragments can be semi-opaque. In many environments (e.g., Web browsers), the SVG document fragment has a final compositing step where the document as a whole is blended translucently into the background canvas.