Proposals/IFrame Like Syntax

Introduction

This is a proposal for functionality that allows dynamic loading and embedding of browsing contexts into svg. Based on SVGTL, the unification with main body specifications of SVG2.0 and HTML5.0's iframe are considered. And this includes functions based on extended CSS3 media queries. Furthermore, geographical semantics of SVG and SVGTL is deleted.

Applications

Abstract

'iframe' element

It respects compatibility with iframe of the HTML
It extends cross document pointer-events
The security model quotes CORS

Levels Of Details

As the evaluation expression to control Level Of Details, it uses extended media_query_list of media queries.
Intersection to viewport and zoom are extended.

Note: In member submission, unique attributes was used for LOD.

Issues

Is 'media' desirable?

'iframe' href? src?

Is security issues of cross document pointer-events expansion?

CORS

Does 'close-viewport' make sense　as one of a media feature?

'close-viewport' has the following specificity in comparison with feature of other media.

It do not influence "rendering" in a narrow sense, because a object outside viewport is not displayed　naturally.　Therefore, the effect is limited to only elements to import from the outside such as image, iframe etc.　This is because it affects the usability by being going to load data though they are not displayed.
It carries out an evaluation with attribute (BBOX) of individual element. The others are evaluations for document and user coordinate system.

On the other hand, from the viewpoint of level of detail and responsive images, this function can be called the same category as 'zoom' feature.

It may be one of the choices to prescribe it as different attribute.

[update 03/21/2013]

Including 'close-viewport' I reexamined functions to be related to the loading of external resources.
- About 'media' attribute, basically it does not participate in the loading control directly same as CSS3 media queries. Therefore things related to theirs should be separated.
- On the other hand, originally the externalResourcesRequired attribute intends for a similar concept.　Therefore how about expanding it.
- #5.10_Specifying_whether_external_resources_are_required_for_proper_rendering

Is global coordinate system generally usable?

move to new page
Its Functionality
- Another mechanism to determine CTM between children's rootmost user coordinate systems and parent's viewport coordinate system, compared with determination mechanism of CTM by viewport and viewbox.
- A function to identify a common coordinate system by appointing a URL.

Use Cases
- Tiling
  - When the parent SVG document refers using iframe to each tiles there are divided from huge graphic, it can be used as a common coordinate system to locate each tile in the right region.
- Layering
  - It is desirable that user can ad hoc compose SVG documents autonomously dispersing on WWW. In addition, it is helpful to identify it whether the coordinate system that each layer uses is common (it is assumed that each layer is created by different content creators).

Discussion points:

If we can simply consider rootmost user coordinate system of each SVG documents to be Global Coordinate System implicitly, is this functionality unnecessary?

To satisfy the requirements, it is necessary to make user coordinate system of a parent and all children equal so that UA places them appropriately.

To realize it, one of the following conditions is necessary for nested document structure by iframe.

1. x,y of parent document's iframe is 0, and neither child's viewbox nor width,height is specified.

parent.svg
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="400" height="400" stroke="blue" fill="none"/>
  <circle cx="100" cy="100" r="60" fill="none" stroke="blue" stroke-width="5"/>
  <image x="0" y="0" width="400" height="400" xlink:href="child.svg" />
   <!-- s/image/iframe/ , s/xlink:href/src/ -->
</svg>   

child.svg
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" >
  <rect x="0" y="0" width="400" height="400" stroke="red" fill="none"/>
  <circle cx="100" cy="100" r="60" fill="red"/>
</svg>   
Two circles overlap without a discrepancy.

2. x,y of parent document's iframe is 0, and width,height of parent's iframe and child's width,height are equal, furthermore viewbox is not specified.

parent.svg
 <image x="0" y="0" width="400" height="400" xlink:href="child.svg" />
child.svg
 <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" >

3. x,y,width,height of parent's iframe and x,y,width,height of child's viewbox are equal.

parent.svg
 <image x="50" y="50" width="300" height="300" xlink:href="child.svg" />
child.svg
 <svg viewBox="50,50,300,300" xmlns="http://www.w3.org/2000/svg" >

There are the following issues with these conditions.

1. and 2. are inconvenient for the dynamic loading of tiles. They are because they cannot express the region of the real tiles though the loading control of individual tiles is based on x,y,width,height(BBOX) of iframes.

3. needs the tight coupling of a parent and children. In other words, it is necessary for the parent to know strict viewBox of children beforehand. Therefore the ad hoc layering may be difficult.

4. use SVG fragment identifier (svgView(viewBox(....))).

Set each iframe's 'x', 'y', 'width' and 'height' attributes values equal to referring content's fragment identifier's viewBox(x,y,width,height) value.

parent.svg
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="400" height="400" stroke="blue" fill="none"/>
  <circle cx="100" cy="100" r="60" fill="none" stroke="blue" stroke-width="5"/>
  <rect x="70" y="70" width="200" height="200" stroke="yellow" fill="none"/>
  <image x="70" y="70" width="200" height="200" xlink:href="child.svg#svgView(viewBox(70,70,200,200))" />
   <!-- s/image/iframe/ , s/xlink:href/src/ -->
</svg>   

child.svg
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500">
  <rect x="0" y="0" width="400" height="400" stroke="red" fill="none"/>
  <circle cx="100" cy="100" r="60" fill="red"/>
</svg>   
Two circles overlap without a discrepancy. But circle of the child is clipped by iframe's viewport.

4. solves all issues that 1. .. 3. has.

However if a common coordinate system is implicit, UA is more likely to compose the contents of the different common coordinate system by mistake. There may be a lot of common coordinate systems. For example, the coordinate system of connection diagrams of the specific LSI, the coordinate system of the plan of the specific building. Of course the latitude longitude on the earth will be one of a more global common coordinate system.

Implementations

F2F/Sydney_2013/Agenda/iframeImplReport

Draft

Additions and changes for SVG1.1 Second Edition

4.5.25 Interface SVGTests

Interface SVGTests defines an interface which applies to all elements which have attributes 'requiredFeatures', 'requiredExtensions', 'systemLanguage' and 'media'.

interface SVGTests {
  readonly attribute SVGStringList requiredFeatures;
  readonly attribute SVGStringList requiredExtensions;
  readonly attribute SVGStringList systemLanguage;
  readonly attribute DOMString media;

  boolean hasExtension(in DOMString extension);
  boolean getMediaTest();　
};

Attributes:
- readonly attribute DOMString media;
  Corresponds to attribute ‘media’ on the given element.

Operations:
- boolean getMediaTest();
  Returns true if the given element's media attribute matches. If given element don't have media attribute, returns true.

5.8 The 'iframe' element

(Insert after '5.7 The 'image' element')

5.9 Conditional processing

5.9.1 Conditional processing overview

SVG contains a 'switch' element along with attributes 'requiredFeatures', 'requiredExtensions' , 'systemLanguage' and 'media' to provide an ability to specify alternate viewing depending on the capabilities or status of a given user agent or the user's language.

Attributes 'requiredFeatures', 'requiredExtensions' , 'systemLanguage' and 'media' act as tests and return either true or false results. The 'switch' renders the first of its children for which all of these attributes test true. If the given attribute is not specified, then a true value is assumed.

Similar to the 'display' property, conditional processing attributes only affect the direct rendering of elements and do not prevent elements from being successfully referenced by other elements (such as via a 'use').

In consequence:

'requiredFeatures', 'requiredExtensions' , 'systemLanguage' and 'media' attributes affect 'a', 'altGlyph', 'foreignObject', 'textPath', 'tref', and 'tspan' elements.
'requiredFeatures', 'requiredExtensions' , 'systemLanguage' and 'media' attributes will have no effect on 'mask', 'clipPath', and 'pattern' elements.
'requiredFeatures', 'requiredExtensions' , 'systemLanguage' and 'media' attributes do not apply to the 'defs', and 'cursor' elements because they are not part of the rendering tree.
'requiredFeatures', 'requiredExtensions' , 'systemLanguage' and 'media' attributes affect 'animate', 'animateColor', 'animateMotion', 'animateTransform', and 'set' elements. If the conditional statement on these animation elements fails, the animation will never be triggered.

When elements which refers external resources such as 'image', 'iframe', 'video' and 'audio' are targets of conditional processing, UA can control loading of referred external resources same as the 'display' property considering 'externalResourcesRequired' property.

Same as CSS3 media queries, UA executes conditional processing dynamically depending on the change of the UA's state while there is the instance of the document. The change of UA's status is mainly related to media attribute.

5.9.2 The 'switch' element

...
The 'switch' element evaluates the 'requiredFeatures', 'requiredExtensions' , 'systemLanguage' and 'media' attributes on its direct
...

5.9.6 'media' attribute

(Insert before 5.8.6 Applicability of test attributes)
media = "<media_query_list>"

'media' attribute is prescribed as the specifications that expanded concept of 'media' attribute of CSS3 media queries. UA evaluates the condition expression based on UA's state.

A string of <media_query_list> is a valid media query if it matches the extended media_query_list production of the Media Queries specification. That extention is described in this section.

A string matches the environment of the user if it is the empty string, a string consisting of only space characters, or is a media query that matches the user's environment according to the definitions given in the Media Queries specification and its extension described in this section.

Example:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,100,100">
 <circle media="(min-zoom:0.5) and (max-zoom:5)"
  cx="30" cy="30" r="15.0" stroke="none" fill="blue"/>
</svg>

5.10 Specifying whether external resources are required for proper rendering

Note 06/2013 TokyoF2F: 'externalResourcesRequired' is removed in SVG2.0. Therefore, it is desirable that the information for the hint of loading is prepared as an independent attribute. such as 'loadingBehaviorHint', 'loadingStrategy' etc. And we shoud care about 'preload' attribute of 'video', 'audio'.

Documents often reference and use the contents of other files (and other Web resources) as part of their rendering. In some cases, authors want to specify that particular resources are required for a document to be considered correct.

Attribute 'externalResourcesRequired' is available on all container elements and to all elements which potentially can reference external resources. It specifies the situation that referenced resources that are not part of the current document are required for proper rendering of the given container element or graphics element. In SVG2.0, some semantics is expanded for refinement of situation. Therefore true and false have another name for backward compatibility.

Attribute definition:

true , essentialForRendering: Indicates that resources external to the current document are always required. If an external resource is not available, progressive rendering is suspended, the document's SVGLoad event is not fired and the animation timeline does not begin until that resource and all other required resources become available, have been parsed and are ready to be rendered. If a timeout event occurs on a required resource, then the document goes into an error state (see Error processing). The document remains in an error state until all required resources become available.

false , inessentialButDesirable: (The default value.) Indicates that resources external to the current document are optional but always desirable. Document rendering can proceed even if external resources are unavailable to the current element and its descendants. Unlike three following values, this value does not declare further detailed requirements.

disusedWhenOutOfViewport: In addition to false, this value declares more that external resources are disused when the boundingBox of corresponding elements does not intersect the viewport.

disusedWhenNoDisplay: In addition to disusedWhenOutOfViewport, this value declares that external resources are dsused when the corresponding element's 'display' property is none.

disusedWhenInvisible: In addition to disusedWhenNoDisplay, this value declares that external resources are disused when the corresponding element's 'visivility' property is not visible.

Note: disused* values is prepared for the consideratioｎ to show the demand of the contents creator who wishes a browser pass the processing of object out of viewport, non display or invisible. There are cases that the document refers enormous external resources such as tiled contents. With such a case, contents creator does not want user agent to load resources unconditionally to prevent user agent's overflow.　Therefore, user agent should control the loading of external resources in reference to these values carefully.

For example, present browsers reads all images by default for the long html document with large number of 'img's. In contrast, the lazy loader or image search of google has a function to read only images in viewport. The contents creator should be able to choose these behavior. This function will assists it.

5.11 Extension for <media_query_list>

(Insert after '5.10 Common attributes')
For the property of the media attribute of SVG, the following extension is applicable for media_query_list of CSS3 media queries.

5.11.1 Additional Media features

'zoom': Value: <scale>; Applies to: visual and tactile media types; Accepts min/max prefixes: yes; The 'zoom' media feature describes the degree to which the contents have been scaled for display on the output device.

5.11.2 Additional Values

<scale> is added.
<scale> is a value equivalent to the ratio of User Coordinate System for the Viewport Coordinate System. The exact definitions are as follows. When transformation matrix between SVG user coordinate system and coordinate system of the viewport (CTM) is following,

The <scale> is defined as follows

When one of absolute unit identifiers accompanies the value, scale becomes the ratio for physical unit for viewport coordinate system. It is calculated by the appropriate coefficient for it.

5.11.3 Units for scale

Following unit can be set in scale.

in,cm,px,em,mm,pt,pc,ex

When unit is not specified, unit is considered equal to SVG user unit. As for the meaning of scale when unit was added, for example, 10 in means that 1 User Coordinat of SVG is 10 inches. When absolute unit such as 'in' is set, we can specify absolute scale which does not depend on parent document's CTM.

5.12 DOM interfaces

5.12.14 Interface SVGIFrameElement

The SVGIFrameElement interface corresponds to the 'iframe' element.

interface SVGIFrameElement : SVGElement,
//                            SVGURIReference, (to src...)
                            SVGTests,
                            SVGLangSpace,
                            SVGExternalResourcesRequired,
                            SVGStylable,
                            EmbeddingElement,
                            SVGTransformable {
 readonly attribute SVGAnimatedString src;
 readonly attribute SVGAnimatedString srcdoc;
 readonly attribute SVGAnimatedString name;
 [PutForwards=value] readonly attribute dom::DOMSettableTokenList sandbox;
 readonly attribute SVGAnimatedBoolean seamless;
 readonly attribute SVGAnimatedLength x;
 readonly attribute SVGAnimatedLength y;
 readonly attribute SVGAnimatedLength width;
 readonly attribute SVGAnimatedLength height;
 readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
 readonly attribute html::WindowProxy? contentWindow;
};

Attributes

x (readonly SVGAnimatedLength)
Corresponds to attribute 'x' on the given 'iframe' element.
y (readonly SVGAnimatedLength)
Corresponds to attribute 'y' on the given 'iframe' element.
width (readonly SVGAnimatedLength)
Corresponds to attribute 'width' on the given 'iframe' element.
height (readonly SVGAnimatedLength)
Corresponds to attribute 'height' on the given 'iframe' element.
preserveAspectRatio (readonly SVGAnimatedPreserveAspectRatio)
Corresponds to attribute 'preserveAspectRatio' on the given 'iframe' element.
src (readonly SVGAnimatedString)
Corresponds to attribute 'src' on the given 'iframe' element.
srcdoc (readonly SVGAnimatedString)
Corresponds to attribute 'srcdoc' on the given 'iframe' element.
name (readonly SVGAnimatedString)
Corresponds to attribute 'name' on the given 'iframe' element.
sandbox (readonly dom::DOMSettableTokenList)
Corresponds to attribute 'sandbox' on the given 'iframe' element.
seamless (readonly SVGAnimatedBoolean)
Corresponds to attribute 'seamless' on the given 'iframe' element.

5.12.15 Interface EmbeddingElement

Equivalent to GetSVGDocument.

interface EmbeddingElement {
 SVGDocument contentDocument();
};

7.8 The 'preserveAspectRatio' attribute

...
Attribute preserveAspectRatio="[defer] <align> [<meetOrSlice>]", which is available for all elements that establish a new viewport (see elements that establish viewports), plus the 'image','iframe', 'marker', 'pattern' and 'view' elements, indicates whether or not to force uniform scaling.
...
For 'image'and 'iframe'elements, 'preserveAspectRatio' indicates how referenced images should be fitted with respect to the reference rectangle and whether the aspect ratio of the referenced image should be preserved with respect to the current user coordinate system. If the value of 'preserveAspectRatio' on an 'image'and 'iframe' element starts with 'defer' then
...

7.9 Aspect ratio and viewbox determination for referred content by 'image' and 'iframe'

(Insert after '7.8 Common attributes')
When an 'image' or 'iframe' element references an SVG document or other images, the placement and scaling of it is controlled by the 'preserveAspectRatio' attribute on the 'image' or 'iframe' element.

When an 'image'or 'iframe' element references an SVG document, the 'clip' and 'overflow' properties on the root element in the referenced SVG document are ignored (in the same manner as the 'x', 'y', 'width' and 'height' attributes are ignored). Unless the value of 'preserveAspectRatio' on the 'image' or 'iframe' element starts with 'defer', the 'preserveAspectRatio' attribute on the root element in the referenced SVG document is also ignored (see 'preserveAspectRatio' for details). Instead, the 'preserveAspectRatio' attribute on the referencing 'image' or 'iframe' element defines how the SVG content is fitted into the viewport and the 'clip' and 'overflow' properties on the 'image' or 'iframe' element define how the SVG content is clipped (or not) relative to the viewport.

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. 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.

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').

7.10 Establishing a new viewport

...
An 'image' element that references an SVG file will result in the establishment of a temporary new viewport since the referenced resource by definition will have an 'svg' element. An 'iframe' element behaves in the same way as the above.
...

#Remove '7.13 Geographic coordinate systems' section

16.6 Expansion of 'pointer-events'

The behavior of cross window (overwrapped window) pointer-events are expanded.

visiblePaintedTransfer

In addition to functions of 'visiblePainted', the following function is expanded. When pointer event is not captured in applicable window, it is transferred to behind window.

Because it can be applied to 'iframe', it has security consideration. When parent and child are in the same origin, there are no limitation. On the other hand, it is limited by CORS mechanism when they are not in the same origin. That is, pointer events are not transferred by default to the child document.

Pointer event: related discussion