Proposals/Embedded Content

From SVG

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 content which SVG supports are 'image', 'video', 'audio', 'iframe', 'canvas' and 'foreignObject'.

Except 'canvas' and 'foreignObject', embedded content supports Resource Properties for hinting of downloading external resources. The normative reference is Resource Properties.

Placement and scaling of the referenced resource

Some embedding elements which refer to an external resource establish a new viewport for the referenced content as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes 'x', 'y', 'width' and 'height'. The placement and scaling of the referenced resource are controlled by the 'preserveAspectRatio' attribute on the corresponding element.

Brian: The above links point to the image element's attributes but I think they are supposed to be generic descriptions.

Brian: I think it's not obvious that we want to add preserveAspectRatio to these elements since CSS3 Images is trying to define similar functionality. Maybe make this an issue?

The 'x', 'y', 'width' and 'height' attributes specify the rectangular region into which the referenced resource is placed.

A negative value for 'width' or '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.

Brian: Does x really correspond to width, and y to height? Also, we shouldn't link to the image element when talking about generic attributes.

'canvas' and 'iframe' have 'intrinsicWidth' and 'intrinsicHeight' attribues to assign intrinsic size.

Brian: I think this should be canvasWidth/canvasHeight and frameWidth/frameHeight and we should describe somewhere why we think these are necessary.

The 'image' element

ImageElement

Brian: I think we should move the content from that section here.

The 'video' element

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.


Categories
Graphics element, graphics referencing element
Content model
Any number of the following elements, in any order:
animation elements
descriptive elements
paint server elements
clipPath
mask
Brian: We should include marker here and elsewhere
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
Brian: We should use the new formatting for attribute definitions that Cameron has introduced.
aria attributes
navigation attributes
core attributes
conditional processing attributes
graphical event attributes
style attributes -'class','style'
presentation attributes
Resource Properties
Brian: As discussed, probably we don't need to add it here but just add a note to say it should apply.

'preserveAspectRatio'

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

'src'
'title' ...(xlink:title)
Brian: This should eventually be part of the global HTML attributes when they are copied over to SVG

'crossorigin'
'poster'
'preload'
'autoplay'
'mediagroup'
'loop'
'muted'
'controls'
DOM Interfaces
interface SVGVideoElement : SVGMediaElement {
  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;
};

Brian: As discussed, we should probably not use the SVGAnimated* types if we can help it.

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.

note:html5 width,height

The 'audio' element

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.

Categories
Graphics element, If the element has a controls attribute: graphics referencing element
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
Resource Properties

'x'
'y'

'src'
'title' ...(xlink:title)

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

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

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.

Categories
Content model
Any number of the following elements, in any order:
Attributes
DOM Interfaces
SVGIFrameElement

interface SVGIFrameElement : SVGGraphicsElement{
 attribute DOMString src;
 attribute DOMString srcdoc;
 attribute DOMString name;
 [PutForwards=value] readonly attribute DOMSettableTokenList sandbox;
 attribute DOMString seamless;
 readonly attribute SVGAnimatedLength x;
 readonly attribute SVGAnimatedLength y;
 readonly attribute SVGAnimatedLength width;
 readonly attribute SVGAnimatedLength height;
 readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
 readonly attribute SVGAnimatedLength intrinsicWidth;
 readonly attribute SVGAnimatedLength intrinsicHeight;

 readonly attribute Document? contentDocument;
 readonly attribute WindowProxy? contentWindow;
};

Brian: Is it possible to use SVGIFrameElement implements HTMLIFrameElement?

The 'iframe' element introduces a new nested browsing context equivalent to iframe of HTML. Placement of browsing context is established in accordance with Placement and scaling of the referenced resource using ‘x’, ‘y’, ‘width’, ‘height’ 'intrinsicWidth', 'intrinsicHeight' and ‘preserveAspectRatio’ attributes.

The 'intrinsicWidth' and 'intrinsicHeight' specifies the natural 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 'intrinsicWidth' or 'intrinsicHeight' attributes are not specified, values of 'width' or 'height' are assigned to corresponding DOM attributes.

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.

The 'canvas' element

HTML canvas

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.

Categories
Graphics element
Content model
Any number of the following elements, in any order:
animation elements
descriptive elements
paint server elements
clipPath, marker, mask
Attributes
aria attributes
navigation attributes
core attributes
conditional processing attributes
graphical event attributes
style attributes
presentation attributes
'x'
'y'
'width'
'height'
'intrinsicWidth'
'intrinsicHeight'
'preserveAspectRatio'
DOM Interfaces
SVGCanvaseElement
interface SVGCanvasElement : SVGGraphicsElement {
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
  readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
  attribute unsigned long intrinsicWidth;
  attribute unsigned long intrinsicHeight;

  RenderingContext? getContext(DOMString contextId, any... arguments);

  DOMString toDataURL(optional DOMString type, any... arguments);
  void toBlob(FileCallback? _callback, optional DOMString type, any... arguments);
};


The 'intrinsicWidth' and 'intrinsicHeight' 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 'intrinsicWidth' or 'intrinsicHeight' 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.

The 'foreignObject' element

ForeignObjectElement

The 'source' element

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.

Categories
none
Content model
Empty.
Attributes
navigation attributes
core attributes
style attributes -'class','style'
'title'

'src'
'type'
'media'
DOM Interfaces
interface SVGSourceElement : SVGElement {
       attribute DOMString src;
       attribute DOMString type;
       attribute DOMString media;
}

The 'track' element

Original

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.

Categories
none
Content model
Empty.
Attributes
navigation attributes
core attributes
style attributes -'class','style'
'title'

'kind'
'src'
'srclang'
'label'
'default'
DOM Interfaces
interface SVGTrackElement : SVGElement {
          attribute DOMString kind;
          attribute DOMString src;
          attribute DOMString srclang;
          attribute DOMString label;
          attribute boolean default;

  const unsigned short NONE = 0;
  const unsigned short LOADING = 1;
  const unsigned short LOADED = 2;
  const unsigned short ERROR = 3;
  readonly attribute unsigned short readyState;

  readonly attribute TextTrack track;
};

DOM Interfaces

SVGMediaElement

Like HTMLMediaElement of HTML5, 'audio' and 'video' elements has the same interface named SVGMediaElement. The SVGMediaElement interface is almost equivalent to HTMLMediaElement of HTML5 except a difference to come from the difference of model between SVG and HTML. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this interface is HTMLMediaElement.

SVGMediaElement interface is the following:

interface SVGMediaElement : SVGGraphicsElement {
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
}
SVGMediaElement implements HTMLMediaElement;
x (readonly SVGAnimatedLength)
Corresponds to attribute ‘x’ on the given inherited element.
y (readonly SVGAnimatedLength)
Corresponds to attribute ‘y’ on the given inherited element.


Appendix: Differences of attributes and properties between SVG and 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

Brian: They can have paint servers and marker elements

  • They can have aria attributes

Brian: So can HTML

  • 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

Brian: So can HTML


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.

Note: Diff 'video'



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
idid(core)id
xml:langxml:lang(core)lang
--spellcheck
stylestylestyle
+NavigatioAttributestabindex(navigation)tabindex
xlink:titletitletitle
--translate
-xml:base(core)-
-xml:space(core)-
-requiredFeatures(conditional proc.)-
-requiredExtensions(conditional proc.)-
-systemLanguage(conditional proc.)-
--onabortE v e n t H a n d l e r C o n t e n t A t t r i b u t e s
--onblur
--oncancel
--oncanplay
--oncanplaythrough
--onchange
-onclick(graphical event)onclick
--onclose
--oncuechange
--ondblclick
--ondrag
--ondragend
--ondragenter
--ondragexit
--ondragleave
--ondragover
--ondragstart
--ondrop
--ondurationchange
--onemptied
--onended
--onerror
--onfocus
--oninput
--oninvalid
--onkeydown
--onkeypress
--onkeyup
-onload(graphical event)onload
--onloadeddata
--onloadedmetadata
--onloadstart
-onmousedown(graphical event)onmousedown
--onmouseenter
--onmouseleave
-onmousemove(graphical event)onmousemove
-onmouseout(graphical event)onmouseout
-onmouseover(graphical event)onmouseover
-onmouseup(graphical event)onmouseup
--onmousewheel
--onpause
--onplay
--onplaying
--onprogress
--onratechange
--onreset
--onscroll
--onseeked
--onseeking
--onselect
--onshow
--onstalled
--onsubmit
--onsuspend
--ontimeupdate
--onvolumechange
--onwaiting
-onfocusin(graphical event)-
-onfocusout(graphical event)-
-onactivate(graphical event)-
-(aria attributes)(aria attributes)
-(presentation attributes)=propertiesproperties
-Resource PropertiesResource Properties

Note: Dif 'audio'

  • 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