Embedded Content

SVG 2 Requirement:	- Allow HTML5 elements in SVG: audio, canvas, iframe and video.
Resolution:	- Allow audio, canvas, iframe and video elements from HTML5, don't introduce almost the same but slightly different SVG NS elements.
Purpose:	To allow various HTML embedded content elements to be used directly in SVG and support dynamic loading of content.
Owner:	Nobody

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's embedded content.

SVG supports embedded content with the use of ‘image’ and ‘foreignObject’ elements.

11.2. Placement of the referenced resource

Name	Value	Initial value	Animatable
x, y	<length>	0	yes
width, height	<length> \| auto	0	yes

11.3. The ‘image’ element

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.

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 the SVG images, 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.

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.

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

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.

SVG 2 Requirement:	Support auto-sized images.
Resolution:	We will allow auto-sized images in SVG 2.
Purpose:	To allow raster images to use their own size without the need to set width and height.
Owner:	Cameron (ACTION-3340)

SVG 2 Requirement:	Support selecting part of an ‘image’ for display.
Resolution:	We will have a method for ‘image’ to select a part of an image to display, maybe by allowing ‘viewBox’ on it.
Purpose:	To allow selection of part of an image without requiring the author to manually slice the image.
Owner:	Nobody

SVG 2 Requirement:	Support the ‘object-fit’ and ‘object-position’ properties from css3-images.
Resolution:	SVG 2 will depend on CSS3 Image Values and CSS4 Image Values.
Purpose:	To align with the CSS way of specifying image fitting that ‘preserveAspectRatio’ provides.
Owner:	Cameron or Erik (no action)

Name	Value	Initial value	Animatable
crossorigin	[ anonymous \| use-credentials ]	anonymous	yes

Name	Value	Initial value	Animatable
href	URL [URL]	(none)	yes

Name	Value	Initial value	Animatable
preserveAspectRatio	defer? <align> [ meet \| slice ]?	xMidYMid meet	yes

11.4. HTML5 elements in SVG subtrees

The following HTML5 elements render when included in an SVG subtree as a child of a container element and when using the HTML namespace:

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.

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.

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.

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:

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.

11.7. The ‘foreignObject’ element

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.

11.8. DOM interfaces

11.8.1. Interface SVGImageElement

An SVGImageElement object represents an ‘image’ element in the DOM.

interface SVGImageElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;
  [SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
  attribute DOMString crossOrigin;
};

SVGImageElement implements SVGURIReference;

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 preserveAspectRatio IDL attribute reflects the ‘preserveAspectRatio’ content attribute.

The crossOrigin IDL attribute reflects the ‘crossorigin’ content attribute, limited to only known values.

11.8.2. Interface SVGForeignObjectElement

An SVGForeignObjectElement object represents a ‘foreignObject’ in the DOM.

interface SVGForeignObjectElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;
};

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.

Chapter 11: Embedded Content

Contents

11.1. Overview