|
Graphics |
|
|
Graphics |
|
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.
SVG
One of the supported formats for fo:instream-foreign-object is SVG (Scalable Vector Graphics):
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="LetterPage" page-width="4in"
page-height="3in">
<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">
<fo:block font-family="Arial" font-size="10pt"
font-weight="bold">
SVG Graphics Example
</fo:block>
<fo:block>
<fo:instream-foreign-object content-height="2.2in"> (1)
<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"> (2)
<stop stop-color="rgb(238,130,238)" offset="0"/>
<stop stop-color="blue" offset="0.2"/>
<stop stop-color="lime" offset="0.4"/>
<stop stop-color="yellow" offset="0.6"/>
<stop stop-color="rgb(255,165,0)" offset="0.8"/>
<stop stop-color="red" offset="1"/>
</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" y="210"> (3)
<stop stop-color="black" offset="0"/>
<stop stop-color="yellow" offset="0.2"/>
<stop stop-color="red" offset="0.4"/>
<stop stop-color="blue" offset="0.6"/>
<stop stop-color="white" offset="0.8"/>
<stop stop-color="green" offset="1"/>
</radialGradient>
<rect x="20" y="150" width="440" height="80"
fill="url(#Grad2)" stroke-width="40"/>
<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>
</fo:page-sequence>
</fo:root>
The rendering result is displayed in the next figure:
Figure 10.
The important points in example above are:
(1) fo:instream-foreign-object is used to wrap the SVG graphic.
(2)(3) Inside SVG, we fill two rectangles with gradients.
XChart
In addition to SVG, XF Rendering Server supports XChart, an XML language developed by Ecrion Software for the purpose of describing generic charts.
Any XChart document has xc:root element. This is the top node in an XChart document.
Typically, this element contains the declaration of 'XChart' namespace xmlns:xc="http://www.ecrion.com/xc". A document can range from an empty fragment (no content inside xc:root) to a complex, deeply nested collection of XChart, XSL-FO and SVG elements.
There can be produced Pie, Area, Bar, Spider, Scatter, Spider and Line Charts. It is also able to render combinations of these types.
In the example below is displayed a 3D Pie XChart:
<xc:root xmlns:xc="http://www.ecrion.com/xc"
xmlns:fo="http://www.w3.org/1999/XSL/Format"
xmlns:svg="http://www.w3.org/2000/svg" width="450pt" height="180pt">
<xc:pie-3d x="40pt" y="40pt" width="200pt" height="100pt" base-height="0.3"
base-shading="0.15">(1)
<xc:slice-3d fill-color="red" stroke-color="black" stroke-width="0.3pt"
percent="13.48">(2)
<xc:title offset="25pt" stroke-color="transparent">13.48%</xc:title>
</xc:slice-3d>
<xc:slice-3d fill-color="navy" stroke-color="black" stroke-width="0.3pt"
percent="8.98">
<xc:title offset="25pt" stroke-color="transparent">8.98%</xc:title>
</xc:slice-3d>
<xc:slice-3d fill-color="orange" stroke-color="black" stroke-width="0.3pt"
percent="7.52">(3)
<xc:title offset="25pt" stroke-color="transparent">7.52%</xc:title>
</xc:slice-3d>
<xc:slice-3d fill-color="silver" stroke-color="black" stroke-width="0.3pt"
percent="1.18">
<xc:title offset="25pt" stroke-color="transparent">1.18%</xc:title>
</xc:slice-3d>
<xc:slice-3d fill-color="violet" stroke-color="black" stroke-width="0.3pt"
percent="18.59">
<xc:title offset="25pt" stroke-color="transparent">18.59%</xc:title>
</xc:slice-3d>
<xc:slice-3d fill-color="gray" stroke-color="black" stroke-width="0.3pt"
percent="16.94">
<xc:title offset="25pt" stroke-color="transparent">16.94%</xc:title>
</xc:slice-3d>
<xc:slice-3d fill-color="green" stroke-color="black" stroke-width="0.3pt"
percent="23.90">
<xc:title offset="25pt" stroke-color="transparent">23.90%</xc:title>
</xc:slice-3d>
<xc:slice-3d fill-color="yellow" stroke-color="black" stroke-width="0.3pt"
percent="9.68">
<xc:title offset="25pt" stroke-color="transparent">9.68%</xc:title>
</xc:slice-3d>
</xc:pie-3d>
</xc:root>
The rendering result is displayed in the next figure:
Figure 11.
Things to notice:
(1)(2) xc:pie-3d describes a 3D pie chart and xc:slice-3d a slice in this chart.
(3) stroke-color and stroke-width are attributes used to paint the outline of an element.
There can be produced different types of bar chart, from simple ones to group-stacked or group-clustered. Here is an example of a group-cluster chart:
<xc:root xmlns:xc="http://www.ecrion.com/xc" xmlns:svg="http://www.w3.org/2000/svg"
xmlns:fo="http://www.w3.org/1999/XSL/Format" width="500pt" height="320pt">
<xc:graph x="5pt" y="5pt" width="490pt" height="290pt">(1)
<xc:plot-area>(2)
<xc:serie-group stacking="clustered" cluster-spacing="4pt">(3)
<xc:serie stroke-color="transparent">(4)
<xc:bar width="10pt" fill-color="red"
category="1989-01-31" value="10000"/>(5)
<xc:bar width="10pt" fill-color="red"
category="1989-02-1" value="-18000"/>
<xc:bar width="10pt" fill-color="red"
category="1989-03-31" value="30000"/>
<xc:bar width="10pt" fill-color="lime"
category="1989-05-31" value="11931.89251254"/>
</xc:serie>
<xc:serie stroke-color="transparent">
<xc:bar width="10pt" fill-color="blue"
category="1989-01-31" value="1865.76193894"/>
<xc:bar width="10pt" fill-color="blue"
category="1989-02-1" value="-10713.15292294"/>
<xc:bar width="10pt" fill-color="blue"
category="1989-03-31" value="10931.89251254"/>
<xc:bar width="10pt" fill-color="blue"
category="1989-04-2" value="1931.89251254"/>
<xc:bar width="10pt" fill-color="blue"
category="1989-05-31" value="1931.89251254"/>
</xc:serie>
</xc:serie-group>
</xc:plot-area>
<xc:value-axis orientation="vertical" unit="5000">
<xc:title font-weight="bold">Value</xc:title>
<xc:grid-lines stroke-color="silver"/>
<xc:axis-labels offset="4pt"/>
</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>
The rendering result is displayed in the next figure:
Figure 12.
Things to notice:
(1) xc:graph is the element describing one or more data series in a two dimensional coordinate system.
(2) xc:plot-area sets various properties for the area reserved to draw series of data and xc:serie contains one or more data points.
(3) xc:serie-group stacking and cluster-spacing attributes defines the type of bar chart: clustered and the space between clusters.
(4)(5) stroke and fill attributes are used to paint the outline or the background of an element.
External Graphics
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 Website.
<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.2in">
<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>
The rendering result is displayed in the next figure:
Figure 13.
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 the baseUrl property 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. |