Contents | < Inline Text Formatting | Color Management >
XSL-FO provides the means to display images and vectorial graphics through two elements: fo:instream-foreign-object when you have the content embedded in the XSL-FO document and fo:external-graphic when the image resides in an external file.
One of the supported formats for fo:instream-foreign-object is SVG (Scalable Vector Graphics):
<fo:flow flow-name="xsl-region-body">
<fo:block font-family="Arial" font-size="14pt">SVG Graphics Example</fo:block>
<fo:block>
<fo:instream-foreign-object>
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="280">
<linearGradient id="Grad1" gradientUnits="objectBoundingBox"
x1="0" y1="0" x2="1" y2="1">
<stop stop-color="rgb(238,130,238)" offset="0"/>
<stop stop-color="blue" offset="0.2"/>
...
</linearGradient>
<!-- Linear gradient on the stroke of a rectangle -->
<rect x="20" y="20" width="440" height="80" fill="url(#Grad1)" />
<text font-family="Arial" font-size="14" x="20" y="130">
Multi-color linear gradient.
</text>
<!-- Radial gradient on the stroke of a rectangle -->
<radialGradient id="Grad2" gradientUnits="userSpaceOnUse"
cx="240" cy="210" r="220" fx="240" fy="210">
<stop stop-color="black" offset="0"/>
<stop stop-color="yellow" offset="0.2"/>
...
</radialGradient>
<rect x="20" y="150" width="440" height="80" fill="url(#Grad2)" />
<text font-family="Arial" font-size="14" x="20" y="260">
Multi-color radial gradient.
</text>
</svg>
</fo:instream-foreign-object>
</fo:block>
</fo:flow>
| For the complete source code for this code example see "Tutorial/SVG Graphics.fo" located under XML Documents Samples/Tutorial folder. |
The rendering result is displayed in the next figure.
Figure 1
The important points in example above are:
fo:instream-foreign-object is used to wrap the SVG graphic.
Inside SVG, we fill two rectangles with gradients.
In addition to SVG, XF Rendering Server 2008 supports XChart, an XML language developed by Ecrion Software for the purpose of describing generic charts. The next example shows a mountain chart embedded in XSL-FO:
<fo:flow flow-name="PageBody">
<fo:block font="bold 18pt Arial">
Area Chart Example
</fo:block>
<fo:block>
<fo:instream-foreign-object>
<xc:root width="500pt" height="290pt"
xmlns:xc="http://www.ecrion.com/xc">
<xc:graph x="5pt" y="5pt" width="450pt" height="280pt">
<xc:plot-area>
<xc:serie type="area" stroke-color="black" fill-color="red"
stroke-width="1.5pt" >
<xc:data-point category="1988-07-31" value="10000.00"/>
<xc:data-point category="1988-08-31" value="9854.79"/>
...
</xc:serie>
<xc:serie type="area" stroke-color="black"
fill-color="navy" stroke-width="1.5pt">
<xc:data-point category="1988-07-31" value="9899.39"/>
...
</xc:serie>
</xc:plot-area>
<xc:value-axis orientation="vertical">
<xc:title font-weight="bold">Value</xc:title>
<xc:grid-lines stroke-color="silver"/>
<xc:axis-labels offset="4pt" format="$#,##0"/>
</xc:value-axis>
<xc:category-axis orientation="horizontal">
<xc:major-tick-marks style="outside"/>
<xc:title font-weight="bold">Date</xc:title>
<xc:grid-lines stroke-color="silver"
stroke-dash-array="2px 2px"/>
<xc:axis-labels offset="3pt"/>
</xc:category-axis>
</xc:graph>
</xc:root>
</fo:instream-foreign-object>
</fo:block>
</fo:flow>
| For the complete source code for this code example see "Tutorial/XChart.fo" located under XML Documents Samples/Tutorial folder. |
The rendering result is displayed in the next figure.
Figure 2
Any XChart document has xc:root element.
We add several data series and define horizontal and vertical axis.
For more information about XChart, please visit XChart 1.0 Language Reference.
To display an image from an external file, use fo:external-graphic. All majors formats are supported, including BMP, JPEG, GIF, PNG, WMF, POSTSCRIPT, TIFF, etc.
Unisys U.S. LZW Patent No. 4,558,302 used for GIF image compression expired on June 20, 2003, the counterpart patents in the United Kingdom, France, Germany and Italy expired on June 18, 2004, the Japanese counterpart patents expired on June 20, 2004 and the counterpart Canadian patent expired on July 7, 2004. For more information see Unisys Web Site.
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="LetterPage" page-width="3in" page-height="1.8in">
<fo:region-body region-name="PageBody" margin="0.1in"/>
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="LetterPage">
<fo:flow flow-name="PageBody" font-family="Arial" font-size="10pt">
<fo:block font-weight="bold">
External Graphics Example
</fo:block>
<fo:block>
Text Before
<fo:external-graphic src="ecrion-logo.png"
content-height="0.7in"
vertical-align="middle" />
Text After
</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
| For the complete source code for this code example see "Tutorial/External Graphics.fo" located under XML Documents Samples/Tutorial folder. |
The rendering result is displayed in the next figure.
Figure 3
There are several things to notice in this example:
Image urls can be either absolute or relative. When relative, the location of the XSL-FO document is used to compute the full path to the image. You can use baseUrl property (see XF Rendering Server Programmers Reference) to override this location.
Image can be scaled using content-width and content-height properties. In this example we specify only the desired height and the width is computed automatically by the renderer, preserving the aspect ratio.
Inline graphics can be shifted vertically using vertical-align attribute.
Contents | < Inline Text Formatting | Color Management >