Proposals/Embedded Content
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
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
-
- aria attributes
- navigation attributes
- core attributes
- conditional processing attributes
- graphical event attributes attributes
- presentation attributes
- style attributes -'class','style'
- Resource Properties
- 'x'
- 'y'
- 'width'
- 'height'
- 'intrinsicWidth'
- 'intrinsicHeight'
- 'preserveAspectRatio'
- 'src'
# iframe may prefer 'src' instead of 'href' - 'srcdoc'
- 'name'
- 'sandbox'
- 'seamless'
- 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
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
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
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 video
- attr: x, y, width, height, xlink:href, preserveAspectRatio, type, transformBehavior->no attr/SVG2.0, overlay->no attr/SVG2.0, initialVisibility->no attr/SVG2.0, focusable->no attr/SVG2.0, Navigation Attributes->tabindex/SVG2.0?, Runtime synchronization attributes->no attr/SVG2.0?, SVG timing attributes->SVG1.1|SVG2.0
- HTML video
- attr: Global Attributes, src, crossorigin, poster, preload, autoplay, mediagroup, loop, muted, controls, width, height
SVGT1.2 video | SVG2.0 video? | HTML5.0 video | |
x | x | - | |
y | y | - | |
width | width | width | |
height | height | height | |
xlink:href | src | src | |
preserveAspectRatio | preserveAspectRatio | - | |
type | - | - | |
transformBehavior | - | - | |
overlay | - | - | |
initialVisibility | - | - | |
focusable | - | - | |
RuntimeSynchronizationAttributes | - | - | |
SVG timing attributes | - | ||
- | crossorigin | crossorigin | |
- | poster | poster | |
- | preload | preload | |
- | autoplay | autoplay | |
- | mediagroup | mediagroup | |
- | loop | loop | |
- | muted | muted | |
- | controls | controls | |
- | - | accesskey | G l o b a l A t t r i b u t e s |
class | class | class | |
- | - | contenteditable | |
- | - | contextmenu | |
- | - | dir | |
- | - | draggable | |
- | - | dropzone | |
- | - | hidden | |
id | id(core) | id | |
xml:lang | xml:lang(core) | lang | |
- | - | spellcheck | |
style | style | style | |
+NavigatioAttributes | tabindex(navigation) | tabindex | |
xlink:title | title | title | |
- | - | translate | |
- | xml:base(core) | - | |
- | xml:space(core) | - | |
- | requiredFeatures(conditional proc.) | - | |
- | requiredExtensions(conditional proc.) | - | |
- | systemLanguage(conditional proc.) | - | |
- | - | onabort | E 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)=properties | properties | |
- | Resource Properties | Resource 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