5 文書構造

目次

• 5.1 SVG 文書片を定義する： 'svg' 要素
  • 5.1.1 概観
  • 5.1.2 'svg' 要素
• 5.2 グループ化： 'g' 要素
  • 5.2.1 概観
  • 5.2.2 'g' 要素
• 5.3 'defs' 要素
• 5.4 'discard' 要素
• 5.5 'title' と 'desc' 要素
  • 5.5.1 適用し得る 'title' と 'desc'
  • 5.5.2 複数の 'title' と 'desc' 要素
  • 5.5.3 'title' と 'desc' に対するユーザインターフェースのふるまい
• 5.6 'use' 要素
• 5.7 'image' 要素
• 5.8 条件処理
  • 5.8.1 条件処理の概観
  • 5.8.2 'switch' 要素
  • 5.8.3 'requiredFeatures' 属性
  • 5.8.4 'requiredExtensions' 属性
  • 5.8.5 'systemLanguage' 属性
  • 5.8.6 'requiredFormats' 属性
  • 5.8.7 'requiredFonts' 属性
• 5.9 外部リソース
  • 5.9.1 'externalResourcesRequired' 属性
  • 5.9.2 漸進的描画
  • 5.9.3 'prefetch' 要素
• 5.10 共通属性
  • 5.10.1 すべての要素に共通の属性
  • 5.10.2 文字内容の要素の属性

5.1 SVG 文書片を定義する： svg 要素

5.1.1 概観

SVG 文書片 は svg 要素とその svg 要素に含まれる任意個数の SVG 要素 により構成される。 An SVG document fragment consists of any number of SVG elements contained within an 'svg' element, including the 'svg' element.

SVG 文書片 は空の素片（すなわち svg 要素の内部に何も含んでいないもの）や、 rect などの グラフィックス要素 をただ一つ含むごく単純なものから、 コンテナ要素 と グラフィックス要素 から構築される複雑で深い入れ子構造を持つものまでになり得る。 An SVG document fragment can range from an empty fragment (i.e., no content inside of the 'svg' element), to a very simple SVG document fragment containing a single SVG graphics element such as a 'rect', to a complex, deeply nested collection of container elements and graphics elements.

SVG 文書片 はそれ自身が独立したファイルまたはリソースとなれる。その場合、 SVG 文書片 は SVG 文書になる。あるいは、親となる XML 文書に素片としてインラインに埋め込むこともできる。 An SVG document fragment can stand by itself as a self-contained file or resource, in which case the SVG document fragment is an SVG document, or it can be embedded inline as a fragment within a parent XML document.

親の XML 文書に素片として埋め込まれた単純な SVG 内容の例を下に示す。 XML 名前空間の利用により svg 要素と ellipse 要素が SVG 名前空間に属することを指示していることに注意： The following example shows simple SVG content embedded inline as a fragment within a parent XML document. Note the use of XML namespaces to indicate that the 'svg' and 'ellipse' elements belong to the SVG namespace:

<?xml version="1.0"?>
<parent xmlns="http://example.org"
        xmlns:svg="http://www.w3.org/2000/svg">
   <!-- 親の内容がここに -->
   <!-- parent contents here -->
   <svg:svg width="4cm" height="8cm" version="1.2" baseProfile="tiny" viewBox="0 0 100 100">
      <svg:ellipse cx="50" cy="50" rx="40" ry="20" />
   </svg:svg>
   <!-- ... -->
</parent>

次は少し複雑な例で（いくつかの矩形が含まれている）独立した外部依存のない SVG 文書になっている： This example shows a slightly more complex (i.e., it contains multiple rectangles) stand-alone, self-contained SVG document:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="5cm" height="4cm" viewBox="0 0 100 100">

  <!-- ４個の別々の矩形 -->
  <desc> Four separate rectangles </desc>

  <rect x="20" y="20" width="20" height="20"/>
  <rect x="50" y="20" width="30" height="15"/>
  <rect x="20" y="50" width="20" height="20"/>
  <rect x="50" y="50" width="20" height="40"/>

  <!-- 'rect' 要素でキャンバスの境界を表示 -->
  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="98" height="98"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

SVG 文書片 は svg 要素を１個だけ含み得る。すなわち svg 要素は SVG 内容の内部には現れない。 An SVG document fragment can only contain one single 'svg' element, this means that 'svg' elements cannot appear in the middle of SVG content.

いかなる場合でも、 XML 名前空間 1.0 または XML 名前空間 1.1 勧告 [XML-NS10, XML-NS] に従って、すべての SVG要素 が SVG 名前空間に属するものと識別されるように、 svg 要素のスコープの中で SVG 名前空間宣言が与えられなければならない。 In all cases, for compliance with either the Namespaces in XML 1.0 or Namespaces in XML 1.1 Recommendations [XML-NS10, XML-NS], an SVG namespace declaration must be in scope for the 'svg' element, so that all SVG elements are identified as belonging to the SVG namespace.

例えば、接頭辞のない xmlns 属性を svg 要素に指定できる。これは xmlns 属性が与えられた要素のスコープの中のすべての要素の既定の名前空間が SVG になることを意味する： For example, an 'xmlns' attribute without a prefix could be specified on an 'svg' element, which means that SVG is the default namespace for all elements within the scope of the element with the 'xmlns' attribute:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <!-- 要素に対する既定の名前空間接頭辞の利用。 -->
  <desc>Demonstrates use of a default namespace prefix for elements.</desc>
  <rect width="7" height="3"/>
</svg>

xmlns 属性に名前空間接頭辞を付けた場合（例えば xmlns:svg="http://www.w3.org/2000/svg" ）、対応する名前空間は既定の名前空間にならないので、全要素に対し名前空間接頭辞を明記しなければならない： If a namespace prefix is specified on the 'xmlns' attribute (e.g., xmlns:svg="http://www.w3.org/2000/svg"), then the corresponding namespace is not the default namespace, so an explicit namespace prefix must be assigned to the elements:

<?xml version="1.0"?>
<s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <s:desc>Demonstrates use of a namespace prefix for elements.
    Notice that attributes are not namespaced</s:desc>
  <s:rect width="7" height="3"/>
</s:svg>

名前空間宣言は先祖要素に指定することも可能である（ 上の example 05_01 に示されている）。詳細は XML 名前空間 1.0 または XML 名前空間 1.1 勧告 [XML-NS10, XML-NS] を参照のこと。 Namespace declarations can also be specified on ancestor elements (illustrated in example 05_01, above). For more information, refer to the Namespaces in XML 1.0 or Namespaces in XML 1.1 Recommendations [XML-NS10, XML-NS].

5.1.2 svg 要素

    <define name='svg'>
      <element name='svg'>
        <ref name='svg.AT'/>
        <zeroOrMore><ref name='svg.G.group'/></zeroOrMore>
      </element>
    </define>

    <define name='svg.AT' combine='interleave'>
      <ref name='svg.Properties.attr'/>
      <ref name='svg.FocusHighlight.attr'/>
      <ref name='svg.External.attr'/>
      <ref name='svg.Focus.attr'/>
      <ref name='svg.AnimateSyncDefault.attr'/>
      <ref name='svg.Core.attr'/>
      <ref name='svg.WH.attr'/>
      <ref name='svg.PAR.attr'/>
      <optional>
        <attribute name='viewBox' svg:animatable='true' svg:inheritable='false'>
          <text/>
        </attribute>
      </optional>
      <optional>
        <attribute name='zoomAndPan' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>disable</value>
            <value>magnify</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='version' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value type='string'>1.0</value>
            <value type='string'>1.1</value>
            <value type='string'>1.2</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='baseProfile' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value type='string'>none</value>
            <value type='string'>tiny</value>
            <value type='string'>basic</value>
            <value type='string'>full</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='contentScriptType' svg:animatable='false' svg:inheritable='false'>
          <ref name='ContentType.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='snapshotTime' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value type='string'>none</value>
            <ref name='Clock-value.datatype'/>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='timelineBegin' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value type='string'>onLoad</value>
            <value type='string'>onStart</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='playbackOrder' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value type='string'>all</value>
            <value type='string'>forwardOnly</value>
          </choice>
        </attribute>
      </optional>
    </define>

animateMotion と animateTransform は svg の子要素として合法だが、親の svg 要素へは適用されないことに注意（ svg 要素は transform 属性を持たないので）。 xlink:href 属性でアニメーション対象が別の要素に指定されない限り効果は生じない。 Note that 'animateMotion' and 'animateTransform' are legal as children to 'svg' but don't apply to their 'svg' parent (since the 'svg' element doesn't have a 'transform' attribute). They only have any effect if the 'xlink:href' attribute is specified so that they target a different element for animation.

イラストプログラムから印刷を本来の目的にして生成される内容はしばしば幅と高さが固定で、異なるディスプレイ解像度への拡大縮小を妨げかねない。下の最初の例は固定のピクセル幅／高さを持つ viewBox である。 Content produced by illustration programs originally targeted at print often has a fixed width and height, which will prevent it scaling for different display resolutions. The first example below has a fixed width and height in pixels, and no 'viewBox'.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="300px" height="600px">
  <desc>...</desc>
</svg>

通常、 SVG 内容はスケーラブルになるようにデザインされている。 SVG 内容が利用可能な ビューポート の領域を自動的に占めるようにするためには、 svg 要素に viewBox 属性を与えなければならない。これはグラフィックに利用される現実の座標系（初期状態で利用される 利用座標系 ）の領域を記述する。この属性は SVG 文書を任意の ビューポート にぴったりはめ込むための簡便な方法を与える。 Normally, SVG content is designed to be scalable. In order for the SVG content to scale automatically to fill the available viewport, it must include a 'viewBox' attribute on the 'svg' element. This describes the region of world coordinate space (the initial user coordinate system) used by the graphic. This attribute thus provides a convenient way to design SVG documents to scale-to-fit into an arbitrary viewport.

２番目の例は幅と高さを固定せず、 viewBox を利用してスケーラブルにする。 The second example is scalable, using a 'viewBox' rather than a fixed width and height.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" 
     baseProfile="tiny" viewBox="0 0 300 600">
  <desc>...</desc>
</svg>

下は snapshotTime の例である。 SVG-UA はディレクトリ下のいくつかの SVG ファイルのサムネイル画像を描画して表示している。画像生成する際に描画する時刻を snapshotTime で与えており、アニメーションを代表する静止画像が示される。 snapshotTime を扱える SVG-UA とそうでない SVG-UA によるサムネイルの見かけを例の下の画像に示す（左側が snapshotTime に基づくサムネイルを生成する UA によるもの、右側が snapshotTime に基づかないサムネイルを生成する UA 、例えば静的ビューアによるもの）。 Below is an example of 'snapshotTime'. An SVG user agent is displaying a number of SVG files in a directory by rendering a thumbnail image. It uses the 'snapshotTime' as the time to render when generating the image, thus giving a more representative static view of the animation. The appearance of the thumbnail for an SVG user agent that honors the 'snapshotTime' and for an SVG user agent that does not is shown below the example (UA which generates thumbnails based on 'snapshotTime' at the left, UA which doesn't generate thumbnails based on 'snapshotTime' at the right, e.g. a static viewer).

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     viewBox="0 0 400 300" snapshotTime="3">

  <!-- スナップショット時刻の用例 -->
  <title>Snapshot time example</title>
  <!-- この例は色のアニメーションにおける snapshotTime の利用を示す。 -->
  <desc>This example shows the use of snapshotTime on an animation of color.</desc>

  <rect x="60" y="85" width="256" height="65" fill="none" stroke="rgb(60,126,220)" stroke-width="4"/>
    
  <text x="65" y="140" fill="white" font-size="60">
    Hello SVG
    <animateColor attributeName="fill" begin="0" dur="3" from="white" to="rgb(60,126,220)"/>  
  </text> 
</svg>

5.2 グループ化： g 要素

5.2.1 概観

g 要素は互いに関連する グラフィックス要素 をグループ化するための コンテナ要素 である。 The 'g' element is a container element for grouping together related graphics elements.

desc 要素と title 要素とグループ化との併用により、文書構造と意味内容の情報が与えられるようになる。構造に富んだ文書はスピーチとして, 点字として, あるいはグラフィックとして出力可能になり、 アクセシビリティ も向上する。 Grouping constructs, when used in conjunction with the 'desc' and 'title' elements, provide information about document structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.

グループ化された要素に対しても、個々のオブジェクトと同様に id または xml:id 属性を用いて名前を付けられる。名前付きのグループはアニメーションや再利用できるオブジェクトなど、様々な局面で必要になる。 A group of elements, as well as individual objects, can be given a name using the 'id' or 'xml:id' attribute. Named groups are needed for several purposes such as animation and re-usable objects.

例： An example:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="5cm" height="5cm" viewBox="0 0 5 5">

  <!-- それぞれが２つの矩形からなる２つのグループ -->
  <desc> Two groups, each of two rectangles </desc>

  <g xml:id="group1" fill="red">
    <!-- 最初のグループは２つの赤い矩形からなる -->
    <desc> First group of two red rectangles </desc>
    <rect x="1" y="1" width="1" height="1"/>
    <rect x="3" y="1" width="1" height="1"/>
  </g>
  <g xml:id="group2" fill="blue">
    <!-- ２番目のグループは２つの青い矩形からなる -->
    <desc> Second group of two blue rectangles </desc>
    <rect x="1" y="3" width="1" height="1"/>
    <rect x="3" y="3" width="1" height="1"/>
  </g>

  <!-- 'rect' 要素でキャンバスの境界を表示 -->
  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01" y=".01" width="4.98" height="4.98"
        fill="none" stroke="blue" stroke-width=".02"/>
</svg>

g 要素は、他の g 要素を任意の階層にわたって入れ子にできる。下の例のように： A 'g' element can contain other 'g' elements nested within it, to an arbitrary depth. Thus, the following is possible:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="5cm" height="5cm">

  <!-- グループは入れ子にできる -->
  <desc> Groups can nest </desc>

  <g>
    <g>
      <g>
      </g>
    </g>
  </g>
</svg>

g 内に含まれない任意の要素も（少なくとも概念的には）あたかもそれ自身でグループをなすものとして扱われる。 Any element that is not contained within a 'g' is treated (at least conceptually) as if it were in its own group.

5.2.2 g 要素

    <define name='g'>
      <element name='g'>
        <ref name='g.AT'/>
        <zeroOrMore><ref name='svg.G.group'/></zeroOrMore>
      </element>
    </define>

    <define name='g.AT' combine='interleave'>
      <ref name='svg.Properties.attr'/>
      <ref name='svg.FocusHighlight.attr'/>
      <ref name='svg.Core.attr'/>
      <ref name='svg.External.attr'/>
      <ref name='svg.Conditional.attr'/>
      <ref name='svg.Focus.attr'/>
      <ref name='svg.Transform.attr'/>
    </define>

5.3 defs 要素

defs 要素は参照される要素のための コンテナ要素 である。可読性と アクセシビリティ の要求から、参照される要素は可能な限り defs 要素内に定義しておくことが推奨される。パフォーマンス上の理由から、すべてのリソースが参照利用できるように文書作成者は defs 要素を他の文書内容の前に置くべきである。 The 'defs' element is a container element for referenced elements. For understandability and accessibility reasons, it is recommended that, whenever possible, referenced elements be defined inside of a 'defs'. For performance reasons, authors should put the 'defs' element before other document content, so that all resources are available to be referenced.

defs 要素の内容モデルは g 要素と全く同じである。従って g 要素の子になれるすべての要素は defs 要素の子になれ、逆もまた真である。 The content model for 'defs' is the same as for the 'g' element; thus, any element that can be a child of a 'g' can also be a child of a 'defs', and vice versa.

defs 要素の子孫の要素は直接描画されることはない。これらはあたかも defs 要素が g 要素だったとしたときに display プロパティが none に指定されていたかのごとく、 描画木 の一部分とは見なされない。しかしながら、 defs 要素の子孫は元々の木にいつでも存在しており、他の要素からの参照は可能である。 defs 要素またはその子孫の display プロパティの実際の値がそれらの要素の描画に影響することも、それらの要素への参照を妨げることもない。 Elements that are descendants of a 'defs' are not rendered directly; they are prevented from becoming part of the rendering tree just as if the 'defs' element were a 'g' element and the 'display' property were set to none. Note, however, that the descendants of a 'defs' are always present in the source tree and can be referenced by other elements. The actual value of the 'display' property on the 'defs' element or any of its descendants does not change the rendering of these elements or prevent these elements from being referenced.

    <define name='defs'>
      <element name='defs'>
        <ref name='defs.AT'/>
        <zeroOrMore><ref name='svg.G.group'/></zeroOrMore>
      </element>
    </define>

    <define name='defs.AT' combine='interleave'>
      <ref name='svg.Properties.attr'/>
      <ref name='svg.Core.attr'/>
    </define>

SVG の内容作成者は参照元の要素の先祖要素の直接の子として defs 要素を置き、その中に局所 IRI 参照 から参照される子要素すべてを置くことが奨励される（もちろん、アニメーションの対象は除外する）。例えば： Creators of SVG content are encouraged to place all elements which are targets of local IRI references (except of course for animation targets) within a 'defs' element which is a direct child of one of the ancestors of the referencing element. For example:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     width="100%" height="100%" viewBox="0 0 8 3">     

  <!-- 先祖要素の 'defs' 要素内の局所 URI 参照。 -->
  <desc> Local URI references within ancestor's 'defs' element. </desc>

  <defs>
    <linearGradient xml:id="Gradient01">
      <stop offset="0.2" stop-color="#39F"/>
      <stop offset="0.9" stop-color="#F3F"/>
    </linearGradient>
  </defs>

  <rect x="1" y="1" width="6" height="1" fill="url(#Gradient01)"/>

  <!-- 'rect' 要素でキャンバスの境界を表示 -->
  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01" y=".01" width="7.98" height="2.98"
        fill="none" stroke="blue" stroke-width=".02" />
</svg>

上の文書では svg 要素が、線型グラデーションを含む defs 要素を直接の子として含み、かつ、線型グラデーションを参照する rect 要素の先祖に位置している。このように、上の文書は上記指針に沿っている。 In the document above, the linear gradient is defined within a 'defs' element which is the direct child of the 'svg' element, which in turn is an ancestor of the 'rect' element which references the linear gradient. Thus, the above document conforms to the guideline.

5.4 discard 要素

discard 要素は、文書作成者が特定の要素が処分されるまでの時間を指定して、 SVG-UA が必要とするリソースを低減させることを可能にする。これは特に長時間動作する文書の表示において SVG ビューアのメモリ消費を節約させるのに有用である。この要素は静的 SVG ビューアでは処理されない。 The 'discard' element allows authors to specify the time at which particular elements are to be discarded, thereby reducing the resources required by an SVG user agent. This is particularly useful to help SVG viewers conserve memory while displaying long-running documents. This element will not be processed by static SVG viewers.

discard 要素は animate 要素が置ける場所ならどこに現れてよい。 The 'discard' element may occur wherever the 'animate' element may.

    <define name='discard'>
      <element name='discard'>
        <ref name='discard.AT'/>
        <ref name='discard.CM'/>
      </element>
    </define>

    <define name='discard.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.XLink.attr'/>
      <ref name='svg.AnimateBegin.attr'/>
      <ref name='svg.Conditional.attr'/>
    </define>

    <define name='discard.CM'>
      <zeroOrMore>
        <ref name='svg.Desc.group'/>
        <ref name='svg.Handler.group'/>
      </zeroOrMore>
    </define>

discard 要素は暗黙の 持続時間 として "indefinite" を持つ。 SVG-UA は、要素の 活動持続時間 開始からすぐに xlink:href 属性 ([SMIL21], 10.4.3 節) により特定される要素を処分する。この除去操作は対象要素の親に対し、対象要素を引数として removeChild を呼び出したかのように行われる。 SVG-UA は対象ノードをその属性と子孫もひっくるめて除去しなければならない。 The 'discard' element has an implicit simple duration of "indefinite". As soon as the element's active duration starts, the SVG user agent discards the element identified by the 'xlink:href' attribute ([SMIL21], section 10.4.3). The removal operation acts as if the method removeChild were called on the parent of the target element with the target element as parameter. The SVG user agent must remove the target node as well as all of its attributes and descendants.

対象要素 の除去後、 discard 要素は無用になる。対象要素の除去に続いて処分されなければならない。 xlink:href 属性が（対象要素が存在しない等） 無効な IRI 参照 の場合でも discard 要素は自身の活性化に続いて処分されなければならない。 After removal of the target element, the 'discard' element is no longer useful. It must also be discarded following the target element removal. If the 'xlink:href' attribute has an invalid IRI reference (the target element did not exist, for example), the 'discard' element itself must still be removed following activation.

時間軸の 巻き戻し ([SMIL21], 10.4.3 節) において処分済みの要素を再挿入してはならない。処分済みの要素は完全にメモリから取り除かれることが意図されている。よって、文書作成者は discard 要素を用いる際には playbackOrder 属性を "forwardOnly" に設定することが奨励される。 Seeking backwards in the timeline ([SMIL21], section 10.4.3) must not re-insert the discarded elements. Discarded elements are intended to be completely removed from memory. So, authors are encouraged to set the 'playbackOrder' attribute to "forwardOnly" when using the 'discard' element.

discard 要素自身もその活性化に先立って処分される対象になり得る。そのように処分された場合、その要素の対象要素の処分は決して誘発されなくなる。 SVG-UA は discard 要素が他の discard 要素の対象要素になることを許容しなければならない。 The 'discard' element itself can be discarded prior to its activation, in which case it will never trigger the removal of its own target element. SVG user agents must allow the 'discard' element to be the target of another 'discard' element.

以下に discard 要素の簡単な用例を示す。下のリストにこの例のふるまいを文書の時間軸順に説明する： The following example demonstrates a simple usage of the 'discard' element. The list below describes relevant behavior in the document timeline of this example:

0 秒

文書の時間軸が開始された時点で、青色の楕円がページの下方へ動き始める。 When the document timeline starts, the blue ellipse starts to move down the page.

1 秒後

赤い矩形がページ上方へ動き始める。 The red rectangle starts moving up the page.

2 秒後：

ellipse の animateTransform が停止。 ellipse は begin="2" の discard 要素の 対象要素 なので、子要素と伴にすべて処分される。緑色の polygon がページを横切り始める。 The 'animateTransform' on the 'ellipse' ends. The 'ellipse' and its children are also discarded, as it is the target element of a 'discard' with begin="2". The green 'polygon' starts to move across the page.

3 秒後：

赤い矩形のアニメーションが停止。矩形は begin="3" の discard 要素の対象要素なので子要素と伴にすべて処分される。 The animation on the red rectangle ends. The rectangle and its children are discarded as it is the target of a 'discard' element with begin="3".

4 秒後：

緑色の３角形のアニメーションが停止。緑色の polygon は begin="4" の discard 要素の対象要素なので子要素と伴にすべて処分される。 The animation on the green triangle ends. The green 'polygon' and its children are discarded as it is the target of a 'discard' element with begin="4".

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 
     width="352" height="240" playbackOrder="forwardOnly">
    
  <ellipse cx="98.5" cy="17.5" rx="20.5" ry="17.5" fill="blue" stroke="black" 
           transform="translate(9 252) translate(3 -296)">
    <animateTransform attributeName="transform" begin="0s" dur="2s" fill="remove"
                      calcMode="linear" type="translate" additive="sum"
                      from="0 0" to="-18 305"/>
    <discard begin="2s"/>
  </ellipse>
  
  <rect x="182" y="-39" width="39" height="30" fill="red" stroke="black"
        transform="translate(30 301)">
    <animateTransform attributeName="transform" begin="1s" dur="2s" fill="remove"
                      calcMode="linear" type="translate" additive="sum"
                      from="0 0" to="-26 -304"/>
    <discard begin="3s"/>
  </rect>
  
  <polygon points="-66,83.5814 -43,123.419 -89,123.419" fill="green" stroke="black" 
           transform="matrix(1 0 0 1.1798 0 -18.6096)">
    <animateTransform attributeName="transform" begin="2s" dur="2s"
                      fill="remove" calcMode="linear" type="translate" additive="sum"
                      from="0 0" to="460 63.5699"/>
    <discard begin="4s"/>
  </polygon>
</svg>

5.5 title と desc 要素

SVG 文書の各 コンテナ要素 と グラフィックス要素 には、要素の見出しと要約などの類いからなる、 title と desc 記述要素 をそれぞれ一つ以上含み得る。 title 要素はそれを含む コンテナ要素 または グラフィックス要素 のタイトルを表す短い平文の段落を含んでいなければならない。この短いタイトルは、要素の描画についての、通常は置き換えるに不十分ではあるが，補足にはなる追加の情報を提供しなければならない。 desc 要素は、それを含む コンテナ要素 または グラフィックス要素 についての，より長く詳細な平文の説明を含んでいなければならない。この説明は title 要素の内容と伴に、何らかの理由で利用者が SVG 要素 の描画を見られない場合の代用として、使用に耐えるものでなければならない。 Each container element or graphics element in an SVG document may contain one or more of each of the 'title' and 'desc' descriptive elements, which together comprise a sort of heading and summary of the containing element. The 'title' element must contain a brief plain text passage representing the title for the container or graphics element containing it. This short title must provide information supplementary to the rendering of the element, but will normally not be sufficient to replace it. The 'desc' element must contain a longer, more detailed plain text description for the container or graphics element containing it. This description, along with the content of the 'title' element, must be usable as replacement content for cases when the user cannot see the rendering of the SVG element for whatever reason.

文書作成者は常に、少なくとも title 要素と, 望ましくは desc 要素も、 SVG 文書の svg 要素の直接の子要素として，加えて個々の重要なグラフィック部品すべてに、与えるべきである。 svg 要素に対する title 子要素は SVG 文書片 の内容を識別する目的に役立つ。 利用者はしばしば，文脈の外から文書を参照するので、文書作成者は文脈に則したタイトルを提供すべきである。すなわち「序文」のような文脈情報に乏しいタイトルよりも，「中世の養蜂業・序文」の様にタイトルをつけるべきである。 アクセシビリティの理由から、 SVG-UA は svg 要素に対する title 子要素を常に利用者に示すべきである（ User Agent Accessibility Guidelines 1.0 [UAAG] を参照のこと）。このような仕組の実装は SVG-UA 側に託されている（例えば、音声によるキャプションなど）。 何らかの理由で文書のグラフィック表示が利用できない場合、最も根元の 記述要素 が，完全な文書とその目的をテキストで表すことになり得るので、文書作成者はそれなりに意味のある内容を与えるべきである。 Authors should always provide at least a 'title', and preferably a 'desc', as an immediate child element to the 'svg' element within an SVG document, and to every significant individual graphical composition within the document. The 'title' child element to an 'svg' element serves the purposes of identifying the content of the given SVG document fragment. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to Medieval Bee-Keeping" instead. For reasons of accessibility, SVG user agents should always make the content of the 'title' child element to the 'svg' element available to users (See the User Agent Accessibility Guidelines 1.0 [UAAG]). The mechanism for doing so depends on the SVG user agent (e.g., as a caption, spoken). If for any reason, a graphical presentation of the document is not available, the rootmost descriptive elements may represent the complete document and its purpose in a textual manner, and authors should supply meaningful content accordingly.

記述要素 があれば、視覚, 聴覚両方について代替表示が可能であり、 グラフィックス要素 を表示するかわりに desc と title 要素を表示することができる。 When descriptive elements are present, alternate presentations of the document are possible, both visual and aural, which display the 'title' and 'desc' elements but do not display graphics elements.

title と desc 要素のいずれも、内容は平文テキストでなければならない。他のマークアップ言語による構造データを与えたい場合、文書作成者は metadata もしくは foreignObject いずれか適切な要素を代わりに利用すべきである。 title や desc にマークアップが含まれていた場合、 UA は 記述要素 内のテキスト内容のみを示すべきである。 For both the 'title' and the 'desc' element, the content must be plain text. To provide structured data in other markup languages, authors should use the 'metadata' or 'foreignObject' elements instead, as appropriate. When markup is included as a child of the 'title' or the 'desc', a user agent should present only the text content of the descriptive elements.

title 要素と a 要素の xlink:title 属性の目的は異なることに注意。 xlink:title 属性の内容が意図するものは現在のリソースについての説明ではなく、リンク先のリソースについてである。 Note that the 'title' element is distinct in purpose from the 'xlink:title' attribute of the 'a' element. The 'xlink:title' attribute content is intended not to describe the current resource, but the nature of the linked resource.

    <define name='title'>
      <element name='title'>
        <ref name='DTM.AT'/>
        <ref name='DTM.CM'/>
      </element>
    </define>

    <define name='desc'>
      <element name='desc'>
        <ref name='DTM.AT'/>
        <ref name='DTM.CM'/>
      </element>
    </define>

    <define name='DTM.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.Conditional.attr'/>
      <ref name='svg.Media.attr'/>
    </define>

    <define name='DTM.CM'>
      <text/>
    </define>

5.5.1 適用し得る title と desc

通常、 コンテナ要素 や グラフィックス要素 を説明する 記述要素 は説明対象の要素の直接の子要素になる。しかしながら SVG 文書は、 use 要素では title や desc を use 要素自身にも参照先の内容にも含ませ得るだけでなく、入れ子になった要素のそれぞれにも title や desc 子要素を含ませ得る程に、構造が豊かになり得る。この複雑な構造故に、また、 記述要素 が任意の階層レベルに存在し得る故に、与えられた内容に適用し得る 記述要素 は構造から決定される。以下の手順のように。 Normally, the descriptive elements that describe a container element or graphics element are direct children of that element. However, SVG documents can have a rich structure, with nested elements each potentially containing 'title' or 'desc' child elements, as well as 'use' elements with 'title' or 'desc' in both the 'use' element itself and in the referenced content. Because of this complex structure, and because the descriptive elements may or may not be present at any given level, the applicable descriptive elements for any given content is determined by the structure, as described here.

それぞれの コンテナ要素 または グラフィックス要素 に対し、適用し得る 記述要素 は、その文書片の中で、ただしすべての use 要素による shadow 木 内の 記述要素 を除外した中で、入れ子の階層が最も浅いものとして定まるものとする。もし文書片が 記述要素 を含まず、それが use 要素だった場合、適用し得る 記述要素 は shadow 木 に含まれるものとする。 記述要素 が文書片内にも shadow 木 内にも存在しない場合、最も近い先祖の 記述要素 が適用し得る 記述要素 になるものとする。 【"nearest ancestor descriptive elements" - 記述要素はコンテナ要素ではないので「先祖の記述要素」とは「先祖に適用し得る記述要素」を意味するものと思われる。】 このアルゴリズムにより、文書作成者は要素のグループ全体の説明みならず参照先のリソースに定義された 記述要素 の再利用や必要に応じた上書きも可能になる。 title と desc を（同じ文書の階層レベルで）常にペアにする必要は、 UA がどちらか一方に特定の階層レベルで遭遇して適用し得る 記述要素 の検索を止めるべき場合、なくなることに注意。 For each container element or graphics element, the applicable descriptive elements shall be those which are most shallowly nested in that document fragment, without taking into account descriptive elements in any 'use' element shadow trees. If the document fragment has no descriptive elements, and it is a 'use' element, the applicable descriptive elements shall be those contained in the shadow tree. If no descriptive elements are found in the document fragment or any shadow tree, the applicable descriptive elements shall be the nearest ancestor descriptive elements. This algorithm allows authors to reuse descriptive elements defined in referenced resources when desired, or to override them as needed, as well as to describe whole groups of elements. Note that the 'title' and 'desc' are not necessarily always paired (i.e., in the same document hierarchy level), and if the user agent should stop searching for an applicable descriptive element if only one or the other is encountered at a particular hierarchy level.

コンテナ要素 内の要素に適用し得る 記述要素 が、当該のグラフィカルな要素個別の説明を伴う必要は無く、むしろより包括的なグループの一員としてのものになることに注意（例えば、籠一杯の果物の画像があり、それを包含するグループのタイトルが「籠一杯の果物」で、他に 記述要素 が存在しない場合、個々の果物は籠一杯の果物にはならないが、依然としてタイトルは包含を通して適用し得る）。 コンテナ要素 と グラフィックス要素 では 記述要素 が適用し得るかどうかの決定において本質的な違いがある： グラフィックス要素 の title や desc は、その要素のみに適用されるものと見なされるべきである一方、 g に対する title や desc は、そのグループの子要素それぞれに適用し得る。文書作成者は、同一性と受け継ぎの構築の誤りを避けるべく、何が重要な要素になるのかと、それらに対する 記述要素 の割り当て方に注意すべきである。 Note that the applicable descriptive elements for elements in a container element does not necessarily entail a description of the individual graphical elements in question, but rather their membership in a more inclusive group (e.g., if the image is of a basket of fruit, with a title of "Fruit Basket" for the containing group and no other descriptive elements, while no one piece of fruit is a fruit basket, the title would still be applicable through inclusion). In essence, there is a difference between container elements and graphics elements when it comes to determining the applicability of a descriptive element; a 'title' or 'desc' for a graphics element should be assumed to apply only to that element, while a 'title' or 'desc' for a 'g' may apply to each of the children of that group. Authors should take care to designate all important elements with their own descriptive elements to avoid misconstrued identities and entailments.

5.5.2 複数の title と desc 要素

文書作成者には、どの要素に対しても、その直接の子要素として与える title と desc 要素を高々１つまでにし、それらを他の（ metadata 要素と文字データを除く）すべての子要素より先に位置させることが強く推奨される。 It is strongly recommended that authors use at most one 'title' and at most one 'desc' element as an immediate child of any particular element, and that these elements appear before any other child elements (except possibly 'metadata' elements) or character data content.

文書作成者が、異なる言語のための代替内容としてなど、複数個の 記述要素 を与えたくなることもあり得る。この場合、 UA が利用者の環境設定に基づく最善の選択を行えるように、文書作成者は 条件処理属性 を利用すべきである。例えば systemLanguage 属性を、必要なら switch 要素も伴わせて用いることにより、適用し得る 記述要素 が決定されるようになる。 Authors may wish to deliberately provide multiple descriptive elements, such as to provide alternate content for different languages. In this case, the author should use conditional processing attributes to allow the user agent to select the best choice according to the user's preferences. For example, the 'systemLanguage' attribute, with or without the 'switch' element, will determine the applicable descriptive elements.

SVG-UA が処理の際に複数の title または desc 要素からの選択を迫られた場合（例えばツールチップにどのテキストを用いるかなど）、適用し得る 条件処理属性 が最善の選択を行うに不十分であるならば、 UA は title および desc それぞれについて、利用可能な 記述要素 から最初に適用し得るものを選ぶべきである。 If an SVG user agent needs to choose among multiple 'title' or 'desc' elements for processing (e.g., to decide which string to use for a tooltip), and if any available conditional processing attributes are insufficient to resolve the best option, the user agent must choose the first of each of the available descriptive elements as the applicable 'title' and 'desc'.

5.5.3 title と desc に対するユーザインターフェースのふるまい

現在の SVG 文書片 が SVG として視覚メディアに描画される場合、 title と desc 要素は キャンバス への描画としては表示されない。 記述要素 が（芸術作品の審美的理由などから）作者の意図により隠されることも往々にしてある。しかしながら、文書作成者が、他の文書作成者が 記述要素 の提供に最善をつくす熱意をふるいたくなる実感を湧かせるほどに、この内容を表示させたく望む場合もあるだろう。この場合、文書作成者には値 tooltip ([ARIA], 4.4.1 節) をあてがった role 属性を利用して意図を示すことが奨励される。将来版の SVG 仕様ではツールチップを表示すべきかどうかを指示する明示的な仕組みを定めることも考えられている。 When the current SVG document fragment is rendered as SVG on visual media, 'title' and 'desc' elements are not rendered as part of the canvas. Often, the intent of authors is for descriptive elements to remain hidden (e.g., for aesthetic reasons in pieces of art). However, other authors may wish for this content to be displayed, and providing tangible benefit to these authors encourages best practice in providing descriptive elements. In this case, authors are encouraged to use the 'role' attribute, with the value tooltip ([ARIA], section 4.4.1) to indicate their intent. Future SVG specifications may define an explicit mechanism for indicating whether a tooltip should be displayed.

UA は作者の意図に沿うため、適切な role 属性値が存在するとき、そのときに限り、適用し得る title や desc 要素のテキスト内容を、（例えばキーボードやポインタナビゲーションを通して）ポインタ装置が説明付きの要素の上に重なった際や説明付き要素がフォーカスを得たときなどに、ツールチップやステータスバーなど UA がサポートする方式により、見易く表示させることが強く推奨される。ツールチップを提供する場合、 UA は適用し得るタイトルや説明を別々の行に、最初にタイトルを示して、フォントのスタイルで両者を判別できるように表示することが推奨される。 説明が長い場合、ツールチップはテキストを折り返し、長過ぎる段落は適度な長さに切り詰めてもよい。 UA はテキストを構造的に表示するためにテキスト内容のスペースと改行を保持してもよい。 In order to honor authorial intent, it is strongly recommended that when, and only when, the appropriate 'role' attribute value is present, user agents display the text content of the applicable 'title' and 'desc' elements in a highly visible manner supported by the user agent, such as in a tooltip or status bar, when the pointing device is hovered over the described element or elements, or when the described element is given focus (e.g., through keyboard or pointer navigation). If a tooltip is provided, the user agent is recommended to display the applicable title and descriptions on separate lines, title first, with font styling that distinguishes the two. For long descriptions, the tooltip may wrap the text, and truncate longer passages to a reasonable length. A user agent may preserve spaces and line breaks in the text content in order to structure the presentation of the text.

記述要素 付きの要素自身が xlink:title 属性を持つ a 要素の子要素の場合、 UA は用意された情報を可能な限り多く表示すべきである。 UA は xlink:title 属性値を別の行に, "link: " など識別できるラベルを伴って表示させることが考えられる。通例、多くの UA はリンクの URI （すなわち xlink:href 属性の値）をステータスバーまたは他の表示領域に表示する。この情報は重要であり、いかなる 記述要素 の内容からも上書きされるべきではないが、そのような内容を追加してもよい。 When an element with descriptive elements is itself the child of an 'a' element with an 'xlink:title' attribute, the user agent should display as much of the available information as possible. The user agent is suggested to display the 'xlink:title' attribute value on a separate line, with a label to identify it, such as "link: ". Commonly, many user agents display the URI of the link (i.e., the value of the 'xlink:href' attribute) in the status bar or other display area. This information is important, and should not be overridden by any descriptive element content, but may be supplemented by such content.

文書のタイトルには最も根元の title 要素が利用されるべきである。独立 SVG 文書に対しては、タイトルはツールチップとしてではなく、ブラウザのクロームにより（ UA に適切なやり方で）表示されるべきである。 HTML 文書から参照された SVG 画像などの埋め込まれた SVG 文書に対しては、最も根元のタイトルと説明をツールチップとして表示するのが適切であり、 UA はそうすべきである。 The rootmost 'title' element should be used as the document title, and for stand-alone SVG documents, the title should not be displayed as a tooltip, but rather in the browser chrome (as appropriate for the user agent). For embedded SVG documents, such as an SVG image referenced in an HTML document, displaying the rootmost title and description as a tooltip is more appropriate, and the user agent should do so.

UA がアクセシビリティツールの場合、現在フォーカスを得ているかマウスと重なっている要素に用意された説明のすべてが、利用者が選択的に様々な説明にアクセスできるよう、明確な形に開示されるべきである。特に desc 要素には、 role 属性の値の利用により、グラフィックの等価テキスト（既定の role ）のための ARIA オントロジー値 description ([ARIA], 4.4.1 節) などを利用して意味的な差異を与えられる。 If a user agent is an accessibility tool, all available descriptions of the currently focused or hovered element should be exposed to the user in a categorical manner, such that the user may selectively access the various descriptions. The 'desc' element, in particular, may be given different semantic distinctions by use of values in the 'role' attribute, such as the ARIA ontology value description ([ARIA], section 4.4.1) for textual equivalents of the graphics (the default role).

次の例は SVG-UA が title と desc 要素をツールチップとして示し得るものになる。 The following is an example in which an SVG user agent might present the 'title' and 'desc' elements as a tooltip.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2"
     width="100%" height="100%" viewBox="0 0 160 170">

  <!-- タイトルと説明 -->
  <title>Titles and Descriptions</title>
  <-- 'title' と 'desc' 要素の内容が UA によりどのように示されるかの例 -->
  <desc> An example of how the contents of the 'title' and 'desc' elements may be presented in a user agent.</desc>

  <defs>
    <polygon id="beeCell" points="-14,-24.2487 14,-24.2487 28,0 14,24.2487 -14,24.2487 -28,0" stroke="yellow" stroke-width="3" stroke-linejoin="round">
      <-- 蜂の巣の小部屋 -->
      <title role="tooltip">Beehive cell</title>
      <-- 外形線が黄色で内部への塗りはない単純な６角形 -->
      <desc role="tooltip">A simple hexagon with a yellow outline and no fill.</desc>
    </polygon>
  </defs>

  <g fill="white">
    <use xlink:href="#beeCell" x="30" y="60" />
    <use xlink:href="#beeCell" x="75" y="34.0192" />
    <use xlink:href="#beeCell" x="120" y="60" />
    <use xlink:href="#beeCell" x="120" y="111.9615" />
    <use xlink:href="#beeCell" x="30" y="111.9615" />
    <use xlink:href="#beeCell" x="75" y="137.9423" />

    <a xlink:href="http://www.example.com/bees.html" xlink:title="Beekeeper's Hive: an apiary resource">
      <-- 養蜂家の巣へのリンク: 養蜂の資料 -->
      <title role="tooltip">Link to Beekeeper's Hive: an apiary resource</title>
      <use xlink:href="#beeCell" x="75" y="85.9808" fill="#9900CC">
        <-- 女王蜂の王台 -->
        <title role="tooltip">Queen's Cell</title>
        <desc role="tooltip">
          <-- 蜂の巣の６角形の小部屋 -->
          A hexagonal beehive cell.
          
          <-- 他の中空の６つの６角形に囲まれた中心の紫の６角形はロイヤルゼリーで満たされていることを表す。 -->
          A purple hexagon in the middle of 6 other empty hexagons, symbolizing that it's filled with royal jelly.
        </desc>
      </use>
    </a>  
     
  </g>

</svg>

5.6 use 要素

任意の g あるいは グラフィックス要素 は、 use 要素により、ひな型としての再利用（すなわち「インスタンス化」）の対象になれる。つまりインスタンス木を生成する。 use 要素は参照する他の要素のグラフィック内容を取り込み、その内容が文書内で use が与えられた場所において描画される。 Any 'g' or graphics element is potentially a template object that can be re-used (i.e. "instantiated") in the SVG document via a 'use' element, thus creating an instance tree. The 'use' element references another element and indicates that the graphical contents of that element is to be included and drawn at that given point in the document.

animation 要素とは異なり、 use 要素はファイル全体を参照することはできない。 Unlike 'animation', the 'use' element cannot reference entire files.

この節の use 要素の説明とは別に、 use 要素に対する重要な制約に関しては 参照に対する制約 を見よ。 Besides what is described about the 'use' element in this section important restrictions for 'use' can be found in the Reference Section.

use 要素は省略可能な属性 x, y を持つ。これらは参照先要素のグラフィック内容を現在の利用座標系に配置するために利用される。 The 'use' element has optional attributes 'x' and 'y' which are used to place the referenced element and its contents into the current coordinate system.

use 要素の効果は、あたかも参照先要素の SVG 要素 内容が DOM 木において - その use 要素を親とする別個の非公開木として、かつ use 要素のすべての先祖がその木の先祖になるように - 末端まで複製されたかのようにふるまうことである。複製された DOM 木は非公開なので、 SVG 文書オブジェクトモデル（ DOM ）においては use 要素とその属性が存在するだけであり、参照先要素の内容が use 要素の子として現れることはない。この深い複製木は shadow 木 とも呼ばれ、参照先要素に生じた任意のアニメーション, DOM 操作, 非-DOM 対話状態が use 要素の深い複製木にも適用されるよう、参照先要素の内容との同期が保たれる。 The effect of a 'use' element is as if the SVG element contents of the referenced element were deeply cloned into a separate non-exposed DOM tree which had the 'use' element as its parent and all of the 'use' element's ancestors as its higher-level ancestors. Because the cloned DOM tree is non-exposed, the SVG Document Object Model (DOM) only contains the 'use' element and its attributes. The SVG DOM does not show the referenced element's contents as children of the 'use' element. The deeply-cloned tree, also referred to as the shadow tree, is then kept in synchronization with the contents of the referenced element, so that any animation, DOM manipulation, or non-DOM interactive state occurring on the referenced element are also applied to the 'use' element's deeply-cloned tree.

shadow 木 内のノードに与えられた相対 IRI はノード自身の xml:base に対し相対的に解決され、以下再帰的にその parentNode の xml:base に対し解決され、 parentNode が尽きた所で最後に ownerDocument の xml:base に対し解決される。 Relative IRIs on a node in a shadow tree are resolved relative to any 'xml:base' on the node itself, then recursively on any 'xml:base' on its parentNode, and finally any 'xml:base' on the ownerDocument if there is no parentNode.

プロパティ継承においては、参照先要素がテキストそのままとして use 要素下に末端の子孫まで複製されているものとみなされる。参照先要素【のインスタンス】は use 要素とその先祖要素すべてからのプロパティを継承する。参照先要素のインスタンスは参照先要素の元の親のプロパティを継承しない。 Property inheritance works as if the referenced element had been textually included as a deeply cloned child of the 'use' element. The referenced element inherits properties from the 'use' element and the 'use' element's ancestors. An instance of a referenced element does not inherit properties from the referenced element's original parents.

visibility プロパティのふるまいはこのプロパティ継承モデルに従う。よって use 要素において算出値が visibility="hidden" であったとしても参照先の内容が描画されないことを保証するものではない。 use 要素において算出値が visibility="hidden" で参照先要素において visibility="hidden" や visibility="inherit" が指定されていたなら、要素は不可視になる。しかしながら、参照先要素が visibility="visible" を指定している場合、 use 要素に visibility="hidden" が指定されていたとしても、その要素は可視になる。 The behavior of the 'visibility' property conforms to this model of property inheritance. Thus, a computed value of visibility="hidden" on a 'use' element does not guarantee that the referenced content will not be rendered. If the 'use' element has a computed value of visibility="hidden" and the element it references specifies visibility="hidden" or visibility="inherit", then that element will be hidden. However, if the referenced element instead specifies visibility="visible", then that element will be visible even if the 'use' element specifies visibility="hidden".

もしイベントリスナが参照先要素に登録されているなら、そのイベントの実際の標的は「インスタンス木」内の参照先要素に対応する SVGElementInstance オブジェクトになる。 If an event listener is registered on a referenced element, then the actual target for the event will be the SVGElementInstance object within the "instance tree" corresponding to the given referenced element.

非公開木におけるイベント処理は、 SVGElementInstance オブジェクトへ配送されることを除けば、あたかも参照先要素がテキストのまま use 要素下に末端の子孫まで複製されていたかのように処理される。イベントの target と currentTarget 属性は参照先の部分木内のイベントの標的と現在の標的（同順）に対応する SVGElementInstance に設定される。イベントは通常の木の場合と同様の仕方で、木の公開部分と非公開部分を通って伝播する：最初はイベントの標的へ、次は浮上過程（ bubbling phase ）に入り、非公開木を通って use 要素まで浮上し、そして通常の木を 最も根元の 'svg' 要素 まで浮上する。 The event handling for the non-exposed tree works as if the referenced element had been textually included as a deeply cloned child of the 'use' element, except that events are dispatched to the SVGElementInstance objects. The event's target and currentTarget attributes are set to the SVGElementInstance that corresponds to the target and current target elements in the referenced subtree. An event propagates through the exposed and non-exposed portions of the tree in the same manner as it would in the regular document tree: first going to the target of the event, then bubbling back through non-exposed tree to the 'use' element and then back through regular tree to the rootmost 'svg' element in the bubbling phase.

１つの要素と対応するすべての SVGElementInstance オブジェクトはイベントリスナのリストを共有する。どのオブジェクトがイベントリスナを呼び出したかはイベントの currentTarget 属性で知ることができる。 An element and all its corresponding SVGElementInstance objects share an event listener list. The currentTarget attribute of the event can be used to determine through which object an event listener was invoked.

参照先要素におけるアニメーションはそのインスタンスでも有効である。 Animations on a referenced element will cause the instances to also be animated.

参照の制約 で挙げられるように、 use 要素は svg 要素を参照できない。 As listed in the Reference Section the 'use' element is not allowed to reference an 'svg' element.

上に記した相対 IRI 参照 の解決を除き、参照先要素に変更が加えられない限り、 use 要素による視覚上の効果はあたかも use 要素が以下のようにして生成される内容に置き換えられたかのようにふるまう： Except for resolution of relative IRI references as noted and until the referenced elements are modified, a 'use' element has the same visual effect as if the 'use' element were replaced by the following generated content:

• 生成される内容においては、 use は g に置き換えられ、置き換えた g に use 要素の x, y, xml:base, xlink:href 属性を除いたすべての属性が移される。追加の変換 translate(x,y) が g 要素の transform 属性の終端（つまり右側）に付加される。ここで x, y は use 要素の x, y 属性の値である。参照先のオブジェクトとその内容は生成される木に末端まで複製される。 In the generated content, the 'use' will be replaced by 'g', where all attributes from the 'use' element except for 'x', 'y', 'xml:base' and 'xlink:href' are transferred to the generated 'g' element. An additional transformation translate(x,y) is appended to the end (i.e., right-side) of the 'transform' attribute on the generated 'g', where x and y are the values of the 'x' and 'y' attributes of the 'use' element. The referenced object and its contents are deep-cloned into the generated tree.

利用された要素に対する任意の変更は直ちに 生成された内容に反映されることに注意。 Note also that any changes to the used element are immediately reflected in the generated content.

use 要素が他の use 要素もしくは use 要素を内容に含む他の要素を参照する場合、上で述べた末端までの複製処理は再帰的に行われる。しかしながら、参照による連鎖が直接的か間接的かを問わず循環した場合、 参照 の節で述べるように エラー とみなされる。 When a 'use' references another element which is another 'use' or whose content contains a 'use' element, then the deep cloning approach described above is recursive. However, a set of references that directly or indirectly reference a element to create a circular dependency is an error, as described in the References section.

    <define name='use'>
      <element name='use'>
        <ref name='use.AT'/>
        <ref name='use.CM'/>
      </element>
    </define>

    <define name='use.AT' combine='interleave'>
      <ref name='svg.Properties.attr'/>
      <ref name='svg.FocusHighlight.attr'/>
      <ref name='svg.Core.attr'/>
      <ref name='svg.Conditional.attr'/>
      <ref name='svg.Transform.attr'/>
      <ref name='svg.XLinkEmbed.attr'/>
      <ref name='svg.Focus.attr'/>
      <ref name='svg.External.attr'/>
      <ref name='svg.XY.attr'/>
    </define>

    <define name='use.CM'>
      <zeroOrMore>
        <choice>
          <ref name='svg.Desc.group'/>
          <ref name='svg.Animate.group'/>
          <ref name='svg.Handler.group'/>
        </choice>
      </zeroOrMore>
    </define>

下に use 要素の例を２つ示す。他の例については 'use' とアニメーションの例 を見よ。 Below are two examples of the 'use' element. For another example see use and animation example.

下の Example 05_13 は rect 上の単純な use 。 Example 05_13 below has a simple 'use' on a 'rect'.

Example: 05_13.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny"
     width="10cm" height="3cm" viewBox="0 0 100 30">     

  <-- 'rect' 上の 'use' の単純な場合 -->
  <desc> Simple case of 'use' on a 'rect' </desc>

  <defs>
    <rect xml:id="MyRect" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2"/>
  <use x="20" y="10" xlink:href="#MyRect" />
</svg>

視覚効果においては次と同じになる： The visual effect would be equivalent to the following document:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     version="1.2" baseProfile="tiny"
     width="10cm" height="10cm" viewBox="0 0 100 30">
  <-- Example 05_13 の 'use' 要素から生成される shadow 木と等価な描画木 -->
  <desc>
    The equivalent rendering tree of example 05_13 once the
    'use' element's shadow tree has been created.
  </desc>

  <!-- 'defs' 部は省略 -->
  <!-- 'defs' section left out -->

  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />

  <!-- Example 05_13 の 'use' 要素が生成する shadow 木の内容：ここから -->
  <!-- begin shadow tree content that the <use> element in the original
       file would generate -->
  <g transform="translate(20,10)">
    <rect width="60" height="10"/>
  </g>
  <!--  shadow 木の内容：ここまで -->
  <!-- end of shadow tree content -->
</svg>

下の Example 05_17 に use 要素が transform 属性を持つときにどんな効果が生じるかを示す： Example 05_17 illustrates what happens when a 'use' has a 'transform' attribute.

Example: 05_17.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny"
     width="10cm" height="3cm" viewBox="0 0 100 30">

  <!-- 'transform' 属性を持つ 'use' -->
  <desc> 'use' with a 'transform' attribute </desc>

  <defs>
    <rect xml:id="MyRect" x="0" y="0" width="60" height="10"/>
  </defs>

  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2"/>
  <use xlink:href="#MyRect" transform="translate(20,2.5) rotate(10)"/>
</svg>

視覚効果においては次と同じになる： The visual effect would be equivalent to the following document:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny"
     width="100%" height="100%" viewBox="0 0 100 30">

  <!-- 'transform' 属性を持つ 'use' -->
  <desc> 'use' with a 'transform' attribute </desc>

  <!-- 'defs' 部は省略 -->
  <!-- 'defs' section left out -->

  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2"/>

  <!-- Example 05_17 の 'use' 要素が生成する shadow 木の内容：ここから -->
  <!-- begin shadow tree content that the <use> element in the original
       file would generate -->
  <g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
  </g>
  <!-- shadow 木の内容：ここまで -->
  <!-- end of shadow tree content -->
</svg>

下の Example use-bubble-example-1.svg に use 要素におけるイベント浮上の４通りのケースを示す。ケース 1 ではすべての rect 要素のインスタンスはマウスと重なった際に内部が青色に塗られる。ケース 2 と 3 ではそれに加えて参照元の矩形を囲む黒のストロークが現れる。ケース 4 ではマウスと重なった際にすべての矩形が青色に変わり、マウスクリックにより黒のストロークが現れる。 Example use-bubble-example-1.svg illustrates four cases of event bubbling with use elements. In case 1, all instances of the 'rect' element are filled blue on mouse over. For cases 2 and 3, in addition to the 'rect' elements being filled blue, a black stroke will also appear around the referencing rectangle on mouse over. In case 4, all the rectangles turn blue on mouse over, and a black stroke appears on mouse click.

Example: use-bubble-example-1.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="tiny">

  <defs>
    <rect id="rect" width="20" height="20" fill="red">
      <set attributeName="fill" begin="mouseover" end="mouseout" to="blue"/>
    </rect>
  </defs>

  <use fill="red" x="5" y="5" xlink:href="#rect"/>
  <text x="10" y="35">1</text>
  
  <use id="use2" fill="red" x="30" y="5" xlink:href="#rect"/>  
  <rect pointer-events="none" x="30" y="5" width="20" height="20"
        fill="none" stroke-width="3" stroke="none">
    <set attributeName="stroke" begin="use2.mouseover" end="use2.mouseout" to="black"/>
  </rect>
  <text x="35" y="35">2</text>
  
  <g id="g1">
    <use fill="red" x="5" y="40" xlink:href="#rect"/>  
    <rect pointer-events="none" x="5" y="40" width="20" height="20"
          fill="none" stroke-width="3" stroke="none">
      <set attributeName="stroke" begin="g1.mouseover" end="g1.mouseout" to="black"/>
    </rect>
  </g>
  <text x="10" y="70">3</text>
  
  <use id="use3" fill="red" x="30" y="40" xlink:href="#rect"/>  
  <rect pointer-events="none" x="30" y="40" width="20" height="20"
        fill="none" stroke-width="3" stroke="none">
    <set attributeName="stroke" begin="use3.click" dur="500ms" to="black"/>
  </rect>  
  <text x="35" y="70">4</text>
</svg>

下の Example use-bubble-example-2.svg に入れ子の use 要素におけるイベント浮上を示す。マウスが重なった際に rect 要素は内部を青色に塗られ緑と黒の輪を表示する。 Example use-bubble-example-2.svg illustrates event bubbling with nested 'use' elements. On mouse over, the 'rect' element is filled blue and displays a green and black ring.

Example: use-bubble-example-2.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="tiny">

  <defs>
    <rect id="rect" width="20" height="20" fill="red">
      <set attributeName="fill" begin="mouseover" end="mouseout" to="blue"/>
    </rect>    
    <g id="use">
      <use fill="red" xlink:href="#rect"/>  
      <rect pointer-events="none" width="20" height="20"
            fill="none" stroke-width="8" stroke="none">
        <set attributeName="stroke" begin="use.mouseover" end="use.mouseout" to="green"/>
      </rect>
    </g>
  </defs>
  
  <use x="5" y="5" id="use2" fill="red" xlink:href="#use"/>  
  <rect pointer-events="none" x="5" y="5" width="20" height="20" fill="none" stroke-width="3" stroke="none">
    <set attributeName="stroke" begin="use2.mouseover" end="use2.mouseout" to="black"/>
  </rect>
</svg>

下の Example image-use-base.svg に相対 IRI 参照 に対する処理を示す。３つの use 要素すべて表示結果は同じ画像 http://a.example.org/aaa/bbb/ddd/foo.jpg になる。 Example image-use-base.svg illustrates the handling of relative IRI references. All three use elements result in the same image being displayed, http://a.example.org/aaa/bbb/ddd/foo.jpg.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 100 100">

  <g xml:base="http://a.example.org/aaa/">
    <g xml:base="/bbb/ccc/">
      <g xml:base="../ddd/" xml:id="bar">
        <image xml:id="foo" xlink:href="foo.jpg" width="100" height="100"/>
      </g>
    </g>
  </g>
  <g xml:base="http://z.example.net/zzz/">
    <g xml:base="/yyy/xxx/">
      <g xml:base="../xxx/">
        <use xlink:href="#foo" />
        <use xlink:href="#bar" />
        <use xlink:href="#bar" xml:base="../ggg/" />
      </g>
    </g>
  </g>
</svg>

5.7 image 要素

image 要素は画像の内容を現在の 利用座標系 の与えられた矩形領域に描画させることを指示する。 SVG Tiny 1.2 においては、 image は PNG や JPEG [PNG JPEG] などのラスター画像形式の内容を参照しなければならず、 image 要素から SVG 文書への参照は許容されない。代わりに、文書作成者は animation 要素を SVG 文書への参照に利用すべきである。 適合 SVG ビューア は PNG, JPEG 形式の画像ファイルをサポートしなければならない。他の画像ファイル形式をサポートしてもよい。 The 'image' element indicates that the contents of an image are to be rendered into a given rectangle within the current user coordinate system. In SVG Tiny 1.2, the 'image' must reference content that is a raster image format, such as PNG or JPEG [PNG, JPEG]. SVG Tiny 1.2 does not allow an SVG document to be referenced by the 'image' element; instead, authors should use the 'animation' element for referencing SVG documents. Conforming SVG viewers must support PNG and JPEG image file formats. Other image file formats may be supported.

JPEG に対し要求されるサポートの詳細は付録の JPEG サポート を見よ。PNG 対し要求されるサポートは Portable Network Graphics (PNG) Specification (Second Edition) [PNG] に定められている。 For details of the required JPEG support see the JPEG Support appendix. PNG support is required as defined in the Portable Network Graphics (PNG) Specification (Second Edition) [PNG].

image 要素の処理結果は常に４チャンネル RGBA である。 image 要素が３チャンネル（ RGB ）のみのラスター画像ファイルを参照する場合、アルファ値が一様に 1 にされた４チャンネル RGBA に変換されたかのように処理される。単チャンネルのラスター画像の場合は３つの色チャンネルの値が元の１チャンネルの値から計算され、アルファチャンネルが一様に 1 にされた４チャンネル RGBA に変換されたかのように処理される。 The result of processing an 'image' is always a four-channel RGBA result. When an 'image' element references a raster image file such as PNG or JPEG files which only has three channels (RGB), then the effect is as if the object were converted into a 4-channel RGBA image with the alpha channel uniformly set to 1. For a single-channel raster image, the effect is as if the object were converted into a 4-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1.

image 要素は画像の不透明度を制御するため opacity プロパティをサポートする。 fill-opacity プロパティは画像の描画に影響しない。 The 'image' element supports the 'opacity' property for controlling the image opacity. The 'fill-opacity' property does not affect the rendering of an image.

image 要素は新規の ビューポート を 新しいビューポートの確立 で述べるように確立する。新しい ビューポート の境界は属性 x, y, width, height で定義される。参照先の画像の配置や拡縮率は image 要素の preserveAspectRatio 属性により制御される。 An 'image' element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes 'x', 'y', 'width' and 'height'. The placement and scaling of the referenced image are controlled by the 'preserveAspectRatio' attribute on the 'image' element.

preserveAspectRatio 属性を評価する際に利用される viewBox 属性の値は参照先の内容で定義される。明白な viewBox を持つ内容ならば、その値が利用される。ほとんどのラスター画像（ PNG や JPEG など）では画像の境界が利用される（すなわち image 要素は暗黙の viewBox の値： "0 0 ラスター画像の幅 ラスター画像の高さ" を持つ）。値が指定されていない場合 preserveAspectRatio 属性は無視され、 ビューポート の x y 属性による並進のみが内容の表示に用いられる。 The value of the 'viewBox' attribute to use when evaluating the 'preserveAspectRatio' attribute is defined by the referenced content. For content that clearly identifies a 'viewBox' that value should be used. For most raster content (such as PNG and JPEG) the bounds of the image should be used (i.e. the 'image' element has an implicit 'viewBox' of "0 0 raster-image-width raster-image-height"). Where no value is readily available the 'preserveAspectRatio' attribute is ignored and only the translate due to the 'x' and 'y' attributes of the viewport is used to display the content.

例えば image 要素が PNG や JPEG を参照していて、 preserveAspectRatio="xMinYMin meet" と指定されているならば、ラスターにおける縦横比は保たれる（画像の座標系から現在の 利用座標系 への x と y の拡縮率は等しくなる）。ラスターは image 要素の属性 x, y, width, height で定まる ビューポート に収まる範囲内まで可能な限り大きくされ、ラスターの左上隅は ビューポート の左上隅に合わせられる。もし preserveAspectRatio の値が "none" であれば画像の縦横比は維持されない。 画像はラスターの左上隅が座標 (x, y) に、ラスターの右下隅が座標 (x+width, y+height) に正確に揃うようにはめ込まれる。 For example, if the 'image' element referenced a PNG or JPEG and preserveAspectRatio="xMinYMin meet", then the aspect ratio of the raster would be preserved (which means that the scale factor from the image's coordinates to the current user space coordinates would be the same for both x and y), the raster would be sized as large as possible while ensuring that the entire raster fits within the viewport, and the top left of the raster would be aligned with the top left of the viewport as defined by the attributes 'x', 'y', 'width' and 'height' on the 'image' element. If the value of 'preserveAspectRatio' was "none" then aspect ratio of the image would not be preserved. The image would be positioned such that the top-left corner of the raster exactly aligns with coordinate ('x', 'y') and the bottom-right corner of the raster exactly aligns with coordinate ('x'+'width', 'y'+'height').

SVG の仕様は表示されていない画像について読み込まれるべきかどうかを指定していない。 SVG-UA には、画像が externalResourcesRequired が "true" に設定された部分木内に存在する場合を除き、表示されていない画像データの読み込みは要求されていない（例えば初期の文書の ビューポート の外側に位置する画像など）。しかしながら、画像が初めて見えるようになった時点で遅延が生じ得ることに注意すべきである。この場合、文書作成者は SVG-UA に画像を表示前に読み込ませたいなら、 prefetch 要素を利用すべきである。 The SVG specification does not specify when an image that is not being displayed should be loaded. An SVG user agent is not required to load image data for an image that is not displayed (e.g. an image which is outside the initial document viewport), except when that image is contained inside a subtree for which 'externalResourcesRequired' is set to "true". However, it should be noted that this may cause a delay when an image becomes visible for the first time. In the case where an author wants to suggest that the SVG user agent loads image data before it is displayed, they should use the 'prefetch' element.

SVG-UA は画像を読み込み中でも増分的に描画してもよいが、そのような処理が要求されてはいないことに注意。 Note that an SVG user agent may choose to incrementally render an image as it is loading but is not required to do so.

    <define name='image'>
      <element name='image'>
        <ref name='image.AT'/>
        <ref name='image.CM'/>
      </element>
    </define>

    <define name='image.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.FocusHighlight.attr'/>
      <ref name='svg.Media.attr'/>
      <ref name='svg.XLinkEmbed.attr'/>
      <ref name='svg.Conditional.attr'/>
      <ref name='svg.External.attr'/>
      <ref name='svg.Focus.attr'/>
      <ref name='svg.Transform.attr'/>
      <ref name='svg.Opacity.attr'/>
      <ref name='svg.XYWH.attr'/>
      <ref name='svg.PAR.attr'/>
      <ref name='svg.ContentTypeAnim.attr'/>
    </define>

    <define name='image.CM'>
      <zeroOrMore>
        <choice>
          <ref name='svg.Desc.group'/>
          <ref name='svg.Animate.group'/>
          <ref name='svg.Discard.group'/>
          <ref name='svg.Handler.group'/>
        </choice>
      </zeroOrMore>
    </define>

An example: An example:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny">

  <-- この文書は外部画像への参照を含む -->
  <desc> This document has a reference to an external image </desc>

  <image x="200" y="200" width="100" height="100" xlink:href="externalImage.png">
    <title>External image</title>
  </image>
</svg>

5.8 条件処理

5.8.1 条件処理の概観

SVG には SVG-UA の能力や利用者の言語に依存する代替内容の指定を可能にする switch 要素と５つの 条件処理属性 ： requiredExtensions, requiredFeatures, requiredFonts, requiredFormats, systemLanguage が用意されている。 SVG provides a 'switch' element and five conditional processing attributes — 'requiredExtensions', 'requiredFeatures', 'requiredFonts', 'requiredFormats' and 'systemLanguage' — which provide the ability to specify alternate content depending on the capabilities of a given SVG user agent or the user's language.

    <define name='svg.Conditional.attr' combine='interleave'>
      <optional>
        <attribute name='requiredFeatures' svg:animatable='false' svg:inheritable='false'>
          <ref name='ListOfIRI.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='requiredExtensions' svg:animatable='false' svg:inheritable='false'>
          <ref name='ListOfIRI.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='requiredFormats' svg:animatable='false' svg:inheritable='false'>
          <ref name='FormatList.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='requiredFonts' svg:animatable='false' svg:inheritable='false'>
          <ref name='FontList.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='systemLanguage' svg:animatable='false' svg:inheritable='false'>
          <ref name='LanguageIDs.datatype'/>
        </attribute>
      </optional>
    </define>

条件処理属性 はすべての要素の処理に影響するものではない。それらは グラフィックス要素, コンテナ要素, テキスト内容要素, 記述要素, timed 要素 および foreignObject 要素, discard 要素にのみに指定できる。他の要素に指定された 条件処理属性 はその要素が処理されるかどうかに影響しない。 条件処理属性 が コンテナ要素 に指定された場合、【その要素に含まれる要素のうち】 条件処理属性 が指定できる要素にのみ影響する。例えば script 要素における requiredExtensions 属性はスクリプトを実行するかどうかを制御しない。スクリプトを含む コンテナ要素 に 条件処理属性 が指定されても、スクリプトが実行されるかどうかに影響しないことに注意。特に、 switch 要素に含まれるスクリプトはすべて処理される。 Conditional processing attributes do not affect the processing of all elements. They can be specified only on graphics elements, container elements, text content elements, descriptive elements, timed elements and the 'foreignObject' and 'discard' elements. A conditional processing attribute on any other element does not affect whether that element will be processed. When a conditional processing attribute is specified on a container element, it affects only the elements on which conditional processing attributes can be specified. For example, a 'requiredExtensions' attribute on a 'script' element will not control whether the script is executed. Note that if a conditional processing attribute is specified on a container element which contains scripts, it has no effect on whether the script is executed. In particular, all scripts contained in a 'switch' element are processed.

条件処理属性 は真か偽に評価される真偽テストのように働く。指定されていない場合は真と評価されるものと見なされる。これらの属性には使い方が２通りあり、属性が指定される要素が置かれている文脈に依存する。要素の親ノードが switch 要素ならば switch 要素の子要素で 条件処理属性 適用され得るもののうち、高々１つの要素に対する処理が行われる（詳細は switch 要素の説明を見よ）。他の場合、すなわち要素の親ノードが switch 要素でない場合、 条件処理属性 が要素に適用可能であれば、それらの属性が要素が処理されるかどうかを決定する。 The conditional processing attributes act as boolean tests and evaluate to either true or false. If one is not specified, then it is assumed to evaluate to true. The attributes can be used in two ways, depending on the context of the element on which the attributes are specified. If the element's parent node is a 'switch' element, then at most one of the 'switch' element's children that conditional processing attributes apply to will be processed. (See the description of the 'switch' element for details.) Otherwise, if the element's parent node is not a 'switch' element, and conditional processing attributes do apply to the element, then the attributes determine whether that element will be processed.

条件処理属性 の指定により要素が処理されなくなる、あるいは switch 要素が他の子要素を選択したために子要素が処理されなくなることの意味は、要素の種類により変わる： What it means for an element not to be processed because of conditional processing attributes specified on it, or because it is a child of a 'switch' that has selected a different child for processing, depends on the type of element:

• 要素が グラフィックス要素, コンテナ要素, テキスト内容要素, foreignObject 要素の場合、要素は描画されず 描画木 の一部とならない。 If the element is a graphics element, container element, text content element or a 'foreignObject' element, then the element is not rendered and is not a part of the rendering tree.

• 要素が timed 要素 の場合、要素はそのタイミング属性にも SVGTimedElement と ElementTimeControl インターフェースによる任意のメソッド呼び出しにも関係無く、決して開始されない。要素が文書において他の timed 要素 の 同期基点 として働く場合、それらの同期基点参照は決して実際の時刻へ解決されない。従って、例えば要素が アニメーション要素 なら決してアニメーションの効果は生じず、 audio 要素なら決して音を生成しなくなる。 If the element is a timed element, then the element will never begin, regardless of its timing attributes and any invocations of methods on the SVGTimedElement and ElementTimeControl interfaces. If the element serves as a syncbase for any other timed elements in the document, then those syncbase references will never resolve to a concrete time. Thus, for example, if the element is an animation element, the animation will never have an effect, and if the element is an 'audio' element, then it will never generate any sound.

• 要素が 'discard' 要素の場合、その対象要素の処分も自身の処分も決して誘発されなくなる。 If the element is a 'discard' element, then it will never trigger the removal of its target element, nor will it remove itself.

display プロパティと同様に、 条件処理属性 は適用可能な要素への直接的な描画と処理にのみ影響し、（ use など）他の要素からの参照利用は妨げない。 shadow 木 内の 条件処理属性 は通常どおり処理される。 Similar to the 'display' property, conditional processing attributes only affect the direct rendering and processing of applicable elements and do not prevent elements from being successfully referenced by other elements (such as via a 'use'). Conditional processing attributes in a shadow tree are processed normally.

下の Example systemLanguage は３つのテキスト （ウェールズ語, ギリシャ語, スペイン語）のうち、利用者の言語に一致するものがあればそのうち１つだけ表示する。無ければ、この例では何も表示しない。 Example systemLanguage below displays one of three text strings (in Welsh, Greek, or Spanish) if one of those is the user's preferred language. Otherwise, in this example, it displays nothing.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 170 200">

  <title>systemLanguage example</title>

  <switch>
    <g systemLanguage="cy">
      <text x="20" y="220" xml:lang="cy" font-size="20">Pam dydyn nhw ddim yn
        siarad Cymraeg?</text>
    </g>
    <g systemLanguage="el">
      <text x="20" y="220" xml:lang="el-GR" font-size="22">Μα γιατί δεν μπορούν
        να μιλήσουν Ελληνικά ;</text>
    </g>
    <g systemLanguage="es">
      <text x="20" y="220" xml:lang="es-ES" font-size="18">¿Por qué no pueden
        simplemente hablar en castellano?</text>
    </g>
  </switch>
</svg>

5.8.2 switch 要素

switch 要素はその子要素のうち１つをそれらに与えられた 条件処理属性 に従って選択するために利用される コンテナ要素 である。 switch 要素の直接の子要素のうち、 条件処理属性 の評価がすべて真になる最初の要素が通常どうり処理され、 switch 要素の他の直接の子要素で 条件処理属性 をサポートする要素はすべて処理されない。 条件処理属性 をサポートする要素は上の 条件処理の概観 の節に挙げてある。 The 'switch' element is a container element that can be used to select one of its child elements to process based on their conditional processing attributes. The first direct child element of a 'switch' whose conditional processing attributes all evaluate to true will be processed as normal. All other direct child elements of the 'switch' that support conditional processing attributes will not be processed. The elements that support conditional processing attributes are listed in the Conditional processing overview section, above.

条件処理属性 が一定の要素でのみサポートされる一方、 switch 要素のすべての直接の子要素に与えられたこれらの属性は、どの子要素の処理を無効にするかの決定に利用される。 While conditional processing attributes are supported only on certain elements, those attributes on all direct child elements of a 'switch' are used to determine which children to disable processing for.

display および visibility プロパティの値は switch 要素の処理には影響しない。特に、 switch 要素の子の display を none に設定しても switch 要素の処理に関わるテストには無関係である。 The values of the 'display' and 'visibility' properties have no effect on 'switch' element processing. In particular, setting 'display' to none on a child of a 'switch' element has no effect on the testing associated with 'switch' element processing.

これらが処理されるか無効にされるかに関わらず、 switch 要素の子要素は依然として DOM の一部であり、 id と xml:id 属性の一意性についての規則は適用されることに注意。加えて、要素が条件処理により描画されなかったとしても、例えば use 要素の利用対象や fill プロパティにおけるペイントサーバ参照として、参照の対象にはなり得る。 Note that regardless of whether they are processed or disabled, child elements of the 'switch' element are still part of the DOM, and rules applying to the uniqueness of the 'id' and 'xml:id' attributes still apply. Additionally, elements which would not otherwise be rendered due to conditional processing can still be referenced, for example as the target of a 'use' element or as a paint server reference in a 'fill' property.

switch の要素定義スキーマおよび内容モデルはここでは定義されない。現れ得るすべての場所で定義される。 The element definition schema and content model for 'switch' are not defined here. It is defined in all the places it can occur.

    <define name='switch.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.Conditional.attr'/>
      <ref name='svg.Properties.attr'/>
      <ref name='svg.FocusHighlight.attr'/>
      <ref name='svg.External.attr'/>
      <ref name='svg.Transform.attr'/>
      <ref name='svg.Focus.attr'/>
    </define>

より詳細な情報と例については 外部の型のオブジェクトの埋め込み を見よ。 For more information and an example, see Embedding foreign object types.

5.8.3 requiredFeatures 属性

5.8.4 requiredExtensions 属性

requiredExtensions 属性は要求される言語拡張のリストを指定する。言語拡張は SVG-UA の能力の範疇であり、この仕様で定義される特色機能セットの範囲を超えるものになる。それぞれの拡張は IRI 参照 により識別される。 The 'requiredExtensions' attribute specifies a list of required language extensions. Language extensions are capabilities within an SVG user agent that go beyond the feature set defined in this specification. Each extension is identified by an IRI reference.

言語拡張には、ベンダ特有のもの, SVG 言語自身の実験段階の機能, 別の言語（ XHTML, MathML 等々）などが考えられる。拡張が XML 1.0 名前空間仕様 [XML-NS10] あるいは XML 1.1 名前空間仕様 [XML-NS] をサポートする別の言語のものである場合、 IRI 参照 はその言語の名前空間 URI （ "http://www.w3.org/1999/xhtml", "http://www.w3.org/1998/Math/MathML" 等々）にすべきである。言語がいずれの XML 名前空間仕様もサポートしていない場合、 IRI 参照 はその言語において一意的な識別子になっているべきである。 Language extensions may be vendor-specific or experimental features for the SVG language itself, or may be separate languages (e.g., XHTML, MathML). If an extension is a separate language that supports the Namespaces in XML 1.0 specification [XML-NS10] or the Namespaces in XML 1.1 specification [XML-NS], the IRI reference should be the Namespace URI for that language (e.g., "http://www.w3.org/1999/xhtml", "http://www.w3.org/1998/Math/MathML"). If the language does not support either Namespaces in XML specification, the IRI reference should be an otherwise unique identifier for that language.

属性値の区切りに空白が用いられているので、 IRI 参照 内の空白文字はエスケープされなければならない。 Since white space is used to separate values in the attribute, any white space characters in the IRI reference must be escaped.

5.8.5 systemLanguage 属性

属性の真偽評価に接頭辞の一致規則を利用しているからと言って、言語への言語タグへの割り当てが、利用者がなんらかのタグの言語を理解するならば、そのタグを接頭辞とするすべてのタグの言語についても理解できることが成立するように行われていることが導かれるわけではない。この接頭辞規則は単純にこのような使われ方を許容するものである。 Note that the use of a prefix matching rule to determine whether the attribute evaluates to true or false does not imply that language tags are assigned to languages in such a way that it is always true that if a user understands a language with a certain tag, then this user will also understand all languages with tags for which this tag is a prefix. The prefix rule simply allows the use of prefix tags if this is the case.

実装における注意：言語について利用者の嗜好による設定を可能にする場合、実装者は「利用者が上記の言語一致規則の詳細について知らない」ということを念頭に置いて、適切なガイドを提供すべきである。例えば、利用者は「 "en-gb" を選択しておけばすべての英語文書は英国英語でなくとも利用できる」と考えるかもしれない。言語設定のユーザーインターフェースでは「最良の言語一致のためには（ "en-GB" に加えて） "en" も追加すべきである」ということを示唆すべきである。 Implementation note: When making the choice of linguistic preference available to the user, implementers should take into account the fact that users are not familiar with the details of language matching as described above, and should provide appropriate guidance. As an example, users may assume that on selecting "en-GB", they will be served any kind of English document if British English is not available. The user interface for setting user preferences should guide the user to add "en" to get the best matching behavior.

複数人による同時視聴を意図した内容のために複数の言語を含めてもよい。例えば、オリジナルのマオリ語に加えて同時に英語も表現できる内容は次のように書かれるであろう： Multiple languages may be listed for content that is intended for multiple audiences. For example, content that is presented simultaneously in the original Maori and English versions, would call for:

しかしながら、 systemLanguage 条件処理属性 の付いた要素に複数の言語が用意されているからといって、複数の言語の視聴者向けとは限らない。例えば「ラテン語第一講」のような英語の読み書きができる視聴者向けなのが明白な初心者向け言語入門など。このような場合、 systemLanguage 条件処理属性 は "en" のみを含むべきである。 However, just because multiple languages are present within the element on which the 'systemLanguage' conditional processing attribute is placed, this does not mean that it is intended for multiple linguistic audiences. An example would be a beginner's language primer, such as "A First Lesson in Latin," which is clearly intended to be used by an English-literate audience. In this case, the 'systemLanguage' conditional processing attribute should only include "en".

文書作成者への注意：文書作成者は switch 要素に含まれている複数の代替言語のオブジェクトがどれも表示されない可能性を考慮に入れておくべきである。従って switch 要素の最後に、いかなる場合でも受け入れられる「万能選手」を含めることが推奨される。 Authoring note: Authors should realize that if several alternative language objects are enclosed in a 'switch', and none of them matches, this may lead to situations where no content is displayed. It is thus recommended to include a "catch-all" choice at the end of such a 'switch' which is acceptable in all cases.

5.8.6 requiredFormats 属性

多くのリソースでは、特に音声と動画には、幅い広い形式が存在する。大抵の場合、法的な問題やプラットフォームの制約から特定の形式のサポートを要求するのは無理であり、 SVG-UA が自身がサポートする形式を選択できるように、内容の方が代替の選択肢を提供する必要が生じる場合が多い。 requiredFormats 属性により、特定の形式が UA にサポートされているかどうかに基づく条件処理が制御できる。 Many resources, especially media such as audio and video, have a wide range of formats. As it is often not possible to require support for a particular format, due to legal or platform restrictions, it is often necessary for content to provide alternatives so that SVG user agents can choose the format they support. The 'requiredFormats' attribute can be used to control conditional processing based on whether a particular format is supported by the user agent.

適合 SVG ビューアにおいては、以下の形式は常に真と評価されなければならない： The following formats must always evaluate to true in conforming SVG viewers:

• image/png
• image/jpeg
• image/svg+xml

5.8.7 requiredFonts 属性

文書作成者が文書のテキストの見え方と位置を完璧に制御しようとするなら、テキストの描画に正しいフォントが利用される確証が必要になる。これは SVG フォントと文書へのフォントの埋め込みにより可能になる。しかしながら、これは特に、非常に多数のグリフが用いられていたり、フォントのライセンスが埋め込みを許さない場合など、いつでも実用になるとは限らない。 If the author wishes to have complete control over the appearance and location of text in the document then they must ensure that the correct font is used when rendering the text. This can be achieved by using SVG fonts and embedding the font in the document. However, this is not practical in all cases, especially when the number of glyphs used is very large or if the licensing of the font forbids such embedding.

5.9 外部リソース

5.9.1 externalResourcesRequired 属性

文書はしばしば他の文書や他のウェブリソースを参照して描画処理の一部として利用する。文書作成者にとっては、他のリソースの存在が文書の正当性に欠かせないものと指定したい状況もある。 Documents often reference and use the contents of other document and other web resources as part of their rendering or processing. In some cases, authors want to specify that particular resources are required for a document to be considered correct.

externalResourcesRequired 属性を 'defs' を除くすべての コンテナ要素 と、他の外部リソースを含む、あるいは含み得る要素に利用できる。参照先の外部リソースが、与えられた要素の正当な描画に欠かせないかどうかをこの属性で指定できる。 The 'externalResourcesRequired' attribute is available on all container elements except 'defs' and on all elements which potentially can reference external resources. It specifies whether referenced resources that are not part of the current document are required for proper rendering of the given element.

externalResourcesRequired 属性は（属性値の継承の意味で）継承できないが、 コンテナ要素 に設定された場合、含まれるすべての要素に適用される。 Attribute 'externalResourcesRequired' is not inheritable (from a sense of attribute value inheritance), but if set on a container element, its value will apply to all elements within the container.

コンテナ要素に externalResourcesRequired="true" を指定すると、コンテナが外部リソースを参照する要素を含む場合、コンテナ内容の漸進的表示が無効化されることになるので、SVG 内容を生成するツール類は、通常は一般動作として単に svg 要素に externalResourcesRequired="true" を設定すべきではない。外部リソースの存在が描画の正しさに特に欠かせないような特定の要素に対してのみ externalResourcesRequired="true" を指定する方が良い。 Because setting externalResourcesRequired="true" on a container element will have the effect of disabling progressive display of the contents of that container, if that container includes elements that reference external resources, tools that generate SVG content should normally not just set externalResourcesRequired="true" on the 'svg' element on a universal basis. Instead, it is better to specify externalResourcesRequired="true" on those particular elements which specifically need the availability of external resources in order to render properly.

5.9.2 漸進的描画

文書を漸進的にダウンロード中、 SVG-UA はいくつかの状態になり得るノードの木を概念的に構築する。これらのノードに可能な状態は 未解決, 解決済み, エラー の３通りある。 When progressively downloading a document, an SVG user agent conceptually builds a tree of nodes in various states. The possible states for these nodes are unresolved, resolved and error.

ここでは漸進的描画に意図されるふるまいの解説を単純化するため、２つの概念的なパースイベントを要素開始イベントと要素終了イベントという語で表記する。要素開始イベントは、開始タグまたは空要素タグが読み込まれた時点で誘発されるものとする。要素終了イベントは、空要素タグの場合は要素開始イベントの直後に、あるいは終了タグが読み込まれた時点で生じるものとする。開始タグ, 終了タグ, 空要素タグは XML 1.0 ([XML10], 3.1 節) と XML 1.1 ([XML11], 3.1 節) に定義されている。 This description uses two conceptual parsing events to simplify the prose in explaining the intended behaviour of progressive rendering. The events referred to in the following prose are the start element and end element events. The start element event is considered to be triggered when a start-tag or an empty-element tag is read. The end element event occurs either immediately following the start element event in the case of an empty-element tag, or when an end-tag is read. The terms start-tag, end-tag and empty-element tag are as defined in Extensible Markup Language (XML) 1.0 ([XML10], section 3.1) and Extensible Markup Language (XML) 1.1 ([XML11], section 3.1).

ノードの要素開始イベントに続く文書の読み込みにおいては、ノードは未解決状態として文書木の一部になる。最後に開いたままの状態の要素（すなわち、対応する要素終了イベントの無い要素開始イベントが最後に生じた要素）の最後の子要素として追加される。ノードの依存関係が正常に解決された場合、ノードは解決状態に入り、ノードの依存関係が エラー状態になった場合、ノードはエラーになる。 When loading a document following the start element event on a node, that node becomes part of the document tree in the unresolved state. It is appended as the last child of the most recently opened element that is still open (that is, the most recent element for which a start element event has occurred with no corresponding end element event). If the node's dependencies are successfully resolved, then the node enters the resolved state or if the node's dependencies are found to be in error, then the node enters the error state.

script 要素に要素終了イベントが生じた際は、その要素はスクリプトの利用の章の スクリプト処理 の節に従って処理される 。更なる文書のパースは script の処理が完了するまで中断される。 When an end element event occurs for a 'script' element, that element is processed according to the Script processing section of the Scripting chapter. Further parsing of the document will be blocked until processing of the 'script' is complete.

ノードの依存性には、子の内容（ g の子要素など）および、要素またはその子要素から参照されるリソース（ image から参照される画像など）の双方が含まれる。空要素（子を持たない要素）は要素終了イベントが生じた時点で解決され、子ノードを持つ要素はすべての子が解決されて要素に要素終了イベントが生じた時点で解決される。リソースは SVG-UA 固有の仕組みにより解決される（または エラー状態 になる）。 Node dependencies include both children content (like the child elements on a 'g') and resources (e.g. images referenced by an 'image') referenced from that node or from its children. Empty elements (elements without children) become resolved when the end element event occurs on the element; elements with child nodes become resolved when all their children are resolved and when the end element event occurs on the element. Resources become resolved (or found in error) by an SVG user agent specific mechanism.

SVG-UA は、その適合性においては描画の更新頻度に関する最低基準は存在しないが、漸進的描画は実装しなければならない。実装は著しい休止を避けて円滑に描画の生成を行うべく、文書木の変化に対する処理と木の描画の最適なバランスを見出すべきである。漸進的描画には以下の規則が適用される： SVG user agents must implement progressive rendering although there is no minimum rendering update frequency required for conformance. Implementations should find their own balance between processing the changes in the document tree and rendering the tree to produce a smooth rendering avoiding significant pauses. The following rules apply to progressive rendering:

• SVG-UA は要素開始イベントおよび／または要素終了イベントに続いて、すなわち SVG-UA 個々の開始タグ, 空要素タグ, 終了タグに遭遇する度に、描画更新の機会を得る。 The SVG user agent has the opportunity to update the rendering following each start element and/or end element event, i.e. each time the SVG user agent parses a start-tag, empty-element tag or end-tag.

• SVG-UA は概念的な文書木ノードを文書順に、 externalResourcesRequired が "true" に設定された最初の未解決ノードまで、それは含めずに描画し、解決済みのノードは常に描画する。未解決だが externalResourcesRequired が "false" に設定されたノードはそれらの現在の状態を描画する。 描画が存在しないノードの場合（リソース待ち状態の image など）、そのノードの描画は行わない。 The SVG user agent renders the conceptual document tree nodes in document order up to, and not including the first node in the unresolved state which has 'externalResourcesRequired' set to "true". Nodes in the resolved state are always rendered. Nodes in the unresolved state but with 'externalResourcesRequired' set to "false" are rendered in their current state. If the node has no rendering (e.g., an 'image' pending a resource), then nothing is rendered for that node.

• ノードがエラーになった場合、文書はエラー状態になり、漸進的描画は停止される。 If a node enters the error state then the document enters the error state and progressive rendering stops.

SVG-UA が各開始／要素終了イベントに続いて描画更新の機会を得るとしても、そのような更新をすべきではない状況があることに注意。例えば、 font 要素の子（ font-face, hkern, missing-glyph, glyph ）は文書の描画更新を生じさせるべきではない。 font 要素の要素終了イベントによってのみ、他種のノード同様に描画更新を行うべきである。 Note that even if the SVG user agent has the opportunity to update the rendering after each start/end element event there are situations where such an update shouldn't be done. For example, 'font' element children ('font-face', 'hkern', 'missing-glyph', 'glyph') should not cause an update of the document rendering, only the end element event on the 'font' element should cause a document rendering as for other node types.

漸進的描画が利用される際は discard 要素からの前方参照は避けられるべきなのに注意。処分対象の要素の検出に失敗した場合（従って自身は処分される）、最終的に処分対象の要素の読み込みが完了しても後で処分されなくなる。 Note that forward referencing from a 'discard' element should be avoided when using progressive rendering. If it fails to find (and thus discard) an element, it will not later discard the element when it has finally loaded.

下の Example progRend01 において、 g 要素の描画は g 終了タグがパースされ処理され、そのすべての子に必要なすべてのリソースが解決された時点で開始され得る。これはグループの描画が、グループ全体が完全にパースされて myImage.png が正常に受信された時点で開始され得ることを意味する。 In Example progRend01 below, the 'g' element rendering may start when the 'g' end-tag has been parsed and processed and when all the resources needed by its children have been resolved. This means that the group's rendering may start when the group has been fully parsed and myImage.png has been successfully retrieved.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 480 360">

  <desc>externalResourcesRequired example.</desc>

  <g externalResourcesRequired="true">
    <rect xml:id="rect_1" width="5" height="7"/>
     ...
    <rect xml:id="rect_1000" width="5" height="7"/>

    <image xlink:href="myImage.png" width="5" height="7" externalResourcesRequired="true"/>
    <rect xml:id="rect_1001" width="5" height="7"/>
  </g>
</svg>

下の Example progRend02 では、前方参照する use 要素が存在する場合にどのように漸進的描画が行われるかを示す。 Example progRend02 demonstrates how progressive rendering is performed when there is a 'use' element with a forward reference.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 480 360">

  <!-- 前方参照する use 要素 -->
  <desc>Forward reference of use element</desc>

  <use xlink:href="#myRect" x="200" fill="green"/>
  <circle cx="450" cy="50" r="50" fill="yellow"/>

  <g fill="red">
    <rect xml:id="myRect" width="100" height="100"/>
  </g>
</svg>

以下のリストに文書がパースされた際に起こり得る描画を示す（コロンの右側が描画状態）： The following list shows the possible renderings of the document as it is parsed (the rendering state follows the colon):

1. use → 要素開始：空 'use' → start element: empty
2. circle → 要素開始：黄色の円 'circle' → start element: yellow circle
3. g → 要素開始：更新なし 'g' → start element: no update
4. rect → 要素開始（ use 参照が解決済みになる）： 緑色の矩形, 黄色の円, 赤色の矩形 'rect' → start element (use reference becomes resolved): green rect, yellow circle, red rect

Example progRend03 では、前方参照する use 要素が存在し、 externalResourcesRequired="true" を持つ場合にどのように漸進的描画が行われるかを示す。 Example progRend03 demonstrates how progressive rendering is performed when there is a 'use' element with a forward reference and which has externalResourcesRequired="true".

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 480 360">

  <!-- eRR=true にした、前方参照する use 要素 -->
  <desc>Forward reference on use with eRR=true</desc>

  <use xlink:href="#myGroup" x="200" fill="green" externalResourcesRequired="true"/>
  <circle cx="450" cy="50" r="50" fill="yellow"/>

  <g fill="red">
    <g xml:id="myGroup">
      <rect xml:id="myRect" width="100" height="100"/>
      <use xlink:href="#myRect" x="50" fill="purple"/>
    </g>
  </g>
</svg>

起こり得る描画状態は次のようになる： The possible rendering states are as follows:

1. use → 要素開始：空 'use' → start element: empty
2. circle → 要素開始：空（ use は未解決, externalResourcesRequired="true", 描画は use で停止） 'circle' → start element: empty 'use' is unresolved, externalResourcesRequired="true", rendering is stopped at the 'use')
3. 外側の g → 要素開始：更新なし Outer 'g' → start element: no update
4. 内側の g → 要素開始：更新なし（ use は解決済みだが externalResourcesRequired="true" なので参照が解決済みになるまで描画は再開されない） Inner 'g' → start element: no update (use is resolved but externalResourcesRequired="true" so rendering may not proceed until that reference enters the resolved state)
5. rect → 要素開始：更新なし 'rect' → start element: no update
6. use → 要素開始：更新なし 'use' → start element: no update
7. 内側の g → 要素終了（ #myGroup 参照が解決済みになり、描画を再開可能）： 緑色の矩形, 紫色の矩形, 黄色の円, 赤色の矩形, 紫色の矩形 Inner 'g' → end element (#myGroup reference becomes resolved, rendering can proceed): green rect, purple rect, yellow circle, red rect, purple rect

下の Example progRend04 は externalResourcesRequired="true" を持つコンテナを参照する use 要素がある場合： Example progRend04 shows a 'use' element with a reference to an element that is in a container with externalResourcesRequired="true".

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 480 360">

  <desc>Forward reference to a use under a container with eRR=true</desc>

  <use xlink:href="#myRect" x="200" fill="green"/>
  <circle cx="250" cy="50" r="50" fill="pink"/>

  <g fill="red" externalResourcesRequired="true">
    <circle cx="450" cy="50" r="50" fill="yellow"/>
    <rect xml:id="myRect" width="100" height="100"/>
  </g>
</svg>

文書がパースされた際に起こり得る描画状態を以下に示す： The possible rendering states as the document is parsed are as follows:

1. use → 要素開始：空 'use' → start element: empty
2. ピンクの circle → 要素開始：ピンクの円 Pink 'circle' → start element: pink circle
3. g → 要素開始：更新なし（ g 要素に externalResourcesRequired="true" がある、すなわち、 g の開始タグをパースした時点で g の子要素が未解決なので描画は中断。） 'g' → start element: no update (rendering is suspended because of externalResourcesRequired="true" on the 'g' element, i.e. because the children of 'g' are not resolved at the time of parsing of the start tag of the 'g').
4. 黄色の circle → 要素開始：更新なし（ g があるので描画は中断） Yellow 'circle' → start element: no update (rendering suspended because of 'g')
5. rect → 要素開始：更新なし 'rect' → start element: no update
6. g → 要素終了（ use から参照されているリソースが解決済みになり描画可能になったので描画を再開可能）：緑色の矩形, ピンクの円, 黄色の円, 赤色の矩形 'g' → end element (resources referenced by 'use' become resolved and can be rendered, so rendering can proceed): green rect, pink circle, yellow circle, red rect

Example progRend05 に SVG フォントへの前方参照がある場合の漸進的描画を示す。描画の更新は font 要素のパース中は生じない。 Example progRend05 shows an example of progressive rendering with a forward reference to an SVG font. Rendering updates do not occur mid-way through parsing a 'font' element.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" viewBox="0 0 480 360">

  <desc>Font Resolution Example</desc>

  <text x="240" y="230" text-anchor="middle" font-size="120"
        font-family="fontC, fontB, fontA">A</text>

  <defs>
    <font xml:id="fontA" horiz-adv-x="224" >
      <font-face
        font-family="fontA"
        units-per-em="1000"
        panose-1="0 0 0 0 0 0 0 0 0 0"
        ascent="917"
        descent="-250"
        alphabetic="0"/>
      <missing-glyph horiz-adv-x="800" d="..." />
      <glyph unicode="A" glyph-name="A"  d="..."/>
    </font>

    <font xml:id="fontB" horiz-adv-x="224">
      <font-face
        font-family="fontB"
        units-per-em="1000"
        panose-1="0 0 0 0 0 0 0 0 0 0"
        ascent="917"
        descent="-250"
        alphabetic="0"/>
      <missing-glyph horiz-adv-x="800" d="..."/>
      <glyph unicode="A" glyph-name="B" d="..." />
    </font>

    <font xml:id="fontC" horiz-adv-x="224" >
      <font-face
        font-family="fontC"
        units-per-em="1000"
        panose-1="0 0 0 0 0 0 0 0 0 0"
        ascent="917"
        descent="-250"
        alphabetic="0"/>
      <missing-glyph d="..."/>
      <glyph unicode="A" glyph-name="C" d="..."/>
    </font>
  </defs>
</svg>

文書のパースの進行に伴い、以下のように描画の更新が生じ得る： Rendering update possibilities as the document is parsed are as follows:

1. text → 要素開始："A" がデフォルトフォントで描画される 'text' → start element: "A" rendered with the default font
2. defs → 要素開始：更新なし 'defs' → start element: no update
3. #fontA → 要素開始：更新なし #fontA → start element: no update
4. #fontA / font-face → 要素開始：更新なし #fontA / 'font-face' → start element: no update
5. #fontA / missingGlyph → 要素開始：更新なし #fontA / 'missingGlyph' → start element: no update
6. #fontA / glyph → 要素開始：更新なし #fontA / 'glyph' → start element: no update
7. #fontA → 要素終了："A" がフォント fontA で描画される（現在の文書状態の描画を表す） #fontA → end element: "A" rendered with fontA (represents current document state rendering)
8. #fontB → 要素開始：更新なし #fontB → start element: no update
9. #fontB / font-face → 要素開始：更新なし #fontB / 'font-face' → start element: no update
10. #fontB / missingGlyph → 要素開始：更新なし #fontB / 'missingGlyph' → start element: no update
11. #fontB / glyph → 要素開始：更新なし #fontB / 'glyph' → start element: no update
12. #fontB → 要素終了："A" がフォント fontB で描画される（現在の文書状態の描画を表す） #fontB → end element: "A" rendered with fontB (represents current document state rendering)
13. #fontC → 要素開始：更新なし #fontC → start element: no update
14. #fontC / font-face → 要素開始：更新なし #fontC / 'font-face' → start element: no update
15. #fontC / missingGlyph → 要素開始：更新なし #fontC / 'missingGlyph' → start element: no update
16. #fontC / glyph → 要素開始：更新なし #fontC / 'glyph' → start element: no update
17. #fontC → 要素終了："A" がフォント fontC で描画される（現在の文書状態の描画を表す） #fontC → end element: "A" rendered with fontC (represents current document state rendering)

5.9.3 prefetch 要素

SVG 1.1 は SVG-UA が参照したメディアのダウンロードをいつ始めるべきかについて指定していない。これは特にメディアが文書の初期状態では利用されていない場合の（例えばオフスクリーンであったり隠れているときなど）実装の相違をもたらしている。 SVG Tiny 1.2 においては SVG-UA には、参照したメディアが文書の読み込みが完了した時点で見えないならば、メディアが externalResourcesRequired が "true" に設定された部分木内に含まれているのでない限り、そのダウンロードは要求されない。このことはメディアの一部が初めて表示される際にダウンロードによる休止が生じ得ることを意味する。より進んだ SVG-UA なら、特定のメディアストリームの必要性を予見して先取りしてダウンロードすることも考えられる。 SVG 1.1 did not specify when an SVG user agent should begin downloading referenced media. This lead to implementation differences particularly when the media was not used in the initial document state (e.g. it was offscreen or hidden). SVG Tiny 1.2 does not require SVG user agents to download referenced media that is not visible at the time the document is loaded, unless those media are contained inside a subtree for which 'externalResourcesRequired' is set to "true". This means there may be a pause to download the file the first time a piece of media is displayed. More advanced SVG user agents may wish to predict that particular media streams will be needed and therefore download them in anticipation.

そこで SVG Tiny 1.2 では、文書の描画パフォーマンス向上のために必要になる前に内容をサーバから先取りして取得することを内容製作者が示唆できるようにする機能が加えられた。 SMIL 2.1 'prefetch' 要素 ([SMIL21], 4.4 節) が prefetch 要素として、以下の変更を加えて SVG に組み込まれている： SVG Tiny 1.2 therefore adds functionality to allow content developers to suggest prefetching content from the server before it is needed to improve the rendering performance of the document. The SMIL 2.1 'prefetch' element ([SMIL21], section 4.4) has been incorporated into SVG as the 'prefetch' element, with the following modifications:

• 属性には <percent-value> 値を与えられない。 Attributes cannot be given <percent-value> values.

• この機能を再生開始が可能になる前に必要な文書量を指示するヒントとして利用できるようにするため、 xlink:href 属性では prefetch 要素が現れる文書内への参照が許容される。 The 'xlink:href' attribute is permitted to point into the document in which the 'prefetch' element appears so that this feature can be used as a hint indicating how much of the document is required before playback can start.

• 非局所 IRI 参照 を満足にサポートするため mediaCharacterEncoding と mediaContentEncodings 属性が追加されている。 In order to adequately support non-local IRI references, the 'mediaCharacterEncoding' and 'mediaContentEncodings' attributes have been added.

prefetch 要素は、メディアが後で利用されることになり、スムースな再生のためにはその一部もしくは全部の事前取得が文書作成者から望まれていることを SVG-UA に示唆するヒントを与える。ヒントなので UA は prefetch 要素を無視してもよい。その場合、文書の再生にリソースが必要になった際に中断が生じ得るが。これにより、文書作成ツールと文書作成者は十分な帯域幅や時間があると考えられるタイミングでリソースの取得をさせられるようになる。 The 'prefetch' element provides a hint to the SVG user agent that media will be used in the future and the author would like part or all of it fetched ahead of time to make document playback smoother. As it is a hint, user agents may ignore 'prefetch' elements, although doing so may cause an interruption in the document playback when the resource is needed. It gives authoring tools and authors the ability to schedule retrieval of resources when they think that there is available bandwidth or time to do it.

prefetch 要素が外部メディアを参照するのでなく、自身が属する文書内を参照する場合、参照先はトップレベルの g 要素に限られる。トップレベルの g 要素とは、 最も根元の 'svg' 要素 の直接の子となる g 要素を指す。 When instead of referring to external media, 'prefetch' refers to the same document it occurs in, then it can only reference a top level 'g' element. A top level 'g' element is a 'g' element that is a direct child of the rootmost 'svg' element.

このやり方で漸進的ダウンロードの最中でのスムースな再生を得たい場合、隣接するトップレベルの g 要素それぞれにアニメーションにおいて時間的に隣接するシーンを含ませることが推奨される。この場合、 prefetch 要素は、文書内で定義されたすべての g 要素が現れる前に、 defs ブロック内に現れなければならない。このような場合、 prefetch は SVG-UA にスムースかつ予測可能な形で内容を再生できるようなバッファの必要量を伝えるものとして利用される。 To enable smooth playback during progressive downloading in this scenario, it is recommended that each adjacent top level 'g' element contains adjacent chronological scenes in the animation. In this case the 'prefetch' element must appear in a 'defs' block before all defined 'g' elements in the document. In such cases, 'prefetch' is used to tell the SVG user agent how much it needs to buffer in order to be able to play content back in a smooth and predictable manner.

    <define name='prefetch'>
      <element name='prefetch'>
        <ref name='prefetch.AT'/>
        <ref name='prefetch.CM'/>
      </element>
    </define>

    <define name='prefetch.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.XLinkRequired.attr'/>
      <optional>
        <attribute name='mediaSize' svg:animatable='false' svg:inheritable='false'>
          <ref name='Number.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='mediaTime' svg:animatable='false' svg:inheritable='false'><text/></attribute>
      </optional>
      <optional>
        <attribute name='mediaCharacterEncoding' svg:animatable='false' svg:inheritable='false'><text/></attribute>
      </optional>
      <optional>
        <attribute name='mediaContentEncodings' svg:animatable='false' svg:inheritable='false'><text/></attribute>
      </optional>
      <optional>
        <attribute name='bandwidth' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <ref name='Number.datatype'/>
            <value>auto</value>
          </choice>
        </attribute>
      </optional>
    </define>

    <define name='prefetch.CM'>
      <zeroOrMore>
        <ref name='svg.Desc.group'/>
      </zeroOrMore>
    </define>

prefetch が外部メディアを参照する場合、 mediaSize と mediaTime の両方が制定されているならば mediaSize を用い、 mediaTime は無視されるものとする。 mediaSize と mediaTime のいずれも指定されていない場合、リソース全体を取得すべきものとしてふるまう。 When 'prefetch' refers to external media, if both 'mediaSize' and 'mediaTime' are specified, then 'mediaSize' shall be used and 'mediaTime' is ignored. If neither 'mediaSize' nor 'mediaTime' is specified, the behavior is that the entire resource should be fetched.

prefetch が同一文書内のリソース（すなわちトップレベルの g 要素）を参照する場合、より進んだ SVG-UA は mediaSize と mediaTime 属性の両方を一緒に、スムースかつ予測可能な形で内容を再生できるようなバッファの必要量を決定するために利用できる。 When 'prefetch' refers to a resource in the same document (i.e. a top level 'g' element), both the 'mediaSize' and 'mediaTime' attributes can be used together by a more advanced SVG user agent to determine how much it needs to buffer in order to be able to play content back in a smooth manner.

externalResourcesRequired 属性がリソースが必須かどうかを指示するためのものであるのに対し、 prefetch 要素はリソースの取得を最適化するためのものであることに注意。 externalResourcesRequired 属性の設定は prefetch 要素のふるまいに影響せず、逆も同様である。この事は prefetch 要素の参照先が内部の g 要素か外部のリソースかに関わらず成立する。 Note that whereas the 'externalResourcesRequired' attribute is used to designate that a resource is required, the 'prefetch' element is used to optimize the retrieval of a resource. Setting the 'externalResourcesRequired' attribute does not influence the behavior of the 'prefetch' element and vice-versa. This is true whether the 'prefetch' element points to an internal 'g' element or external resource.

下の Example prefetch01 に 外部メディアを参照する prefetch 要素の用例を示す： Example prefetch01 demonstrates the use of the 'prefetch' element when it refers to external media:

<svg width="400" height="300" version="1.2"
        xmlns="http://www.w3.org/2000/svg" baseProfile="tiny"
        xmlns:xlink="http://www.w3.org/1999/xlink">

     <!-- アニメーション開始前に可能なら巨大な画像を事前取得する。 -->
     <desc>
        Prefetch the large images before starting the animation
        if possible.
     </desc>

     <defs>
       <prefetch xlink:href="http://www.example.com/images/huge1.png"/>
       <prefetch xlink:href="http://www.example.com/images/huge2.png"/>
       <prefetch xlink:href="http://www.example.com/images/huge3.png"/>
     </defs>

     <image x="0" y="0" width="400" height="300"
        xlink:href="http://www.example.com/images/huge1.png"
        display="none">

        <set attributeName="display" to="inline" begin="10s"/>
 
        <animate attributeName="xlink:href" values="
               http://www.example.com/images/huge1.png;
               http://www.example.com/images/huge2.png;
               http://www.example.com/images/huge3.png"
            begin="15s" dur="30s"/>
     </image>

   </svg>

次の Example prefetch02 は prefetch 要素が同じ文書内のリソース（すなわちトップレベルの g 要素）を参照する例である： Example prefetch02 is an example of the 'prefetch' element referring to a resource in the same document (i.e. a top level 'g' element):

<?xml version="1.0" encoding="utf-16"?>
<svg width="400" height="300" version="1.2"
        xmlns="http://www.w3.org/2000/svg" baseProfile="tiny"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        timelineBegin="onStart"
        playbackOrder="forwardOnly">

     <!-- SVGT 1.2 の機能を利用して漸進的なダウンロードの最中に滑らかな再生を行う例 -->
     <desc>
        Example of using SVGT 1.2 features for smooth playback
        during progressive downloading.
     </desc>

     <defs>

       <prefetch xlink:href="#scene1"
                 mediaCharacterEncoding="UTF-16"
                 mediaTime="5s" mediaSize="94230" />

       <prefetch xlink:href="#scene2"
                 mediaCharacterEncoding="UTF-16"
                 mediaTime="10s" mediaSize="283474" />

       <prefetch xlink:href="#scene3"
                 mediaCharacterEncoding="UTF-16"
                 mediaTime="15s" mediaSize="627638" />

     </defs>

     <g xml:id="scene1">
       <discard begin="6s"/>
       <!-- シーン１のグラフィックスがここに -->
       <!-- graphics for scene 1 go here -->
     </g>

     <g xml:id="scene2">
       <discard begin="16s"/>
       <!-- シーン２のグラフィックスがここに -->
       <!-- graphics for scene 2 go here -->
     </g>

     <g xml:id="scene3">
       <discard begin="21s"/>
       <!-- シーン３のグラフィックスがここに -->
       <!-- graphics for scene 3 go here -->
     </g>

</svg>

5.10 共通属性

5.10.1 すべての要素に共通の属性

id, xml:id, xml:base, class, role, rel, rev, about, content, datatype, property, resource, typeof 属性は SVG Tiny 1.2 で定義されるすべての要素で利用できる。 id, xml:id, xml:base など、これらの要素の一部は SVG の構造と描画に直接的な影響を及ぼし得る一方、他のものは SVG に間接的にしか影響し得ないものもあり、 SVG 内容の予備的な処理にのみ利用され得るものもある。詳細は 拡張可能なメタデータ属性 を見よ。 The 'id', 'xml:id', 'xml:base', 'class', 'role', 'rel', 'rev', 'about', 'content', 'datatype', 'property', 'resource', and 'typeof' attributes are available on all elements defined by SVG Tiny 1.2. Some of these elements, such as 'id', 'xml:id', and 'xml:base' may have a direct effect on the structure and rendering of SVG, while others may only affect SVG indirectly, or may be used only for auxiliary processing of SVG content. See extensible metadata attributes for more details.

id と xml:id 属性

id と xml:id 属性はいずれも要素の一意的な識別子を指定する。いずれもデータ型は <NCName> であるが、検証目的においては <ID> 型となる。 xml:id は、すべての文書型を通じて <ID> 型を表すものとして意図されており、任意の XML によるある種の複合文書や、 <ID> で型付けされた属性に対する明示的な知識が要求される汎用の XML ツール群による処理に適している。 Both the 'id' and 'xml:id' attributes specify a unique identifier for the element. Both are have the data type <NCName>, but are of type <ID> for purposes of validation. 'xml:id' is intended to represent type <ID> universally across all document types. This makes it more suitable for certain compound documents with arbitrary XML, or with generic XML toolchains which require explicit knowledge of <ID>-typed attributes.

SVG ジェネレータは、既存のビューア, 文書作成ツール, その他の内容との下位互換性を保つため、要素の識別子に id のみをあてがうことが強く推奨される。 It is strongly recommended that SVG generators only use 'id' to assign identity to elements, to maintain backwards compatibility with existing viewers, authoring tools, and other content.

SVGElement インターフェースには id フィールドは１つだけあり、（ setAttributeNS(), setTraitNS(), setTrait() メソッド等により）いずれの属性の変更にも利用できる。同様に、 Document インターフェースの getElementById メソッドも id と xml:id 属性の双方に同等に働く。 There remains only one single id field on the SVGElement interface, which can be used to change the value of either attribute (e.g. by using the setAttributeNS(), setTraitNS(), or setTrait() methods). Likewise, the getElementById method on the Document interface applies equally to both the 'id' and 'xml:id' attributes.

id と xml:id 属性には異なる環境が意図されているので、同じ文書内の SVG 要素に混在させてはならない。そのような文書は適合 SVG 1.2 Tiny 内容にはならず、ふるまいは指定されていない。 Because they are intended for different environments, the 'id' and 'xml:id' attributes must not be used together on SVG elements in the same document. Such documents are not conforming SVG 1.2 Tiny content, and the behavior is not specified.

id と xml:id の相互変換

双方の主要な利用状況（すなわち、既存のデスクトップブラウザ, 文書作成ツール, XML ツール群）で利用可能な内容作成を容易にする目的に、 id 属性から xml:id 属性への変換（およびその逆変換）を行う XSLT スタイルシートを利用できる。例えば、ブラウザ環境を意識して作成された内容をサンプルの id2xmlid.xsl スタイルシートを用いて前処理し、汎用 XML ツールの処理へ回せるようになり、同じ内容をわずかなオーバーヘッドや小さな内容破壊リスクで活用できるようになる。サンプルの変換スタイルシートを下に与える： In order to facilitate the creation of content that can be used in both primary scenarios (that is, in existing desktop browsers and authoring tools, and in XML toolchains), an XSLT stylesheet can be used to convert the 'id' attributes to 'xml:id' attributes (and vice versa). For example, when content that has been authored with the browser environment in mind is being prepared for consumption by a generic XML tool, it can be preprocessed by using the id2xmlid.xsl sample stylesheet. This allows the same content to be used with little overhead or risk of breaking content. Example transformation stylesheets are provided below:

<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="node() | @*">
    <xsl:copy>
      <xsl:apply-templates select="node() | @*"/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="@id">
    <xsl:attribute name="xml:id">
      <xsl:value-of select="."/>
    </xsl:attribute>
  </xsl:template>

</xsl:stylesheet>

<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="node() | @*">
    <xsl:copy>
      <xsl:apply-templates select="node() | @*"/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="@xml:id">
    <xsl:attribute name="id">
      <xsl:value-of select="."/>
    </xsl:attribute>
  </xsl:template>

</xsl:stylesheet>

5.10.2 文字内容の要素の属性

文字データ内容を含み得る要素は、内容の自然言語と空白処理を指定する xml:lang 属性と xml:space 属性を持つ： Elements that might contain character data content have attributes 'xml:lang' and 'xml:space' to specify the natural language and whitespace processing of the content.

<attribute name='xml:space' svg:animatable='false' svg:inheritable='false'>
   <choice>
      <value>default</value>
      <value>preserve</value>
   </choice>
</attribute>

<attribute name='xml:lang' svg:animatable='false' svg:inheritable='false'>
  <choice>
     <ref name='LanguageCode.datatype'/>
     <empty/>
  </choice>
</attribute>