previous next contents properties index

# 23 Extensibility

### Contents

## 23.1 Foreign namespaces and private data

SVG allows inclusion of elements from foreign namespaces anywhere with the SVG content. In general, the SVG user agent will include the unknown elements in the DOM but will otherwise ignore unknown elements. (The notable exception is described under Embedding Foreign Object Types.)

Additionally, SVG allows inclusion of attributes from foreign namespaces on any SVG element. The SVG user agent will include unknown attributes in the DOM but with otherwise ignore unknown attributes.

SVG's ability to include foreign namespaces can be used for the following purposes:

- Application-specific information so that authoring applications can include model-level data in the SVG content to serve their "roundtripping" purposes (i.e., the ability to write, then read a file without loss of higher-level information).
- Supplemental data for extensibility. For example, suppose you have an extrusion extension which takes any 2D graphics and extrudes it in three dimensions. When applying the extrusion extension, you probably will need to set some parameters. The parameters can be included in the SVG content by inserting elements from an extrusion extension namespace.

To illustrate, a business graphics authoring application might want to include some private data within an SVG document so that it could properly reassemble the chart (a pie chart in this case) upon reading it back in:

    <?xml version="1.0" standalone="yes"?>
    <svg width="4in" height="3in"
         xmlns = 'http://www.w3.org/2000/svg-20000302-stylable'>
      <defs>
        <myapp:piechart xmlns:myapp="http://mycompany/mapapp"
                        title="Sales by Region">
          <myapp:pieslice label="Northern Region" value="1.23"/>
          <myapp:pieslice label="Eastern Region" value="2.53"/>
          <myapp:pieslice label="Southern Region" value="3.89"/>
          <myapp:pieslice label="Western Region" value="2.04"/>
          <!-- Other private data goes here -->
        </myapp:piechart>
      </defs>
      <desc>This chart includes private data in another namespace
      </desc>
      <!-- In here would be the actual graphics elements which
           draw the pie chart -->
    </svg>

Download this example

## 23.2 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 at a given point within the SVG content tree. 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 some SVG content. Another example is inserting a MathML [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 fragment contains an XHTML document fragement which in turn contains yet another SVG document fragment).

Usually, a 'foreignObject' will be used in conjunction with the 'switch' element and the system-required system-language attributes to provide proper checking for user agent support and provide an alternate rendering in case user agent support isn't available.

Here is an example:

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

        <!-- Process the embedded HTML if the system-required attribute
             evaluates to true (i.e., the user agent supports XHTML
             embedded within SVG). -->
        <foreignObject system-required="SVGForeignObject:XHTML" width="100" height="50">
          <!-- XHTML 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 width="20" height="20" 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 must 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 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 capability is not a requirement.

## 23.3 DOM interfaces

The following interfaces are defined below: SVGForeignObjectElement.

### Interface SVGForeignObjectElement

The SVGForeignObjectElement interface corresponds to the 'foreignObject' element.

IDL Definition

      interface SVGForeignObjectElement : SVGElement, SVGTransformable, SVGLangSpace, SVGTests, EventTarget {
                 attribute DOMString className;
                 attribute SVGLength x;
                 attribute SVGLength y;
                 attribute SVGLength width;
                 attribute SVGLength height;

      #ifdef STYLABLESVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Stylable SVG.
                 STYLABLESVGStyleAttribute;
      #endif STYLABLESVG

      #ifdef FINALFORMSVG
                 // The following pre-defined attribute collections are only
                 // available in the DOM for Final Form SVG.
                 FINALFORMSVGContainerAttrs;
                 FINALFORMSVGFillStrokeAttrs;
                 FINALFORMSVGGradientAttrs;
                 FINALFORMSVGGraphicsAttrs;
                 FINALFORMSVGMarkerAttrs;
                 FINALFORMSVGTextContainerAttrs;
                 FINALFORMSVGTextElementAttrs;
                 FINALFORMSVGViewportAttrs;
      #endif FINALFORMSVG
          };

Attributes
  DOMString className
    Corresponds to attribute class on the given element.
  SVGLength x
    Corresponds to attribute x on the given 'foreignObject' element.
  SVGLength y
    Corresponds to attribute y on the given 'foreignObject' element.
  SVGLength width
    Corresponds to attribute width on the given 'foreignObject' element.
  SVGLength height
    Corresponds to attribute height on the given 'foreignObject' element.

previous next contents properties index