Difference between revisions of "Proposals/IFrame Like Syntax"

From SVG
Jump to: navigation, search
(5.11.3 Units for scale)
Line 9: Line 9:
* [http://www.w3.org/Graphics/ScalableReq.html Levels Of Details]
* [http://www.w3.org/Graphics/ScalableReq.html Levels Of Details]
* [http://www.w3.org/Submission/2011/SUBM-SVGTL-20110607/ Tiling and Layering]
* [http://www.w3.org/Submission/2011/SUBM-SVGTL-20110607/ Tiling and Layering]
==='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.

Revision as of 07:23, 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.


Additions and changes for SVG1.1 Second Edition

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.


  • Security issues of cross document pointer-events expansion.
  • Can we use 'media'?
  • href? src?
  • Is global coordinate system generally usable?
  • Does 'close-viewport' make sense?