previous next contents properties index

# 24 Final Form SVG

### Contents

## 24.1 Introduction

The SVG language comes in two forms: Stylable SVG and Final Form SVG. Stylable SVG can be styled by external or internal style sheets. Final Form SVG cannot be styled by external or internal style sheets, even user style sheets.

This chapter:

- Describes appropriate uses of Final Form SVG
- Describes the differences between Stylable SVG and Final Form SVG
- Details the language features only in Final Form SVG
- Shows various examples of Final Form SVG content

## 24.2 Appropriate uses of Final Form SVG

Final Form SVG is recommended for situations where styling is inappropriate, where restyling the content for accessibility is not a requirement, and where the visual representation of the content is fully defined (i.e., the content is in its final form).

A major use of Final Form SVG is to represent the temporarily saved result after applying styling using XSL Transformations [XSLT].

Other appropriate uses of Final Form SVG are scenarios where there is a need to capture an exact visual rendering of particular graphical content, such as when there are particular legal, safety or commercial requirements. For example, the colors used in a company logo might be an important part of a trademark, in which case absolute control of the styling of that logo might be a requirement for legal reasons. If the line weight of particular graphics is an important visual indicator in an application involving health or safety, such as on the display of a medical instrument, then absolute control of the styling on lines might be a requirement for safety reasons. If particular graphical styling of graphically represented data is a critical part of financial operations, then absolute control of the styling of that graphical data might be a requirement for commercial reasons.

Final Form SVG is also suitable as a page definition language for printers.

Final Form SVG by definition does not allow application of style sheets. In particular, user style sheets are ignored. Because style sheets are a key feature for accessibility, Final Form SVG should not be used in any situation where people with impairments would have an opportunity to apply a style sheet to the document; instead, the document should be saved using Stylable SVG.

## 24.3 Differences between Stylable SVG and Final Form SVG

Stylable SVG and Final Form 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 Final Form SVG, and vice versa.

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

| Stylable SVG | Final Form 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 interfaces SVGStylable (which corresponds to the style attribute), 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 Final Form 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 Final Form 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 Final Form 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 20000302 Stylable//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-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>

Final Form SVG

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg
      PUBLIC "-//W3C//DTD SVG 20000302 FinalForm//EN"
      "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-finalform.dtd">
    <svg width="4cm" height="3cm"">
      <title>Example finalform01</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>

## 24.4 Final Form SVG language features

### 24.4.1 Styling attributes in Final Form SVG

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

Except for style-sheet language cascading rules, the syntax and semantics of the styling attributes in Final Form SVG are identical to the syntax and semantics of the styling properties in Stylable SVG. For a description of Final Form 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 Final Form SVG:

Styling category | Property names in Stylable SVG | Attribute definitions in Final Form SVG DTD
Container | 'enable-background' |
    <!ENTITY % FINALFORMSVGContainerAttrs
      "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 % FINALFORMSVGFillStrokeAttrs
      "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 % FINALFORMSVGGradientAttrs
      "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 % FINALFORMSVGGraphicsAttrs
      "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 % FINALFORMSVGMarkerAttrs
      "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 % FINALFORMSVGTextContainerAttrs
      "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 % FINALFORMSVGTextElementAttrs
      "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 % FINALFORMSVGViewportAttrs
      "clip %ClipValue; #IMPLIED
       overflow (visible | hidden | scroll | auto |
                 inherit) #IMPLIED " >
'feFlood' elements | 'flood-color' 'flood-opacity' |
    <!ENTITY % FINALFORMSVGfeFloodAttrs
      "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 Final Form 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 Final Form SVG to have the same font description capabilities that Stylable SVG has in combination with CSS2 font facilities, Final Form 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 Final Form SVG-specific attribute definitions in the SVG DOM. These IDL definitions correspond directly to the styling attributes in Final Form SVG.

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

    #ifdef FINALFORMSVG
      // The following block of definitions only apply to
      // the DOM for Final Form SVG.

      typedef css::dom::CSSValue CSSValue;

    #define FINALFORMSVGContainerAttrs \
      attribute CSSValue enable-background

    #define FINALFORMSVGFillStrokeAttrs \
      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 FINALFORMSVGGradientAttrs \
      attribute CSSValue stop-color; \
      attribute CSSValue stop-opacity

    #define FINALFORMSVGGraphicsAttrs \
      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 FINALFORMSVGMarkerAttrs \
      attribute CSSValue marker-start; \
      attribute CSSValue marker-mid; \
      attribute CSSValue marker-end

    #define FINALFORMSVGTextContainerAttrs \
      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 FINALFORMSVGTextElementAttrs \
      attribute CSSValue dominant-baseline; \
      attribute CSSValue text-anchor; \
      attribute CSSValue writing-mode

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

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

    #endif FINALFORMSVG

previous next contents properties index