19 Embedding Foreign Object Types


One goal for SVG is to provide a mechanism by which other XML language processors can render into an area within an SVG drawing, with those renderings subject to the various transformations and compositing parameters that are currently active within the SVG document. One particular example of this is to provide a frame for the HTML/CSS processor so that dynamically reflowing text (subject to SVG transformations and compositing) could be inserted into the middle of an SVG document. Another example is inserting a MathML expression into an SVG drawing.

The <foreignobject> element allows for inclusion of foreign namespaces which has graphical content drawn by a different user agent, where the graphical content that is drawn is subject to SVG transformations and compositing. The contents of <foreignobject> are assumed to be from a different namespace. Any SVG elements within a <foreignobject> will not be drawn, except in the situation where a properly defined SVG subdocument is recursively embedded within the different namespace (e.g., an SVG document contains an XHTML document which in turn contains yet another SVG document).

Additionally, there is a capability for alternative representations so that something meaningful will appear in SVG viewing environments which do not have the ability to process a given <foreignobject>. To accomplish this, SVG has a <switch> element and system-required attribute similar to the corresponding facilities within the SMIL 1.0 Recommendation. The rules for <switch> are that the first child element whose system-required evaluates to "true" will be processed and all others ignored.

Here is an example:

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
 xmlns = 'http://www.w3.org/Graphics/SVG/svg-19990706.dtd'>
  <desc>This example uses the switch element to provide a 
  fallback graphical representation of an equation, if 
  MathML is not supported.
  </desc>
  <!-- The <switch> element will process the first child element
       whose testing attributes evaluate to true.-->
  <switch>

    <!-- Process the MathML if the system-required attribute
         evaluates to true (i.e., the user agent supports MathML
         embedded within SVG). -->
    <foreignobject 
       system-required="http://www.w3.org/TR/REC-MathML-19980407" 
       width="100" height="50">
      <!-- MathML content goes here -->
    </foreignobject>

    <!-- Else, process the following alternate SVG.
         Note that there are no testing attributes on the <g> element.
         If no testing attributes are provided, it is as if there
         were testing attributes and they evaluated to true.-->
    <g>
      <!-- Draw a red rectangle with a text string on top. -->
      <rect style="fill: red"/>
      <text>Formula goes here</text>
    </g>

  </switch>
</svg>

Download this example

It is not required that SVG user agent support the ability to invoke other arbitrary user agents to handle embedded foreign object types; however, all conforming SVG user agents would need to support the <switch> element and should be able to render valid SVG elements when they appear as one of the alternatives within a <switch> element.

Ultimately, it is expected that commercial Web browsers will support the ability for SVG to embed content from other XML grammars which use CSS layout or XSL to format their content, with the resulting CSS- or XSL-formatted content subject to SVG transformations and compositing. At this time, such a feature represents an objective, not a requirement.

(The exact mechanism for providing these capabilities hasn't been decided yet. Many details need to be worked out.)