XSL to create SVG

svg-example.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<!-- This XSL Stylesheet created by SharePoint Experts, Inc.    -->
	<!-- http://sharepointexperience.com                            -->
	<xsl:output indent="yes" method="xml"/>
	<!-- This template is the "wrapper" or "container" for the custom view. -->
	<xsl:template match="/">
		<!-- This is the actual wrapper element that will be emitted -->
		<svg height="420px" width="{(count(/dsQueryResponse/Rows/Row)+2)*55}px" xmlns="http://www.w3.org/2000/svg">
			<g id="bar" transform="translate(0,420)">
				<!-- This will tell the data view to look for the actual content
                 and come back when it's done. -->
				<xsl:apply-templates/>
			</g>
		</svg>
		<!-- end wrapper -->
	</xsl:template>
	<xsl:template match="/dsQueryResponse/Rows/Row">
		<!-- This markup is used for each item in the list -->
		<rect class="item" stroke="#000000" stroke-width="5" height="{@PercentComplete.*400}" id="item-{@ID}" width="50" x="{position()*55}" y="-{@PercentComplete.*400}"/>
		<text class="itemtext" id="itemtext-{@ID}" style="font-family:arial;text-anchor:middle;baseline-shift:15;" x="{(position()*55)+25}" y="-15">
			<xsl:value-of select="@PercentComplete"/>
		</text>
	</xsl:template>
</xsl:stylesheet>