svg_from_xml_using_xslt.svg

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="#stylesheet"?>
<!DOCTYPE data [
  <!ATTLIST xsl:stylesheet id ID #REQUIRED>
]>
<root>
    <xsl:stylesheet id="stylesheet" version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/2000/svg">
        <xsl:output method="xml" indent="yes" media-type="image/svg+xml" />
        
        <xsl:template match="/">
            <svg width="400" height="200" viewBox="0 0 400 200">
                <rect width="100%" height="100%" fill="#f8f9fa" />
                <text x="20" y="30" font-family="Arial" font-size="20" fill="#333">
                    Sales Data Visualization
                </text>
                
                <xsl:for-each select="root/sales/month">
                    <xsl:variable name="xPos" select="(position() - 1) * 60 + 50" />
                    <xsl:variable name="height" select="amount div 10" />
                    
                    <rect x="{$xPos}" y="{150 - $height}" width="40" height="{$height}" fill="steelblue" />
                    <text x="{$xPos}" y="170" font-family="Arial" font-size="12" text-anchor="middle" dx="20">
                        <xsl:value-of select="name" />
                    </text>
                </xsl:for-each>
            </svg>
        </xsl:template>
    </xsl:stylesheet>

    <sales>
        <month>
            <name>Jan</name>
            <amount>800</amount>
        </month>
        <month>
            <name>Feb</name>
            <amount>1200</amount>
        </month>
        <month>
            <name>Mar</name>
            <amount>600</amount>
        </month>
        <month>
            <name>Apr</name>
            <amount>1500</amount>
        </month>
    </sales>
</root>