第5章:文書構造

5.1. SVG文書フラグメントの定義:‘svg’ 要素

5.1.1. 概要

SVG文書フラグメントは、svg 要素内に含まれる任意数のSVG要素で構成されます。

SVG文書フラグメントは、空のフラグメント(すなわち svg 要素内に内容がない場合)から、rect など単一のSVG グラフィック要素のみを含む非常に単純なSVG文書フラグメント、さらにはコンテナ要素グラフィック要素が複雑かつ深くネストされた集合まで、幅広く構成できます。

SVG文書フラグメントは、単独のファイルやリソースとして独立して存在することもでき、その場合SVG文書フラグメントはSVG文書となります。または、親HTMLやXML文書内にインラインでフラグメントとして埋め込むこともできます。

次の例は、親XML文書内にインラインでフラグメントとして埋め込まれた簡単なSVGコンテンツを示しています。 svgellipse 要素がSVG名前空間に属することを示すため、XML名前空間が利用されている点に注意してください:

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://example.org"
        xmlns:svg="http://www.w3.org/2000/svg">
   <!-- parent contents here -->
   <svg:svg width="4cm" height="8cm">
      <svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" />
   </svg:svg>
   <!-- ... -->
</parent>

次の例は、やや複雑(複数の矩形を含む)なスタンドアロンのSVG文書です:

<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>4つの個別の矩形
  </desc>
    <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
    <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
    <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
    <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>

  <!-- 'rect'要素でビューポートの外枠を表示 -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
        fill="none" stroke="blue" stroke-width=".02cm" />

</svg>

svg 要素はSVGコンテンツの途中にも現れることができます。 これは、SVG文書フラグメントが他のSVG文書フラグメント内へ埋め込まれる仕組みです。

SVGコンテンツの途中に svg 要素を利用するもうひとつの用途は、新しいSVGビューポートを確立することです。(新しいSVGビューポートの確立参照。)

5.1.2. 名前空間

SVGがXMLとしてパースされる場合、XMLの名前空間勧告 [xml-names] に準拠するため、SVG名前空間の宣言が必要です。これによりすべてのSVG要素がSVG名前空間に属するものとして識別されます。

HTML構文を利用する場合、名前空間はHTMLパーサによって自動的に付与されます。

<html>
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" fill="green">
</svg>
</html>

この例が示すように、HTMLパーサを使う場合、要素がSVG名前空間に属することを宣言する ‘xmlns’ 属性は不要です。 HTMLパーサが自動的にSVG要素を適切な名前空間で作成します。

この節は、文書の挙動がDOMでどのように定義されるか、またHTMLパーサがどのようにSVGフラグメントを作成できるかについても説明する必要があります。

SVG 2の名前空間は http://www.w3.org/2000/svg です。これはSVGの以前のバージョンと同じです。

SVGをXMLとしてパースする場合、名前空間宣言を指定する方法はいくつかあります。名前空間接頭辞なしの ‘xmlns’ 属性を svg 要素に指定すると、その要素のスコープ内のすべての要素にSVGがデフォルト名前空間として適用されます:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="green" />
</svg>

名前空間接頭辞を ‘xmlns’ 属性に指定した場合(例:xmlns:svg="http://www.w3.org/2000/svg")は、該当する名前空間はデフォルトではないので、要素に明示的な名前空間接頭辞を付与する必要があります:

<svg:svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <svg:rect x="10" y="10" width="80" height="80" fill="green" />
</svg:svg>

名前空間接頭辞は祖先要素にも指定できます(上記の例を参照)。詳細は XMLの名前空間勧告 [xml-names] を参照してください。

5.1.3. 定義

構造要素
構造要素はSVG文書の主要な構造を定義する要素です。具体的には、以下の要素が構造要素となります: defsgsvgsymboluse
外部構造要素
外部リソースへの参照によってその構造を定義する要素です。具体的には、‘href’ 属性を持つ場合、以下の要素が外部構造要素となります: audioforeignObjectiframeimagescriptusevideo
現在のSVG文書フラグメント
指定されたSVG要素の最も外側の祖先 svg 要素から始まる文書サブツリーであり、最外の svg から指定要素までのすべてのコンテナ要素がSVG名前空間の要素であることが要件となります。
最外svg要素
現在のSVG文書フラグメント内で最も遠い svg 祖先要素を指します。
SVG文書フラグメント
文書サブツリーであり、svg 要素から始まります。この要素が文書のルート要素である場合、または親要素がSVG名前空間でない場合です。 SVG文書フラグメントは、スタンドアロンのSVG文書の場合も、svg 要素で囲まれた親文書のフラグメントの場合もあります。 ただし、他のSVG名前空間の要素の直接の子である svg 要素はSVG文書フラグメントのルートにはなりません。
SVG要素
SVG名前空間内の任意の要素。
グラフィック要素
ターゲットキャンバス上にグラフィックを描画できる要素型のひとつです。具体的には: audiocanvascircleellipseforeignObjectiframeimagelinepathpolygonpolylinerecttexttextPathtspanvideo
グラフィック参照要素
別の文書や要素を参照してグラフィック内容を取得するグラフィック要素。具体的には: audioiframeimageusevideo

5.1.4. ‘svg’ 要素

SVG 2 要件: svg 要素の変換(transform)をサポートすること。
決定: SVG 2で ‘transform’‘svg’ 要素上で許可する。
目的: 入れ子になった svg 要素に対して変換を許可することで、著者の期待に沿うようにするため。
担当: Dirk(対応不要)
状況: 完了
svg
カテゴリ:
コンテナ要素, 描画可能要素, 構造要素
内容モデル:
以下の要素を任意の順序・数で含めることができる:a, audio, canvas, clipPath, filter, foreignObject, iframe, image, marker, mask, script, style, switch, text, video, view
属性:
幾何プロパティ:
DOMインターフェース:

x および y 属性は、埋め込まれた svg 要素が配置される矩形領域の左上隅を指定します。最外svg要素の場合、これらの属性は効果を持ちません。

最外svg要素の場合、width および height 属性はSVG文書フラグメントの本来のサイズを指定します。 埋め込み svg 要素の場合は、 svg 要素が配置される矩形領域のサイズを指定します。 いずれの場合も、計算スタイルが auto の場合は 100% と同等に扱われます。

属性定義:

名前 初期値 アニメーション可能
zoomAndPan disable | magnify magnify no

SVGコンテンツに対してユーザーエージェントがズームやパンの手段を提供するかどうかを指定します。詳細は zoomAndPan の定義を参照してください。

SVG文書が他の文書のコンポーネントとして参照される可能性がある場合、著者はしばしば参照文書の 最外svg要素viewBox 属性を含めたくなります。この属性はSVG文書を任意のSVGビューポートにフィットするように設計する便利な方法を提供します。

svg 要素は、イベントハンドラコンテンツ属性として、Window オブジェクトの多くのイベントハンドラを公開します。また、それらの イベントハンドラIDL属性もミラーします。

onbluronerroronfocusonload、および onscroll は、Window オブジェクトのイベントハンドラであり、 svg 要素上に公開されます。 これらは通常 SVG要素でサポートされる同名の汎用イベントハンドラの代わりとなります。

5.2. グループ化:‘g’ 要素

5.2.1. 概要

コンテナ要素
子要素としてグラフィック要素や他のコンテナ要素を持つことができる要素。具体的には: aclipPathdefsgmarkermaskpatternsvgswitchsymbolunknown

g 要素は、関連するグラフィック要素をまとめるためのコンテナ要素です。

要素のグループや個々のオブジェクトには、id属性を使って名前を付けることができます。名前付きグループは、アニメーションや再利用可能なオブジェクトなど、複数の目的で必要となります。

例:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="5cm" height="5cm">
  <desc>2つのグループ、それぞれ2つの矩形</desc>
  <g id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </g>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>

  <!-- 'rect'要素でビューポートの外枠を表示 -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
        fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>

この例をSVGで表示(SVG対応ブラウザのみ)

g 要素は、他のg要素を任意の深さで入れ子にすることができます。

5.2.2. ‘g’ 要素

g
カテゴリ:
コンテナ要素, 描画可能要素, 構造要素
内容モデル:
以下の要素を任意の順序・数で含めることができます:a, audio, canvas, clipPath, filter, foreignObject, iframe, image, marker, mask, script, style, switch, text, video, view
属性:
DOMインターフェース:

5.3. 未知の要素

SVG 2 要件: 未知の要素は描画の目的で g として扱われる必要があります。
決議:
目的: switch を使用せずにフォールバックを可能にし、HTMLでの未知の要素の挙動に合わせるため。
担当者: なし(アクションなし)
ステータス:
unknown
カテゴリ:
コンテナー要素, 描画可能な要素
内容モデル:
任意の要素または文字データ。
属性:
DOM インターフェース:

未知の要素を汎用コンテナー要素として扱い、それによって子ツリーが描画されること、および未知の要素に SVGUnknownElement インターフェースを割り当てることは、どちらもリスクがあり、既知の実装はありません。

未知の要素とは、SVG 名前空間に属し、この仕様またはSVGモジュールのいずれにも定義されていないすべての要素です。未知の要素には SVGUnknownElement インターフェースを使用する必要があります。

SVG 名前空間の未知の要素は 描画可能な要素 および コンテナー要素 です。 未知の要素は、状況に応じて未知の要素が g 要素または tspan 要素に置き換えられたかのように描画される必要があります。 すべてのSVGグラフィックス要素で有効なグローバル属性やプロパティは、未知の要素でも有効であり、通常通り処理される必要があります。 これには条件付き処理属性、ARIA属性、データ属性、 lang, id, class, tabindex および style が含まれます。 未知の要素に指定されたスタイルは、各スタイルプロパティの継承ルールに従い、子要素に継承される必要があります。

他の名前空間の既知および未知の要素が、foreignObject を除く任意の SVG 要素の子として現れる場合、この仕様で明示的に記載されていない限り描画されてはなりません。

SVG 名前空間の既知の要素が、SVG の内容モデルで明示的に許可されていない場所に現れる場合、この仕様で明示的に記載されていない限り描画されてはなりません。

したがって、次の例では:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 200">
  <rect x=".1" y=".1" width="699.8" height="199.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <mysteryElement>
    <path d="M0 0h600v200h-600z" fill="darkkhaki"/>
  </mysteryElement>
  <hideElement xmlns="http://www.example.com/invisibleML">
    nothing to see here
    <path d="M0 0h300v100h-300z" fill="whitesmoke"/>
  </hideElement>
  <text y="2em" font-size="20"><text>This text must not be visible</text></text>
  <linearGradient>
    <gradientExtension>
      <path d="M300 0h100v200h-100z" fill="fuchsia"/>
    </gradientExtension>
  </linearGradient>
  <div xmlns="http://www.w3.org/1999/xhtml">This must not be visible</div>
</svg>

この例をSVGとして表示 (SVG対応ブラウザのみ)

5.4.1. 概要

SVGでは、グラフィカルオブジェクトを後で再利用するために定義できます。 これを実現するため、SVGは URL参照 構造 [rfc3987] を広く利用しています。 例えば、矩形を線形グラデーションで塗りつぶす場合、 linearGradient 要素を id プロパティ付きで定義し、 そのIDを矩形の fill プロパティの値として参照できます。例:

<linearGradient id="MyGradient">...</linearGradient>
<rect style="fill:url(#MyGradient)"/>

グラデーションのような一部の要素は、それ自体ではグラフィカルな結果を生成しません。そのため、どこに置いても問題ありません。しかし、時にはグラフィカルオブジェクトを定義し、直接描画されないようにしたい場合があります。それは他の場所から参照されるためだけに存在するものです。そのため、また定義済みコンテンツを便利にグループ化するために、SVGは ‘defs’ 要素を提供します。

可能であれば、参照される要素は、それらを使用する要素よりも文書順で前に定義することが推奨されます。 すべての参照要素を 1つの defs 要素内に ファイルの先頭付近に集めることで、 マークアップが読みやすく、理解しやすくなります。

5.4.2. ‘defs’ 要素

defs
カテゴリ:
コンテナー要素, 非描画要素, 構造要素
内容モデル:
以下の要素を任意の順序・個数で含めることができます:a, audio, canvas, clipPath, filter, foreignObject, iframe, image, marker, mask, script, style, switch, text, video, view
属性:
DOMインターフェース:

defs 要素は 参照要素のためのコンテナーです。理解しやすさや アクセシビリティの観点からも、 可能な限り参照要素は defs 内で定義することが推奨されます。

defs の内容モデルは g 要素と同じです。したがって、 g の子になれる要素は defs の子にもなれ、その逆も可能です。

defs の子孫要素は直接描画されません。 defs 要素の display の値は noneユーザーエージェントスタイルシートで必ず設定されなければならず、 この宣言は他のCSSルールやプレゼンテーション属性よりも優先されなければなりません。 ただし defs の子孫は常にソースツリー上に存在し、 他の要素から常に参照可能です。したがって、defsdisplay プロパティの値によって それらの要素が他の要素から参照されることは妨げられません。

5.5. ‘symbol’ 要素

symbol 要素は、use 要素によってインスタンス化できるグラフィカルテンプレートを定義するために使用されますが、直接描画されることはありません。

symbol は、その内部のグラフィックスのために入れ子の座標系を確立します。 symbol が use 要素の 参照要素としてインスタンス化される場合、入れ子の svg 要素と非常によく似た方法で描画されます。

symbol
カテゴリ:
コンテナ要素, 構造要素
内容モデル:
以下の要素を任意の順序・個数で含めることができます:a, audio, canvas, clipPath, filter, foreignObject, iframe, image, marker, mask, script, style, switch, text, video, view
属性:
ジオメトリプロパティ:
DOMインターフェース:

xywidth、および height のジオメトリプロパティは、 svg 要素の場合と同じ効果を持ちます。 symboluse 要素によってインスタンス化された場合も同様です。 特に、widthheightauto に計算され (かつ、インスタンス化する use 要素の値で上書きされていない場合)、 それらは 100% の値として扱われます。

SVG 2 で新規追加。 symbol 要素にジオメトリプロパティを指定できるようにすることで、より一貫したレンダリングモデルとなり、 著者が各 symbol のデフォルトサイズを設定できるようになります (ただし use 要素の属性で上書き可能)。

5.5.1. 属性

名前 初期値 アニメーション可能
refX <length> | left | center | right (なし) yes
refY <length> | top | center | bottom (なし) yes

SVG 2 で新規追加。地図などでよく行われるように、特定のポイントに symbol を揃えやすくするために追加されました。marker の一致属性に類似しています。

symbol 要素に refX/refY を追加。ライプツィヒ会議で決定。 状態:完了。

marker/symbol の refX/refY に top/center/bottom, left/center/right キーワードを追加します。ロンドン会議で決定。値は 'background-position' に着想を得ています。 状態:完了。

refX および refY 属性は、 symbol の参照ポイントを定義し、symbol の x,y 配置座標に正確に配置されます。 これは x および y プロパティや、 symbol および その host use 要素の変形の累積効果によって決まります。

キーワード値は refX および refY 属性と同じ意味を持ち、 marker 要素の場合は、該当する方向で 0%、50%、100% に解決されます。

他の位置属性とは異なり、 refXrefYviewBoxpreserveAspectRatio 属性が適用された後の symbol コンテンツの座標系で解釈されます。 どちらか一方または両方の属性が指定されていない場合は、該当する次元で調整は行われず、 symbol の矩形ビューポート領域の上端または左端(viewBox座標に関わらず)が x,y の位置に配置されます。

後方互換性のため、 refX および refY が symbol 要素に指定されていない場合の挙動は、 値 0 を指定した場合とは異なり、 同等の属性が marker に指定されていない場合の挙動とも異なります。

5.5.2. symbol に関する注意

同じ文書内で複数回使用されるグラフィックスに symbol 要素を使うことで、構造と意味が追加されます。 symbol に密接に関連する要素として、 markerpattern があります。 これら三つすべてが、SVG内でさまざまな位置や倍率で繰り返し描画可能なグラフィックコンテンツのコンテナーを定義します。 ただし、pattern や marker 内の 再利用グラフィックス は他の要素にグラフィカルな効果を与えるのに対し、 symbol の内容は use 要素シャドウツリー内で完全にインタラクティブなコンテンツとして埋め込まれます。

ユーザーエージェントスタイルシートは、 symbol 要素の overflow プロパティを hidden に設定します。 これにより、symbol の SVG ビューポート境界で矩形クリッピングパスが生成されます。overflow プロパティが上書きされていない限り、symbol 内のグラフィックスが SVG ビューポートから外れる場合はクリップされます。

symbol 要素は直接描画されてはなりません。 用途は use 要素で参照されることのみです。 ユーザーエージェントは symbol 要素の display プロパティを none に設定し、 これは ユーザーエージェントスタイルシートの一部として行われ、 この宣言は他の CSS ルールやプレゼンテーション属性よりも優先されなければなりません。

use 要素の 直接の 参照要素である symbol の 生成された インスタンスは、 display プロパティの計算値が常に inline でなければなりません。 つまり、host となる use 要素が描画される場合は必ず描画されます。 この宣言も ユーザーエージェントスタイルシートで他の CSS ルールやプレゼンテーション属性より優先されます。 その他の symboluse 要素シャドウツリー内で element instance を生成するために複製されますが、定義としてのみ機能し、描画されてはなりません。

5.6. ‘use’ 要素

SVG 2 要件: use 要素でフラグメントなしの場合、外部文書のルート要素を参照できるようにする。
決議: SVG 2 では、use等でフラグメントを省略した場合はルート要素への参照と解釈できるよう、参照要件を緩和する。
目的: 参照先文書のルート要素にIDを追加するために著者が文書を修正する必要をなくすため。
担当者: Cameron (ACTION-3417)
ステータス: 完了
use
カテゴリ:
グラフィック参照要素, 描画可能要素, 構造要素, 構造的外部要素
内容モデル:
以下の要素を任意の順序・個数で含めることができます:clipPath, mask, script, style
属性:
ジオメトリプロパティ:
DOMインターフェース:

use 要素は、他の要素を参照し、そのコピーが文書中の use の場所で描画されます。 参照要素コンテナ要素である場合もあり、 その場合は、その要素を根としたSVG文書サブツリー全体のコピーが使用されます。

クローンされたコンテンツは use 要素からスタイルを継承し、ユーザーイベントのターゲットにもなれます。 ただし、これらの element instance は参照元とリンクされ、 元のDOMの変更を反映します。 また、参照要素のスコープで適用されるすべてのスタイルルールは、クローンされた シャドウツリーでも適用されます。

xywidthheight のジオメトリプロパティは 参照要素の配置を指定します。 width および height 属性は、 参照要素がビューポートを定義する場合(例えば svgsymbol)のみ有効です。 その場合、use 要素で auto 以外の値を指定すると、 参照要素の対応するジオメトリプロパティの値を上書きします。

width または height に負の値を指定するのは不正です。 width または height がゼロで、 かつそれらのプロパティが 参照要素 に影響を持つ場合、 その要素の描画は無効化されます。

x および y プロパティは、 要素のユーザー座標系に影響します。 実装の詳細は レイアウト セクションを参照してください。

名前 初期値 アニメーション可能
href URL [URL] (なし) yes

レンダリング用にクローンするSVG文書内の要素やフラグメントへの URL参照

use 要素は、 フラグメントなしの href を指定することで SVG文書全体を参照できます。 この場合、参照先文書のルート要素を指すと見なされます。

URL参照属性や非推奨XLink属性の共通処理については URL参照属性 および 非推奨XLink属性を参照。

SVG 2で新規。 フラグメントなしの href を指定することで、 ルート要素にIDがなくてもSVG文書全体を参照可能です。

ユーザーエージェントはセキュリティ上の理由で外部リソース文書を制限する場合があります。 特に、この仕様では use でクロスオリジンのリソースリクエストは許可されません。 今後のバージョンや他の仕様で、安全にクロスオリジン再利用を可能にする方法が提供される場合があります。

href 属性が設定された場合 (または href 属性がない場合は xlink:href 属性)、 ユーザーエージェントは URLを処理 しなければなりません。 URL処理の結果得られた要素が use参照要素 となります。

URL解決の結果得られた 参照要素 が SVG要素でもSVGコンテナ要素の子として許可されるHTML名前空間要素でもない場合、 その参照は 不正 となり、use 要素はエラー扱いとなります。

参照要素が(シャドウツリー含む) use 要素の祖先である場合、 これは 不正な循環参照 となり、 use 要素はエラーになります。

それ以外の場合、ユーザーエージェントは use 要素の内容として シャドウツリー再利用グラフィックスを生成して描画しなければなりません。 詳細は次節 use要素シャドウツリー を参照。

use 要素が 未解決または 不正なURL参照を持つ場合は描画されません。 バウンディングボックス計算の目的では、空のコンテナ要素と同等です。

5.6.1. use要素シャドウツリー

use 要素によって生成される再利用グラフィックスは、シャドウツリーとして定義されます。 インタラクティビティやスタイル継承の観点から、これらはSVG内の他の種類の再利用グラフィックス(例えば patternmarker の内容)とは大きく異なります。

シャドウツリー内の要素は、use 要素がコンテナで、その子であるかのように描画されます。 しかしSVGのDOM(ドキュメントオブジェクトモデル)には、use 要素とその属性のみが含まれます。 SVG DOMには、use 要素の子としてelement instanceは含まれません。

スクリプトやドキュメントオブジェクトモデルをサポートするユーザーエージェントは、このセクションで記述された通りにuse要素シャドウツリーを実装し、dom仕様[dom]または将来の置き換え仕様に準拠する必要があります。 一方、動的なインタラクティブ処理モードをサポートしないユーザーエージェントは、シャドウDOMのすべての詳細を実装する必要はないかもしれません。 ただし全てのユーザーエージェントは、レイアウトスタイル継承、必要に応じてマルチメディア宣言型アニメーションについても、シャドウDOMが実装されている場合と同じように描画されることを保証しなければなりません。

以下の定義は、use 要素とそのシャドウツリーについて議論する際に適用されます:

referenced element
use 要素の href (または xlink:href)属性で指定された要素、またはURLに特定要素へのフラグメントが無い場合は参照文書のルート要素。
referenced document subtree
referenced graphics
参照された要素およびそのすべての子孫ノード。
shadow root
ShadowRoot オブジェクトは、ホスト Element に関連付けられた DocumentFragment ノードの一種であり、そのホストを描画するためのコンテンツを含みます。 シャドウルートは、dom仕様[dom]または将来の置き換え仕様に準拠して実装されるべきです。
shadow host
host
シャドウルートが関連付けられている要素。DOM標準の host の定義と一致する使い方です。
shadow tree
ルートがシャドウルートのノードツリー。DOM標準の shadow tree の定義と一致します。
use-element shadow tree
ホストが use 要素であり、参照グラフィックスをクローンして生成されたelement instanceを含むシャドウツリー。
element instance
instance
use要素シャドウツリー内の要素で、参照文書サブツリー内の対応する要素をクローンして生成されます。
instance root
参照要素のelement instance。常に use 要素のシャドウルートの直接の子です。
corresponding element
各element instanceについて、それがクローンされた参照文書サブツリー内の要素。
corresponding use element
各element instanceについて、それが文書内で描画される原因となる use 要素。 これはインスタンスのシャドウルートのホスト use 要素が、use要素シャドウツリー内でelement instanceでない場合はその要素自体、そうでない場合はその対応するuse要素となります。必要なだけシャドウツリーを再帰的に抜けて、他の use 要素シャドウツリーの一部として生成されていない use 要素に到達するまで繰り返します。

ユーザーエージェントが use 要素を正常に解決して参照要素を特定した場合、 ユーザーエージェントはホストが use 要素自身であるuse要素シャドウツリーを作成しなければなりません。 use 要素が 非描画要素の子孫だったり、条件付き処理だったり、displayプロパティが自身または祖先でnoneに設定されていた場合でも、シャドウツリーは必ず作成されなければなりません。

シャドウツリー内の各ノードは、参照文書サブツリーの対応するノードのelement instanceです。 シャドウノードは全てinstance rootから派生しており、これは参照要素のインスタンスであり、シャドウルートノードの直接の子です。

シャドウツリーはオープン(スクリプトから検査可能)ですが、読み取り専用です。 シャドウツリー内の要素、属性、その他ノードを直接変更しようとすると、NoModificationAllowedErrorを投げなければなりません。

use要素シャドウツリー内では、 script 要素は無効(実行されない)となり、 audiovideo 要素はマルチメディアセクションで指定された制限が適用されます。

以前のSVGバージョンでは、シャドウツリーの内容はSVGグラフィックス要素に制限されていました。 この仕様では、任意の有効なSVG文書サブツリーがクローン可能です。 非グラフィカルな内容をクローンしても、通常は可視的な効果はありません。

参照要素が外部ファイルにある場合、属性やスタイルプロパティ内の全てのURL参照は、絶対URL生成で説明されるように絶対化されなければならず、その値がelement instanceにコピーされる前に処理されます。 シャドウツリー自体は、それを含む文書と同じベースURLを使用します。

ユーザーエージェントは、参照文書サブツリーへの全ての変更(要素、属性、テキストやその他のノードの変更)をシャドウツリーにも反映させなければなりません。 また、参照グラフィックスに有効なスタイルシートへの変更も、シャドウツリーのスコープのスタイルシートの変更に反映させる必要があります(詳細はスタイル継承セクション参照)。

use 要素または参照要素が変更されて、use 要素のURL参照が再び未解決となった場合、 そのuse要素のシャドウツリー全体は破棄されます。

use 要素が、他の use 要素や、その内容に use 要素を含む要素を参照する場合、上記のシャドウDOMクローン方式は再帰的に適用されます。 ただし、直接または間接的に要素を参照して循環依存を作る参照集合は不正な循環参照です。 そのシャドウツリーが循環参照を作る use 要素やelement instanceはエラーとなり、ユーザーエージェントによって描画されてはなりません。

5.6.2. 再利用グラフィックスのレイアウト

use 要素のxywidthheightプロパティの値は、 再利用グラフィックスの位置決めや、参照要素が入れ子のビューポートを定義する場合はそのビューポートサイズの設定に使用されます。 これらのプロパティが use 要素に与える効果は、グラフィックス要素やCSSボックスレイアウトでの効果とは明確に異なります。

x および y プロパティは、追加の変換(translate(x,y))を定義します。 ここで xy は対応するプロパティの計算値です。 この変換は、他のプロパティで指定された変換の後(つまり変換リストの右側に追加)で use 要素に適用されます。

歴史的理由により、追加の変換は再利用コンテンツだけでなく use 要素自体に適用されます。 これは、use 要素に適用され、userSpaceOnUse 単位で計算されるマスク、クリッピングパス、フィルターなどの座標系に影響します。

userSpaceOnUse のグラフィカル効果を変換されていない座標空間で適用しつつ、 x および y を使ってグラフィックスの位置を指定する場合、 著者は use 要素を g の中に入れ、 グラフィカル効果を g 要素に適用することができます。

use 要素上の width および height プロパティは、 参照される svg または symbol 要素の対応するプロパティ値を上書きします(そのプロパティのused valueの決定時)。 ただし、use 要素上のプロパティの計算値が auto の場合は、element instanceで通常通り計算されます。

これらのプロパティは、独自座標系を定義したグラフィックを再利用するたびにスケールするために使えます。 auto が初期値なので、use 要素で寸法を明示的に設定しない場合は、 svgsymbol で設定された値がデフォルトとして使用されます。

use 要素の width および height プロパティは、 参照要素新しいSVGビューポートを確立しない場合、効果はありません。 特に、use 要素自体は新しいビューポートを確立しないため、再利用グラフィックス内のパーセンテージ解釈には影響しません。

その他の点では、 use要素シャドウツリー内の要素のレンダリングとレイアウトは、use 要素がそのシャドウコンテンツのコンテナであるかのように行われます。 特に、シャドウツリー内の要素が新しいビューポートを確立しない限り、それらは use 要素で定義された座標系(累積変換含む)で描画されなければなりません。 これにより、パーセンテージ長や userSpaceOnUse 単位のグラフィカル効果の解釈に影響します。

5.6.3. スタイルのスコープと継承

use要素シャドウツリーは、他のシャドウツリーと同様に CSSスコーピングモジュール [css-scoping-1] で定義されるスタイルカプセル化を示します。 これは、シャドウツリー内の要素が ホスト use 要素からスタイルを継承するが、 外部文書で定義されたスタイルルールはシャドウツリー内の要素には一致しないことを意味します。 代わりに、シャドウツリーは独自のスタイルシートリストを保持し、 そのCSSルールがシャドウツリー内の要素に適用されます。

プレゼンテーション属性と style 属性は 参照グラフィックス内の要素から 他の属性と同様に element instance にクローンされます。

参照要素use 要素と同じ文書にある場合、 同じ文書のスタイルシートが 元の文書とシャドウツリードキュメントフラグメントの両方に適用されます。 メイン文書のスタイルシートに変更があった場合、シャドウツリーにも影響します。 documentとシャドウルートドキュメントフラグメントの styleSheetsプロパティでアクセスされるStyleSheetListオブジェクトは同一でなければなりません。 style 要素が 参照文書サブツリーの一部として複製される場合、 element instancestyleSheetプロパティは 対応する要素と同じオブジェクトを指します。

参照要素が外部文書にある場合、 その文書処理で生成されたスタイルシートオブジェクトはシャドウツリーに適用され、読み取り専用です。 スタイルシート内のすべてのURL参照(フラグメントのみの参照も含む)は、 参照要素を含む文書のURLに対して絶対化されなければなりません。 ユーザーエージェントは同じ外部文書を参照するすべてのシャドウツリーで同じスタイルシートオブジェクトを再利用する場合があります。

シャドウツリーにスコープされたスタイルルールは、通常メイン文書の要素に影響しません。 同様に、メイン文書のスタイルルールは継承値を変更することでしかシャドウツリー内の要素に影響できません。 ただし、CSSスコーピングは、 シャドウツリー内からホスト要素をスタイリングしたり、 ホストのコンテキスト変化に応じてシャドウツリー内スタイルを調整するための特殊なセレクタも定義しています [css-scoping-1]

シャドウツリーのスコープ内のCSSメディアクエリは、 対応する「ライト」文書(つまり、シャドウツリーの、すべての入れ子シャドウツリーを再帰的に抜けた後で corresponding use element を含む文書)と同じデバイス特性と寸法で評価されます。

ほとんどの場合、シャドウツリー内の element instance は 元文書の 対応する要素と同じスタイルルールに一致します。 ただし、CSSルールが祖先や兄弟に基づく複雑なセレクタを使って要素をマッチさせている場合、 それらの祖先や兄弟がシャドウツリーの一部としてクローンされていなければ、 そのルールは element instance には一致しません。 同様に、nth-of-typenth-child などの子インデックス疑似クラスも 片方の要素には適用されるがもう片方には適用されない場合があります。 これはSVGの以前のバージョンで定義されていたスタイルクローンの挙動からの変更です。

以下の例は、一貫性のあるスタイルマッチングルールと変更されたスタイルマッチングルールの両方を示しています。 左の円は右の円を描画するために再利用されています。 元の円には様々な方法でスタイルが設定されています:

SVG 1.1 のスタイルクローンモデルでは、 指定されたスタイル値が元要素からelement instanceにクローンされます。 再利用された円は元と同じスタイルとなりますが、 fill値だけは use(オレンジ)から継承され、 g(青)からは継承されません。

SVG 2で要求されるシャドウDOMモデルでは、 再利用された円のスタイルは下記のように計算されます:

このため、再利用された円は元の円とfill色(異なる要素から継承される)とstroke色(複雑なセレクタが一致しなくなる)の両方で異なります。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="100" viewBox="0 0 200 100">
  <title>Style inheritance and the use element</title>
  <desc>
    Two circles, one of which is a re-styled clone of the other.
    This file demonstrates one of the cases where
    the shadow-DOM style matching rules in SVG 2
    have a different effect than the SVG 1.1 style cloning rules.
    The original circle on the left
    should have blue fill
    and green stroke.
    In a conforming SVG 1.1 user agent,
    the re-used circle on the right
    should have orange fill and green stroke.
    In a conforming SVG 2 user agent,
    the re-used circle should have orange fill and purple stroke.
    In all cases,
    the stroke should be partially transparent
    and 20 units wide,
    relative to a total circle diameter of 100 units.
  </desc>
  <style type="text/css">
    circle          { stroke-opacity: 0.7; }
    .special circle { stroke: green; }
    use             { stroke: purple;
                      fill: orange; }
  </style>
  <g class="special" style="fill: blue">
     <circle id="c" cy="50" cx="50" r="40"
             stroke-width="20" />
  </g>
  <use xlink:href="#c" x="100" />
</svg>
Example Use-changed-styles — A 'use' element copying a 'circle', with various style matching rules demonstrated

例:Use-changed-styles

この例をSVGで表示 (SVG対応ブラウザのみ)

以前のSVGバージョンでは :hoverなど動的疑似クラスがelement instanceにどのように適用されるべきか明確ではありませんでした。 シャドウツリーモデルでは、こうした疑似クラスは element instanceまたは対応する要素のいずれかに、ユーザーがどちらの要素と対話しているかによって個別に一致する必要があります。

use 要素に 'visibility:hidden' を指定しても、 参照コンテンツが描画されないことを保証しません。 displayopacity プロパティと異なり、 visibility プロパティはコンテナ要素に直接適用されないため、 use 要素には直接適用されません。 visibility は通常継承されるため、 use要素を隠すと多くの場合子コンテンツも隠れますが、必ずそうなるとは限りません。 シャドウツリー内のグラフィックス要素に 'visibility:visible' が指定されている場合、 use 要素が 'visibility:hidden' を指定していてもその要素は表示されます。

次の例では、主要なスタイルルールは以下の通りです:

.dark {
  visibility: hidden;
}
.eyes {
  visibility: visible;
}
svg:hover .dark, svg:focus .dark {
  visibility: visible;
}

"dark"クラスは use要素を含むグループに設定されており、 再利用グラフィックスのすべての部分は hiddenなvisibilityを継承しますが、 "eyes"クラスのサブツリーだけはvisibleにリセットされます。 グラフィックにホバーまたはフォーカスすると、非表示効果は解除されます。

黒背景の上に複数のcreature-symbolのuseコピー。use要素はvisibility:hiddenだが、目はvisibility:visibleで表示されている。

例:Use-visibility-hidden, デフォルトスタイル

緑背景の上に複数のrabbit-symbolのuseコピー。各ウサギは異なる色の毛皮を持ち、同じピンクの鼻と白いしっぽを持つ。

例:Use-visibility-hidden, インタラクティブスタイル

この例をSVGで表示

この例は、他のスタイルプロパティ (fillstroke)が use 要素に指定された場合の継承も示しています。 また、symbol内の要素が明示的な値(例:ピンクの鼻や耳、白いしっぽ)を指定していれば、それらの値は継承されません。

5.6.4. use要素シャドウツリーのマルチメディア

use要素シャドウツリーaudiovideo 要素が含まれる場合、以下の挙動が保証されなければなりません:

5.6.5. use要素シャドウツリーにおけるアニメーション

Web Animations API [web-animations-1] と SVG Animations仕様 [svg-animation] は、 DOMプロパティを直接操作せずに、ターゲット要素の属性やスタイルを非CSS的にアニメーションする方法を定義しています (詳細は アニメーション付録 を参照)。 これらの機能を実装するユーザーエージェントは、 参照文書サブツリーの要素に適用されるすべてのアニメーションが、 このセクションで説明される通り use要素シャドウツリー内のその要素のインスタンスにも適用されることを保証しなければなりません。

参照グラフィックス内の要素属性を直接操作して作られたスクリプトアニメーション (style属性やそのIDLプロパティも含む)は、 他のDOM操作と同様、シャドウツリー内のelement instanceにも伝播されます。

CSSによるアニメーション効果は、他のスタイルシートルールとともに複製され、 スタイルのスコープと継承セクションで指定された手順に従います。

use要素シャドウツリー内のすべてのアニメーションは、 対応するuse要素と同じドキュメントタイムラインで動作します。 参照要素が同じ文書でも外部文書でも関係ありません。

Web Animations API メソッド [web-animations-1] によって適用されるアニメーション効果で、 アニメーションのターゲットがシャドウツリー内のelement instanceの対応要素(corresponding element)である場合、 ユーザーエージェントは ShadowAnimation を構築しなければなりません。 そのsourceは Animation オブジェクト、 targetは element instance となります。 異なるツリーに複数のインスタンスがある場合、それぞれに1つずつShadowAnimationを生成します。

ユーザーエージェントは、シャドウツリー生成時点で効力を持つ全てのWeb Animations APIアニメーション (保留中・凍結中を含む)についてShadowAnimationを生成し、 シャドウツリー存続中に新たに適用されたアニメーションについても生成しなければなりません。 CSSアニメーションやアニメーション要素についてはShadowAnimationオブジェクトを生成してはなりません (これらは別途複製されるため)。

インターフェース定義の一部として、 ShadowAnimation は読み取り専用であり、 その sourceAnimation の変更を必ず反映しなければなりません。

読み取り専用の element instance(または疑似要素)に対して 新しいアニメーションを直接適用しようとした場合、 use要素シャドウツリー内では NoModificationAllowedError を投げなければなりません。

animation element [svg-animation] が 参照文書サブツリー内の要素をターゲットとしている場合、 ユーザーエージェントは、use要素シャドウツリー内でも同等のアニメーション要素が効力を持つことを保証しなければなりません。 アニメーション要素自体が参照文書サブツリーの一部であれば、element instanceの生成によって自動的に実現されます。 そうでない場合は、ユーザーエージェントはそのアニメーション要素をノードとしてシャドウツリーに存在するかのような効果を持つelement instanceを生成しなければなりません。 これら生成されたアニメーション要素の有効な文書順序は、対応する要素の文書順序と同じでなければなりません。

各アニメーション要素やインスタンスは、ターゲット要素が同じノードツリー(シャドウまたはライト)にある場合のみ効果を持ちます。 ターゲット指定が暗黙的(親要素)であっても、明示的(id属性によるURLクロス参照)であっても同様です。 このように、アニメーション要素とターゲット要素の一対一関係が維持されます。

id 属性は他の属性と同様に、 対応する要素からelement instanceにクローンされます。 クローンと元要素は異なるノードツリーにあるため、idの一意性要件とは矛盾しません。

ドキュメントやシャドウツリー内のすべてのアニメーション要素が、他の要素の id 属性で識別された要素でイベント発生時に開始・終了するようタイミングされている場合、 そのidを持つelement instanceが同じイベントを受けた場合にも開始・終了しなければなりません。 これは、参照要素へのイベントリスナーがその要素のインスタンスにもイベントをリッスンする仕様(use要素シャドウツリーのイベント処理セクション参照)と一致します。 この挙動は、イベントだけでアニメーション開始・終了が定義され、idによる指定がない場合(つまりターゲット要素自身のイベントのみを暗黙的に監視する場合)には適用されません。 その場合、各アニメーション要素は自分のターゲットのみでトリガーされます。

シャドウツリー内でアニメーション要素のインスタンスが生成された時点で、 対応する要素に関連付けられた(凍結中も含む)アクティブなアニメーションがあり、 そのアニメーション開始イベントがそのインスタンスにも該当する場合、 element instance側のアニメーションも開始されなければならず、 開始時刻は対応する要素のタイミングに合わせてドキュメントタイムライン上で遡って調整されます。

多くの場合、このセクションの要件により、 element instance対応する要素 のアニメーションは同期します。 アニメーションが純粋な時間ベースの場合や、idで参照された要素へのユーザー操作で開始・終了する場合は同期します。 しかし、ターゲット要素へのユーザー操作イベントによってアニメーションがトリガーされる場合(暗黙的)、 実際に操作された要素またはインスタンスのみがアニメーションを表示します。

これは従来のSVGの仕様変更であり、以前は 対応する要素上のすべてのアニメーションが、ユーザー操作に関係なくミラーされる必要がありましたが、 element instanceへのユーザー操作の扱いは明確でありませんでした。 この変更により、アニメーション要素で宣言されたインタラクティブなアニメーションが、インタラクティブCSSスタイルやCSSアニメーションと同じ挙動になります。

どれかのインスタンスまたは元要素がイベントを受け取ったときに全てのインスタンスにアニメーションを適用したい場合は、 要素の id を明示的に指定してください:


<set href="#target" begin="mouseover" ... />
  <!-- マウスオーバーされた要素だけに適用 -->

<set href="#target" begin="target.mouseover" ... />
  <!-- id 'target' を持つ要素のすべてのインスタンス(ライト/シャドウ両方)に、どれかがマウスオーバーされた時に適用 -->
  

5.6.6. use要素シャドウツリーのイベント処理

use要素シャドウツリー内の要素は、 DOMイベントのリスナーにもターゲットにもなれます。 イベントのリターゲットはカプセル化を提供し、 イベントがシャドウツリーからライト(通常のDOM)にバブルアップする際、シャドウDOM構造の詳細が隠蔽されます。

イベントのリターゲットはSVG 2で新規追加です。 これはShadow DOM仕様や既存実装、メインDOMの要素だけを意識する著者の期待にも整合性をもたらします。

参照グラフィックス内の要素に定義されたイベントリスナーは、 use要素シャドウツリー内のその要素の各element instanceでも、 同じキャプチャフェーズで同じイベントをリッスンしなければなりません。 これは event attributes(他のDOM属性同様複製される)によるリスナーや、 addEventListener メソッドによるリスナーも含みます。 ユーザーエージェントは、各 element instance のイベントリスナーリストが 対応する要素と同期していることを保証しなければなりません。 use要素シャドウツリー内の読み取り専用 element instance に直接イベントリスナーを割り当てることはできません。 そのような要素にイベントリスナーを追加しようとすると、NoModificationAllowedErrorを投げなければなりません。

use要素シャドウツリー内のイベントは、 シャドウツリー イベントパスとイベントリターゲットアルゴリズム [DOM] に従いディスパッチ・バブルされます。

一般に、use要素シャドウツリーのイベントパスは、 イベントターゲット要素の祖先からシャドウルートまで、 さらに host use 要素およびそのイベントパスを経てウィンドウへと構築されます。 キャプチャフェーズでは、イベントはウィンドウから通常の文書ツリーを通って use 要素、 そしてシャドウルートオブジェクト、さらにシャドウツリー(または再帰的に複数のシャドウツリー)を通ってイベントターゲット要素へ伝播します。 バブルフェーズでは逆方向に、シャドウツリーの要素からシャドウルート、use 要素とその祖先へ伝播します。

イベントリターゲットアルゴリズムにより、 use 要素やその祖先でのイベントリスナーから見ると、 シャドウツリー内のelement instanceへのすべてのイベントは、ターゲットが use 要素自体にリターゲットされます。 イベントが targetrelatedTarget の両方を持ち、 それらが同じ use 要素を指すようリターゲットされる場合、 イベントはシャドウツリー外には一切伝播しません。 これは例えば、シャドウツリー内のある要素から別の要素にフォーカスが移った場合などです。 他にも特定のイベント型は、生成されたシャドウツリーの外には伝播されないよう制約されています。

一方、シャドウツリー内でイベントを処理するリスナー(対応する要素に追加されている場合)は、 target が シャドウツリー内の読み取り専用 element instance を指すイベントを受け取ります。 この correspondingElementcorrespondingUseElement プロパティを使うことで、 メインDOMの変更可能な要素と関連付けることができます。

5.7. 条件付き処理

5.7.1. 条件付き処理の概要

SVG には switch 要素と 属性 requiredExtensions および systemLanguage があり、 ユーザーエージェントの機能やユーザーの言語に応じて表示を切り替えることができます。

属性 requiredExtensions および systemLanguage は テストとして働き、true または false に評価されます。switch は、これらの属性がすべて true となる最初の子要素を描画します。 属性が指定されていない場合は true とみなされます。

条件付き処理によって要素が除外された場合、その要素は display プロパティの使用値が none であるかのように扱われます。 display プロパティと同様、条件付き処理属性は要素の直接的な描画のみに影響し、 他の要素(use など)から参照されることを妨げません。

結果として:

以前のSVGバージョンには、3つ目の条件付き処理属性 requiredFeatures が含まれていました。 これは、SVG仕様の一部のみを実装するユーザーエージェント向けにフォールバック動作を提供する意図でしたが、 この属性の仕様と実装が不十分で、機能サポートのテストとして信頼できませんでした。

5.7.2. 定義

条件付き処理属性
条件付き処理属性は、その属性が付与された要素が処理されるかどうかを制御します。ほとんどの要素(すべてではありません)には条件付き処理属性を指定できます。 詳細は 条件付き処理 を参照してください。 SVG 2 で定義されている条件付き処理属性は、 requiredExtensions および systemLanguage です。

5.7.3. ‘switch’ 要素

switch
カテゴリ:
コンテナ要素, 描画可能要素
内容モデル:
以下の要素を任意の順序・個数で含めることができます:a, audio, canvas, foreignObject, g, iframe, image, svg, switch, text, use, video
属性:
DOMインターフェース:

switch 要素は、 直属の子要素に対して requiredExtensions および systemLanguage 属性を順に評価し、 これらの属性がすべて true となる最初の子要素を処理・描画します。他の子要素はスキップされて描画されません。 子要素が g などのコンテナ要素の場合は、 そのサブツリー全体が処理・描画されるか、スキップ・非描画となります。

SVG で systemLanguage 属性を評価する場合、 switch 要素の子孫要素の評価順序は、 SMIL仕様で定義される 'allowReorder' 属性が常に 'yes' であるかのように扱われなければなりません。

プロパティ display および visibility の値は、 switch 要素の処理には影響しません。 特に、switch の子要素に displaynone に設定しても、true/false 判定には影響しません。

switch 要素は scriptstyle 要素の処理には影響しません。

詳細と例については 他種オブジェクトの埋め込みを参照してください。

5.7.4. ‘requiredExtensions’ 属性

requiredExtensions 属性は、必要な言語拡張のリストを定義します。 言語拡張とは、ユーザーエージェントが本仕様で定義された機能セットを超えて持つ能力です。 各拡張は URL参照 によって識別されます。

名前 初期値 アニメーション可能
requiredExtensions 空白区切りトークンの集合 [HTML] (なし) no

値は、必要な拡張を識別する URL参照 のリストであり、個々の値は空白で区切られます。 指定された 拡張 のすべてがユーザーエージェントでサポートされているかどうかを判定します。 すべての拡張がサポートされていれば属性は true となり、それ以外の場合は現在の要素とその子要素はスキップされて描画されません。

指定された URL参照 に空白が含まれる場合は、その空白をエスケープしなければなりません。

属性が存在しない場合は暗黙的に "true" と評価されます。 属性 requiredExtensions に null文字列または空文字列が与えられた場合は "false" と評価されます。

requiredExtensionsswitch 要素と組み合わせてよく使われます。 他の状況で使用する場合は、対象要素の描画有無を単純に切り替えるスイッチとなります。

拡張のURL名には、"http://example.org/SVGExtensionXYZ/1.0" のようにバージョン情報を含めるべきです。 そうすることでスクリプト作成者が異なる拡張バージョンを区別できます。

5.7.5. ‘systemLanguage’ 属性

名前 初期値 アニメーション可能
systemLanguage カンマ区切りトークンの集合 [HTML] (なし) no

値は カンマ区切りトークンの集合 であり、 各トークンは Language-Tag 値(BCP 47 [BCP47])でなければなりません。

ユーザーの言語設定で示される言語タグのうち、いずれかがこのパラメーターの値に指定された言語タグと大文字・小文字を区別せず一致する場合、 またはユーザーの言語タグがパラメーター値の言語タグの大文字・小文字を区別しない接頭辞であり、 その接頭辞の直後の文字が "-" である場合は "true" となります。

それ以外の場合は "false" となります。

属性が存在しない場合は暗黙的に "true" と評価されます。 属性 systemLanguage に null文字列または空文字列が与えられた場合は "false" と評価されます。

注: この接頭辞一致規則は、言語タグが常に、 あるタグの言語を理解できるユーザーが、そのタグを接頭辞とするすべての言語も理解できることを意味するものではありません。

接頭辞規則は、実際にそのような場合に接頭辞タグの利用を可能とするためのものです。

実装者向け注: ユーザーに言語選択を提供する際は、ユーザーが上記の言語一致の詳細に精通していないことを考慮し、適切なガイダンスを提供すべきです。 例として、"en-gb" を選んだ場合、ユーザーは英国英語が利用できないときは英語文書全般が提供されると思うかもしれません。 ユーザー設定のUIは "en" も追加するよう導くことで最適なマッチング挙動を得られるようにしてください。

複数の言語で複数の対象読者向けコンテンツを示す場合は、複数言語を列挙できます。例えば、マオリ語と英語の原文を同時に表示する場合は、以下のようにします:

<text systemLanguage="mi, en"><!-- content goes here --></text>

ただし、オブジェクト内に複数言語が含まれていても、 systemLanguage テスト属性が複数言語向けであるとは限りません。 例として、「A First Lesson in Latin」など入門書は明らかに英語話者向けです。 この場合、systemLanguage テスト属性は "en" のみを含めるべきです。

著者向け注: 複数の言語オブジェクトを switch で囲み、いずれも一致しない場合はコンテンツが何も表示されないことがあります。 したがって、switch の末尾には全ての状況で許容される「キャッチオール」選択肢を含めることが推奨されます。

systemLanguageswitch 要素と組み合わせてよく使われます。 他の状況で使用する場合は、対象要素の描画有無を単純に切り替えるスイッチとなります。

5.8. ‘desc’ および ‘title’ 要素

5.8.1. 定義

記述要素
親要素について補足的な記述情報を提供する要素。具体的には次の要素が記述要素です: descmetadatatitle

多言語の記述テキスト選択は、lang 属性によって追加され、 desc および title の国際化を可能にしました。

SVG 2で新規追加。'lang'属性の追加はRigi Kaltbad対面会議で決定。 'desc'と'title'要素数に制限を設ける記述を削除。状態:完了。

SVG文書内の コンテナ要素グラフィックス要素は、 子要素として 0 個以上の desctitle 要素を持つことができます。 その内容はテキストです。desctitle 要素は グラフィックスの一部として視覚的には描画されません。 title および desc 要素の display値は ユーザーエージェントスタイルシートによって常に none に設定され、 この宣言は他のCSSルールやプレゼンテーション属性よりも優先されなければなりません。

複数の兄弟 desc または title 要素は 必ず異なる言語でなければなりません。 これは記述要素またはその祖先に lang 属性(または xml:lang 属性)を使って定義されます。 ユーザーエージェントは、ユーザーの言語設定と最も一致する各種要素を選択しなければなりません。 空文字列の言語タグ(言語なし、例えば絵文字のみの代替テキスト)は、全てのユーザー指定言語よりも低い優先度でマッチします。 複数の同等なマッチがあれば最初のものを使います。 'title'または'desc'にマッチがなければ、その型の最初の要素が選択されます。

以下の例は、再利用された星アイコンに対する代替言語タイトルをHTML文書内にインラインで示しています。 この例ではHTML文書全体の言語が正しく en(国コード指定なしの英語)で宣言されていると仮定します。

<svg>
  <use href="#star">
    <title>Favourite</title>
    <title lang="en-us">Favorite</title>
    <title lang="nl">Favoriet</title>
    <title lang="">★</title>
  </use>
</svg>
  

最初の title 要素は文書の言語(en)を継承します。他の要素はそれぞれ明示的に言語が宣言されています。 ユーザーの優先言語が提供された中で米国英語なら、アイコンタイトルは米国式スペル "Favorite" になります。 優先言語がオランダ語なら "Favoriet" になります。 優先リストに一般的な英語がオランダ語より上位なら、イギリス式スペル "Favourite" になります。 ユーザーがオランダ語も英語も分からなければ、タイトルは星記号(★)になります。 これは理想的ではありません(多くのスクリーンリーダーはローカライズされた「黒い星」と読み上げます)が、何の代替テキストもないよりはましです。

著者は、SVG 1.1対応ユーザーエージェントで多言語記述テキスト未実装の場合、 各型の最初の要素がユーザー設定に関わらず選ばれることに注意してください。 SVG 1.1 ユーザーエージェントは、親の最初の子でない title や、 他の記述要素以外が前にある desc を認識できない場合もあります。

複数の titledesc 要素によるローカライズ情報の提供は、既知の実装がなくリスクがあります。

ユーザーエージェントは、選択された 'title' および 'desc' 要素のテキスト内容を、親要素の名前・説明計算の一部として プラットフォームのアクセシビリティAPIに提供しなければなりません。 SVG Accessibility API Mappings [SVG-AAM] に定義されています。

任意の 'title' または 'desc' 要素を 描画される要素 の直接の子に含めることは、 その描画要素がグラフィック上で意味的に重要であることを示します。 著者は空の'title'や'desc'(テキスト内容がない、または空白のみ)を含めるべきではなく、 SVG生成ツールも含めてはなりません。 そうすると支援技術利用者に名前無しオブジェクトが提示されてしまいます。

個々のグラフィック要素自体に意味がない場合は、 意味あるオブジェクトを記述する最も近いコンテナ要素に代替テキストを提供すべきです。 著者は、g要素で描画要素をグループ化し、 そのグループに title で名前付けしてください。 逆に、スタイルやレイアウトの適用のみで、意味あるオブジェクトやグループ構造を定義しないコンテナは、 代替テキストを持つ必要はありません。

親が 描画されない 記述テキスト要素は、 著者やツールが参照情報として使うことはできますが、 このデータは通常支援技術利用者には利用できません。 ただし、非描画要素が描画要素のアクセシブル名や説明に参照される場合 (SVG-AAMで定義)、 再帰的な計算で参照要素の記述子子要素が利用されます。

記述・タイトル要素は他の名前空間からのマークアップテキストを含めることができます(標準XML機構で名前空間を指定)。 ただし、このようなマークアップによる代替テキストの意味づけには依存すべきではありません。 支援技術に必ず公開されるのはプレーンテキスト内容のみです。

HTMLパーサーは title および desc 内のマークアップを HTMLフラグメント内のマークアップと同じように扱い、 ほとんどの要素がHTML名前空間に割り当てられます。

ユーザーエージェントは title 内のマークアップを使って タイトル(ツールチップなど)の視覚的提示に影響させることができますが、必須ではありません。

title
カテゴリ:
記述要素, 非描画要素
内容モデル:
任意の要素または文字データ。
属性:
DOMインターフェース:

title 子要素は、 要素のための短いテキスト代替を表します。

リンクの場合、これはリンク先リソースのタイトルや説明となり得ます。画像や描画オブジェクトの場合、グラフィックの短い説明となり得ます。インタラクティブなコンテンツの場合は、要素のラベルや利用方法の説明などとなります。

描画要素に可視ラベル(例えば text 要素)もある場合は、title 要素に重複した情報を記述しないでください。 代わりに、可視ラベルは aria-labelledby 属性で描画要素に関連付けてください。

インタラクティブなユーザーエージェントは、title 要素のプレーンテキスト内容を、プラットフォームの慣例に沿った方法でユーザー操作に応じて提示するべきです。 既存のユーザーエージェントは、親要素にマウスオーバーした際に title 要素をツールチップとして表示することが一般的です。

著者は、スタンドアロンSVG文書のルートsvg要素に title 子要素を提供するべきです。ユーザーは文書を文脈外で参照することが多いため、文脈豊かなタイトルを指定してください。例えば「Introduction」のようなタイトルではなく、「Introduction to Medieval Bee-Keeping」のようなものを推奨します。アクセシビリティの理由から、ユーザーエージェントは常にルートsvg要素の‘title’子要素の内容をユーザーに提供すべきです。 ただし、これは通常、ネストされたSVGやグラフィック要素のツールチップとは異なり、例えばブラウザタブに表示するなど、他の手段で行われます。

desc
カテゴリ:
記述要素, 非描画要素
内容モデル:
任意の要素または文字データ。
属性:
DOMインターフェース:

desc 要素は、 要素のためのより詳細なテキスト情報(説明など)を表します。これは通常、支援技術に提供され、グラフィックの外観詳細や複雑なウィジェットの機能説明など、より詳細な情報を伝えるために使われます。一般ユーザーには通常提示されないため、必須の操作説明などには使うべきではありません。

著者は、グラフィックの一部に詳細情報(可視テキストも含む)を関連付けるために、aria-describedby 属性 (説明対象要素または親コンテナに指定)を使い、その値として説明を含むSVGまたはHTML要素のID参照を指定できます。 説明を提供する際、aria-describedby 属性が 子要素 desc よりも優先されます。 可視説明と補足情報となる子 desc 要素の両方がある場合は、 要素自身の idaria-describedby リストに明示的に含め、 2つの説明を連結できるようにしてください。

5.9. ‘metadata’ 要素

SVGコンテンツにメタデータを含める場合は、metadata 要素内で指定するべきです。 metadata 要素の内容は、他のXML名前空間からの要素で構成し、 それらの要素は XML名前空間勧告 [xml-names]に準拠した方法で表現する必要があります。

SVG 2では、メタデータ要素の構造化に関する推奨事項は削除されました。

metadata
カテゴリ:
記述要素, 非描画要素
内容モデル:
任意の要素または文字データ。
属性:
DOMインターフェース:

メタデータ内容は直接描画されません。 metadata 要素の display値は常に noneユーザーエージェントスタイルシートで設定され、 この宣言は他のCSSルールやプレゼンテーション属性よりも優先されなければなりません。

以下はメタデータをSVG文書に含める例です。例ではダブリンコア1.1スキーマを使っています。 (RDFベースでないものを含め、他のXML互換メタデータ言語も利用可能です。)

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
    xmlns = 'http://www.w3.org/2000/svg'>
    <desc xmlns:myfoo="http://example.org/myfoo">
      <myfoo:title>This is a financial report</myfoo:title>
      <myfoo:descr>The global description uses markup from the
        <myfoo:emph>myfoo</myfoo:emph> namespace.</myfoo:descr>
      <myfoo:scene><myfoo:what>widget $growth</myfoo:what>
      <myfoo:contains>$three $graph-bar</myfoo:contains>
        <myfoo:when>1998 $through 2000</myfoo:when> </myfoo:scene>
   </desc>
    <metadata>
      <rdf:RDF
           xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
           xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#"
           xmlns:dc = "http://purl.org/dc/elements/1.1/" >
        <rdf:Description about="http://example.org/myfoo"
             dc:title="MyFoo Financial Report"
             dc:description="$three $bar $thousands $dollars $from 1998 $through 2000"
             dc:publisher="Example Organization"
             dc:date="2000-04-11"
             dc:format="image/svg+xml"
             dc:language="en" >
          <dc:creator>
            <rdf:Bag>
              <rdf:li>Irving Bird</rdf:li>
              <rdf:li>Mary Lambert</rdf:li>
            </rdf:Bag>
          </dc:creator>
        </rdf:Description>
      </rdf:RDF>
    </metadata>
</svg>

5.10. HTMLメタデータ要素

HTMLをサポートするユーザーエージェントは、以下のHTML要素(HTML名前空間内)をSVG文書でサポートする必要があります:

base 要素は、 文書内のすべてのURL値(例:ペイントサーバー参照や use 要素の参照)に影響する点に注意してください。 ただし、特定のターゲット要素を識別するために URL参照を処理する場合、 ユーザーエージェントは生成された絶対URLを常に現在の文書ベースURLと比較し、 それが 同一文書URL参照かどうか判定しなければなりません。 この方法により、同一文書内の要素へのターゲットフラグメント参照は、 文書ベースURLが変更されても有効なままとなります。

5.11. 外部名前空間とプライベートデータ

SVGは、SVGコンテンツ内の任意の場所で外部名前空間の要素を含めることを許可します。 一般的に、SVGユーザーエージェントは 未知の外部名前空間の要素をDOMに含めますが、描画処理ではこれらを無視・除外します。

重要な例外については、埋め込みコンテンツ章SVGサブツリー内のHTML要素他種オブジェクトの埋め込みに記載されています。 また、SVG名前空間内の未知の要素の扱いも参照してください。 これらは異なる扱いとなります。

さらに、SVGは任意のSVG要素上で外部名前空間の属性を含めることを許可しています。 SVGユーザーエージェントは未知の属性をDOMに含めますが、その他は無視するべきです。

著者は、未知の名前空間付き要素や属性がHTMLパーサーでは名前空間要素として解釈されないことを認識してください。 代わりに、名前空間プレフィックスはタグ名や属性名に含まれ、 要素は親要素の名前空間に、属性はデフォルト名前空間に配置されます。

XMLとHTML文書両方で一貫したパース結果を得るためにカスタム属性を追加したい場合、 ‘data-*’ 属性を利用できます。 これらは、文書内の他の要素と関連しない情報を格納する場合、 SVG metadata 要素に追加できます。

SVGの外部名前空間含有機能は、以下の目的で利用できます:

例えば、ビジネスグラフィックスオーサリングアプリケーションは、 SVG文書内にプライベートデータを含めることで、再読込時にチャート(この場合は円グラフ)を正しく再構成できるようにすることができます:

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
     xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <myapp:piechart xmlns:myapp="http://example.org/myapp"
                    title="Sales by Region">
      <myapp:pieslice label="Northern Region" value="1.23"/>
      <myapp:pieslice label="Eastern Region" value="2.53"/>
      <myapp:pieslice label="Southern Region" value="3.89"/>
      <myapp:pieslice label="Western Region" value="2.04"/>
      <!-- 他のプライベートデータ -->
    </myapp:piechart>
  </defs>
  <desc>このチャートは他の名前空間のプライベートデータを含みます
  </desc>
  <!-- ここに実際のSVGグラフィック要素(円グラフ描画)が入る -->
</svg>

5.12. 共通属性

5.12.1. 定義

コア属性
コア属性は、すべてのSVG要素に指定可能な属性です。 コア属性は idtabindexlangxml:spaceclassstyle、およびすべての カスタムデータ属性です。

5.12.2. すべての要素共通属性: ‘id’

id 属性はすべてのSVG要素で利用可能です:

名前 初期値 アニメーション可能
id (下記参照) (なし) no

要素のID [DOM] を反映しなければなりません。 id 属性はノードツリー内で一意でなければならず、 空文字列であってはならず、 空白文字を含んではなりません。

追加の要件として、id 属性がXML文書内で有効となるためには、 該当するXMLバージョンの仕様で定義された要件に従う必要があります。 スタンドアロンSVG文書はXML 1.0構文 [xml] を使用し、 有効な id 値は XML名トークンである必要があります。 有効なXML 1.0名は、指定された文字(英字、数字、一部の記号)しか含まず、 数字、ピリオド(.)、ハイフン(-)で始まってはなりません。

ユーザーエージェントはSVGファイル内の id 値をXMLの有効性に関係なく処理すべきです。

著者は、id の値として URLターゲットフラグメントとして使われる際に SVGビュー指定メディアフラグメントと解釈される値は避けるべきです。

5.12.3. ‘lang’ および ‘xml:lang’ 属性

‘lang’ 属性(名前空間なし)は、要素の内容および 要素のテキストを含む属性の主言語を指定します。

XML名前空間の ‘lang’ 属性はXML [xml] で定義されています。

これらの属性が要素から省略された場合、その要素の言語は親要素の言語(もしあれば)と同じになります。

XML名前空間の ‘lang’ 属性は、XML文書のSVG要素で使用できます。 名前空間なしとXML名前空間の両方の ‘lang’ 属性が同じ要素に指定された場合、 ASCII大文字・小文字を区別しない比較で、値が完全に一致していなければなりません。

名前空間なしとXML名前空間の両方の ‘lang’ 属性が要素に設定された場合、 ユーザーエージェントはXML名前空間の ‘lang’ 属性を使用し、 名前空間なしの ‘lang’ 属性は要素の言語判定では無視しなければなりません。

名前 初期値 アニメーション可能
lang 言語タグ [ABNF] (なし) no

‘lang’ 属性は、要素の内容および 要素のテキストを含む属性の主言語を指定します。値は有効なBCP 47言語タグか空文字列でなければなりません。空文字列を設定すると主言語は不明となります。 [BCP47]。

5.12.4. ‘xml:space’ 属性

SVG 2要件: ‘xml:space’によるテキストレイアウトの制御を廃止し、代わりに ‘white-space’プロパティを使用する。
決議: SVG 2からxml:spaceを削除し、SVG 1.1テストスイートから関連テストも削除。
目的: CSSとの整合性のため。
担当者: Chris (ACTION-3004, 完了; ACTION-3005, 完了)
ステータス 完了。
名前 初期値 アニメーション可能
xml:space (下記参照) default no

文字データ内の空白保持を指定するための非推奨XML属性。指定可能な値は 'default''preserve' のみで、空白を含みません。詳細は 拡張マークアップ言語 (XML) 1.0 勧告 [xml] と SVGの 空白処理の説明を参照してください。

新規コンテンツでは代わりに white-space プロパティを使用してください。

5.12.5. ‘tabindex’ 属性

名前 初期値 アニメーション可能
tabindex 有効な整数 [HTML] (なし) no

この内容属性は、要素がフォーカス可能か、順次フォーカス移動で到達可能か、 順次フォーカス移動時の相対順序を制御するために使われます。

"tab index"という名称は、フォーカス可能な要素間を移動する際によく使われる "tab"キーに由来します。"tabbing"は、順次フォーカス移動で到達可能な要素を前方へ移動する操作を指します。

5.12.6. ‘data-*’ 属性

すべてのSVG要素は カスタムデータ属性 をサポートします。 これらは名前空間なしで、名前が"data-"で始まる属性です。 HTML仕様のカスタムデータ属性の要件も参照してください。

5.13. WAI-ARIA属性

5.13.1. 定義

ARIA属性
これらはWAI-ARIAで定義された属性であり、 WAI-ARIAの状態やプロパティ、role属性を含みます。 ロールの定義、WAI-ARIA Graphics Moduleのグラフィックスロール、 WAI-ARIAの対応する状態とプロパティも参照してください。 aria属性としては aria-activedescendantrolearia-autocompletearia-busyaria-checkedaria-colcountaria-colindexaria-colspanaria-controlsaria-currentaria-describedbyaria-detailsaria-disabledaria-dropeffectaria-errormessagearia-expandedaria-flowtoaria-grabbedaria-haspopuparia-hiddenaria-invalidaria-keyshortcutsaria-labelaria-labelledbyaria-atomicaria-livearia-modalaria-multilinearia-multiselectablearia-orientationaria-ownsaria-placeholderaria-posinsetaria-pressedaria-readonlyaria-relevantaria-requiredaria-roledescriptionaria-rowcountaria-rowindexaria-rowspanaria-selectedaria-setsizearia-sortaria-valuemaxaria-valueminaria-valuenowaria-valuetextaria-level

上記のARIA属性リストは、将来的なWAI-ARIA仕様で拡張される可能性があります。

5.13.2. ロール属性

どの 描画可能要素 でもARIAロール属性を指定できます。 ロール属性は 非描画要素 では無視されます。 属性が指定された場合、その値は要素が属するWAI-ARIAロールを表す 空白区切りトークンの集合でなければなりません。 これらのトークンは ロールの定義 ([wai-aria]、5.4節) および グラフィックスロール ([graphics-aria-1.0]、4節) で定義されたロール値です。

SVG要素に割り当てられるWAI-ARIAロールは、role属性を空白で分割したトークンリストの中で最初に有効なロールとなります。 有効なロールとは、その要素型に許可されている、認識される非抽象ロールです。

名前 初期値 アニメーション可能
role 空白区切りトークンの集合 [HTML] (下記参照) no

role 属性は 空白区切りトークンの集合であり、 値は ロールの定義 ([wai-aria]、5.4節) で定義されたものです。

ロール値は、要素の目的を定義するための、機械抽出可能な意味情報の空白区切り集合です。

role 属性の 初期値は各SVG要素ごとに SVG要素の暗黙的ARIAセマンティクスで定義された値です。

有効かつ有用なロールであるためには、多くの要素ロールで、アクセシブルネームや 明示的な 状態・プロパティ値 など追加情報の指定が必要です。 アクセシブルネームはSVGの 記述要素 または ARIA属性で指定できます。 各ロールの要件は、ロールの定義箇所(例:WAI-ARIA ([WAI-ARIA]) や WAI-ARIA Graphics Module ([graphics-aria-1.0]))に示されています。

5.13.3. 状態・プロパティ属性(全aria属性)

WAI-ARIAの状態・プロパティ属性はSVG要素で指定可能です。 これらの属性はARIAにより 状態・プロパティの定義(全aria-*属性) ([wai-aria]、6.6節) で定義されています。

これらの属性が指定された場合、その値は 状態またはプロパティの定義の「Value」欄のWAI-ARIA値型であり、 WAI-ARIA値型から言語へのマッピング に従って、SVGの値型に適切に対応づけられる必要があります([wai-aria]、10.2節)。

これらの属性はアニメーション可能です。 グラフィックの状態変更や、正しい代替テキスト記述の内容が変化するような場合にアニメーションを使う場合は、 対応するARIA状態・プロパティ属性も同じ方法で更新されるべきです。

WAI-ARIAの状態・プロパティ属性はどの要素にも使えます。ただし意味を持たない場合もあり、その場合ユーザーエージェントはDOMへの格納以外の処理を行わない場合があります。状態・プロパティ属性は ARIA および SVG Accessibility API Mappings の仕様に従って処理されます。[wai-aria] [svg-aam-1.0]

5.13.4. 暗黙的ARIAセマンティクスと許可されるARIAセマンティクス

次の表はSVG要素に適用される暗黙的ARIAセマンティクスのデフォルトを定義します。各言語機能(要素)が最初の列のセルにあり、その行の2列目のセルに示されたARIAセマンティクス(ロール、状態、プロパティ)を暗黙的に持ちます。3列目は、そのWAI-ARIAセマンティクス(ロール、状態、プロパティ)に適用の可否など制約を定義します。

多くのグラフィックス要素では、著者が意味的な重要性を示す情報を提供した場合のみ暗黙ロールが割り当てられます。 アクセシビリティツリーへの包含基準の完全な定義は SVG Accessibility API Mappings仕様で示されています。[svg-aam-1.0] 著者が意味的重要性を示す推奨方法は、要素にアクセシブルネームを与えることです。 これは直接の子として title 要素を追加するか、 aria-labelaria-labelledby 属性を指定することで可能です。 SVGの理解に不可欠なコンテンツ、特にインタラクティブコンテンツには、いずれかの方法でアクセシブルネームを提供してください。

言語機能 暗黙的ARIAセマンティクス(デフォルト) 許可されるロール
a linkロール (要素に有効な href または xlink:href 属性がある場合)。 a 要素がリンクでない場合、デフォルトセマンティクスは tspan(親が text の場合)または g(それ以外の場合)と同じ。 制約なし
audio プラットフォーム固有のロールマッピング (HTML Accessibility API Mappings仕様で定義) 指定する場合、ロールはapplicationでなければならない
canvas プラットフォーム固有のロールマッピング (HTML Accessibility API Mappings仕様で定義) 制約なし
circle graphics-symbolロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
clipPath なし ロール適用不可
defs なし ロール適用不可
desc なし ロール適用不可
ellipse graphics-symbolロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
feBlend なし ロール適用不可
feColorMatrix なし ロール適用不可
feComponentTransfer なし ロール適用不可
feComposite なし ロール適用不可
feConvolveMatrix なし ロール適用不可
feDiffuseLighting なし ロール適用不可
feDisplacementMap なし ロール適用不可
feDistantLight なし ロール適用不可
feDropShadow なし ロール適用不可
feFlood なし ロール適用不可
feFuncA なし ロール適用不可
feFuncB なし ロール適用不可
feFuncG なし ロール適用不可
feFuncR なし ロール適用不可
feGaussianBlur なし ロール適用不可
feImage なし ロール適用不可
feMerge なし ロール適用不可
feMergeNode なし ロール適用不可
feMorphology なし ロール適用不可
feOffset なし ロール適用不可
fePointLight なし ロール適用不可
feSpecularLighting なし ロール適用不可
feSpotLight なし ロール適用不可
feTile なし ロール適用不可
feTurbulence なし ロール適用不可
filter なし ロール適用不可
foreignObject groupロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
g groupロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
iframe プラットフォーム固有のロールマッピング (HTML Accessibility API Mappings仕様で定義) 指定する場合、ロールはapplicationdocumentimgのいずれかでなければならない
image imgロール 制約なし
line graphics-symbolロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
linearGradient なし ロール適用不可
marker なし ロール適用不可
mask なし ロール適用不可
metadata なし ロール適用不可
mpath なし ロール適用不可
path graphics-symbolロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
pattern なし ロール適用不可
polygon graphics-symbolロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
polyline graphics-symbolロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
radialGradient なし ロール適用不可
rect graphics-symbolロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
script なし ロール適用不可
stop なし ロール適用不可
style なし ロール適用不可
svg graphics-documentロール 制約なし
switch なし ロール適用不可
symbol graphics-objectロール (要素が描画される element instance かつ 包含基準を満たす場合)、それ以外は none 制約なし
text groupロール、 プラットフォーム固有のロールマッピング (SVG Accessibility API Mappings仕様で定義) 制約なし
textPath groupロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
title なし ロール適用不可
tspan groupロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
use graphics-objectロール (要素が 包含基準 を満たす場合)、それ以外は none 制約なし
video プラットフォーム固有のロールマッピング (HTML Accessibility API Mappings仕様で定義) 指定する場合、ロールはapplicationでなければならない
view なし ロール適用不可

5.14. DOMインターフェース

5.14.1. Documentインターフェースの拡張

DOM Core仕様は Document インターフェースを定義しており、本仕様ではこれを拡張します。

SVG文書が参照によって埋め込まれる場合、 例えばHTML文書内に ‘object’ 要素があり、 その ‘data’ 属性がSVG文書(MIMEタイプが "image/svg+xml" で、ルート要素が svg である文書)を参照している場合、2つの異なるDOM階層が存在します。1つ目のDOM階層は参照元文書(例:XHTML文書)用、2つ目のDOM階層は参照先SVG文書用です。

partial interface Document {
  readonly attribute SVGSVGElement? rootElement;
};

rootElement IDL属性は ルートの svg 要素を表します。rootElement を取得する際、ルート要素が svg の場合はその要素を、そうでなければnullを返します。

この属性は非推奨であり、将来のSVG仕様で削除される可能性があります。著者は documentElement 属性を Document で使うことが推奨されます。

HTMLを実装するSVG実装は DocumentオブジェクトへのHTML拡張に対応しなければなりません。 その他のSVG実装は以下のIDLフラグメントに対応しなければなりません。

// 特定の実装のみ
partial interface Document {
  readonly attribute DOMString title;
  readonly attribute DOMString referrer;
  readonly attribute DOMString domain;
  readonly attribute Element? activeElement;
};

title, referrer, domain, activeElement のIDL属性は HTMLで定義されている対応するIDL属性と同じ動作をしなければなりません。

5.14.2. SVGSVGElementインターフェース

SVGSVGElement オブジェクトは DOM内の svg 要素を表します。 SVGSVGElement インターフェースは データ型オブジェクトファクトリメソッドなど、様々なユーティリティメソッドも持ちます。

SVGSVGElement オブジェクトは内部に DOMPoint オブジェクト( current translate point object)を保持します。 このオブジェクトは currentTranslate IDL属性から返されます。

[Exposed=Window]
interface SVGSVGElement : SVGGraphicsElement {

  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;

  attribute float currentScale;
  [SameObject] readonly attribute DOMPointReadOnly currentTranslate;

  NodeList getIntersectionList(DOMRectReadOnly rect, SVGElement? referenceElement);
  NodeList getEnclosureList(DOMRectReadOnly rect, SVGElement? referenceElement);
  boolean checkIntersection(SVGElement element, DOMRectReadOnly rect);
  boolean checkEnclosure(SVGElement element, DOMRectReadOnly rect);

  void deselectAll();

  SVGNumber createSVGNumber();
  SVGLength createSVGLength();
  SVGAngle createSVGAngle();
  DOMPoint createSVGPoint();
  DOMMatrix createSVGMatrix();
  DOMRect createSVGRect();
  SVGTransform createSVGTransform();
  SVGTransform createSVGTransformFromMatrix(DOMMatrixReadOnly matrix);

  Element getElementById(DOMString elementId);

  // 呼び出しても効果がない非推奨メソッド
  // 互換性維持のため残されている
  unsigned long suspendRedraw(unsigned long maxWaitMilliseconds);
  void unsuspendRedraw(unsigned long suspendHandleID);
  void unsuspendRedrawAll();
  void forceRedraw();
};

SVGSVGElement includes SVGFitToViewBox;
SVGSVGElement includes SVGZoomAndPan;
SVGSVGElement includes WindowEventHandlers;

x, y, width, height のIDL属性は、それぞれ x, y, width, height のプロパティおよび対応するプレゼンテーション属性の計算値を反映します。

currentScalecurrentTranslate のIDL属性は ユーザーの拡大・パン操作に応じて文書に適用される変形を表します。詳細は 拡大・パンを参照してください。

文書の拡大・パン変換は [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]という2x3行列です。 transform プロパティの値は currentScalecurrentTranslate には影響しません。

currentScale を取得する際、以下の手順が実行されます:

  1. 現在の svg 要素が 最外縁svg要素でなければ、1を返す。
  2. [a b c d e f] を文書の拡大・パン変換の2x3行列とする。
  3. a を返す。

currentScale を設定する際、以下の手順が実行されます:

  1. 現在の svg 要素が 最外縁svg要素でなければ、何もしない。
  2. scalecurrentScale に代入される値とする。
  3. [a b c d e f] を文書の拡大・パン変換の2x3行列とする。
  4. 文書の拡大・パン変換を [scale 0 0 scale e f] に設定する。

currentTranslate を取得すると、 SVGSVGElement オブジェクトの current translate point object が返されます。 このオブジェクトは 現在の平行移動を表します。 svg 要素が 最外縁svg要素でなければ読み取り専用、それ以外では書き込み可能です。

DOMPointへの代入規則も参照。current translate point object を変更すると文書の拡大・パン変換にどう影響するかが記載されています。

文書の拡大・パン変換がユーザー操作で変化した時や 最外縁svg要素が変わった時は、以下の手順が実行されます:

  1. [a b c d e f] を文書の拡大・パン変換の2x3行列とする。
  2. element最外縁svg要素とする。
  3. elementcurrent translate point object のx,y成分をそれぞれe,fに更新する。

最外縁svg要素が変わった時にこの手順を走らせることで、documentElementが別の svg 要素に置換された場合でも currentTranslate が即座に拡大・パン変換の平行移動成分を反映します。

svg 要素が 最外縁svg要素でなくなった場合、 その current translate point object のx,y成分は0に設定しなければなりません。

zoomAndPan 属性値は 最外縁svg要素で、ユーザー操作による拡大・パン変換の更新可否のみ制御します。 属性値に関わらず currentScale, currentTranslate は直接変更可能です。

suspendRedraw, unsuspendRedraw, unsuspendRedrawAll, forceRedraw の各メソッドは全て非推奨で、呼び出しても何も効果がありません。suspendRedrawは1を返す必要があります。

getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure の各メソッドは、グラフィックス要素に対して、グラフィックス内容が指定した矩形内に部分的または完全に含まれる要素の検索や判定に使います。

要素 element の子孫のうち、矩形 rectangleancestor の座標空間で判定する 交差・包含子孫の検索は、以下の手順で行います:

  1. result を空リストとして初期化する。
  2. elementdisplay 値が none のため表示されていない、または失敗した 条件付き処理属性 を持つサブツリー、または失敗した switch の分岐にある場合、result を返す。
  3. element の各子要素 child について、文書順で:
    1. childsvg または g 要素なら:
      1. descendants を、childrectangleancestor の座標系)で 交差(または包含)子孫の検索の結果とする。
      2. descendants の全要素を result に追加する。
    2. それ以外で childuse 要素なら:
      1. rootchild のシャドウツリーのルートとする。
      2. descendantsrootrectangleancestor の座標系)で 交差(または包含)子孫の検索の結果とする。
      3. descendants が空でない場合、childresult に追加する。

        このためuse要素シャドウツリー内の要素は見るが、element instanceやその対応する要素result リストに入れず、use 要素自身のみ返す。

    3. それ以外で childグラフィックス要素なら:
      1. regionchild の座標系でヒット判定に用いる形状とし、childpointer-events 値の解釈規則を考慮する。
      2. regionancestor の座標系へ変換する。
      3. 交差する子孫を検索している場合、regionrectangle に部分的または全体的に含まれるなら childresult に追加。
      4. それ以外の場合は包含子孫検索。regionrectangle に完全に含まれるなら childresult に追加。
  4. result を返す。

指定した要素 element 内の非コンテナグラフィックス要素の検索は、以下の手順で行う:

  1. result を空リストとして初期化する。
  2. elementsvg または g 要素なら、element の各子要素 child を文書順で:
    1. descendantschild 内の 非コンテナグラフィックス要素検索の結果とする。
    2. descendants の全要素を result に追加する。
  3. それ以外で elementグラフィックス要素なら elementresult に追加。
  4. result を返す。

getIntersectionList(rect, referenceElement) または getEnclosureList(rect, referenceElement) が呼ばれると、以下の手順が実行される:

  1. descendants を、どちらのメソッドかに応じてリストとして決定:
    getIntersectionList
    descendants は、現在の svg 要素内で rect(自身の座標系)に対する 交差子孫の検索の結果。
    getEnclosureList
    descendants は、現在の svg 要素内で rect(自身の座標系)に対する 包含子孫の検索の結果。
  2. referenceElement が null でなければ、referenceElement を祖先に持たない要素を descendants から除外。
  3. descendants の全要素を含む staticNodeList を返す。 ([DOM]、5.2.7節)

checkIntersection(element, rect) または checkEnclosure(element, rect) が呼ばれると、以下の手順が実行される:

  1. descendants を、どちらのメソッドかに応じてリストとして決定:
    getIntersectionList
    descendants は、現在の svg 要素内で rect(自身の座標系)に対する 交差子孫の検索の結果。
    getEnclosureList
    descendants は、現在の svg 要素内で rect(自身の座標系)に対する 包含子孫の検索の結果。
  2. elementselement 内の 非コンテナグラフィックス要素検索の結果とする。
  3. elements が空なら false を返す。
  4. elements のいずれかが descendants に含まれていなければ false を返す。
  5. true を返す。

deselectAll メソッドは文書から選択状態をすべて解除するためのものです。deselectAll() を呼ぶと、文書の Range が全て Selection から削除され、Selectiondirection が forwards に設定されます。[DOM][EDITING] このメソッドはSelection APIの機能重複のため非推奨です。

これは document.getSelection().removeAllRanges() をこの svg 要素が属する文書で呼ぶのと同じです。

createSVGNumber, createSVGLength, createSVGAngle, createSVGPoint, createSVGMatrix, createSVGRect, createSVGTransform の各メソッドは、特定型の新しいデータ型オブジェクト作成用のファクトリ関数です。呼び出した時は以下の表に従い新しいオブジェクトを返します:

メソッド オブジェクトと詳細
createSVGNumber 値が0の新しい デタッチされた SVGNumber オブジェクト。
createSVGLength 値が単位なしの <number> 0である新しい デタッチされた SVGLength オブジェクト。
createSVGAngle 値が単位なしの <number> 0である新しい デタッチされた SVGAngle オブジェクト。
createSVGPoint 座標が全て0の新しい デタッチされた DOMPoint オブジェクト。
createSVGMatrix 単位行列を表す新しい デタッチされた DOMMatrix オブジェクト。
createSVGRect x, y, width, heightが全て0の新しい DOMRect オブジェクト。
createSVGTransform 値が matrix(1, 0, 0, 1, 0, 0) の新しい デタッチされた SVGTransform オブジェクト。

createSVGPointcreateSVGMatrixcreateSVGRect の各メソッドはすべて非推奨で、レガシーコンテンツとの互換性のために残されています。 著者は DOMPointDOMMatrixDOMRect の各コンストラクタを使うことが推奨されます。

createSVGTransformFromMatrix メソッドは、行列オブジェクトから新しい SVGTransform オブジェクトを作成するためのものです。 挙動は SVGTransformListのcreateSVGTransformFromMatrix メソッドと同じです。

getElementById メソッドは、 svg 要素の子孫内で ツリー順で最初に elementId をIDとして持つ要素を返します。なければnullを返します。

5.14.3. SVGGElementインターフェース

SVGGElement オブジェクトはDOM内の g 要素を表します。

[Exposed=Window]
interface SVGGElement : SVGGraphicsElement {
};

5.14.4. SVGUnknownElementインターフェース

SVGUnknownElement オブジェクトはSVG名前空間内の未知の要素を表します。

[Exposed=Window]
interface SVGUnknownElement : SVGGraphicsElement {
};

5.14.5. SVGDefsElementインターフェース

SVGDefsElement オブジェクトはDOM内の defs 要素を表します。

[Exposed=Window]
interface SVGDefsElement : SVGGraphicsElement {
};

5.14.6. SVGDescElementインターフェース

SVGDescElement オブジェクトはDOM内の desc 要素を表します。

[Exposed=Window]
interface SVGDescElement : SVGElement {
};

5.14.7. SVGMetadataElementインターフェース

SVGMetadataElement オブジェクトはDOM内の metadata 要素を表します。

[Exposed=Window]
interface SVGMetadataElement : SVGElement {
};

5.14.8. SVGTitleElementインターフェース

SVGTitleElement オブジェクトはDOM内の title 要素を表します。

[Exposed=Window]
interface SVGTitleElement : SVGElement {
};

5.14.9. SVGSymbolElementインターフェース

SVGSymbolElement オブジェクトはDOM内の symbol 要素を表します。

[Exposed=Window]
interface SVGSymbolElement : SVGGraphicsElement {
};

SVGSymbolElement includes SVGFitToViewBox;

SVG 2で追加。 SVGSymbolElement インターフェースは SVGGraphicsElement を継承するようになり、シャドウDOMでインスタンス化された symbol をグラフィックス要素として問い合わせ可能になりました。

5.14.10. SVGUseElementインターフェース

SVGUseElement オブジェクトは、DOM内の use 要素を表します。

[Exposed=Window]
interface SVGUseElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;
  [SameObject] readonly attribute SVGElement? instanceRoot;
  [SameObject] readonly attribute SVGElement? animatedInstanceRoot;
};

SVGUseElement includes SVGURIReference;

x, y, width, height のIDL属性は、それぞれ x, y, width, height のプロパティおよび対応するプレゼンテーション属性の計算値を反映します。

instanceRootanimatedInstanceRoot のIDL属性は、どちらも インスタンスルート(この要素のシャドウルートの直接の子となる SVGElementInstance)を指します。 (u.instanceRootu.shadowRoot.firstChild を取得するのと同じです)。 この要素にシャドウツリーが存在しない場合 (例えば、URIが無効だったり、条件付き処理で無効化された場合など)、 これらの属性を取得するとnullが返されます。

5.14.11. SVGUseElementShadowRootインターフェース

use要素シャドウツリー のルートオブジェクトは SVGUseElementShadowRoot インターフェースを実装します。 このインターフェースは現在、ShadowRoot インターフェースおよび DocumentOrShadowRoot ミックスインで定義されたプロパティやメソッドへの拡張を定義していません。 ただし、このノードをルートとするツリーは、著者スクリプト側からは完全に読み取り専用です。

[Exposed=Window]
interface SVGUseElementShadowRoot : ShadowRoot {
};

5.14.12. SVGElementInstanceミックスイン

SVGElementInstance インターフェースは、SVGElement インターフェースへの拡張を定義します。 これは use要素シャドウツリー内の要素にのみ使用されます。

以前のSVGバージョンでは、 SVG要素インスタンスは非要素オブジェクトとして定義されており、 有効なイベントターゲットでしたが、完全なDOMノードではありませんでした。 本仕様では use要素シャドウツリー をShadow DOM仕様と整合するように再定義しており、 インスタンスは実際のSVGElementオブジェクトです。 このインターフェースは後方互換のために不足機能を追加するものです。 ただし、著者は互換性が完全でないことに留意し、スクリプト設計を行うべきです。 また、シャドウツリー内のHTML名前空間要素オブジェクトではこれらのプロパティは利用できません。

interface mixin SVGElementInstance {
  [SameObject] readonly attribute SVGElement? correspondingElement;
  [SameObject] readonly attribute SVGUseElement? correspondingUseElement;
};

correspondingElement IDL属性は、 この要素が use要素シャドウツリー内の element instance である場合に 対応する要素 を指します。そうでなければnullです。

参照要素が外部ファイル内にある場合、 このポインタの存在は、その外部ファイルの全DOMをメモリに保持する必要があることを意味します。 しかし、現行標準の仕様では外部DOMは読み取り専用です。 したがって機能は限定的で、パフォーマンスへの影響が大きい可能性があります。 実装者からのフィードバック待ちですが、 著者は外部ファイル参照で correspondingElement を用いる場合はリスクがあると考慮してください。

correspondingUseElement IDL属性は、 この要素が use要素シャドウツリー内の element instance である場合に 対応するuse要素 を指します。そうでなければnullです。

5.14.13. ShadowAnimationインターフェース

ShadowAnimation インターフェースは、Animation オブジェクト(読み取り専用)を定義します。 これは、構築元となった sourceAnimation オブジェクトの全変更をミラーします。 use要素シャドウツリー内で、著者によるアニメーションオブジェクトをミラーするために用いられます。

[Constructor(Animation source, Animatable newTarget), Exposed=Window]
interface ShadowAnimation : Animation {
  [SameObject] readonly attribute Animation sourceAnimation;
};

sourceAnimation IDLプロパティは、 コンストラクタで渡された Animation オブジェクトを指します。

コンストラクタは新しい ShadowAnimation オブジェクトを生成し、 sourceAnimation のすべてのプロパティを反映しますが、 effectKeyframeEffectReadOnly を新しく構築して そのソースに sourceAnimation のキーフレームエフェクトを使い、 target プロパティは newTarget パラメータと一致するよう変更されます。

ShadowAnimation は読み取り専用です。 継承したIDLプロパティに値をセットしたり、 状態を変更する Animation メソッドを呼び出すと NoModificationAllowedError を投げなければなりません。 ただし、ユーザーエージェントは sourceAnimation のプロパティや状態の変更を ShadowAnimation に反映することを保証しなければなりません。

5.14.14. SVGSwitchElementインターフェース

SVGSwitchElement オブジェクトは、DOM内の switch 要素を表します。

[Exposed=Window]
interface SVGSwitchElement : SVGGraphicsElement {
};

5.14.15. GetSVGDocumentミックスイン

このインターフェースは、他のDOMベース言語から参照埋め込みされたSVG文書へのアクセスを提供します。想定される実装は、SVG文書参照を許可するDOMオブジェクト上です。

このインターフェースは非推奨であり、将来のSVG仕様から削除される可能性があります。‘iframe’‘object’ 要素内のSVG文書にアクセスする場合、著者はそれぞれ HTMLIFrameElementHTMLObjectElement インターフェースの contentDocument 属性を使うことが推奨されます。

HTMLIFrameElementHTMLEmbedElement および HTMLObjectElement インターフェースは、それぞれ独自に getSVGDocument メソッドを定義しており、 GetSVGDocument と同様にSVG文書へアクセス可能です。 したがって、これら3つのインターフェースは GetSVGDocument を実装する必要はありません。 それでも、著者は contentDocument の利用を強く推奨します。

interface mixin GetSVGDocument {
  Document getSVGDocument();
};

getSVGDocument メソッドは参照されたSVG文書を返すためのものです。getSVGDocument() を呼び出すと、埋め込み要素が実装する GetSVGDocument インターフェースによって参照されている Document オブジェクトを返します。文書が存在しない場合はnullが返されます。

このメソッドは参照先がSVG文書かどうかのチェックは行いません。代わりに、任意の文書が返されます。