5 文書構造

内容モデル：

以下の要素の任意個数, 任意順序の組み合わせ：

属性：

DOM インタフェース：

SVGSVGElement

属性定義

version = "<number>"

文書が準拠する SVG 言語のバージョンを指定する。 Indicates the SVG language version to which this document fragment conforms.

SVG 1.0 [SVG10] ではこの属性は '1.0' に固定されている。 SVG 1.1 では '1.1' とすべきである。 In SVG 1.0 [SVG10], this attribute was fixed to the value '1.0'. For SVG 1.1, the attribute should have the value '1.1'.

アニメーション：不可

baseProfile = profile-name

文書作成者が内容の正確な描画に最小限必要と考える SVG 言語プロファイルをここで指定する。この属性は処理における制約を規定するわけではなく、メタデータと見なしてよい。例えば、利用者がここで指定した基本プロファイルの枠を越えて文書を編集しようとした際に，文書作成ツールから警告を発するための利用がある。それぞれの SVG 言語プロファイルは、この属性に与える適切なテキストを定義すべきである。 Describes the minimum SVG language profile that the author believes is necessary to correctly render the content. The attribute does not specify any processing restrictions; It can be considered metadata. For example, the value of the attribute could be used by an authoring tool to warn the user when they are modifying the document beyond the scope of the specified base profile. Each SVG profile should define the text that is appropriate for this attribute.

この属性が指定されていない場合の効果は、値 none が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of 'none' were specified.

アニメーション：不可

x = "<coordinate>"

（最も外側の svg 要素に対しては、どんな意味も効果も生じない。） (Has no meaning or effect on outermost svg elements.)

埋め込まれる svg 要素が配置される領域矩形の第一頂点の X 座標。 The x-axis coordinate of one corner of the rectangular region into which an embedded ‘svg’ element is placed.

この属性が指定されていない場合の効果は、値 0 が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of '0' were specified.

y = "<coordinate>"

（最も外側の svg 要素に対しては、どんな意味も効果も生じない。） (Has no meaning or effect on outermost svg elements.)

埋め込まれる svg 要素が配置される領域矩形の第一頂点の Y 座標。 The y-axis coordinate of one corner of the rectangular region into which an embedded ‘svg’ element is placed.

この属性が指定されていない場合の効果は、値 0 が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of '0' were specified.

width = "<length>"

最も外側の svg 要素に対しては、 SVG 文書片の固有の横幅を意味する。埋め込まれる svg 要素に対しては、配置されるときの矩形の横幅を意味する。 For outermost svg elements, the intrinsic width of the SVG document fragment. For embedded ‘svg’ elements, the width of the rectangular region into which the ‘svg’ element is placed.

負値はエラー（エラー処理を見よ）。値をゼロにすると要素は描画されなくなる。 A negative value is an error (see Error processing). A value of zero disables rendering of the element.

この属性が指定されていない場合の効果は、値 '100%' が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of '100%' were specified.

height = "<length>"

最も外側の svg 要素に対しては、 SVG 文書片の固有の高さを意味する。埋め込まれる svg 要素に対しては、配置されるときの矩形の高さを意味する。 For outermost svg elements, the intrinsic height of the SVG document fragment. For embedded ‘svg’ elements, the height of the rectangular region into which the ‘svg’ element is placed.

preserveAspectRatio = "[defer] <align> [<meetOrSlice>]"

preserveAspectRatio を見よ。 See ‘preserveAspectRatio’.

この属性が指定されていない場合の効果は、値 'xMidYMid meet' が指定されたときと同じになる。 If the attribute is not specified, then the effect is as if a value of 'xMidYMid meet' were specified.

アニメーション：可

contentScriptType = "content-type"

contentScriptType を見よ。 See 'contentScriptType'.

contentStyleType = "content-type"

contentStyleType を見よ。 See 'contentStyleType'.

zoomAndPan = "disable | magnify"

zoomAndPan を見よ。 See 'zoomAndPan'.

他の文書の部品として参照されることが予期される SVG 文書においては、最も外側の svg 要素に viewBox 属性を指定するとよい。この属性は、 SVG 文書を任意のビューポートに適宜倍率を変えてはめ込む簡便な方法を提供する。 If an SVG document is likely to be referenced as a component of another document, the author will often want to include a ‘viewBox’ attribute on the outermost svg element of the referenced document. This attribute provides a convenient way to design SVG documents to scale-to-fit into an arbitrary viewport.

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 属性を用いて名前を付けられる。名前付きのグループは、アニメーションや再利用など，様々な局面で必要になる。 A group of elements, as well as individual objects, can be given a name using the ‘id’ attribute. Named groups are needed for several purposes such as animation and re-usable objects.

例： An example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="5cm" height="5cm">
  <desc>それぞれ２個の矩形からなる２つのグループ</desc>
  <g id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </g>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>

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

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" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <desc>グループは入れ子にできる</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 要素

分類：

内容モデル：

以下の要素の任意個数, 任意順序の組み合わせ：

属性：

DOM インタフェース：

SVGGElement

5.3 再利用可能な内容の定義と defs 要素

5.3.1 概観

SVG では、後で再利用するためのグラフィカルなオブジェクトを定義できる。そのために、広範囲に渡り，他のオブジェクトへの IRI 参照 [RFC3987] が利用できるようにされている。例えば矩形を線型グラデーションで塗りつぶす場合、まず次の様に linearGradient 要素を定義して ID を与える： SVG allows graphical objects to be defined for later reuse. To do this, it makes extensive use of IRI references [RFC3987] to these other objects. For example, to fill a rectangle with a linear gradient, you first define a ‘linearGradient’ element and give it an ID, as in:

<linearGradient id="MyGradient">...</linearGradient>

次に、矩形の fill プロパティに，この線型グラデーションへの参照を与える： You then reference the linear gradient as the value of the ‘fill’ property for the rectangle, as in:

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

グラデーションなどの一部の型の要素は、それ自身は描画内容を生成しない。それらは都合の良い任意の場所に配置できる。しかしながら、グラフィカルなオブジェクトを直接描画させずに，参照からのみに利用したい場合もある。これを行うため，および定義済み内容の簡便なグループ化のため、 SVG には defs 要素が用意されている。 Some types of element, such as gradients, will not by themselves produce a graphical result. They can therefore be placed anywhere convenient. However, sometimes it is desired to define a graphical object and prevent it from being directly rendered. it is only there to be referenced elsewhere. To do this, and to allow convenient grouping defined content, SVG provides the ‘defs’ element.

参照先の要素は、可能な限り defs 要素内に定義することが推奨される。常に参照を通して利用される要素は： altGlyphDef, clipPath, cursor, filter, linearGradient, marker, mask, pattern, radialGradient, symbol である。これらの要素は defs 要素内で定義した方が文書内容も理解し易くなり、アクセシビリティも向上する。 It is recommended that, wherever possible, referenced elements be defined inside of a ‘defs’ element. Among the elements that are always referenced: ‘altGlyphDef’, ‘clipPath’, ‘cursor’, ‘filter’, ‘linearGradient’, ‘marker’, ‘mask’, ‘pattern’, ‘radialGradient’ and ‘symbol’. Defining these elements inside of a ‘defs’ element promotes understandability of the SVG content and thus promotes accessibility.

5.3.2 defs 要素

defs

分類：

内容モデル：

以下の要素の任意個数, 任意順序の組み合わせ：

属性：

DOM インタフェース：

SVGDefsElement

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’.

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 要素の子孫は元々の木にいつでも存在しており，他の要素からの参照は常に可能である。したがって、 display プロパティが defs 要素またはその子孫のどこかにあったとしても、他の要素からの参照を妨げることはない。 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 thus can always be referenced by other elements; thus, the value of the ‘display’ property on the ‘defs’ element or any of its descendants does not prevent those elements from being referenced by other elements.

ストリーミング環境において UA の効率的な実行を促すためには、 SVG 内容作成者は参照元の要素の先祖要素の直接の子として defs 要素を置き，その中に局所 IRI 参照から参照される子要素すべてを置くことが奨励される。例えば： To provide some SVG user agents with an opportunity to implement efficient implementations in streaming environments, creators of SVG content are encouraged to place all elements which are targets of local IRI references within a ‘defs’ element which is a direct child of one of the ancestors of the referencing element. For example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>先祖要素の 'defs' 子要素内における局所 URI 参照。</desc>
  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
  <rect x="1cm" y="1cm" width="6cm" height="1cm" 
        fill="url(#Gradient01)"  />

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

</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 desc 要素と title 要素

desc

分類：

記述的要素

内容モデル：

任意の要素または文字データ

属性：

DOM インタフェース：

SVGDescElement

title

分類：

記述的要素

内容モデル：

任意の要素または文字データ

属性：

DOM インタフェース：

SVGTitleElement

それぞれのコンテナ要素やグラフィックス要素には，個別に、 desc 要素, またはテキストのみの説明を与える title 要素，あるいはそれらの両方を指定することができる。 SVG 文書片が視覚メディアに SVG として描画される場合、 desc と title 要素は，グラフィックの一部としては出力されない。しかしながら title 要素は、例えばポインティング装置で触れると現れるツールチップとして表示させることも， UA には可能である。視覚, 聴覚の両方について代替表現は可能であり、 path などのグラフィックス要素を表示する代わりに desc や title 要素を表現することは十分あり得る。このようなことは、（場合によっては利用者の）スタイルシートに対する変更を通して，容易に実現できる。階層構造が深い場合や, use 要素の参照を辿るような場合、どこまで深く説明文を掘り下げるかの制御を利用者に委ねた方が望ましい場面は多々ある。 Each container element or graphics element in an SVG drawing can supply a ‘desc’ and/or a ‘title’ description string where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, ‘desc’ and ‘title’ elements are not rendered as part of the graphics. User agents may, however, for example, display the ‘title’ element as a tooltip, as the pointing device moves over particular elements. Alternate presentations are possible, both visual and aural, which display the ‘desc’ and ‘title’ elements but do not display ‘path’ elements or other graphics elements. This is readily achieved by using a different (perhaps user) style sheet. For deep hierarchies, and for following ‘use’ element references, it is sometimes desirable to allow the user to control how deep they drill down into descriptive text.

適合 SVG 文書片においては、どの title 要素もその親の最初の子要素になるべきである。注記：ツールチップの表示に title を実際に利用する実装には、 title が実際に最初の子要素になっているときに限り，そうするものが多い。 In conforming SVG document fragments, any ‘title’ element should be the first child element of its parent. Note that those implementations that do use ‘title’ to display a tooltip often will only do so if the ‘title’ is indeed the first child element of its parent.

以下に例を挙げる。通常の処理では UA は g 要素内の desc と title 要素を除いた残りの部分のみを表示する。 The following is an example. In typical operation, the SVG user agent would not render the ‘desc’ and ‘title’ elements but would render the remaining contents of the ‘g’ element.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <g>
    <title>地域別売上高</title>
    <desc>
	  これは地域別売上高を表す棒グラフである。
    </desc>
    <!-- ベクターデータで定義される棒グラフ -->
  </g>
</svg>

説明要素とタイトル要素には他の名前空間でマークアップされたテキストも含められる： Description and title elements can contain marked-up text from other namespaces. Here is an example:

<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <desc xmlns:mydoc="http://example.org/mydoc">
    <mydoc:title>これは例示用 SVG ファイル</mydoc:title>
    <mydoc:para>全体的な説明には <mydoc:emph>mydoc</mydoc:emph>
      名前空間によるマークアップを利用。</mydoc:para>
  </desc>
  <g>
    <!-- 絵図はここに -->
  </g>
</svg>

文書作成者は、独立した SVG 文書の最も外側の svg 要素に対し常に， title 要素を子要素として与えるべきである。 svg 要素の子要素としての title 要素は SVG 文書片の内容確認に役立つ。利用者はしばしば文脈の外から文書を参照するので、文書作成者は文脈が豊かなタイトルを提供するべきである。「序文」の様な文脈情報に乏しいタイトルより、「中世の養蜂業・序文」の様なタイトルを付けるべきである。 UA は最も外側の svg 要素に title 子要素があれば、アクセシビリティに配慮して必ず利用者に示されるようにすべきである。このような仕組の実装は UA 側に託されている（例えば、音声によるキャプション）。 Authors should always provide a ‘title’ child element to the outermost svg element within a stand-alone SVG 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, user agents should always make the content of the ‘title’ child element to the outermost svg element available to users. The mechanism for doing so depends on the user agent (e.g., as a caption, spoken).

多くの SVG の要素（特にコンテナ要素とテキスト要素）の DTD 定義では desc, および title 子要素の配置や数に制限を設けていない。この融通性は、コンテナ要素に対する一貫性を備えた内容モデルが開発されるまでの，一時的な措置である。一部のコンテナ要素は混成内容を許容し、望まれる制約を XML の混成内容の規則 ([XML10], 3.2.2 節) が受け入れてくれないからである。将来版の SVG 言語の表現は、 DTD よりも表出的になり，より制約された混成内容規則を持てるようになるであろう。すべての要素に対し、高々 1 個の desc と高々 1 個の title を子要素として与え，それらを（ metadata 要素と文字データを除く）他のすべての子要素より先に位置させることが強く推奨される。 UA は、処理の際に複数の desc や title からの選択を迫られた際には，最初のものを選ぶべきである（例えばツールチップにどのテキストを用いるかなど）。 The DTD definitions of many of SVG's elements (particularly, container and text elements) place no restriction on the placement or number of the ‘desc’ and ‘title’ sub-elements. This flexibility is only present so that there will be a consistent content model for container elements, because some container elements in SVG allow for mixed content, and because the mixed content rules for XML ([XML10], section 3.2.2) do not permit the desired restrictions. Representations of future versions of the SVG language might use more expressive representations than DTDs which allow for more restrictive mixed content rules. It is strongly recommended that at most one ‘desc’ and at most one ‘title’ element appear as a child of any particular element, and that these elements appear before any other child elements (except possibly ‘metadata’ elements) or character data content. If user agents need to choose among multiple ‘desc’ or ‘title’ elements for processing (e.g., to decide which string to use for a tooltip), the user agent shall choose the first one.

5.5 symbol 要素

symbol

分類：

グラフィックス要素, グラフィックス参照要素, 構造要素

内容モデル：

以下の要素の任意個数, 任意順序の組み合わせ：

属性：

DOM インタフェース：

SVGSymbolElement

symbol 要素は、グラフィックのひな型オブジェクトを定義し， use 要素によりインスタンス化される。 The ‘symbol’ element is used to define graphical template objects which can be instantiated by a ‘use’ element.

グラフィックに繰り返し用いる symbol 要素の利用により、文書に構造と意味論が加えられる。多彩な構造を備える文書は、グラフィック, 読み上げ, あるいは点字による出力が可能になり、アクセシビリティも向上する。 The use of ‘symbol’ elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.

symbol と g の根本的な相違は： The key distinctions between a ‘symbol’ and a ‘g’ are:

symbol 要素はそれ自身としては描画されない。 use 要素により生成される symbol 要素のインスタンスのみが描画される。 A ‘symbol’ element itself is not rendered. Only instances of a ‘symbol’ element (i.e., a reference to a ‘symbol’ by a ‘use’ element) are rendered.
symbol 要素は、それを参照する use 要素で定義されるビューポート矩形に適宜拡縮させてはめ込むための， viewBox 属性と preserveAspectRatio 属性を持つ。 A ‘symbol’ element has attributes ‘viewBox’ and ‘preserveAspectRatio’ which allow a ‘symbol’ to scale-to-fit within a rectangular viewport defined by the referencing ‘use’ element.

marker 要素と pattern 要素は symbol 要素と密接に関連する。 Closely related to the ‘symbol’ element are the ‘marker’ and ‘pattern’ elements.

symbol 要素は決して直接描画されることはなく、 use 要素からの参照以外の用途はない。 display プロパティは symbol 要素には適用されない。すなわち， symbol 要素は、 display プロパティが none 以外の値に設定されていても直接描画されることはなく， symbol 要素自身あるいはその先祖において display プロパティが none に設定されていても参照を通して利用できる。 ‘symbol’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘use’ element. The ‘display’ property does not apply to the ‘symbol’ element; thus, ‘symbol’ elements are not directly rendered even if the ‘display’ property is set to a value other than none, and ‘symbol’ elements are available for referencing even when the ‘display’ property on the ‘symbol’ element or any of its ancestors is set to none.

5.6 use 要素

use

分類：

内容モデル：

以下の要素の任意個数, 任意順序の組み合わせ：

属性：

DOM インタフェース：

SVGUseElement

どの svg, symbol, g, use 要素あるいはグラフィックス要素も、 use 要素によるひな型としての再利用（すなわちインスタンス化）の対象になる。 use 要素は、文書の与えられた場所において他の要素を参照し，そのグラフィック内容の取り込みと描画を指示する。 Any ‘svg’, ‘symbol’, ‘g’, graphics element or other ‘use’ is potentially a template object that can be re-used (i.e., "instanced") in the SVG document via a ‘use’ element. The ‘use’ element references another element and indicates that the graphical contents of that element is included/drawn at that given point in the document.

image 要素とは異なり、 use 要素は，文書全体を参照することはできない。 Unlike ‘image’, the ‘use’ element cannot reference entire files.

use 要素は省略可能な次の属性： x, y, width, height を持つ。これらは、参照先の要素のグラフィック内容を現在の座標系の矩形領域に写像するために利用される。 The ‘use’ element has optional attributes ‘x’, ‘y’, ‘width’ and ‘height’ which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system.

use 要素による効果は、あたかも参照先の要素の内容が DOM 木において — その use 要素を親とする別個の非公開木として，かつ use 要素のすべての先祖がその木の先祖になるように — 末端まで複製されたかのようにふるまう。複製された DOM 木は非公開なので、 SVG 文書オブジェクトモデル（ DOM ）においては use 要素とその属性が存在するだけであり，参照先の要素の内容が use 要素の子としては現れることはない。 The effect of a ‘use’ element is as if the 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 ‘use’ element.

CSS によるスタイル付けをサポートする UA においては、この概念的な非公開 DOM 木の中への，参照先の要素とその子孫の末端までの複製は、 CSS カスケード ([CSS2], 6 節) によりもたらされる参照先の要素とその内容のすべてのプロパティ値の複製も意味する。 CSS2 セレクタの適用については、元の（すなわち参照先の）要素については正規の文書構造の一部なので適用される一方，（概念的な）複製木については正規の文書構造の一部ではないので適用されない。 For user agents that support Styling with CSS, the conceptual deep cloning of the referenced element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) on the referenced element and its contents. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

しかしながら、プロパティ継承においては、参照先の要素がテキストそのままとして use 要素下に末端の子孫まで複製されているものとみなされ， use 要素とその先祖要素のプロパティを継承し，複製木内のインスタンス化された要素は参照先の要素の元々の親のプロパティを継承しない。 Property inheritance, however, 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.

もしイベント属性が参照先の要素にあてがわれている場合、そのイベントの実際の標的は「インスタンス化された木」内の対応する SVGElementInstance オブジェクトになる。 If event attributes are assigned to referenced elements, 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 と現在の標的要素に設定される。イベントは通常の木のごとく、木の非公開部分も公開部分も辿って伝播する：最初はルート要素から use 要素へ，次に非公開部分をイベントの標的まで辿り（捕獲過程 — capture phase ），標的でバブル化し、再び非公開部分を use 要素まで辿った後，通常の木を辿ってルート要素まで浮上する（浮上過程 — bubbling phase ）。 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 from the root element to the ‘use’ element and then through non-exposed tree elements in the capture phase, followed by the target phase at the target of the event, then bubbling back through non-exposed tree to the use element and then back through regular tree to the root element in 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.

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, specifying 'visibility:hidden' on a ‘use’ element does not guarantee that the referenced content will not be rendered. If the ‘use’ element specifies 'visibility:hidden' and the element it references specifies 'visibility:hidden' or 'visibility:inherit', then that one 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'.

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

use 要素における視覚上の効果は、あたかも use 要素が，以下のようにして生成される内容に置き換えられたかのようにふるまう： 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, width, height, xlink:href 属性を除いたすべての属性が移植される。 x, y を use 要素の x, y 属性の値とするとき、変換 translate(x, y) が g 要素の transform 属性の終端（つまり，右側）に付加される。（下の各項の原文における共通部分）
次に：

use 要素が symbol 要素を参照している場合

参照先の symbol とその内容は、根元の symbol が svg に置き換えられることを除いて，生成される木に末端まで複製される。この生成された svg は常に明示的に width 属性と height 属性の値を持ち， use 要素の width と height の値が移植されるが、これらが use 要素に与えられていないものについては値 '100%' をとる。 If the ‘use’ element references a ‘symbol’ element: In the generated content, the ‘use’ will be replaced by ‘g’, where all attributes from the ‘use’ element except for ‘x’, ‘y’, ‘width’, ‘height’ 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 represent the values of the ‘x’ and ‘y’ attributes on the ‘use’ element. The referenced ‘symbol’ and its contents are deep-cloned into the generated tree, with the exception that the ‘symbol’ is replaced by an ‘svg’. This generated ‘svg’ will always have explicit values for attributes ‘width’ and ‘height’. If attributes ‘width’ and/or ‘height’ are provided on the ‘use’ element, then these attributes will be transferred to the generated ‘svg’. If attributes ‘width’ and/or ‘height’ are not specified, the generated ‘svg’ element will use values of '100%' for these attributes.

use 要素が svg 要素を参照している場合

参照先の svg とその内容は生成される木に末端まで複製される。もし use 要素に width や height 属性が与えられていた場合、これらは svg 要素の対応する値を上書きする。 If the ‘use’ element references an ‘svg’ element: In the generated content, the ‘use’ will be replaced by ‘g’, where all attributes from the ‘use’ element except for ‘x’, ‘y’, ‘width’, ‘height’ 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 represent the values of the ‘x’ and ‘y’ attributes on the ‘use’ element. The referenced ‘svg’ and its contents are deep-cloned into the generated tree. If attributes ‘width’ and/or ‘height’ are provided on the ‘use’ element, then these values will override the corresponding attributes on the ‘svg’ in the generated tree.

他の場合

参照先のオブジェクトとその内容は生成される木に末端まで複製される。 Otherwise: In the generated content, the ‘use’ will be replaced by ‘g’, where all attributes from the ‘use’ element except for ‘x’, ‘y’, ‘width’, ‘height’ 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 represent the values of the ‘x’ and ‘y’ attributes on the ‘use’ element. The referenced object and its contents are deep-cloned into the generated tree.

CSS によるスタイル付けをサポートする UA においては、生成された g 要素は CSS カスケード ([CSS2], 6 節) により「カスケードされた」 use 要素のプロパティ値を一緒に運ぶ。加えて、参照先のリソースの（末端までの）複製は、元の（つまり、参照先の）要素の「カスケードされた」プロパティ値も一緒に運ぶ。したがって， class 属性, および style 属性と組み合わせて用いられる様々な CSS セレクタによる効果は、実質的には，生成された内容において「カスケードされた」プロパティ値を伝達する機能上等価な style 属性への置き換えになる。 For user agents that support Styling with CSS, the generated ‘g’ element carries along with it the "cascaded" property values on the ‘use’ element which result from the CSS cascade ([CSS2], chapter 6). Additionally, the copy (deep clone) of the referenced resource carries along with it the "cascaded" property values resulting from the CSS cascade on the original (i.e., referenced) elements. Thus, the result of various CSS selectors in combination with the ‘class’ and ‘style’ attributes are, in effect, replaced by the functional equivalent of a ‘style’ attribute in the generated content which conveys the "cascaded" property values.

下の Example Use01 に rect を利用する単純な use 要素を示す： Example Use01 below has a simple ‘use’ on a ‘rect’.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use01 - 'rect' を利用する単純な 'use'</desc>
  <defs>
    <rect 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>

Example Use01

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use01-GeneratedContent - 'rect' を利用する単純な 'use'</desc>
  <!-- 'defs' 部は省略 -->

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

  <!-- 'use' を置き換える生成内容はここから -->
  <g transform="translate(20,10)">
    <rect width="60" height="10"/>
  </g>
  <!-- 生成内容はここまで -->

</svg>

下の Example Use02 に symbol を利用する use 要素を示す： Example Use02 below has a ‘use’ on a ‘symbol’.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use02 - 'symbol' を利用する 'use'</desc>
  <defs>
    <symbol id="MySymbol" viewBox="0 0 20 20">
      <desc>MySymbol — 格子状に並ぶ４矩形</desc>
      <rect x="1" y="1" width="8" height="8"/>
      <rect x="11" y="1" width="8" height="8"/>
      <rect x="1" y="11" width="8" height="8"/>
      <rect x="11" y="11" width="8" height="8"/>
    </symbol>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use x="45" y="10" width="10" height="10" 
       xlink:href="#MySymbol" />
</svg>

Example Use02

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use02-GeneratedContent - 'symbol' を利用する 'use'</desc>

  <!-- 'defs' 部は省略 -->

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

  <!-- 'use' を置き換える生成内容はここから -->
  <g transform="translate(45, 10)" >
    <!-- 参照先の 'symbol' 開始。'symbol' は
         x,y,width,height=0,0,100%,100% に設定された 'svg' に置き換わる -->
    <svg width="10" height="10" 
         viewBox="0 0 20 20">
      <rect x="1" y="1" width="8" height="8"/>
      <rect x="11" y="1" width="8" height="8"/>
      <rect x="1" y="11" width="8" height="8"/>
      <rect x="11" y="11" width="8" height="8"/>
    </svg>
    <!-- ここまでが参照先の 'symbol' -->
  </g>
  <!-- 生成内容はここまで -->

</svg>

Example Use03 に use 要素が transform 属性を持つときどのような効果が生じるかを示す： Example Use03 illustrates what happens when a ‘use’ has a ‘transform’ attribute.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use03 - 'transform' 属性を伴う 'use' </desc>
  <defs>
    <rect 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>

Example Use03

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use03-GeneratedContent - 'transform' 属性を伴う 'use'</desc>

  <!-- 'defs' 部は省略 -->

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

  <!-- 'use' を置き換える生成内容はここから -->
  <g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
  </g>
  <!-- 生成内容はここまで -->

</svg>

Example Use04 に use 要素に対する種々の CSS によるスタイル付けの適用を示す： Example Use04 illustrates a ‘use’ element with various methods of applying CSS styling.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3cm" viewBox="0 0 1200 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use04 - 'use' に対する CSS によるスタイル付け</desc>
  <defs style=" /* 規則 9 */ stroke-miterlimit: 10" >
    <path id="MyPath" d="M300 50 L900 50 L900 250 L300 250"
                     class="MyPathClass"
                     style=" /* 規則 10 */ stroke-dasharray:300,100" />
  </defs>
  <style type="text/css">
    <![CDATA[
      /* 規則 1 */ #MyUse { fill: blue }
      /* 規則 2 */ #MyPath { stroke: red }
      /* 規則 3 */ use { fill-opacity: .5 }
      /* 規則 4 */ path { stroke-opacity: .5 }
      /* 規則 5 */ .MyUseClass { stroke-linecap: round }
      /* 規則 6 */ .MyPathClass { stroke-linejoin: bevel }
      /* 規則 7 */ use > path { shape-rendering: optimizeQuality }
      /* 規則 8 */ g > path { visibility: hidden }
    ]]>
  </style>

  <rect x="0" y="0" width="1200" height="300"
         style="fill:none; stroke:blue; stroke-width:3"/>
  <g style=" /* 規則 11 */ stroke-width:40">
    <use id="MyUse" xlink:href="#MyPath" 
         class="MyUseClass"
         style="/* 規則 12 */ stroke-dashoffset:50" />
  </g>
</svg>

Example Use04

視覚効果においては下に示す文書と同じになる。スタイル規則のうち、一部（規則 1-6, 規則 10-12 ）は生成内容に反映され，それ以外（規則 7-9 ）は反映されないことを確認されたい。生成内容に反映されない規則とは： The visual effect would be equivalent to the following document. Observe that some of the style rules above apply to the generated content (i.e., rules 1-6, 10-12), whereas others do not (i.e., rules 7-9). The rules which do not affect the generated content are:

規則 7,8 ： CSS セレクタは、生成された木ではなく，正規の文書木にしか適用されない。したがって、これらのセレクタは無効である。 Rules 7 and 8: CSS selectors only apply to the formal document tree, not on the generated tree; thus, these selectors will not yield a match.
規則 9 ：生成された木は use 要素の先祖からのみプロパティを継承し、参照先の要素の先祖からは何も継承しない。したがってこの規則は生成内容に反映されない。 Rule 9: The generated tree only inherits from the ancestors of the ‘use’ element and does not inherit from the ancestors of the referenced element; thus, this rule does not affect the generated content.

例証のための便宜上、下の生成内容では有効なセレクタを style 属性としてインライン化している。 In the generated content below, the selectors that yield a match have been transferred into inline ‘style’ attributes for illustrative purposes.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3cm" viewBox="0 0 1200 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use04-GeneratedContent - 'transform' 属性を伴う 'use' </desc>

  <!-- 'style' 部と 'defs' 部は省略 -->

  <rect x="0" y="0" width="1200" height="300"
         style="fill:none; stroke:blue; stroke-width:3"/>
  <g style="/* 規則 11 */ stroke-width:40">

    <!-- 'use' を置き換える生成内容はここから -->
    <g style="/* 規則 1 */ fill:blue;
                 /* 規則 3 */ fill-opacity:.5;
                 /* 規則 5 */ stroke-linecap:round;
                 /* 規則 12 */ stroke-dashoffset:50" >
      <path d="M300 50 L900 50 L900 250 L300 250"
            style="/* 規則 2 */ stroke:red; 
                   /* 規則 4 */ stroke-opacity:.5; 
                   /* 規則 6 */ stroke-linejoin: bevel; 
                   /* 規則 10 */ stroke-dasharray:300,100" />
    </g> 
    <!-- 生成内容はここまで -->

  </g>
</svg>

use 要素が他の use 要素もしくは use 要素を内容に持つ他の要素を参照する場合、上で述べた末端までの複製処理は再帰的に行われる。しかしながら，参照による連鎖が直接的か間接的かを問わず循環した場合、参照と defs 要素にて述べたように，エラーとみなされる。 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 References and the ‘defs’ element.

属性定義

x = "<coordinate>"

参照先の要素が配置される矩形の第一頂点の X 座標。 The x-axis coordinate of one corner of the rectangular region into which the referenced element is placed.

この属性が指定されていない場合の効果は、値 0 が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of "0" were specified.

y = "<coordinate>"

参照先の要素が配置される矩形の第一頂点の Y 座標。 The y-axis coordinate of one corner of the rectangular region into which the referenced element is placed.

この属性が指定されていない場合の効果は、値 0 が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of "0" were specified.

width = "<length>"

参照先の要素が配置される矩形の幅。負値はエラー（エラー処理を見よ）。値をゼロにすると要素は描画されなくなる。 The width of the rectangular region into which the referenced element is placed. A negative value is an error (see Error processing). A value of zero disables rendering of this element.

height = "<length>"

参照先の要素が配置される矩形の高さ。負値はエラー（エラー処理を見よ）。値をゼロにすると要素は描画されなくなる。 The height of the rectangular region into which the referenced element is placed. A negative value is an error (see Error processing). A value of zero disables rendering of this element.

xlink:href = "<iri>"

SVG 文書片または SVG 文書内の要素への IRI 参照。 A IRI reference to an element/fragment within an SVG document.

5.7 image 要素

image

分類：

グラフィックス要素, グラフィックス参照要素

内容モデル：

以下の要素の任意個数, 任意順序の組み合わせ：

属性：

DOM インタフェース：

SVGImageElement

image 要素はファイルの完全な中身を現在の利用座標系の与えられた矩形領域に描画させることを指示する。 image 要素は PNG や JPEG などのラスター画像のファイルあるいは、 MIME タイプ "image/svg+xml" のファイルを参照できる。適合 SVG ビューアには少なくとも PNG, JPEG, SVG 形式のサポートが求められる。 The ‘image’ element indicates that the contents of a complete file are to be rendered into a given rectangle within the current user coordinate system. The ‘image’ element can refer to raster image files such as PNG or JPEG or to files with MIME type of "image/svg+xml". Conforming SVG viewers need to support at least PNG, JPEG and SVG format files.

image 要素の処理結果は必ず４チャンネル RGBA である。 image 要素が３チャンネル（ RGB ）のみを持つラスター画像のファイルを参照している場合、アルファ値が一様に 1 にされた４チャンネル RGBA に変換される。１チャンネルのみのラスター画像の場合、３つの色チャンネル（ RGB ）の値が元の１チャンネルの値から算出され，アルファチャンネルが一様に 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 要素は新規のビューポートを新たなビューポートの確立で述べられるようにして確立する。ビューポートの境界は属性 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.

image 要素が SVG 画像を参照する場合、 SVG 画像のルート要素の clip, overflow プロパティは無視される（ x, y, width, height 属性が無視されるのと同じように）。 image 要素の preserveAspectRatio の値が 'defer' で開始されていない限り、参照先の SVG 画像のルート要素の preserveAspectRatio 属性も無視される（詳細は preserveAspectRatio を見よ）。その代わり、参照する image 要素の preserveAspectRatio 属性, clip, overflow プロパティが，どのように SVG 画像をビューポートにはめ込み, どのようにクリッピングするか（またはしないか）を決定する。 When an ‘image’ element references an SVG image, the ‘clip’ and ‘overflow’ properties on the root element in the referenced SVG image are ignored (in the same manner as the ‘x’, ‘y’, ‘width’ and ‘height’ attributes are ignored). Unless the value of ‘preserveAspectRatio’ on the ‘image’ element starts with 'defer', the ‘preserveAspectRatio’ attribute on the root element in the referenced SVG image is also ignored (see ‘preserveAspectRatio’ for details). Instead, the ‘preserveAspectRatio’ attribute on the referencing ‘image’ element defines how the SVG image content is fitted into the viewport and the ‘clip’ and ‘overflow’ properties on the ‘image’ element define how the SVG image content is clipped (or not) relative to the viewport.

preserveAspectRatio 属性の評価時に利用される viewBox 属性の値は、参照先の内容で定義される。明白な viewBox を持つ内容（例えば viewBox 属性が最も外側の svg 要素に指定されている SVG ファイル）ならば、その値が利用されるべきである。ほとんどのラスター画像（ PNG, JPEG ）では、画像の大きさが利用されるべきである（すなわち， image 要素は暗黙の 'viewBox' の値： '0, 0, ラスター画像の幅, ラスター画像の高さ' を持つ）。値が指定されていない場合（例えば最も外側の svg 要素に viewBox 属性が指定されていない SVG ファイル）、 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 (e.g. an SVG file with the ‘viewBox’ attribute on the outermost svg element) that value should be used. For most raster content (PNG, 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 (e.g. an SVG file with no ‘viewBox’ attribute on the outermost svg element) the ‘preserveAspectRatio’ attribute is ignored, and only the translation due to the ‘x’ & ‘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 image's coordinates to 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 fitted 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’).

image 要素から参照されるリソースは、別個の，構文解析木と（リソースが XML ならば）文書オブジェクトモデルを持つ文書を表現する。したがって，プロパティは、その画像へは継承されない。 The resource referenced by the ‘image’ element represents a separate document which generates its own parse tree and document object model (if the resource is XML). Thus, there is no inheritance of properties into the image.

use 要素とは異なり， image 要素は SVG ファイル内の要素を参照することはできない。 Unlike ‘use’, the ‘image’ element cannot reference elements within an SVG file.

属性定義

x = "<coordinate>"

参照先の文書が配置される矩形の第一頂点の X 座標。 The x-axis coordinate of one corner of the rectangular region into which the referenced document is placed.

この属性が指定されていない場合の効果は、値 0 が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of '0' were specified.

y = "<coordinate>"

参照先の文書が配置される矩形の第一頂点の Y 座標。 The y-axis coordinate of one corner of the rectangular region into which the referenced document is placed.

この属性が指定されていない場合の効果は、値 0 が指定されたときと同じになる。 If the attribute is not specified, the effect is as if a value of '0' were specified.

width = "<length>"

参照先の文書が配置される矩形の幅。 The width of the rectangular region into which the referenced document is placed.

height = "<length>"

参照先の文書が配置される矩形の高さ。 The height of the rectangular region into which the referenced document is placed.

xlink:href = "<iri>"

IRI 参照。 A IRI reference.