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