Embedded Content

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.

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.

Why does it make sense to override 'clip' but not 'clip-path'?

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.

We should say how the use of an #xywh media fragment interacts with the the above.

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.

Attribute definitions:

Name	Value	Lacuna value	Animatable
xlink:href	<url>	(none)	yes

An URL reference identifying the image to render.

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

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 'preserveAspectRatio' for details.

An example:

<?xml version="1.0" standalone="no"?>
<svg width="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>This graphic links to an external image
  </desc>
  <image x="200" y="200" width="100px" height="100px"
         xlink:href="myimage.png">
    <title>My image</title>
  </image>
</svg>

The 'video' element introduces the function that is almost equivalent to 'video' element of html5.0 into svg. But, from the difference of the model of svg and html, it has some differences. This chapter describe them mainly. Therefore, except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the 'video' element of html5.0.

To refer a video resource, 'video' element uses 'src' attribute insted of 'xlink:href'.

Placement of video resources is established in accordance with Placement and scaling of the referenced resource using ‘x’, ‘y’, ‘width’, ‘height’ and ‘preserveAspectRatio’ attributes.

The 'audio' element introduces the function that is almost equivalent to 'audio' element of html5.0 into svg. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the 'audio' element of html5.0. The 'audio' element is not rendered on screen unless it has 'controls' boolean attribute of true.

If 'controls' boolean attribute is present, the 'x', 'y' attributes specify the upper left corner of built-in controller. Otherwise those attributes has no effects.

The 'iframe' element introduces the function that is almost equivalent to 'iframe' element of html5.0 into svg. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the 'iframe' element of html5.0.

The 'iframe' element introduces a new nested browsing context. Placement of browsing context is established in accordance with placement and scaling of the referenced resource using 'x', 'y', 'width', 'height', 'frameWidth', 'frameHeight' and 'preserveAspectRatio' attributes.

The 'frameWidth' and 'frameHeight' specifies the natural (intrinsic) size (dimension) of browsing context(in CSS pixel) in non negative value. Unlike from 'canvas', floating point values are acceptable as intrinsic width and height. (See also CSS Image Values and Replaced Content Module Level 4 #sizing)

If 'frameWidth' or 'frameHeight' attributes are not specified, values of 'width' or 'height' are assigned to corresponding DOM attributes.

Are 'frameWidth' and 'frameHeight' really required? They may only be the same as 'width' and 'height'.

Differ from 'image' element, even if 'iframe' element references an SVG document, placement and scaling is achieved toward browsing context based on its intrinsic size. After that, referred SVG document will be arranged based on initial viewport establishment process for browsing context.

Attribute definitions:

Name	Value	Lacuna value	Animatable
frameWidth	<length>	0	yes
frameHeight	<length>	0	yes

The 'canvas' element introduces the function that is almost equivalent to 'canvas' element of html5.0 into svg. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the 'canvas' element of html5.0.

The 'canvasWidth' and 'canvasHeight' specifies the natural size(dimension) of canvas object in non negative integer. Therefore it corresponds to html:canvas's 'width' and 'height'. (See also CSS Image Values and Replaced Content Module Level 4 #sizing)

On the other hand, 'x', 'y', 'width' and 'height' attributes specify the rectangular region into which the canvas object is placed considering 'preserveAspectRatio' attribute in accordance with Placement and scaling of the referenced resource.

If 'canvasWidth' or 'canvasHeight' are not specified, INT('width') or INT('height') are assigned to corresponding DOM attributes. In this case, if 'width' or 'height' is less than 1 , then the canvas object is not generated.

Are 'canvasWidth' and 'canvasHeight' really required? They may only be the same as INT('width') and INT('height').

Attribute definitions:

Name	Value	Lacuna value	Animatable
canvasWidth	<length>	0	yes
canvasHeight	<length>	0	yes

The source element allows authors to specify multiple alternative media resources for media elements. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the 'source' element of html5.0.

The track element allows authors to specify explicit external timed text tracks for media elements. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the 'track' element of html5.0.