/
embedded.html
591 lines (510 loc) · 29.2 KB
/
embedded.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
<head>
<title>Embedded Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" title="Default" type="text/css" media="screen" href="style/default_no_maturity.css"/>
<link rel="alternate stylesheet" title="All annotations" type="text/css" media="screen" href="style/default_svg.css"/>
<link rel="alternate stylesheet" title="No issues/annotations" type="text/css" media="screen" href="style/default_no_issues.css"/>
<!--
<link rel="alternate stylesheet" title="CSS3 Unmodified" type="text/css" media="screen" href="style/default.css"/>
<link rel="alternate stylesheet" title="SVG 1.1" type="text/css" media="screen" href="style/svg-style.css"/>
-->
<!-- W3C style sheet will be added here during processing. -->
</head>
<body>
<h1>Embedded Content</h1>
<div class="annotation svg2-requirement">
<table>
<tr>
<th>SVG 2 Requirement:</th>
<td>- Allow HTML5 elements in SVG: audio, canvas, iframe and video.
</td>
</tr>
<tr>
<th>Resolution:</th>
<td>- <a href="http://www.w3.org/2015/02/11-svg-minutes.html#item05">Allow audio, canvas, iframe and video elements from HTML5, don't introduce almost the same but slightly different SVG NS elements.</a>
</td>
</tr>
<tr>
<th>Purpose:</th>
<td>To allow various HTML embedded content elements to be used directly in SVG and support dynamic loading of content.</td>
</tr>
<tr>
<th>Owner:</th>
<td>Nobody</td>
</tr>
</table>
</div>
<h2 id="Overview">Overview</h2>
<p>Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.
This is the same definition as <a href="http://www.w3.org/TR/html51/">HTML5's</a> <a href="http://www.w3.org/TR/html51/embedded-content-0.html">embedded content</a>.</p>
<p>SVG supports embedded content with the use of <a>'image'</a> and <a>'foreignObject'</a> elements.</p>
<p>Additionally SVG allows embedded content using HTML5 <a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-video-element">'video'</a>, <a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-audio-element">'audio'</a>, <a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-iframe-element">'iframe'</a> and <a href="http://www.w3.org/TR/html51/scripting-1.html#the-canvas-element">'canvas'</a> elements.</p>
<p>Except <a>'canvas'</a> and <a>'foreignObject'</a>, embedded content supports <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/ResourcePriorities/Overview.html">Resource Priorities</a> for hinting of downloading external resources. </p>
<h2 id="Placement">Placement of the referenced resource</h2>
<p><em>Attribute definitions:</em></p>
<dl class="attrdef-list">
<dt>
<table class="propdef attrdef">
<tr>
<th>Name</th>
<th>Value</th>
<th>Initial value</th>
<th>Animatable</th>
</tr>
<tr>
<td><dfn data-dfn-type="element-attr" data-dfn-for="image" id="PlacementXAttribute">x</dfn>, <dfn data-dfn-type="element-attr" data-dfn-for="image" id="PlacementYAttribute">y</dfn></td>
<td><a><length></a></td>
<td>0</td>
<td>yes</td>
</tr>
<tr>
<td><dfn data-dfn-type="element-attr" data-dfn-for="image" id="PlacementWidthAttribute">width</dfn>, <dfn data-dfn-type="element-attr" data-dfn-for="image" id="PlacementHeightAttribute">height</dfn></td>
<td><a><length></a> | auto</td>
<td>0</td>
<td>yes</td>
</tr>
</table>
</dt>
<dd>
<p>The <edit:attributecategory name='embedding placement'/>, <edit:attributecategory name='embedding size'/> attributes specify the rectangular region into which the referenced resource is placed.</p>
<p>A negative value for <edit:attributecategory name='embedding size'/> is invalid (see Error processing). A value of zero for either attribute disables rendering of the element. </p>
<p class="ready-for-wider-review">The <span class="attr-value">'auto'</span> value for <edit:attributecategory name='embedding size'/> is used to size the corresponding element automatically based on the intrinsic size or aspect ratio of the referenced resource. If the intrinsic aspect ratio of the referenced resource is unknown, it is assumed to be 2:1. If the intrinsic size of the referenced resource is unknown, it is assumed to be 300x150, just as is required for CSS replaced elements. If <span class="attr-value">'auto'</span> is specified for just one of <a>'image/width'</a> or <a>'image/height'</a>, then the other is determined based on the intrinsic aspect ratio. The automatically determined <edit:attributecategory name='embedding size'/> values are interpreted as user units, and are reflected in the x and y IDL attributes as <a href="types.html#__svg__SVGLength__SVG_LENGTHTYPE_NUMBER">SVG_LENGTHTYPE_NUMBER</a> values.</p>
</dd>
</dl>
<h2 id="ImageElement">The <span class='element-name'>'image'</span> element</h2>
<edit:with element='image'>
<edit:elementsummary name='image'/>
<p>The <a>'image'</a> element
indicates that the contents of a complete file are to be
rendered into a given rectangle within the current user
coordinate system. The <a>'image'</a> element can refer to raster
image files such as PNG or JPEG or to files with MIME type of
"image/svg+xml". <a
href="conform.html#ConformingSVGViewers">Conforming SVG
viewers</a> need to support at least PNG, JPEG and SVG format
files.</p>
<p>The result of processing an <a>'image'</a> is always a four-channel
RGBA result. When an <a>'image'</a>
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.</p>
<p>For the SVG images, unless the value of
<a>'preserveAspectRatio'</a> on the <a>'image'</a> element starts with 'defer',
the <a>'preserveAspectRatio'</a> attribute on the root element in
the referenced SVG image is also ignored (see <a>'preserveAspectRatio'</a>
for details). Instead, the <a>'preserveAspectRatio'</a> attribute on
the referencing <a>'image'</a>
element defines how the SVG image content is fitted into the
viewport.</p>
<p>The value of the <a>'viewBox'</a> attribute to use when
evaluating the <a>'preserveAspectRatio'</a> attribute is
defined by the referenced content. For content that clearly
identifies a viewBox (e.g. an SVG file with the <a>'viewBox'</a> attribute on the
<a>outermost svg element</a>) that value should be used. For most
raster content (PNG, JPEG) the bounds of the image should be
used (i.e. the <a>'image'</a>
element has an implicit <a>'viewBox'</a> of <span class='attr-value'>'0 0 raster-image-width
raster-image-height'</span>). Where no value is readily available
(e.g. an SVG file with no <a>'viewBox'</a> attribute on the
<a>outermost svg element</a>) the <a>'preserveAspectRatio'</a> attribute is
ignored, and only the translation due to the <a>'x'</a> & <a>'y'</a> attributes of the viewport is
used to display the content.</p>
To link into particular view of the SVG document, authors can use media fragments as defined in <a href="linking.html#LinksIntoSVG">Linking into SVG content</a>.
<p>For example, if the image element referenced a PNG or JPEG
and <span class="attr-value">preserveAspectRatio="xMinYMin
meet"</span>, 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 <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a> on the <a>'image'</a> element. If the value
of <a>'preserveAspectRatio'</a> was <span class='attr-value'>'none'</span>
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 (<a>'x'</a>, <a>'y'</a>) and the bottom/right corner of
the raster exactly aligns with coordinate (<a>'x'</a>+<a>'width'</a>, <a>'y'</a>+<a>'height'</a>).</p>
<p>The resource referenced by the <a>'image'</a> 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.</p>
<p>Unlike <a>'use'</a>, the <a>'image'</a> element cannot reference
elements within an SVG file.</p>
<div class="annotation svg2-requirement">
<table>
<tr>
<th>SVG 2 Requirement:</th>
<td>Support auto-sized images.</td>
</tr>
<tr>
<th>Resolution:</th>
<td><a href="http://www.w3.org/2011/10/27-svg-irc#T18-52-24">We will allow auto-sized images in SVG 2.</a></td>
</tr>
<tr>
<th>Purpose:</th>
<td>To allow raster images to use their own size without the need to set width and height.</td>
</tr>
<tr>
<th>Owner:</th>
<td>Cameron (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3340">ACTION-3340</a>)</td>
</tr>
</table>
</div>
<div class="annotation svg2-requirement">
<table>
<tr>
<th>SVG 2 Requirement:</th>
<td>Support selecting part of an <a>'image'</a> for display.</td>
</tr>
<tr>
<th>Resolution:</th>
<td><a href="http://www.w3.org/2011/10/27-svg-irc#T18-45-13">We will have a method for <span class='element-name'>'image'</span> to select a part of an image to display, maybe by allowing <span class='attr-name'>'viewBox'</span> on it.</a></td>
</tr>
<tr>
<th>Purpose:</th>
<td>To allow selection of part of an image without requiring the author to manually slice the image.</td>
</tr>
<tr>
<th>Owner:</th>
<td>Nobody</td>
</tr>
</table>
</div>
<div class="annotation svg2-requirement">
<table>
<tr>
<th>SVG 2 Requirement:</th>
<td>Support the <span class='property'>'object-fit'</span> and <span class='property'>'object-position'</span> properties from css3-images.</td>
</tr>
<tr>
<th>Resolution:</th>
<td><a href="http://www.w3.org/2011/07/29-svg-minutes.html#item08">SVG 2 will depend on CSS3 Image Values and CSS4 Image Values.</a></td>
</tr>
<tr>
<th>Purpose:</th>
<td>To align with the CSS way of specifying image fitting that <a>'preserveAspectRatio'</a> provides.</td>
</tr>
<tr>
<th>Owner:</th>
<td>Cameron or Erik (no action)</td>
</tr>
</table>
</div>
<p><em>Attribute definitions:</em></p>
<dl class="attrdef-list">
<dt>
<table class="propdef attrdef">
<tr>
<th>Name</th>
<th>Value</th>
<th>Initial value</th>
<th>Animatable</th>
</tr>
<tr>
<td><dfn data-dfn-type="element-attr" data-dfn-for="image" id="ImageElementCrossoriginAttribute">crossorigin</dfn></td>
<td>[ anonymous | use-credentials ]?</td>
<td>(see HTML definition of attribute)</td>
<td>yes</td>
</tr>
</table>
</dt>
<dd>
<p>The crossorigin attribute is a <a>CORS settings attribute</a>, and unless otherwise specified follows the same processing rules as in html [<a href="refs.html#ref-HTML">HTML</a>].</p>
</dd>
<dt>
<table class="propdef attrdef">
<tr>
<th>Name</th>
<th>Value</th>
<th>Initial value</th>
<th>Animatable</th>
</tr>
<tr>
<td><dfn data-dfn-type="element-attr" data-dfn-for="image" id="ImageElementHrefAttribute">href</dfn></td>
<td>URL <a href="types.html#attribute-url" class="syntax">[URL]</a></td>
<td>(none)</td>
<td>yes</td>
</tr>
</table>
</dt>
<dd>
<p>An <a href="linking.html#URLReference">URL reference</a>
identifying the image to render.
Refer to the common handling defined for <a
href="linking.html#linkRefAttrs">URL reference attributes</a> and
<a href="linking.html#XLinkRefAttrs">deprecated XLink attributes</a>.</p>
<p>To get the referenced resource, do a <a>potentially CORS-enabled fetch</a> of the absolute URL that resulted from the earlier step, with the <em>mode</em> being the current state of the
element's <a>'crossorigin'</a> attribute, the <em>origin</em> being the <a>origin</a> of the <a>'image'</a> element's <a>Document</a>, and the <em>default origin behaviour</em> set to <em>taint</em>.
For <a>origin</a>, the rules defined for the html <a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-img-element">'img'</a> element apply the same way to the svg <a>'image'</a> element.
</p>
</dd>
<dt>
<table class="propdef attrdef">
<tr>
<th>Name</th>
<th>Value</th>
<th>Initial value</th>
<th>Animatable</th>
</tr>
<tr>
<td><dfn data-dfn-type="element-attr" data-dfn-for="image" id="ImageElementPreserveAspectRatioAttribute">preserveAspectRatio</dfn></td>
<td>defer? <a><align></a> [ meet | slice ]?</td>
<td>xMidYMid meet</td>
<td>yes</td>
</tr>
</table>
</dt>
<dd>
<p>Specifies the fitting behavior when the aspect ratio of the referenced image
does not match the aspect ratio of the rectangle it is placed in.
See the definition of <a>'preserveAspectRatio'</a> for details.</p>
</dd>
</dl>
<div class="example">
<pre>
<?xml version="1.0" standalone="no"?>
<svg width="4in" height="3in"
xmlns="http://www.w3.org/2000/svg">
<desc>This graphic links to an external image
</desc>
<image x="200" y="200" width="100px" height="100px"
href="myimage.png">
<title>My image</title>
</image>
</svg>
</pre>
</div>
</edit:with>
<h2 id="HTMLElements">HTML5 elements in SVG subtrees</h2>
<p>The following HTML5 elements render when included in an SVG subtree as a child of a <a>container element</a> and when using the <a href="http://www.w3.org/TR/html51/infrastructure.html#namespaces">HTML namespace</a>:</p>
<ul>
<li><a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-video-element">'video'</a></li>
<li><a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-audio-element">'audio'</a></li>
<li><a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-iframe-element">'iframe'</a></li>
<li><a href="http://www.w3.org/TR/html51/scripting-1.html#the-canvas-element">'canvas'</a></li>
</ul>
<edit:example href='images/embedded/videoinsvg.svg' name='videoinsvg' link='no' image='no'/>
<p>HTML elements, in the HTML namespace, used as children of <a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-video-element">'video'</a>, <a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-audio-element">'audio'</a>, <a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-iframe-element">'iframe'</a> and <a href="http://www.w3.org/TR/html51/scripting-1.html#the-canvas-element">'canvas'</a> elements within an SVG document fragment behave as specified in HTML. This applies in particular to <a href="http://www.w3.org/TR/html51/dom.html#fallback-content">fallback content</a>.</p>
<edit:example href='images/embedded/videofallback.svg' name='videofallback' link='no' image='no'/>
<p>This is applicable also for the <a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-track-element">'track'</a> and <a href="http://www.w3.org/TR/html51/embedded-content-0.html#the-source-element">'source'</a> elements.</p>
<edit:example href='images/embedded/sourceinsvg.svg' name='sourceinsvg' link='no' image='no'/>
<p>The HTML subtree, defined by the root HTML element and its children, contributes to <a href="coords.html#ContainerElementBoudingBoxComputation">SVG container bounding box computations</a>.</p>
<p>CSS positioning properties (e.g. 'top') are not allowed for positioning the HTML subtree root element in the SVG coordinate system. The HTML element can be positioned in the SVG coordinate system using the <a>'transform'</a> property or by positioning the current SVG viewport.</p>
<edit:example href='images/embedded/videotransform.svg' name='videotransform' link='no' image='no'/>
<p>For the purpose of sizing the HTML subtree root element, the HTML <a href="http://www.w3.org/TR/html51/embedded-content-0.html#attr-dim-width">'width'</a> and <a href="http://www.w3.org/TR/html51/embedded-content-0.html#attr-dim-width">'height'</a> attributes and the CSS sizing properties (e.g. <a>'width'</a> or 'min-width') are used. For the purpose of resolving percentage values in the element sizing or in the layout and positioning of children elements in the HTML subtree, the current SVG viewport is defined to be the <a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">containing block</a> of the HTML subtree.</p>
<p class="note">
Note that html specification says that <a class="html" href=" http://www.w3.org/TR/html51/embedded-content-0.html#attr-dim-width"><code>'width'</code></a> and <a class="html" href="http://www.w3.org/TR/html51/embedded-content-0.html#attr-dim-height"><code>'height'</code></a> attributes of embedded content of html accepts integer. Accordingly, if you want to point to a floating point number for those sizing, you should use css <a href="geometry.html#Sizing">sizing property</a> instead of such html attributes.
</p>
<edit:example href='images/embedded/videosizing.svg' name='videosizing' link='no' image='no'/>
<edit:example href='images/embedded/videofallbacksizing.svg' name='videofallbacksizing' link='no' image='no'/>
<p>As SVG elements are implicitly <a href="http://www.w3.org/TR/CSS21/visuren.html#position-props">positioned</a>, the root of the HTML subtree has <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#display-prop">block display</a>.</p>
<p class="note">The <a href="http://www.w3.org/TR/html51/embedded-content-0.html#attr-dim-width">'width'</a> and <a href="http://www.w3.org/TR/html51/embedded-content-0.html#attr-dim-width">'height'</a> attributes of the HTML elements are defined by the HTML specification and are not SVG geometry properties. In particular, they do accept units. The 'width' and 'height' properties do.</p>
<p>Other HTML5 elements in an SVG subtree, when used outside of a <a>'foreignObject'</a> element, in any namespace, are treated as <a href="struct.html#UnknownElement">unknown elements</a>.</p>
<p class="note">The HTML5 elements in the HTML namespace in an SVG subtree, itself nested in an HTML5 document, are not parsed by the HTML parser as HTML elements. In such case, the nested HTML elements should be created and inserted in the DOM using DOM APIs</p>
<h2 id="ForeignNamespaces">Foreign namespaces and private data</h2>
<p>SVG allows inclusion of elements from foreign namespaces
anywhere within the SVG content. In general, the SVG user agent
will include the unknown elements in the DOM but will otherwise
ignore unknown elements. (The notable exception is described
under <a href="#ForeignObjectElement">Embedding Foreign Object
Types</a>.) Also see the handling of
<a href="struct.html#UnknownElement">unknown elements</a>.
</p>
<p>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.</p>
<p>SVG's ability to include foreign namespaces can be used for
the following purposes:</p>
<ul>
<li>Application-specific information so that authoring
applications can include model-level data in the SVG content
to serve their "roundtripping" purposes (i.e., the ability to
write, then read a file without loss of higher-level
information).</li>
<li>Supplemental data for extensibility. For example, suppose
you have an extrusion extension which takes any 2D graphics
and extrudes it in three dimensions. When applying the
extrusion extension, you probably will need to set some
parameters. The parameters can be included in the SVG content
by inserting elements from an extrusion extension
namespace.</li>
</ul>
<p>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:</p>
<div class="example">
<pre><![CDATA[
<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
xmlns = 'http://www.w3.org/2000/svg'>
<defs>
<myapp:piechart xmlns:myapp="http://example.org/myapp"
title="Sales by Region">
<myapp:pieslice label="Northern Region" value="1.23"/>
<myapp:pieslice label="Eastern Region" value="2.53"/>
<myapp:pieslice label="Southern Region" value="3.89"/>
<myapp:pieslice label="Western Region" value="2.04"/>
<!-- Other private data goes here -->
</myapp:piechart>
</defs>
<desc>This chart includes private data in another namespace
</desc>
<!-- In here would be the actual SVG graphics elements which
draw the pie chart -->
</svg>
]]></pre>
</div>
<h2 id="EmbeddingForeignObjects">Embedding foreign object types</h2>
<p>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 <a
href="http://www.w3.org/TR/2003/REC-MathML2-20031021/">MathML</a> expression into
an SVG drawing [<a href='refs.html#ref-MATHML'>MATHML</a>].</p>
<p>The <a>'foreignObject'</a>
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, filters, clipping, masking and compositing.</p>
<p>The contents of <a>'foreignObject'</a> are assumed to be
from a different namespace. Any SVG elements within a <a>'foreignObject'</a> will not be drawn,
except in the situation where a properly defined SVG
subdocument with a proper <span class="attr-name">'xmlns'</span>
(see <a href="http://www.w3.org/TR/2006/REC-xml-names-20060816/"><cite>Namespaces in XML</cite></a>
[<a href="refs.html#ref-XML-NS">XML-NS</a>])
attribute specification is embedded recursively. One situation
where this can occur is when an SVG document fragment is
embedded within another non-SVG document fragment, which in
turn is embedded within an SVG document fragment (e.g., an SVG
document fragment contains an XHTML document fragment which in
turn contains yet another SVG document fragment).</p>
<p>Usually, a <a>'foreignObject'</a>
will be used in conjunction with the <a>'switch'</a> element and
the <a>'requiredExtensions'</a> attribute to
provide proper checking for user agent support and provide an
alternate rendering in case user agent support is not
available.</p>
<h2 id="ForeignObjectElement">The <span class="element-name">'foreignObject'</span> element</h2>
<edit:with element='foreignObject'>
<edit:elementsummary name='foreignObject'/>
<p>
The <a>'x'</a> and <a>'y'</a> attributes define the coordinates of the left and top edges of the 'foreignObject', in the current user coordinate system.
</p>
<p>
The <a>'width'</a> and <a>'height'</a> attributes define width and height of the
'foreignObject' respectively. A negative value for either
attribute is an error (see <a href="implnote.html#ErrorProcessing">Error processing</a>).
A value of zero for either attribute disables rendering of the element.
</p>
</edit:with>
<div class="example">
<pre><![CDATA[
<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
xmlns = 'http://www.w3.org/2000/svg'>
<desc>This example uses the 'switch' element to provide a
fallback graphical representation of an paragraph, if
XMHTML is not supported.</desc>
<!-- The 'switch' element will process the first child element
whose testing attributes evaluate to true.-->
<switch>
<!-- Process the embedded XHTML if the requiredExtensions attribute
evaluates to true (i.e., the user agent supports XHTML
embedded within SVG). -->
<foreignObject width="100" height="50"
requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
<!-- XHTML content goes here -->
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
</foreignObject>
<!-- Else, process the following alternate SVG.
Note that there are no testing attributes on the 'text' element.
If no testing attributes are provided, it is as if there
were testing attributes and they evaluated to true.-->
<text font-size="10" font-family="Verdana">
<tspan x="10" y="10">Here is a paragraph that</tspan>
<tspan x="10" y="20">requires word wrap.</tspan>
</text>
</switch>
</svg>
]]></pre>
</div>
<p>It is not required that SVG user agent support the ability
to invoke other arbitrary user agents to handle embedded
foreign object types; however, all conforming SVG user agents
would need to support the <a>'switch'</a> element and
must be able to render valid SVG elements when they appear as
one of the alternatives within a <a>'switch'</a>
element.</p>
<p>Ultimately, it is expected that commercial 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 subject to SVG
transformations and compositing. At this time, such a
capability is not a requirement.</p>
<div class='ready-for-wider-review'>
<h2 id="DOMInterfaces">DOM interfaces</h2>
<h3 id="InterfaceSVGImageElement">Interface SVGImageElement</h3>
<edit:with element="image">
<p>An <a>SVGImageElement</a> object represents an <a>'image'</a> element in the DOM.</p>
<pre class="idl">interface <b>SVGImageElement</b> : <a>SVGGraphicsElement</a> {
[SameObject] readonly attribute <a>SVGAnimatedLength</a> <a href="embedded.html#__svg__SVGImageElement__x">x</a>;
[SameObject] readonly attribute <a>SVGAnimatedLength</a> <a href="embedded.html#__svg__SVGImageElement__y">y</a>;
[SameObject] readonly attribute <a>SVGAnimatedLength</a> <a href="embedded.html#__svg__SVGImageElement__width">width</a>;
[SameObject] readonly attribute <a>SVGAnimatedLength</a> <a href="embedded.html#__svg__SVGImageElement__height">height</a>;
[SameObject] readonly attribute <a>SVGAnimatedPreserveAspectRatio</a> <a href="embedded.html#__svg__SVGImageElement__preserveAspectRatio">preserveAspectRatio</a>;
attribute DOMString? <a href="embedded.html#__svg__SVGImageElement__crossOrigin">crossOrigin</a>;
};
<a>SVGImageElement</a> implements <a>SVGURIReference</a>;</pre>
<p>The
<b id="__svg__SVGImageElement__x">x</b>,
<b id="__svg__SVGImageElement__y">y</b>,
<b id="__svg__SVGImageElement__width">width</b> and
<b id="__svg__SVGImageElement__height">height</b> IDL attributes
<a>reflect</a> the computed values of the <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and
<a>'height'</a> properties and their corresponding
presentation attributes, respectively.</p>
<p>The <b id="__svg__SVGImageElement__preserveAspectRatio">preserveAspectRatio</b>
IDL attribute <a>reflects</a> the <a>'preserveAspectRatio'</a> content attribute.</p>
<p>The <b id="__svg__SVGImageElement__crossOrigin">crossOrigin</b> IDL attribute
<a>reflects</a> the <a>'crossorigin'</a> content attribute.</p>
</edit:with>
<h3 id="InterfaceSVGForeignObjectElement">Interface SVGForeignObjectElement</h3>
<edit:with element="foreignObject">
<p>An <a>SVGForeignObjectElement</a> object represents a <a>'foreignObject'</a>
in the DOM.</p>
<pre class="idl">interface <b>SVGForeignObjectElement</b> : <a>SVGGraphicsElement</a> {
[SameObject] readonly attribute <a>SVGAnimatedLength</a> <a href="embedded.html#__svg__SVGForeignObjectElement__x">x</a>;
[SameObject] readonly attribute <a>SVGAnimatedLength</a> <a href="embedded.html#__svg__SVGForeignObjectElement__y">y</a>;
[SameObject] readonly attribute <a>SVGAnimatedLength</a> <a href="embedded.html#__svg__SVGForeignObjectElement__width">width</a>;
[SameObject] readonly attribute <a>SVGAnimatedLength</a> <a href="embedded.html#__svg__SVGForeignObjectElement__height">height</a>;
};</pre>
<p>The
<b id="__svg__SVGForeignObjectElement__x">x</b>,
<b id="__svg__SVGForeignObjectElement__y">y</b>,
<b id="__svg__SVGForeignObjectElement__width">width</b> and
<b id="__svg__SVGForeignObjectElement__height">height</b> IDL attributes
<a>reflect</a> the computed values of the <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and
<a>'height'</a> properties and their corresponding
presentation attributes, respectively.</p>
</edit:with>
</div>
</body>
</html>