Listing 1

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-
20010904/DTD/svg10.dtd">
<svg width="12cm" height="5cm" viewBox="0 0 1200 500" 
xmlns="http://www.w3.org/2000/svg">
<rect x="400" y="100" width="400" height="200" fill="red" 
stroke="black" stroke-width="10"/>
</svg>


Listing 2

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="D:\Rajesh\
Articles\XSLT-SVG\SalesChart.xsl"?>
<QuarterlySales>
<Year>2002</Year>
<MaxValue>900</MaxValue>
<Quarter name="Q1">450</Quarter>
<Quarter name="Q2">600</Quarter>
<Quarter name="Q3">575</Quarter>
<Quarter name="Q4">800</Quarter>
</QuarterlySales>



Listing 3

<!-- Heading for our chart -->
<text x="100" y="50" style="font-size:18; 
font-weight:normal; stroke:blue; fill:blue;">
National Car Dealer - Quarterly Sales <xsl:value-
of select="/QuarterlySales/Year"/>
</text>
<text x="220" y="70" style="font-size:14; 
font-weight:normal; stroke:red; fill:red;">
(Values in Thousands) <xsl:value-of select="/
QuarterlySales/Year"/>
</text>
<!-- Draw our gray area -->
<rect x="100" y="90" width="400" height="310" 
style="fill:#CCCCCC;"/>
<!-- Draw the vertical line up the left of the gray 
area y-axis -->
<line x1="100" y1="90" x2="{100}" y2="{400}" 
style="stroke:#000099; stroke-width:0.1"/>
<!-- Draw the horizontal lines -->
<g style="fill:#000000; font-size:12; 
font-family:Arial">
<text x="85" y="{400}">
<xsl:value-of select="0"/>
</text>
<line x1="100" y1="400" x2="{100 + 400}" y2="
{400}" style="stroke:#000000; stroke-width:0.2"/>
</g>



Listing 4

<xsl:template match="/">
<svg width="600" height="500">
. . .
<xsl:apply-templates select="//Quarter"/>
</svg>
</xsl:template>
<!-- Create a vertical bar and horizontal labels for 
each <Quarter> element in the XML source document -->
<xsl:template match="/QuarterlySales/Quarter">
<xsl:variable name="NumofBar">
<xsl:number count="*"/>
</xsl:variable>
<xsl:variable name="Sales">
<xsl:value-of select="."/>
</xsl:variable>
<xsl:variable name="BarHeight">
<xsl:value-of select="$Sales * 300 div 900"/>
</xsl:variable>
<!-- Vertical Bar -->
<rect x="{140 +(40 * 2 *($NumofBar - 3))}" y="{400 - 
$BarHeight}" style="fill:red; stroke:black; 
stroke-width:0.1" width="{40}" height="{$BarHeight}"/>
<!--Horizontal labels -->
<text x="{150 +(40 * 2 *($NumofBar - 3))}" y="420">
<xsl:value-of select="@name"/>
</text>
</xsl:template>



Listing 5

<?xml version="1.0" encoding="UTF-8"?>
<svg width="600" height="500">
<text x="100" y="50" style="font-size:18; 
font-weight:normal; stroke:blue; fill:blue;">
National Car Dealer - Quarterly Sales 2002</text>
<text x="220" y="70" style="font-size:14; 
font-weight:normal; stroke:red; fill:red;">
(Values in Thousands) 2002</text>
<rect x="100" y="90" width="400" height="310" 
style="fill:#CCCCCC;"/>
<line x1="100" y1="90" x2="100" y2="400" 
style="stroke:#000099; stroke-width:0.1"/>
<g style="fill:#000000; font-size:12; font-family:Arial">
<text x="85" y="400">0</text>
<line x1="100" y1="400" x2="500" y2="400" 
style="stroke:#000000; stroke-width:0.2"/>
</g>

. . .
<rect x="140" y="250" style="fill:red; stroke:black; 
stroke-width:0.1" width="40" height="150"/>
<text x="150" y="420">Q1</text>
<rect x="220" y="200" style="fill:red; stroke:black; 
stroke-width:0.1" width="40" height="200"/>
<text x="230" y="420">Q2</text>
<rect x="300" y="208.33333333333334" style="fill:red; 
stroke:black; stroke-width:0.1" width="40" 
height="191.66666666666666"/>
<text x="310" y="420">Q3</text>
<rect x="380" y="133.33333333333331" style="fill:red; 
stroke:black; stroke-width:0.1" width="40" 
height="266.66666666666669"/>
<text x="390" y="420">Q4</text>
</svg>




Listing 6

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="my-page">
<fo:region-body margin="1in" />
</fo:simple-page-master>
</fo:layout-master-set>

<fo:page-sequence master-reference="my-page">
<fo:flow flow-name="xsl-region-body">
<fo:block>
<fo:external-graphic src="SalesChart.svg" />
</fo:block>
</fo:flow> 
</fo:page-sequence>
</fo:root>