Difference between revisions of "Proposals/IFrame Like Syntax"

From SVG
Jump to: navigation, search
(4.5.25 Interface SVGTests)
(4.5.25 Interface SVGTests)
Line 96: Line 96:
Additions and changes for [http://www.w3.org/TR/2011/REC-SVG11-20110816/ SVG1.1 Second Edition]
Additions and changes for [http://www.w3.org/TR/2011/REC-SVG11-20110816/ SVG1.1 Second Edition]
===[http://www.w3.org/TR/SVG/single-page.html#types-InterfaceSVGTests 4.5.25 Interface SVGTests]===
===[http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGTests 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 defines an interface which applies to all elements which have attributes 'requiredFeatures', 'requiredExtensions', 'systemLanguage' and 'media'.  
  interface SVGTests {
  interface SVGTests {

Revision as of 13:04, 1 February 2013


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.


ACTION-3369: Write up a proposal for iframe like syntax in SVG on Satakagi.



'iframe' element

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


  • 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 is used for LOD.


It offers users to use a common coordinate systems between plural documents.


Is security issues of cross document pointer-events expansion?

Is 'media' desirable?

'iframe' href? src?

Is global coordinate system generally usable?

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

<?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/

<?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"/>

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.

 <image x="0" y="0" width="400" height="400" xlink:href="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.

 <image x="50" y="50" width="300" height="300" xlink:href="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.

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

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.


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

Graphics element, graphics referencing element, structural element
Content model
Any number of the following elements, in any order:
  • animation elements
  • descriptive elements
  • core attributes
  • conditional processing attributes
    # 'media' controlling LevelOfDetail and Tiling is added as conditional processing attributes
  • presentation attributes
  • xlink attributes
  • 'class'
  • 'style'
  • 'externalResourcesRequired'
  • 'transform'
  • 'x'
  • 'y'
  • 'width'
  • 'height'
  • 'src'
    # iframe may prefer 'src' instead of 'href'
  • 'srcdoc'
  • 'name'
  • 'sandbox'
  • 'seamless'
DOM Interfaces

The 'iframe' element introduces a new nested browsing context equivalent to iframe of HTML. The 'iframe' element also indicates that the browsing context are to be rendered into a given rectangle within the current user coordinate system. The 'iframe' element can refer to not only resources with 'image/svg+xml' MIME type but also all types of resources that can generate browsing context.

An 'iframe' element establishes a new viewport for the nested browsing context as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes 'x', 'y', 'width' and 'height'.

When an 'iframe' element references a SVG document or other raster image file, asprct ratio and viewbox of it is determined by 'Asprct ratio and viewbox determination'.

The resource referenced by the 'iframe' element represents a separate browsing context and also document which generates its own parse tree and document object model (if the resource is XML). Thus, there is no inheritance of properties into the image.

Note: Unlike 'use', the 'iframe' element cannot reference elements within an SVG file. <= Should be removed for SVG Stacks

When 'display' property is set to none, not only corresponding element is not present in the rendering tree, but also the UA can control loading of a referred resource at UA's convenience. On the other hand, the 'visibility' property does not order restraint of the loading of the referred resource.


<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
 <circle cx="30" cy="30" r="20.0" stroke="none" fill="green"/>
 <rect x="20" y="20" width="50" height="50" fill="none" stroke="blue" stroke-width="1"/>
 <iframe src="layer1.svg" x="20" y="20" width="50" height="50"/>
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,100,100">
 <circle cx="30" cy="30" r="15.0" stroke="none" fill="blue"/>


Because 'iframe' can generate the browsing context with the dynamic SVG document, it can constitute cascading documents. Therefore it can express such as the tiling and layering. In addition, by combining 'media' attribute, it can bring Levels Of Detail functionality or a sort of responsive web content depending on viewbox and zooming.


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 orders the loading and drawing by referring to an outside resource such as image, iframe, video and audio are targets of conditional processing, UA can control loading of a referred resource at UA's convenience.

Note: UA should not perform loading unconditionally to prevent overflow because referred resources as targets of conditional processing may be occasionally enormousness.

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.


<?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"/>

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

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.
Value: <length>
Applies to: visual and tactile media types
Accepts min/max prefixes: no
When a part of the domain of the target object was in viewport, it becomes true. The domain is expanded boundingBox by buffer extent specified by Value. When value is not specified, it is boundingBox itself. When value is minus number, domain is reduced. When it is smaller than -height/2 or -width/2 it is ignored.

Note: This function was prepared for the consideration to show the demand of the contents creator who wishes a browser pass the processing of object out of viewport. Basically the loding control of enormous iframes or images such as cascaded tree-like iframe structure is entrusted to a browser, I feel that the function to introduce the wish of the contents creator into web browser has value. 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.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,
PIFLS Fzoom1.png
The <scale> is defined as follows
PIFLS Fzoom2.png

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.


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, (...src...)
                            SVGTransformable {
 readonly attribute SVGAnimatedLength x;
 readonly attribute SVGAnimatedLength y;
 readonly attribute SVGAnimatedLength width;
 readonly attribute SVGAnimatedLength height;
 readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;

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

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

7.13 'Global coordinate systems' (Add new section)

'Global coordinate systems' provides a function to share a coordinate system by declaring a common coordinate system between plural SVG documents.

When SVG document refers to external SVG by iframe, it affect on coodrinate transformation such as placement or scaling of a referred document. When both the parent and the child SVG documents has 'globalCoordinateSystem' element, and the 'href' attribute that they have refers to the same resource, this function becomes effective.

PIFLS gcs.png

7.13.1 The 'globalCoordinateSystem' element

Contents with global coordinates has a 'globalCoordinateSystem' element as the direct child of rootmost 'svg' element.

  • href="<URL for Global Coordinate System>"
    This attribute specifies the global coordinates system of the SVG document.
  • transform = "<transform-list>" | "none"
    This transform attribute specifies the conversion parameters from global coordinate system to user coordinate system of the document.

The transformation is as follows.
PIFLS Fgcs1.png

  • Xs: X coordinate of SVG user coordinate system
  • Ys: Y coordinate of SVG user coordinate system
  • Xg: X coordinate of global coordinate system
  • Yg: Y coordinate of global coordinate system
  • a , b , c , d , e , f: The applicable values of parameters(SVG transform(a,b,c,d,e,f) )

When this properties is not declared, it is considered that that value is matrix (1, 0, 0, 1, 0, 0) as a default.

7.13.2 Coodrdinate Transformation and Viewport Establishment

A referred content is transformed into User Coordinate of a referring SVG document via Global Coordinate System. The expanded transformation formula are as follows.

PIFLS Fgcs2.png

PIFLS Fgcs3.png

The parameters with suffix (i) are parameters of matrix of the 'transform' attribute of a 'golbalCoordinates' element of a referred SVG document. The parameters with suffix (c) are parameters of matrix of the 'transform' attribute of a 'golbalCoordinates' element of a referring SVG document.

Referred SVG document is reversely transformed to global coordinate space once by its transformation parameter. And, it is transformed to User Coordinates of referring SVG document by its transformation parameter. That is, the 'x', 'y', 'width' and 'height' attributes of a referring SVG document's 'iframe' element doesn't affect the coordinates transformation of referred SVG document, they have a role of Viewport Establishment. In cascading referred documents, the coordinate transformation to the rootmost document can be done directly without the transformation to intermediate documents.

16.6 Expansion of 'pointer-events'

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


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.