第3章：レンダリングモデル

3.2. レンダリングツリー

SVG文書の最終的な描画表現の構成要素は、 文書モデル内の要素と1対1で対応しているわけではありません。 グラフィックの見た目は、代わりに並行した構造であるレンダリングツリーを反映し、 一部の要素が除外され、他の要素が繰り返されることがあります。

SVG名前空間の多くの要素は、 グラフィカル文書の構成要素を直接表すものではありません。 代わりに、グラフィカル効果やメタデータ、 他の要素を表現するための内容、 または特定条件下で表示される代替内容を定義します。 動的文書では、グラフィックの一部が インタラクションやアニメーションに応じて描画されたりされなかったりします。 これら描画されない要素は、レンダリングツリーには直接含まれません。

SVGはグラフィックの部分再利用をサポートするため、 一部の要素は複数回描画されます。 個々の描画は文脈依存のスタイリングを持ち、 異なるスケールや変形でラスタライズされる場合があります。

3.2.1. 定義

レンダリングツリー

レンダリングツリーは、SVG文書フラグメント内で描画される要素の集合です。 文書ツリーから、描画されない要素を除外し、 再利用グラフィックのために追加フラグメントを挿入することで生成されます。 グラフィックはレンダリングツリーの順序でペイント・合成されますが、 paint-orderプロパティによって並び替えられる場合があります。 視覚的なペイントを持たない要素もレンダリングツリーに含まれる場合があります。

描画要素

現在の文書のレンダリングツリーに直接表現を持つ要素。 use要素シャドウツリー内の インスタンスとして描画された要素を含みます。 再利用グラフィックの定義元として描画に影響するが、 自身は直接描画されない要素は含みません。 描画される要素と描画されない要素を参照してください。

描画されない要素

現在の文書のレンダリングツリーに直接表現を持たない要素。 ただし、再利用グラフィックやグラフィカル効果としてレンダリングツリーに影響を与える場合があります。 描画される要素と描画されない要素を参照してください。

再利用グラフィック

レンダリングツリーに含まれるが、文書モデル内に直接1つだけ対応する要素が存在しないグラフィックコンポーネント。 これらはシャドウDOM要素（‘use’要素による再利用グラフィックなど）や、 グラフィカル効果の一部として生成される画像フラグメント（パターンやマスクなど）として表現される場合があります。

絶対に描画されない要素

文脈やdisplayスタイル値に関係なく、 決して直接描画されない要素型。 以下の要素が含まれます： ‘clipPath’、 ‘defs’、 ‘desc’、 ‘linearGradient’、 ‘marker’、 ‘mask’、 ‘metadata’、 ‘pattern’、 ‘radialGradient’、 ‘script’、 ‘style’、 ‘title’。 また、‘symbol’要素で use要素シャドウツリーの インスタンスルートでないものも含みます。

描画可能要素

描画ツリー内に、グラフィック・コンテナ・テキスト・音声・アニメーションとして 直接表現を持つことができる要素型。 以下の要素が含まれます： ‘a’、 ‘audio’、 ‘canvas’、 ‘circle’、 ‘ellipse’、 ‘foreignObject’、 ‘g’、 ‘iframe’、 ‘image’、 ‘line’、 ‘path’、 ‘polygon’、 ‘polyline’、 ‘rect’、 ‘svg’、 ‘switch’、 ‘text’、 ‘textPath’、 ‘tspan’、 ‘unknown’、 ‘use’、 ‘video’。 また、‘symbol’要素で use要素シャドウツリーの インスタンスルートであるものも含みます。

描画可能要素は、ある文書や時点で描画される場合もあれば、されない場合もあります。

3.2.2. 描画される要素と描画されない要素

任意の時点で、すべてのSVG要素 （またはuse要素シャドウツリー内の要素インスタンス） は、描画されるか描画されないかのいずれかです。 要素が現在描画されているかどうかは、単に見た目だけでなく、インタラクティビティや幾何計算にも影響します。

要素が描画されないのは、次の4つの状況のいずれかです：

• 絶対に描画されない要素型
• 条件付き処理属性や ‘switch’ 構造により除外された要素
• displayプロパティの計算スタイル値がnoneである要素
• 他の描画されない要素の子孫要素

描画されない要素は：

• グラフィックに視覚的な効果を与えませんが、 他の要素がそれを参照して描画する場合は例外です。
• ‘clipPath’や ‘mask’ の子孫の場合、 クリッピングパスや マスクの幾何計算に寄与しません
• ポインターイベントに反応しません
• フォーカスを受け取れません
• バウンディングボックスの計算に寄与しません
• テキストレイアウトの際考慮されません

描画されない要素は文書のアクセシビリティツリーに表現されません。 それでも文書モデルの一部であり、 スタイル継承とカスケードに関与します。

3.2.3. 可視性の制御：‘display’と‘visibility’ プロパティの効果

SVGは、通常描画される要素の可視表示を切り替えるために、2つのプロパティ displayと visibility を使用します。 これらは静的文書では見た目上似た効果を持ちますが、概念的には区別されます。

display と visibility の定義についてはCSS 2.1仕様を参照してください。 [CSS2]

displayをnoneに設定すると、 要素は描画されなくなります。 グラフィック要素、 テキスト内容要素、 コンテナ要素に対して displayをnoneに設定すると、 その要素（およびその子孫）は レンダリングツリーの一部になりません。 displayは継承プロパティではないことに注意してください。

displayがnone以外の値である要素は通常通り描画されます。

displayプロパティは 描画可能要素のみに適用されます。 絶対に描画されない要素や 条件付き処理で描画されない要素にdisplay: noneを設定しても効果はありません。

displayプロパティは 当該要素の直接処理にのみ影響し、他の要素から参照されることは妨げません。 例えば、display: noneを‘path’要素に設定すると その要素は直接キャンバスに描画されなくなりますが、 ‘textPath’要素から参照されれば そのジオメトリはテキストパス処理に使用されます。

グラフィック要素や ‘use’要素に対して、 visibilityをhiddenまたは collapseに設定すると、 その要素は描画されません。 ただし、レンダリングツリーには残ります。 ポインターイベントに反応する場合もあり（pointer-eventsの値による）、 フォーカスを受け取る場合もあり（‘tabindex’の値による）、 バウンディングボックス計算やクリッピングパスに寄与し、 テキストレイアウトにも影響します。

visibilityプロパティは グラフィック要素、 テキスト内容要素、 および ‘a’要素（テキスト内容要素の子の場合）にのみ直接影響します。 visibilityは継承プロパティなので、 ‘use’要素や コンテナ要素自体には効果がありませんが、 継承値は子孫要素に影響する場合があります。

3.2.4. グラフィックの再利用

文書のある部分（または他の文書）で定義されたグラフィック内容が、 他の要素の描画に利用される場合があります。 レンダリングの観点からはグラフィックの再利用には2種類あります：

• シャドウDOM要素 （‘use’要素やペイントサーバー同士の参照で生成されるもの）
• 他の要素のグラフィカル効果の一部として再利用される内容 （マーカー、 ペイントサーバー要素、 ‘clipPath’、 ‘mask’の子内容など）

シャドウDOM要素は通常の要素と同様に描画されます。 ホスト要素（例：‘use’要素）がコンテナであり、 シャドウ内容がその子孫であるかのように振る舞います。 シャドウDOM要素のスタイルや幾何プロパティは、 ソース文書の対応要素とは独立して解決されます。 displayプロパティは シャドウ要素にも通常通り効果がありますが、 ‘symbol’要素には特別なルールがあります。

ブレンディングの観点では、 ‘use’要素は 非分離グループを形成します。

これに対して、 グラフィカル効果要素は自己完結したSVGフラグメントを生成し、 スタッキングコンテキストかつ 分離グループとして独立して描画されます。 このフラグメントのキャンバスはスケールされます。 グラフィカル効果要素の子内容はこのキャンバス上に描画・合成されます。 キャンバス全体は他のペイントレイヤーとの合成・ブレンド時にベクター画像として扱われます。

グラフィカル効果要素の子内容に対するdisplayプロパティは noneで設定した場合通常通り効果があり、そのサブツリーは描画に使われません。 ただし、グラフィカル効果要素やその祖先にdisplay: noneが設定されても 効果自体は変わりません。

3.3. ペインターモデル

SVGは「ペインターモデル」に基づいてレンダリングします。ペイント は出力デバイス上で連続的な操作で適用され、 各操作は出力デバイス上のある領域にペイントされ、 以前に描かれたペイントを覆い隠すこともあります。 各オブジェクトやグループがペイントされると、それは次のペイント操作の背景となります。 SVG 2は、各ペイント操作が背景とどのように相互作用するかを制御する 高度なブレンドモードおよび合成操作をサポートします。 これらのペイント操作のルールは Compositing and Blending Specificationで概説されています。

3.4. レンダリング順序

SVGの要素は三次元で配置されます。SVGビューポートの x軸・y軸上の位置に加えて、SVG要素はz軸上にも配置されます。z軸上の位置が、ペイントされる順序を決定します。

z軸上では、要素はスタッキングコンテキストにグループ化されます。

個々のグラフィック要素は、 非分離グループとして扱われます。 （塗り、線などの）グラフィック要素を構成する各要素（図形とテキストの描画参照）は そのグループのメンバーとなります。グループの描画方法も参照してください。

‘g’ 要素（コンテナ要素参照）などのグループ化要素は、合成グループを作成します。 同様に、‘use’ 要素はシャドウ内容のための合成グループを作成します。 Compositing and Blending 仕様は、合成グループの描画方法を規定しています。 SVGでは、グループにエフェクト（例：不透明度、フィルター、マスキング）を適用できます。 これらの効果は、グループの変形が適用される直前に、グループの描画結果に適用され、その後グループが グループ背景 と合成・ブレンドされます。 グループにこれらの効果を適用すると、そのグループは分離（isolated）されます。

よって、合成グループの描画は次のステップに従います：
グループが分離されている場合：

1. 初期背景を rgba(0,0,0,0)で初期化された新しいバッファに設定する
2. グループ内の グラフィック要素 や ‘g’ 要素の内容を 順序通りに 初期背景に描画する
3. グループキャンバスを修正するフィルターや他の効果を適用する

   高品質なレンダリングのため、フィルタプリミティブやその他のビットマップ効果は 操作座標空間で適用される必要があります。

4. グループの変形を適用する
5. グループキャンバスを グループ背景 とブレンド・合成する

そうでない場合（グループが分離されていない場合）：

1. 初期背景を グループ背景 に設定する
2. グループ内の グラフィック要素 や ‘g’ 要素の内容を 順序通りに 初期背景に描画する。 このとき、グループ変形は各要素が描画される際に適用される。

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="175" viewBox="0 0 1200 350">

  <!-- 背景の青い矩形 -->
  <rect x="100" y="100" width="1000" height="150" fill="blue"/>

  <!-- 赤い円（不透明度1からほぼ透明まで） -->
  <circle cx="200" cy="100" r="50" fill="red" opacity="1"/>
  <circle cx="400" cy="100" r="50" fill="red" opacity=".8"/>
  <circle cx="600" cy="100" r="50" fill="red" opacity=".6"/>
  <circle cx="800" cy="100" r="50" fill="red" opacity=".4"/>
  <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"/>

  <!-- 不透明グループ、不透明円 -->
  <g opacity="1">
    <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"/>
    <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"/>
  </g>
  <!-- グループ不透明度: .5、不透明円 -->
  <g opacity=".5">
    <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"/>
    <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"/>
  </g>
  <!-- 不透明グループ、半透明緑と赤 -->
  <g opacity="1">
    <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"/>
    <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"/>
  </g>
  <!-- 不透明グループ、半透明赤と緑 -->
  <g opacity="1">
    <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"/>
    <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"/>
  </g>
  <!-- グループ不透明度.5、半透明緑と赤 -->
  <g opacity=".5">
    <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"/>
    <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"/>
  </g>
</svg>

3.9. クリッピングとマスキング

SVGは以下のクリッピング／マスキング機能をサポートします：

• クリッピングパス：‘path’、‘text’、基本図形の任意の組み合わせや、基本図形によって輪郭が作られます（アンチエイリアスなしの場合、1ビットマスクとなり、輪郭の「内側」は表示され、外側はマスクされます）
• マスク：コンテナ要素であり、グラフィック要素や他のコンテナ要素を含むことができ、前景オブジェクトを現在の背景に合成するための半透明マスクとして使うグラフィックの集合を定義します。

クリッピングとマスキングの両方は、CSS Maskingモジュール[css-masking-1]で規定されています。

overflowプロパティのSVGにおける挙動まとめ

要素	初期値	UAスタイルシート	auto	visible	hidden	scroll
文書ルートsvg	visible	n/a	visible | scroll	visible	hidden	scroll
その他のsvg	visible	hidden	visible | scroll	visible	hidden	scroll
text	visible	hidden	visible	visible	hidden	hidden
pattern	visible	hidden	visible	visible	hidden	hidden
marker	visible	hidden	visible	visible	hidden	hidden
symbol	visible	hidden	visible	visible	hidden	hidden
image	visible	hidden	visible	visible	hidden	hidden
iframe	visible	hidden	visible | scroll	visible	hidden	scroll
foreignObject	visible	hidden	visible | scroll	visible	hidden	scroll

overflowプロパティは、CSS 2.1で定義されている同じパラメータ値と意味を持ちます（[CSS2]、11.1.1節）。ただし、以下の追加事項が適用されます：

• overflowプロパティの値が 'visible' の場合、プロパティは効果を持ちません（すなわち、クリッピング矩形は作成されません）。
• overflowプロパティが適用可能な要素について。 overflowプロパティの値が hiddenまたはscrollの場合、SVGビューポートの正確なサイズでクリップされます。
• scrollが‘svg’要素に指定され、ユーザーエージェントが画面上でスクロール機構（スクロールバーやパンナーなど）を使う場合は、SVGビューポートにその機構が必ず表示されるべきです。内容がクリップされているかどうかに関係なく表示されます。
• SVG内容内では、autoはすべての子要素の描画コンテンツがvisibleであることを意味します（スクロール機構によるか、クリップなしで描画されるか）。 scroll値でユーザーエージェントがスクロール機構を使う場合、autoはscrollとして扱われる場合があります。ユーザーエージェントにスクロール機構がない場合、内容はクリップされず、'scroll'値はhiddenとして扱われるか、autoはvisibleとして扱われます。