Proposals/Embedded Content

From SVG
< Proposals
Revision as of 07:58, 9 July 2013 by Stakagi (Talk | contribs)

Jump to: navigation, search

How about new chapter named for 'Embedded Content' under chapter 5 Document Structure for 'iframe', 'video', 'audio' and 'canvas' after the fashion of HTML? And also move 'image' and 'foreignObject' to it?

Embedded Content

SVG supports embedded content similar to the HTML5's embedded content. Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.

Elements for embedded contents which SVG supports are 'image', 'video', 'audio', 'iframe', 'canvas' and 'foreignObject'.

The 'image' element

ImageElement

The 'video' element

Categories
Graphics element, Media elements
Content model
Any number of the following elements, in any order:
animation elements
descriptive elements
paint server elements
clipPath
mask
If the element has a src attribute: zero or more track elements.
If the element does not have a src attribute: zero or more source elements, then zero or more track elements.
Attributes
aria attributes
navigation attributes
core attributes
conditional processing attributes
graphical event attributes
style attributes -'class','style'
presentation attributes

'preserveAspectRatio'

'x'
'y'
'width'
'height'

'src'
'title'

'crossorigin'
'poster'
'preload'
'autoplay'
'mediagroup'
'loop'
'muted'
'controls'
DOM Interfaces
interface SVGVideoElement : SVGMediaElement {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
readonly attribute unsigned long videoWidth;
readonly attribute unsigned long videoHeight;
readonly attribute SVGAnimatedString poster;
readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};


Note: Dif


SVGT1.2 videoSVG2.0 video?HTML5.0 video
xx-
yy-
widthwidthwidth
heightheightheight
xlink:hrefsrcsrc
preserveAspectRatiopreserveAspectRatio-
type--
transformBehavior--
overlay--
initialVisibility--
focusable--
RuntimeSynchronizationAttributes--
SVG timing attributes-
-crossorigincrossorigin
-posterposter
-preloadpreload
-autoplayautoplay
-mediagroupmediagroup
-looploop
-mutedmuted
-controlscontrols
--accesskeyG l o b a l A t t r i b u t e s
classclassclass
--contenteditable
--contextmenu
--dir
--draggable
--dropzone
--hidden
ididid
xml:langxml:langlang
--spellcheck
stylestylestyle
+NavigatioAttributestabindextabindex
xlink:titletitletitle
--translate

The 'audio' element

Categories
Graphics element, Media elements
Content model
Any number of the following elements, in any order:
animation elements
descriptive elements
paint server elements
clipPath
mask
If the element has a src attribute: zero or more track elements.
If the element does not have a src attribute: zero or more source elements, then zero or more track elements.
Attributes
aria attributes
navigation attributes
core attributes
conditional processing attributes
graphical event attributes
style attributes -'class','style'
presentation attributes

'x'
'y'

'src'
'title'

'crossorigin'
'preload'
'autoplay'
'mediagroup'
'loop'
'muted'
'controls'
DOM Interfaces
interface SVGAudioElement : SVGMediaElement {};


Dif

  • SVGT1.2 audio
    • attr: xlink:href, type, Runtime synchronization attributes, SVG timing attributes
  • HTML audio
    • attr: GlobalAttributes, src, crossorigin, preload, autoplay, mediagroup, loop, muted, controls

The 'iframe' element

The 'canvas' element

HTML canvas

The 'foreignObject' element

ForeignObjectElement

The 'source' element

Original

The 'track' element

Original

DOM Interfaces

SVGMediaElement

SVGMediaElement : SVGGraphicsElement {

 // error state
 readonly attribute MediaError? error;

 // network state : dif from HTML5 attrs
 readonly attribute SVGAnimatedString src;
 readonly attribute SVGAnimatedString crossOrigin;
 // network state
 readonly attribute DOMString currentSrc;
 const unsigned short NETWORK_EMPTY = 0;
 const unsigned short NETWORK_IDLE = 1;
 const unsigned short NETWORK_LOADING = 2;
 const unsigned short NETWORK_NO_SOURCE = 3;
 readonly attribute unsigned short networkState;
          attribute DOMString preload;
 readonly attribute TimeRanges buffered;
 void load();
 DOMString canPlayType(DOMString type);

 // ready state
 const unsigned short HAVE_NOTHING = 0;
 const unsigned short HAVE_METADATA = 1;
 const unsigned short HAVE_CURRENT_DATA = 2;
 const unsigned short HAVE_FUTURE_DATA = 3;
 const unsigned short HAVE_ENOUGH_DATA = 4;
 readonly attribute unsigned short readyState;
 readonly attribute boolean seeking;

 // playback state
          attribute double currentTime; ///////////////////////////////////////////
 readonly attribute unrestricted double duration;
 readonly attribute Date startDate;
 readonly attribute boolean paused;
          attribute double defaultPlaybackRate;
          attribute double playbackRate;
 readonly attribute TimeRanges played;
 readonly attribute TimeRanges seekable;
 readonly attribute boolean ended;
          attribute boolean autoplay;
          attribute boolean loop;
 void play();
 void pause();

 // media controller
          attribute DOMString mediaGroup;
          attribute MediaController? controller;

 // controls
          attribute boolean controls;
          attribute double volume;
          attribute boolean muted;
          attribute boolean defaultMuted;

 // tracks
 readonly attribute AudioTrackList audioTracks;
 readonly attribute VideoTrackList videoTracks;
 readonly attribute TextTrackList textTracks;
 TextTrack addTextTrack(DOMString kind, optional DOMString label, optional DOMString language);
};

The media element attributes, src, crossorigin, preload, autoplay, mediagroup, loop, muted, and controls, apply to all media elements. They are defined in this section.

Media elements are used to present audio data, or video and audio data, to the user. This is referred to as media data in this section, since this section applies equally to media elements for audio or for video. The term media resource is used to refer to the complete set of media data, e.g. the complete video file, or complete audio file.

A media resource can have multiple audio and video tracks. For the purposes of a media element, the video data of the media resource is only that of the currently selected track (if any) given by the element's videoTracks attribute, and the audio data of the media resource is the result of mixing all the currently enabled tracks (if any) given by the element's audioTracks attribute.

Differences of attributes and properties from HTML

This section is informative, not normative.

The differences of attributes and properties for embedded contents between SVG and HTML are as follows.

  • They have x and y attributes.
  • They can have transform attribute.
  • They can have animation elements
  • They can have descriptive elements
  • They can have clipPath and mask elements
  • They can have aria attributes
  • They can have core attributes
  • They can have conditional processing attributes
  • They can have graphical event attributes
  • They can have presentation attributes
  • They can have navigation attributes


The existence of x,y and transform attribute depends on difference of layout mechanism between HTML and SVG.

In the case of the user agent which also supports HTML, the common implementation that above differences was considered may be offered.