SVG においては SVG 内容のどこにでも外部名前空間による要素を含められる。一般に、 SVG-UA は未知の要素については DOM には含めるが、それ以外の点では無視することになる（注意すべき例外は下の 外部の型のオブジェクトの埋め込み で述べられる）。 SVG allows inclusion of elements from foreign namespaces anywhere with the SVG content. In general, the SVG user agent will include the unknown elements in the DOM but will otherwise ignore unknown elements. (The otable exception is described under the Embedding foreign object types section, below.)
SVG 名前空間の拡張要素は利用されてはならない。 Extension elements in the SVG namespace must not be used.
加えて、 SVG では任意の SVG 要素 に外部名前空間からの属性を含められる。 SVG-UA は未知の属性を DOM には含めるが、それ以外の点では無視することになる。 SVG 名前空間の要素上で接頭辞の無い属性を拡張に用いてはならない。 Additionally, SVG allows inclusion of attributes from foreign namespaces on any SVG element. The SVG user agent will include unknown attributes in the DOM but will otherwise ignore unknown attributes. Unprefixed attributes on elements in the SVG namespace must not be used for extensions.
外部の名前空間を含められる SVG の能力には次の目的がある： SVG's ability to include foreign namespaces can be used for the following purposes:
例えばビジネスグラフィックス文書作成アプリケーションは、 SVG 文書内に何らかのプライベートデータを含ませ、読込み時に図表（この例の場合は円グラフ）が正しく組み上がるようになることを望むかもしれない： To illustrate, a business graphics authoring application might want to include some private data within an SVG document so that it could properly reassemble the chart (a pie chart in this case) upon reading it back in:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
width="4in" height="3in">
<defs>
<myapp:piechart xmlns:myapp="http://example.org/myapp"
title="Sales by Region">
<myapp:pieslice label="Northern Region" value="1.23"/>
<myapp:pieslice label="Eastern Region" value="2.53"/>
<myapp:pieslice label="Southern Region" value="3.89"/>
<myapp:pieslice label="Western Region" value="2.04"/>
<!-- Other private data goes here -->
</myapp:piechart>
</defs>
<!-- この図表には外部名前空間のプライベートデータが含まれる -->
<desc> This chart includes private data in another namespace </desc>
<!-- ここに円グラフを描く実際の SVG グラフィックス要素が入る -->
<!-- In here would be the actual SVG graphics elements which
draw the pie chart -->
</svg>
SVG の目標の一つは、他の XML 言語プロセッサが SVG 内容木の与えられた場所において現在有効な種々の変換と合成パラメタに従い、その SVG 描画の区域に出力できるような仕組を提供する所にある。一つの特殊な例として、 CSS または XSL によりスタイル付けされた XML 内容に対し、 SVG 内容のどこかに（ SVG による変換と合成に従って）動的にテキストを流し込めるようなフレームを提供することが挙げられる。別の例としては MathML [MATHML] による数式を SVG の絵図に挿入することが挙げられる。 One goal for SVG is to provide a mechanism by which other XML language processors can render into an area within an SVG drawing, with those renderings subject to the various transformations and compositing parameters that are currently active at a given point within the SVG content tree. One particular example of this is to provide a frame for XML content styled with CSS or XSL so that dynamically reflowing text (subject to SVG transformations and compositing) could be inserted into the middle of some SVG content. Another example is inserting a MathML expression into an SVG drawing [MATHML].
foreignObject 要素は UA がこの仕様で定義される機能を超えたグラフィックス描画機能も提供できるようにする拡張性を与える。 The 'foreignObject' element is an extensibility point which allows user agents to offer graphical rendering features beyond those which are defined within this specification.
foreignObject 要素は、別の UA により描画されるような外部の名前空間に属するグラフィック内容を含められる。この外部のグラフィック内容は SVG の変換と合成の対象になる。 The 'foreignObject' element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.
UA は foreignObject 内のすべての内容を外部内容として扱わなければならず、描画する際は適切な内容ハンドラに渡すことになる。 UA には foreignObject を通したどの特定の内容型に対するサポートも要求されない。特に、UA には foreignObject により埋め込まれるかあるいは参照される SVG 内容のサポートは要求されない。 foreignObject 内の SVG 内容は他の型の内容と同じく拡張を表現する。 The user agent must treat all of the content within a 'foreignObject' as foreign content which is to be handed off to an appropriate content handler for rendering. User agents are not required to support any particular content types via 'foreignObject'. In particular, user agents are not required to support SVG content embedded within or referenced by 'foreignObject'; SVG content within 'foreignObject' represents an extension just as with any other type of content.
通常、 foreignObject の利用にあたっては、 UA からのサポートの有無を確認してサポートが得られない場合の代替描画を提供するための switch 要素と requiredExtensions 属性の利用も伴うことになる。 Usually, a 'foreignObject' will be used in conjunction with the 'switch' element and the 'requiredExtensions' attribute to provide proper checking for user agent support and provide an alternate rendering in case user agent support is not available.
適合 SVG-UA には foreignObject 自身の中の特定の外部名前空間内容のサポートや、特定の埋め込み外部オブジェクト型を他の UA に扱わせることは要求されていない。現時点では要求されていないが、最終的には、ウェブブラウザには SVG が CSS や XSL を利用する他の XML 言語の内容を埋めこみ、 CSS や XSL により整形された結果が SVG による変換と合成の対象になる機能をサポートすることが将来的に見込まれている。 CDF Working Group がそのような機能を提供するものと予期されている。 A conformant SVG user agent is not required to support any particular foreign namespace content within 'foreignObject' itself nor is it required to invoke other user agents to handle particular embedded foreign object types. Ultimately, it is expected that Web browsers will support the ability for SVG to embed content from other XML grammars which use CSS or XSL to format their content, with the resulting CSS- or XSL-formatted content then subject to SVG transformations and compositing. At this time, such a capability is not a requirement. The CDF Working Group is expected to provide this functionality.
foreignObject の描画内容に対しては、 SVG による合成と変換の観点からは単独の要素に置換されたかのようにアトミックに扱われなければならない。 The rendered content of a foreignObject must be treated as atomic from the point of view of SVG compositing and transformation, as if it was a single replaced element.
foreignObject 要素に外部内容を含めるには２通りの方法がある。１つは xlink:href 属性を用いて外部内容を参照する方法、もう１つは foreignObject 要素に子として内容を含ませる方法である。 xlink:href 属性が指定されている場合、 foreignObject 要素の子内容は無視されなければならない。 The 'foreignObject' element has two ways of including foreign content. One is to reference external content by using the 'xlink:href' attribute, the other is to include child content of the 'foreignObject' element. When the 'xlink:href' attribute is specified the child content of the 'foreignObject' element must not be displayed.
foreignObject 要素に配送されるすべての マウスイベント は、埋め込み内容から浮上するマウスイベントも含め、 clientX/clientY 属性が初期の ビューポート座標系 の値を表すように調整されなければならない。 All mouse events that are dispatched to a 'foreignObject' element, including mouse events that bubble from the embedded content, must have their clientX/clientY attributes adjusted so that they represent values within the initial viewport coordinate system.
<define name='foreignObject'>
<element name='foreignObject'>
<ref name='foreignObject.AT'/>
<ref name='foreignObject.CM'/>
</element>
</define>
<define name='foreignObject.AT' combine='interleave'>
<ref name='svg.Core.attr'/>
<ref name='svg.Conditional.attr'/>
<ref name='svg.XLinkEmbed.attr'/>
<ref name='svg.Focus.attr'/>
<ref name='svg.External.attr'/>
<ref name='svg.Properties.attr'/>
<ref name='svg.FocusHighlight.attr'/>
<ref name='svg.Transform.attr'/>
<ref name='svg.XYWH.attr'/>
</define>
<define name='foreignObject.CM'>
<zeroOrMore>
<choice>
<ref name='svg.Desc.group'/>
<ref name='svg'/>
</choice>
</zeroOrMore>
</define>
属性定義：
foreignObject の内容に結びつけられたグラフィックが描画されることになる矩形領域の第一頂点のＸ座標。 The x-axis coordinate of one corner of the rectangular region into which the graphics associated with the contents of the 'foreignObject' will be rendered.
省略値 は '0' 。 The lacuna value is '0'.
アニメーション：可
参照先の文書が配置される矩形領域の第一頂点のＹ座標。 The y-axis coordinate of one corner of the rectangular region into which the referenced document is placed.
省略値 は '0' 。 The lacuna value is '0'.
アニメーション：可
参照先の文書が配置される矩形領域の幅。 The width of the rectangular region into which the referenced document is placed.
負値は サポート外 。値を 0 にすると要素の視覚的描画出力は行われなくなる。 省略値 は '0' 。 A negative value is unsupported. A value of zero disables visual rendering of the element. The lacuna value is '0'.
アニメーション：可
参照先の文書が配置される矩形領域の高さ。 The height of the rectangular region into which the referenced document is placed.
負値は サポート外 。値を 0 にすると要素の視覚的描画出力は行われなくなる。 省略値 は '0' 。 A negative value is unsupported. A value of zero disables visual rendering of the element. The lacuna value is '0'.
アニメーション：可
IRI 参照 。この属性が存在する場合、外部内容はこのリソースから読み込まれなければならず、 foreignObject 要素にいかなる子が含まれていても表示されてはならない。この属性が存在しない場合、 foreignObject の子内容は UA がそれを扱えるならば表示されなければならない。 An IRI reference. If this attribute is present, then the foreign content must be loaded from this resource and what child content the 'foreignObject' element may have must not be displayed. If this attribute is not present then the 'foreignObject' child content must be displayed if the user agent is capable of handling it.
アニメーション：可
説明は 属性定義 を見よ。 See attribute definition for description.
アニメーション：可
定義 を見よ。 See definition.
switch と foreignObject 要素を用いた例をいくつか挙げる。 Here are several examples using a switch and the 'foreignObject' element.
これは任意の XML 言語の例で、各段階で何が起きているかを説明するコメントを含めている： This is an example of an arbitrary XML language, with comments to explain what happens at each step:
<svg xmlns="http://www.w3.org/2000/svg"
width="4in" height="3in">
<!-- この例では 'switch' 要素を利用して weirdML がサポートされていない
場合のテキストによる予備のグラフィック表示を提供する。 -->
<desc>
This example uses the 'switch' element to provide a fallback
graphical representation of the text, if weirdML is not supported.
</desc>
<!-- 'switch' 要素はテスト属性が真に評価される最初の子要素を処理する。 -->
<!-- The 'switch' element will process the first child element
whose testing attributes evaluate to true. -->
<switch>
<!-- requiredExtensions 属性の評価が真ならば（すなわち、
UA が SVG に埋め込まれた weirdML をサポートするなら）、
埋め込まれた weirdML の処理をする -->
<!-- Process the embedded weirdML if the requiredExtensions
attribute evaluates to true (i.e., the user agent supports
weirdML embedded within SVG). -->
<foreignObject x="50" y="20" width="100" height="50"
requiredExtensions="http://example.com/weirdMLplusSVG">
<!-- weirdML の内容がここに入る -->
<!-- weirdML content goes here -->
<FreakyText xmlns="http://example.com/weirdML">
<sparklies q="42"/>
<throbber seed="1234"/>
<swirl twist="yeah, baby"/>
<!-- これはキラキラドキドキグルグルテキスト -->
<txt> This is throbbing, swirly text with sparkly bits </txt>
</FreakyText>
</foreignObject>
<!-- そうでなければ、次の代替 SVG を処理する。
'textArea' 要素にテスト属性が与えられていないことに注意。
この場合、テスト属性の評価は真だったものとして処理される。 -->
<!-- Else, process the following alternate SVG.
Note that there are no testing attributes on the 'textArea'
element. If no testing attributes are provided, it is as
if there were testing attributes and they evaluated to true. -->
<textArea x="50" y="20" width="100" height="50"
font-size="10" font-family="Verdana">
<!-- これは textArea 内の平文の保守的な SVGT 1.2 テキスト。
テキストは要素の寸法に収まるように行が折り返される。 -->
This is plain, conservative SVGT 1.2 text in a
textArea. The text wraps within the confines
of the element's dimensions.
</textArea>
</switch>
</svg>
SVG に MathML を取り込んだ例： This is an example of MathML in SVG:
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" viewBox="0 0 600 500">
<!-- ２次方程式 -->
<title>Quadratic Equation</title>
<!-- ２次方程式を表現するために 'foreignObject' を用いた
SVG 内の MathML の例。
代替内容として SVG によるグラフィック表現も伴う。 -->
<desc>
A sample of MathML in SVG, using the 'foreignObject' element
to represent a quadratic equation, with a graphical SVG
representation for fallback.
</desc>
<switch>
<foreignObject x="20" y="20" width="600" height="500"
requiredExtensions="http://www.w3.org/1998/Math/MathML">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<mi>f</mi>
<mfenced>
<mi>x</mi>
</mfenced>
</mrow>
<mo>=</mo>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mi>x</mi>
</mrow>
<mo>-</mo>
<mrow>
<mn>3</mn>
</mrow>
</mrow>
</mrow>
</math>
</foreignObject>
<g fill="gray" transform="translate(300,250)">
<rect x="-300" y="-250" width="600" height="500" fill="white" stroke="gray" />
<g id="axes" font-family="monospace" text-anchor="middle">
<line id="x-axis" x1="-300" y1="0" x2="300" y2="0" stroke="gray"/>
<line id="x-axis-markers" x1="-300" y1="0" x2="300" y2="0"
stroke="gray" stroke-width="7" stroke-dasharray="1,99"/>
<line id="y-axis" x1="0" y1="-250" x2="0" y2="250" stroke="gray"/>
<line id="y-axis-markers" x1="0" y1="-200" x2="0" y2="250"
stroke="gray" stroke-width="7" stroke-dasharray="1,99"/>
<text x="-200" y="20" font-size="10">-4</text>
<text x="-100" y="20" font-size="10">-2</text>
<text x="100" y="20" font-size="10">2</text>
<text x="200" y="20" font-size="10">4</text>
<text x="15" y="-198" font-size="10">4</text>
<text x="15" y="-98" font-size="10">2</text>
<text x="15" y="102" font-size="10">-2</text>
<text x="15" y="202" font-size="10">-4</text>
</g>
<path id="graph" stroke-width="1" stroke="blue" fill="none"
d="M-200,-250 Q-50,650 100,-250"/>
<circle id="vertex" cx="-50" cy="200" r="2" fill="blue" />
<circle id="y-intercept-1" cx="0" cy="150" r="2" fill="red" />
<circle id="x-intercept-1" cx="-150" cy="0" r="2" fill="red" />
<circle id="x-intercept-2" cx="50" cy="0" r="2" fill="red" />
</g>
</switch>
</svg>
SVG に XHTML を取り込んだ例： This is an example of XHTML in SVG:
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" viewBox="0 0 300 140">
<!-- 中国語 — 英語 Unicode 対語表 -->
<title>Chinese-English Unicode Table</title>
<!-- 中国語と英語の対応表を持つ XHTML 'table' を含ませるために
'foreignObject' を用いた SVG 内の XHTML サンプル。
代替内容としてそのためだけの SVG 表現も伴う。 -->
<desc>
A sample of XHTML in SVG, using the 'foreignObject' element
to include an XHTML 'table' with some Chinese-to-English
correspondances, with an ad-hoc SVG representation for
fallback.
</desc>
<switch>
<foreignObject width="300" height="140"
requiredExtensions="http://www.w3.org/1999/xhtml">
<table xmlns="http://www.w3.org/1999/xhtml">
<caption>Using Chinese Characters in SVG</caption>
<tr>
<th>English</th>
<th>Chinese</th>
</tr>
<tr y="75">
<td>moon</td>
<td>月</td>
<td>6708</td>
</tr>
<tr y="100">
<td>tree</td>
<td>木</td>
<td>6728</td>
</tr>
<tr y="125">
<td>water</td>
<td>水</td>
<td>6c34</td>
</tr>
</table>
</foreignObject>
<text font-size="18" fill="crimson" text-anchor="middle">
<tspan x="150" y="25" font-weight="bold">Using Chinese Characters in SVG</tspan>
<tspan y="50">
<tspan x="50">English</tspan>
<tspan x="150">Chinese</tspan>
<tspan x="250">Unicode</tspan>
</tspan>
<tspan y="75">
<tspan x="50">moon</tspan>
<tspan x="150">月</tspan>
<tspan x="250">6708</tspan>
</tspan>
<tspan y="100">
<tspan x="50">tree</tspan>
<tspan x="150">木</tspan>
<tspan x="250">6728</tspan>
</tspan>
<tspan y="125">
<tspan x="50">water</tspan>
<tspan x="150">水</tspan>
<tspan x="250">6c34</tspan>
</tspan>
</text>
</switch>
</svg>