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:
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.
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>
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 " > |
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:
<!ELEMENT color-profile-src EMPTY > <!ATTLIST color-profile-src %stdAttrs; %xlinkRefAttrs; xlink:href %URI; #REQUIRED >
Attribute definitions:
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:
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 >
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