Media (SVG 1.2)

The audio element specifies an audio file which is to be rendered to provide synchronized audio. The usual SMIL animation features are used to start and stop the audio at the appropriate times. An xlink:href is used to link to the audio content. No visual representation is produced. However, content authors can if desired create graphical representations of control panels to start, stop, pause, rewind, or adjust the volume of audio content.

audio Schema

  <define name='audio'>
    <element name='audio'>
      <ref name='attlist.audio'/>
      <ref name='SVG.audio.content'/>
    </element>
  </define>

  <define name='SVG.audio.content'>
    <zeroOrMore>
      <ref name='SVG.Description.class'/>
    </zeroOrMore>
    <zeroOrMore>
      <choice>
        <ref name='SVG.Animation.class'/>
        <ref name='SVG.Handler.class'/>
      </choice>
    </zeroOrMore>
  </define>

The following example illustrates the use of the audio element. When the button is pushed, the audio file is played three times.

12.1.1 Supported audio format

Profiles of SVG may impose restrictions or remove support for Ogg Vorbis. They may also require support for other formats.

12.2 The video element

The video element specifies a video file which is to be rendered to provide synchronized video. The usual SMIL animation features are used to start and stop the video at the appropriate times. An xlink:href is used to link to the video content. It is assumed that the video content also includes an audio stream, since this is the usual way that video content is produced, and thus the audio is controlled by the video element's media attributes.

The video element produces a rendered result, and thus has width, height, x and y attributes.

video Schema

  <define name='video'>
    <element name='video'>
      <ref name='attlist.video'/>
      <ref name='SVG.video.content'/>
    </element>
  </define>

  <define name='SVG.video.content'>
    <zeroOrMore>
      <ref name='SVG.Description.class'/>
    </zeroOrMore>
    <zeroOrMore>
      <choice>
        <ref name='SVG.Animation.class'/>
        <ref name='SVG.Handler.class'/>
      </choice>
    </zeroOrMore>
  </define>

  <define name='attlist.video' combine='interleave'>
    <ref name='SVG.Core.attrib'/>
    <ref name='SVG.Conditional.attrib'/>
    <ref name='SVG.Opacity.attrib'/>
    <ref name='SVG.Graphics.attrib'/>
    <ref name='SVG.Focusable.attrib'/>
    <ref name='SVG.Clip.attrib'/>
    <ref name='SVG.Mask.attrib'/>
    <ref name='SVG.Compositing.attrib'/>
    <ref name='SVG.Filter.attrib'/>
    <ref name='SVG.Tooltip.attrib'/>
    <ref name='SVG.GraphicalEvents.attrib'/>
    <ref name='SVG.Cursor.attrib'/>
    <ref name='SVG.XLinkEmbed.attrib'/>
    <ref name='SVG.External.attrib'/>
    <ref name='SVG.Media.attrib'/>
    <ref name='SVG.Style.attrib'/>
    <ref name='SVG.BackgroundFill.attrib'/>
    <ref name='SVG.AnimationTimingNoMinMax.attrib'/>
    <ref name='SVG.AnimationSync.attrib'/>
    <ref name='SVG.Transition.attrib'/>
    <optional>
      <attribute name='x' svg:animatable='true' svg:inheritable='false'>
        <ref name='Coordinate.datatype'/>
      </attribute>
    </optional>
    <optional>
      <attribute name='y' svg:animatable='true' svg:inheritable='false'>
        <ref name='Coordinate.datatype'/>
      </attribute>
    </optional>
    <attribute name='width' svg:animatable='true' svg:inheritable='false'>
      <ref name='Length.datatype'/>
    </attribute>
    <attribute name='height' svg:animatable='true' svg:inheritable='false'>
      <ref name='Length.datatype'/>
    </attribute>
    <optional>
      <attribute name='preserveAspectRatio' a:defaultValue='xMidYMid meet' 
        svg:animatable='yes' svg:inheritable='false'>
        <ref name='PreserveAspectRatioSpec.datatype'/>
      </attribute>
    </optional>
    <ref name='SVG.transform.attrib'/>
  </define>

The following example illustrates the use of the video element. The video content is partially obscured by other graphics elements. Experiments within the SVG working group have shown that adequate performance can be obtained by rendering the video in an offscreen buffer and then transforming and compositing it in the normal way, so that it behaves like any other graphical primitive such as an image or a rectangle. It may be scaled, rotated, skewed, displayed at various sizes, and animated.

Show this example of the video element (requires an SVG 1.2 viewer and support for a Windows AVI using Motion JPEG. This is a 3.7M video file).

12.3 Alternate content based on display resolutions

12.3.1 The multiImage element

The multiImage element specifies one or more images which are to be rendered to provide a multiresolution image. Unlike the image element, there is no xlink:href on the multiImage element; instead it has child elements, subImage and subImageRef, to provide the content. This allows alternate image content at different resolutions to be provided, and selected automatically by the viewer depending on the displayed size of the multiImage and the current zoom level.

The usual SMIL animation features are used to start and stop the entire multiImage at the appropriate times.

12.3.2 The subImageRef element

The subImageRef element is used to provide alternate resources to use depending on rendering conditions. The subImageRef element provides an alternate resource reference to be used for a range of rendering scales as defined by min-pixel-size and max-pixel-size, but is otherwise like an SVG 1.1 image element. An xlink:href is used to link to the image content. It can point to raster image formats such as PNG and JPEG, to SVG images, or to symbol elements in SVG images.

The following example illustrates the use of the multiImage element with three subImageRef children to link to three JPEG files of the same scene at three different resolutions.

12.3.3 The subImage element

The subImage element is a container element used to provide alternate resources to use depending on rendering conditions. The subImage element provides an alternate resource to be used for a range of rendering scales as defined by min-pixel-size and max-pixel-size, but is otherwise like a g element.

The following example illustrates the use of the multiImage element with a subImageRef for the low resolution version and a subImage for the high resolution one, containing a nested svg element and four images.

12.3.4 Selecting the image for rendering

For multiImage elements that have one or more child subImage or subImageRef elements the viewer has a choice between several possible resources. The choice is made based on the current rendering conditions and the values of the min-pixel-size and max-pixel-size on the elements.

The min-pixel-size and max-pixel-size attributes both describe the size of a pixel in the current coordinate system. This may be a single value or a space separated list of two values. If two values are provided then the first refers to the size of a pixel in the horizontal direction and the second value refers to the size of a pixel in the vertical direction in the local coordinate system. If one value is provided it is used for both horizontal and vertical directions. If the attribute is not provided then the resource's range is considered unbounded on that side.

Thus min-pixel-size and max-pixel-size define a range of resolutions that the resource from the associated xlink:href is considered applicable to.

In cases where the current rendering resolution lies outside of any specified range, the viewer should select the resource whose range is closest to the current rendering resolution. Likewise in cases where the current rendering resolution lies within multiple ranges the viewer should the resource whose range is closest to the current rendering. The viewer may use a resource which is not the closest to the current resolution, if the preferred resource is unavailable (not yet dowenloaded, or unreachable, or of an unsupported image format). Thus for example a lower resolution image can be displayed while a higher resolution image is being downloaded.

12.4 Media Properties

The audio and video elements described above both refer to a set of media attributes. For SVG 1.2 this set includes a single property, audio-level.

The audio-level property specifies a value between 0 and 1 that is used to calculate the volume of a particular element. Values above 1 and below 0 are clipped.

An element's volume is the product of its audio-level property and the element volume of its parent. The exception to this rule is the root element, where the element volume is only the value of its audio-level property. Therefore, element volume is calculated in a similar way to opacity.

If you set the audio-level of an element to a value less than 1.0, all children elements will be quieter. It is not possible to increase the volume on a child to override the reduction in audio-level on the parent.

The output signal level is calculated using the logarithmic scale described below (where vol is the value of the element volume):

If the element has an element volume of 0, then the output signal will be inaudible. If the element has an element volume of 1, then the output signal will be at the system volume level. Neither the audio-level property or the element volume override the system volume setting.

12.5 Loading images

The SVG 1.1 specification does not make it clear when an image that is not being displayed should be loaded. A user agent is not required to load image data for an image that is not displayed (e.g. is is outside the initial document viewport).

However, it should be noted that this may cause a delay when an image becomes visible for the first time.

In the case where an author wants to suggest that the user agent load image data before it is displayed, they should use the prefetch element.

Value:	<float>
Initial:	1
Applies to:	audio, video and container elements
Inherited:	no
Percentages:	N/A
Media:	visual
Animatable:	yes

12 Media

12.1 The audio element