previous next contents properties index

# 24 Exchange SVG

### Contents

## 24.1 Introduction

The SVG language comes in two forms: Stylable SVG and Exchange SVG. Stylable SVG can be styled by external or internal style sheets using the style sheet language of choice. Exchange SVG conveys its rendering properties in the form of XML attributes and does not include language facilities for embedding style sheets or style declarations blocks within Exchange SVG content.

This chapter:

- Describes appropriate uses of Exchange SVG
- Describes the differences between Stylable SVG and Exchange SVG
- Details the language features only in Exchange SVG

## 24.2 Appropriate uses of Exchange SVG

Exchange SVG is a language primarily targeted at tool interoperability. Because Stylable SVG requires the use of a styling language before rendering properties can be attached to graphics elements, and because Stylable SVG allows arbitrary styling languages to be used, Stylable SVG is not suitable as a self-defined, fully-contained language format for guaranteed interoperability. With Exchange SVG, all rendering properties are expressed as XML attributes rather than using the syntax of a particular styling language.

Exchange SVG serves as an XML language for exchange of 2D dynamic and static information and thus serves as an XML alternative for graphics interchange formats such as EPS.

Because all rendering properties are packaged as XML attributes, Exchange SVG has potential use as the output/result of XSL Transformations.

## 24.3 Differences between Stylable SVG and Exchange SVG

Stylable SVG and Exchange SVG share the same structuring, graphics and rendering models as reflected by other chapters and appendices in this specification, particularly SVG Rendering Model. Except for those items explicitly listed in this section, the two variants share the same syntax and semantics. Any visual representation that is possible in Stylable SVG can be achieved in Exchange SVG, and vice versa.

All differences between Stylable SVG and Exchange SVG have to do directly or indirectly with the application of styling information to the graphical data:

| Stylable SVG | Exchange SVG
Specifying styling information | Styling information is defined by external style sheets (including user style sheets), inline style sheets embedded within 'style' elements, or style declaration blocks embedded within style attributes attached to specific elements. (For more about using style sheets with Stylable SVG, see Styling.) | Styling information is defined via styling attributes attached to specific elements.
Specifying font descriptions | When styled by CSS, font descriptions are specified using CSS's @font-face feature | Font descriptions are specified by 'font-face' elements
Specifying color profiles | When styled by CSS, ICC color profiles are specified using @color-profile | ICC color profiles are specified by 'color-profile' elements
SVG DOM | The SVG DOM includes a DOM attribute which corresponds to the style attribute, interface SVGStyleElement and support for DOM2 stylesheets [DOM2-SHEETS]. | The SVG DOM extends the interfaces on most elements to include DOM attributes corresponding to the styling attributes in Exchange SVG. Additionally, there are DOM interfaces corresponding to elements 'font-face' and 'color-profile'.

To illustrate quickly what is the same and what is different between Stylable SVG and Exchange SVG, the following shows two example. Both examples specify a document with a rectangle filled with red and stroked with blue. The first example shows Stylable SVG, using CSS syntax to define properties within the style attribute. The second example shows Exchange SVG, with styling attributes fill and stroke. The differences between the two examples are highlighted:

Stylable SVG

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg
      PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
      "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
    <svg width="4cm" height="3cm"">
      <title>Example styable01</desc>
      <desc>Draws a rectangle filled in red,
            stroked in blue</desc>
      <rect x="1cm" y="1cm" width="2cm" height="1m"
            style="fill:red; stroke:blue" />
    </svg>

Exchange SVG

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg
      PUBLIC "-//W3C//DTD SVG 20000303 Exchange//EN"
      "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-exchange.dtd">
    <svg width="4cm" height="3cm"">
      <title>Example exchange01</desc>
      <desc>Draws a rectangle filled in red,
            stroked in blue</desc>
      <rect x="1cm" y="1cm" width="2cm" height="1m"
            fill="red" stroke="blue" />
    </svg>

Because of the common semantics between Stylable SVG and Exchange SVG, it is possible to convert Exchange SVG into CSS-styled Stylable SVG using a simple XSLT transformation, where any styling attributes in Exchange SVG are transformed into CSS style declarations within a style attribute in Stylable SVG.

## 24.4 Exchange SVG language features

### 24.4.1 Styling attributes in Exchange SVG

For each styling property in Stylable SVG (except for shortcut properties 'font' and 'marker'), there is a corresponding styling attribute in Exchange SVG.

Except for style-sheet language cascading rules, the syntax and semantics of the styling attributes in Exchange SVG are identical to the syntax and semantics of the styling properties in Stylable SVG. For a description of Exchange SVG's styling attributes, refer to the corresponding property definitions for Stylable SVG as defined in the various chapters of this specification. In particular, if a property definition for Stylable SVG defines the property as inheritable, then the corresponding styling attribute is inherited.

The following table lists all of the styling properties in Stylable SVG, along with the corresponding styling attribute in Exchange SVG:

Styling category | Property names in Stylable SVG | Attribute definitions in Exchange SVG DTD
Container | 'enable-background' |
    <!ENTITY % EXCHANGESVGContainerAttrs
      "enable-background %EnableBackgroundValue; #IMPLIED " >
Fill/stroke | 'fill' 'fill-opacity' 'fill-rule' 'stroke' 'stroke-dasharray' 'stroke-dashoffset' 'stroke-linecap' 'stroke-linejoin' 'stroke-miterlimit' 'stroke-opacity' 'stroke-width' |
    <!ENTITY % EXCHANGESVGFillStrokeAttrs
      "fill %Paint; #IMPLIED
       fill-opacity %OpacityValue; #IMPLIED
       fill-rule %ClipFillRule; #IMPLIED
       stroke %Paint; #IMPLIED
       stroke-dasharray %StrokeDashArrayValue; #IMPLIED
       stroke-dashoffset %StrokeDashOffsetValue; #IMPLIED
       stroke-linecap (butt | round | square | inherit) #IMPLIED
       stroke-linejoin (miter | round | bevel | inherit) #IMPLIED
       stroke-miterlimit %StrokeMiterLimitValue; #IMPLIED
       stroke-opacity %OpacityValue; #IMPLIED
       stroke-width %StrokeWidthValue; #IMPLIED " >
Gradient stops | 'stop-color' 'stop-opacity' |
    <!ENTITY % EXCHANGESVGGradientAttrs
      "stop-color %StopColorValue; #IMPLIED
       stop-opacity %OpacityValue; #IMPLIED " >
Graphics elements | 'clip-path' 'clip-rule' 'color' 'color-interpolation' 'color-rendering' 'cursor' 'display' 'filter' 'image-rendering' 'mask' 'opacity' 'pointer-events' 'shape-rendering' 'text-rendering' 'visibility' |
    <!ENTITY % EXCHANGESVGGraphicsAttrs
      "clip-path %ClipPathValue; #IMPLIED
       clip-rule %ClipFillRule; #IMPLIED
       color %CSSColor; #IMPLIED
       color-interpolation (auto | sRGB | linearRGB |
                            inherit) #IMPLIED
       color-rendering (auto | optimizeSpeed |
                        optimizeQuality | inherit) #IMPLIED
       cursor %CursorValue; #IMPLIED
       display (inline | block | list-item |
                run-in | compact | marker |
                table | inline-table |
                table-row-group | table-header-group |
                table-footer-group | table-row |
                table-column-group | table-column |
                table-cell | table-caption | none |
                inherit) #IMPLIED
       filter %FilterValue; #IMPLIED
       image-rendering (auto | optimizeSpeed |
                        optimizeQuality | inherit) #IMPLIED
       mask %MaskValue; #IMPLIED
       opacity %OpacityValue; #IMPLIED
       pointer-events (visiblePainted | visibleFill |
                       visibleStroke | visibleFillStroke |
                       visible | painted | fill | stroke |
                       fillstroke | all | none | inherit) #IMPLIED
       shape-rendering (auto | optimizeSpeed | crispEdges |
                        geometricPrecision | inherit) #IMPLIED
       text-rendering (auto | optimizeSpeed | optimizeLegibility |
                       geometricPrecision | inherit) #IMPLIED
       visibility (visible | hidden | inherit) #IMPLIED " >
Markers | 'marker-start' 'marker-mid' 'marker-end' |
    <!ENTITY % EXCHANGESVGMarkerAttrs
      "marker-start %MarkerValue; #IMPLIED
       marker-mid %MarkerValue; #IMPLIED
       marker-end %MarkerValue; #IMPLIED " >
Text container elements | 'baseline-identifier' 'baseline-shift' 'direction' 'font-family' 'font-size' 'font-size-adjust' 'font-stretch' 'font-style' 'font-variant' 'font-weight' 'glyph-orientation-horizontal' 'glyph-orientation-vectical' 'letter-spacing' 'text-decoration' 'unicode-bidi' 'word-spacing' |
    <!ENTITY % EXCHANGESVGTextContainerAttrs
      "baseline-identifier (baseline | top | before-edge |
                            text-top | text-before-edge |
                            middle | bottom | after-edge |
                            text-bottom | text-after-edge |
                            ideographic | lower | hanging |
                            mathematical | inherit) #IMPLIED
       baseline-shift %BaselineShiftValue; #IMPLIED
       direction (ltr | rtl | inherit) #IMPLIED
       font-family %FontFamilyValue; #IMPLIED
       font-size %FontSizeValue; #IMPLIED
       font-size-adjust %FontSizeAdjustValue; #IMPLIED
       font-stretch (normal | wider | narrower |
                     ultra-condensed | extra-condensed |
                     condensed | semi-condensed |
                     semi-expanded | expanded |
                     extra-expanded | ultra-expanded |
                     inherit) #IMPLIED
       font-style (normal | italic | oblique | inherit) #IMPLIED
       font-variant (normal | small-caps | inherit) #IMPLIED
       font-weight (normal | bold | bolder | lighter | 100 |
                    200 | 300 | 400 | 500 | 600 | 700 | 800 |
                    900 | inherit) #IMPLIED
       glyph-orientation-horizontal
                   %GlyphOrientationHorizontalValue; #IMPLIED
       glyph-orientation-vertical
                   %GlyphOrientationVerticalValue; #IMPLIED
       letter-spacing %SpacingValue; #IMPLIED
       text-decoration %TextDecorationValue; #IMPLIED
       unicode-bidi (normal | embed | bidi-override |
                     inherit) #IMPLIED
       word-spacing %SpacingValue; #IMPLIED " >
'text' elements | 'dominant-baseline' 'text-anchor' 'writing-mode' |
    <!ENTITY % EXCHANGESVGTextElementAttrs
      "dominant-baseline (auto | autosense-script |
                          no-change | reset|
                          ideographic | lower | hanging |
                          mathematical | inherit ) #IMPLIED
       text-anchor (start | middle | end | inherit) #IMPLIED
       writing-mode (lr-tb | rl-tb | tb-rl |
                     lr | rl | tb | inherit) #IMPLIED " >
Viewport elements | 'clip' 'overflow' |
    <!ENTITY % EXCHANGESVGViewportAttrs
      "clip %ClipValue; #IMPLIED
       overflow (visible | hidden | scroll | auto |
                 inherit) #IMPLIED " >
'feFlood' elements | 'flood-color' 'flood-opacity' |
    <!ENTITY % EXCHANGESVGfeFloodAttrs
      "flood-color %SVGColor; #IMPLIED
       flood-opacity %OpacityValue; #IMPLIED " >

### 24.4.2 The 'color-profile' element

SVG supports the ability to specify colors in color spaces defined by ICC profiles. A complete discussion of the use of color within SVG can be found in the Color chapter.

A color profile description provides the bridge between an ICC profile and references to that ICC profile within SVG content. In Exchange SVG, color profile descriptions are specified by a color-profile element. The URI of the ICC profile is specified by a color-profile-src child element to a color-profile element.

    <!ELEMENT color-profile (%descTitle;,color-profile-src) >
    <!ATTLIST color-profile
      %stdAttrs;
      name CDATA #REQUIRED
      rendering-intent CDATA #IMPLIED >

Attribute definitions:

name = "<string>"
  Same syntax and semantics as the 'name' descriptor within an @color-profile rule.
rendering-intent = "<string>"
  Same syntax and semantics as the 'rendering-intent' descriptor within an @color-profile rule.

Attributes defined elsewhere:
  %stdAttrs;.

    <!ELEMENT color-profile-src EMPTY >
    <!ATTLIST color-profile-src
      %stdAttrs;
      %xlinkRefAttrs;
      xlink:href %URI; #REQUIRED >

Attribute definitions:

xlink:href = "<string><uri>"
  The <uri> of the color profile.

Attributes defined elsewhere:
  %stdAttrs;, %xlinkRefAttrs;.

### 24.4.3 The 'font-face' element

To allow Exchange SVG to have the same font description capabilities that Stylable SVG has in combination with CSS2 font facilities, Exchange has a 'font-face' element. The 'font-face' element corresponds directly to the @font-face facility in CSS2.

    <!ELEMENT font-face (%descTitle;,font-face-src,(definition-src)?) >
    <!ATTLIST font-face
      %stdAttrs;
      font-family CDATA #IMPLIED
      font-style CDATA #IMPLIED
      font-variant CDATA #IMPLIED
      font-weight CDATA #IMPLIED
      font-stretch CDATA #IMPLIED
      font-size CDATA #IMPLIED
      unicode-range CDATA #IMPLIED
      units-per-em %Number; #IMPLIED
      panose-1 CDATA #IMPLIED
      stemv %Number; #IMPLIED
      stemh %Number; #IMPLIED
      slope %Number; #IMPLIED
      cap-height %Number; #IMPLIED
      x-height %Number; #IMPLIED
      ascent %Number; #IMPLIED
      descent %Number; #IMPLIED
      widths CDATA #IMPLIED
      bbox CDATA #IMPLIED
      baseline %Number; #IMPLIED
      centerline %Number; #IMPLIED
      mathline %Number; #IMPLIED
      topline %Number; #IMPLIED >

Attribute definitions:

font-family = "<string>"
  Same syntax and semantics as the 'font-family' descriptor within an @font-face rule.
font-style = "<string>"
  Same syntax and semantics as the 'font-style' descriptor within an @font-face rule.
font-variant = "<string>"
  Same syntax and semantics as the 'font-variant' descriptor within an @font-face rule.
font-weight = "<string>"
  Same syntax and semantics as the 'font-weight' descriptor within an @font-face rule.
font-stretch = "<string>"
  Same syntax and semantics as the 'font-stretch' descriptor within an @font-face rule.
font-size = "<string>"
  Same syntax and semantics as the 'font-size' descriptor within an @font-face rule.
unicode-range = "<string>"
  Same syntax and semantics as the 'unicode-range' descriptor within an @font-face rule.
units-per-em = "<number>"
  Same syntax and semantics as the 'units-per-em' descriptor within an @font-face rule.
panose-1 = "<string>"
  Same syntax and semantics as the 'panose-1' descriptor within an @font-face rule.
stemv = "<number>"
  Same syntax and semantics as the 'stemv' descriptor within an @font-face rule.
stemh = "<number>"
  Same syntax and semantics as the 'stemh' descriptor within an @font-face rule.
slope = "<number>"
  Same syntax and semantics as the 'slope' descriptor within an @font-face rule.
cap-height = "<number>"
  Same syntax and semantics as the 'cap-height' descriptor within an @font-face rule.
FontFaceXHeightAttribute = "<number>"
  Same syntax and semantics as the 'FontFaceXHeightAttribute' descriptor within an @font-face rule.
ascent = "<number>"
  Same syntax and semantics as the 'ascent' descriptor within an @font-face rule.
descent = "<number>"
  Same syntax and semantics as the 'descent' descriptor within an @font-face rule.
widths = "<string>"
  Same syntax and semantics as the 'widths' descriptor within an @font-face rule.
bbox = "<string>"
  Same syntax and semantics as the 'bbox' descriptor within an @font-face rule.
baseline = "<string>"
  Same syntax and semantics as the 'baseline' descriptor within an @font-face rule.
centerline = "<string>"
  Same syntax and semantics as the 'centerline' descriptor within an @font-face rule.
centerline = "<string>"
  Same syntax and semantics as the 'centerline' descriptor within an @font-face rule.
topline = "<string>"
  Same syntax and semantics as the 'topline' descriptor within an @font-face rule.

Attributes defined elsewhere:
  %stdAttrs;.

The following elements and attributes correspond to the 'src' descriptor within an @font-face rule.

    <!ELEMENT font-face-src (font-face-uri|font-face-name)+ >
    <!ATTLIST font-face-src
      %stdAttrs; >

    <!ELEMENT font-face-uri (font-face-format*) >
    <!ATTLIST font-face-uri
      %stdAttrs;
      %xlinkRefAttrs;
      xlink:href %URI; #REQUIRED >

    <!ELEMENT font-face-format EMPTY >
    <!ATTLIST font-face-format
      %stdAttrs;
      string CDATA #IMPLIED >

    <!ELEMENT font-face-name EMPTY >
    <!ATTLIST font-face-name
      %stdAttrs;
      name CDATA #IMPLIED >

    <!ELEMENT definition-src EMPTY >
    <!ATTLIST definition-src
      %stdAttrs;
      %xlinkRefAttrs;
      xlink:href %URI; #REQUIRED >

## 24.5 DOM interfaces

The following IDL definitions are defined for the various Exchange SVG-specific attribute definitions in the SVG DOM. These IDL definitions correspond directly to the styling attributes in Exchange SVG.

    // For access to CSSValue type.
    #ifdef EXCHANGESVG
    #include "css.idl"
    #endif EXCHANGESVG

    #ifdef EXCHANGESVG
      // The following block of definitions only apply to
      // the DOM for Exchange SVG.

      typedef css::dom::CSSValue CSSValue;

    #define EXCHANGESVGContainerAttrs \
      attribute CSSValue enable-background

    #define EXCHANGESVGFillStrokeAttrs \
      attribute CSSValue fill; \
      attribute CSSValue fill-opacity; \
      attribute CSSValue fill-rule; \
      attribute CSSValue stroke; \
      attribute CSSValue stroke-dasharray; \
      attribute CSSValue stroke-dashoffset; \
      attribute CSSValue stroke-linecap; \
      attribute CSSValue stroke-linejoin; \
      attribute CSSValue stroke-miterlimit; \
      attribute CSSValue stroke-opacity; \
      attribute CSSValue stroke-width

    #define EXCHANGESVGGradientAttrs \
      attribute CSSValue stop-color; \
      attribute CSSValue stop-opacity

    #define EXCHANGESVGGraphicsAttrs \
      attribute CSSValue clip-path; \
      attribute CSSValue clip-rule; \
      attribute CSSValue color; \
      attribute CSSValue color-interpolation; \
      attribute CSSValue color-rendering; \
      attribute CSSValue cursor; \
      attribute CSSValue display; \
      attribute CSSValue filter; \
      attribute CSSValue image-rendering; \
      attribute CSSValue mask; \
      attribute CSSValue opacity; \
      attribute CSSValue pointer-events; \
      attribute CSSValue shape-rendering; \
      attribute CSSValue text-rendering; \
      attribute CSSValue visibility

    #define EXCHANGESVGMarkerAttrs \
      attribute CSSValue marker-start; \
      attribute CSSValue marker-mid; \
      attribute CSSValue marker-end

    #define EXCHANGESVGTextContainerAttrs \
      attribute CSSValue baseline-identifier; \
      attribute CSSValue baseline-shift; \
      attribute CSSValue direction; \
      attribute CSSValue font-family; \
      attribute CSSValue font-size; \
      attribute CSSValue font-size-adjust; \
      attribute CSSValue font-stretch; \
      attribute CSSValue font-style; \
      attribute CSSValue font-variant; \
      attribute CSSValue font-weight; \
      attribute CSSValue glyph-orientation-horizontal; \
      attribute CSSValue glyph-orientation-vertical; \
      attribute CSSValue letter-spacing; \
      attribute CSSValue text-decoration; \
      attribute CSSValue unicode-bidi; \
      attribute CSSValue word-spacing

    #define EXCHANGESVGTextElementAttrs \
      attribute CSSValue dominant-baseline; \
      attribute CSSValue text-anchor; \
      attribute CSSValue writing-mode

    #define EXCHANGESVGViewportAttrs \
      attribute CSSValue clip; \
      attribute CSSValue overflow

    #define EXCHANGESVGfeFloodAttrs \
      attribute CSSValue flood-color; \
      attribute CSSValue flood-opacity

    #endif EXCHANGESVG

previous next contents properties index