To allow various HTML embedded content elements to be used directly in SVG and support dynamic loading of content.
Owner:
Nobody
11.1. Overview
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 HTML5'sembedded content.
SVG supports embedded content with the use of ‘image’ and ‘foreignObject’ elements.
The ‘x’ and ‘y’, ‘width’ and ‘height’ attributes specify the rectangular region into which the referenced resource is placed.
A negative value for ‘width’ and ‘height’ is invalid (see Error processing). A value of zero for either attribute disables rendering of the element.
The 'auto' value for ‘width’ and ‘height’ 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 'auto' is specified for just one of ‘width’ or ‘height’, then the other is determined based on the intrinsic aspect ratio. The automatically determined ‘width’ and ‘height’ values are interpreted as user units, and are reflected in the x and y IDL attributes as SVG_LENGTHTYPE_NUMBER values.
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.
SVG files must be processed in secure animated mode
if the current document supports animation,
or in secure static mode if the current document is static.
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.
For ‘image’ elements referencing a file with MIME type of "image/svg+xml",
the ‘preserveAspectRatio’ attribute on the root
element in the referenced SVG image is ignored (see ‘preserveAspectRatio’
for details). Instead, the ‘preserveAspectRatio’ attribute on
the referencing ‘image’
element defines how the SVG image content is fit into the
viewport.
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.
To link into particular view of the SVG document, authors can use media fragments as defined in Linking into SVG content.
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 fit 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’).
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.
Unlike ‘use’, the ‘image’ element cannot reference
elements within an SVG file.
Since image references always refer to a complete document,
a target-only URL is treated as a link to the same file,
which is rendered again as an independent embedded image.
Since the embedded image is processed in a secure mode,
its own embedded references are not processed,
preventing infinite recursion.
<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="3cm" viewBox="0 0 50 30"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Recursive SVG</title>
<desc>An SVG with two recursive image reference to itself.
One reference uses the file name as a relative URL,
the other uses a target fragment only.
When viewed in a processing mode that supports external file references,
the embedded images should be rendered;
however, the embedded image must be processed in secure mode,
so the recursion only happens once.
The appearance should be three nested red circles in a bulls-eye pattern;
the innermost circle has solid fill because of target styles.
</desc>
<style type="text/css">
#target:target {
fill: red;
}
</style>
<circle id="target"
stroke="red" stroke-width="5" fill="none"
cx="50%" cy="50%" r="12" />
<image xlink:href="recursive-image.svg"
x="25%" y="25%" width="50%" height="50%" />
<image xlink:href="#target"
x="45%" y="45%" width="10%" height="10%" />
</svg>
HTML elements, in the HTML namespace, used as children of 'video', 'audio', 'iframe' and 'canvas' elements within an SVG document fragment behave as specified in HTML. This applies in particular to fallback content;
if fallback content is rendered,
the embedded element behaves like an SVG ‘foreignObject’ element to contain the HTML content.
This would occur, for example,
for a ‘video’ element if the user agent does not support the specified video formats,
or for a ‘canvas’ element if scripting is disabled.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
<html:video src="http://example.org/dummyvideo" controls="controls">
<html:p>Video format not supported by your browser</html:p>
</html:video>
</svg>
The HTML specification is applicable also for the 'track' and 'source' elements.
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 transform property or by positioning the current SVG viewport.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
<html:video style="transform:translate(10px,10px)" src="http://example.org/dummyvideo" controls="controls">
<html:p>Video format not supported by your browser</html:p>
</html:video>
</svg>
For the purpose of sizing the HTML subtree root element, the HTML 'width' and 'height' attributes and the CSS sizing properties (e.g. width 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 containing block of the HTML subtree.
Note that html specification says that 'width' and 'height' 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 sizing property instead of such html attributes.
The 'width' and 'height' 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.
Other HTML5 elements in an SVG subtree, when used outside of a ‘foreignObject’ element, in any namespace, are treated as unknown elements.
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
11.5. Foreign namespaces and private data
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 Embedding Foreign Object
Types.) Also see the handling of
unknown elements.
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.
SVG's ability to include foreign namespaces can be used for
the following purposes:
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).
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.
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" 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>
11.6. Embedding foreign object types
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].
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, filters, clipping, masking and compositing.
The contents of ‘foreignObject’ are assumed to be
from a different namespace. Any SVG elements within a ‘foreignObject’ will not be drawn,
except in the situation where a properly defined SVG
subdocument with a proper ‘xmlns’
(see Namespaces in XML
[XML-NS])
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).
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.
The x and y attributes define the coordinates of the left and top edges of the 'foreignObject', in the current user coordinate system.
The width and height attributes define width and height of the
'foreignObject' respectively. A negative value for either
attribute is an error (see Error processing).
A value of zero for either attribute disables rendering of the element.
<?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>
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 ‘switch’ element and
must be able to render valid SVG elements when they appear as
one of the alternatives within a ‘switch’
element.
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.
The
x,
y,
width and
height IDL attributes
reflect the computed values of the ‘x’, ‘y’, ‘width’ and
‘height’ properties and their corresponding
presentation attributes, respectively.
The
x,
y,
width and
height IDL attributes
reflect the computed values of the x, y, width and
height properties and their corresponding
presentation attributes, respectively.
