<xsl:stylesheet  version="1.0" 
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:svg="http://www.w3.org/2000/svg"
 xmlns:html="http://www.w3.org/1999/xhtml" 
 xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:my="http://example.com/namespace" > 
	<xsl:template match="/">
			<xsl:apply-templates />
	</xsl:template>
        
	<xsl:template match="*">
		<xsl:copy>
		<xsl:apply-templates select="@*|node()"/>
		</xsl:copy>
	</xsl:template>
        
	<xsl:template match="@*">
		<xsl:copy/>
	</xsl:template> 
        	<xsl:template match="html:head">
		<xsl:copy>
                  <xsl:if test="system-property('xsl:vendor')='Microsoft'">
                    <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
                    <xsl:processing-instruction name="import">namespace="svg" implementation="#AdobeSVG"</xsl:processing-instruction>
                  </xsl:if>
		<xsl:apply-templates select="@*|node()"/>
		</xsl:copy>
	</xsl:template> 
        
        <xsl:template match="html:html">
		
                <xsl:choose>
                  <xsl:when test="system-property('xsl:vendor')='Microsoft'">
                    <html xmlns:svg="http://www.w3.org/2000/svg">
                    <xsl:apply-templates select="@*|node()"/>
                    </html>
                  </xsl:when>
                  <xsl:otherwise>
                  <xsl:copy>
                  <xsl:apply-templates select="@*|node()"/>
		  </xsl:copy>
                  </xsl:otherwise>
                </xsl:choose>
		
	</xsl:template>       
        
	<xsl:template match="processing-instruction()">
		<xsl:copy>	
                <xsl:apply-templates select="@*|node()|text"/>
		</xsl:copy>
	</xsl:template>

<xsl:template match="html:input[@type='button']">
        <xsl:variable name="id" select="generate-id()"/>
 <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="208" height="38" cursor="pointer">
 <xsl:apply-templates select="@*"/>
  <svg:linearGradient id="{$id}_bg1" x1="0" y1="0" x2="0" y2="1">
    <svg:stop offset="0" stop-color="turquoise"/>
    <svg:stop offset="1" stop-color="navy"/>
  </svg:linearGradient>
  <svg:linearGradient id="{$id}_light1" x1="0" y1="0" x2="0" y2="1">
    <svg:stop offset="0" stop-color="white"/>
    <svg:stop offset="1" stop-color="white" stop-opacity="0"/>
  </svg:linearGradient>
  <svg:linearGradient id="{$id}_light2" x1="0" y1="0" x2="0" y2="1">
    <svg:stop offset="0" stop-color="grey" stop-opacity="0"/>
    <svg:stop offset="1" stop-color="grey"/>
  </svg:linearGradient>
  <svg:filter id="{$id}_gb" x="-0.5" y="-1" width="2" height="3">
    <svg:feGaussianBlur stdDeviation="3"/>
  </svg:filter>
  <svg:rect x="5" y="5" width="150" height="30" rx="10" ry="10" fill="grey" filter="url(#{$id}_gb)"/>
  <svg:rect x="0" y="0" width="150" height="30" rx="10" ry="10" fill="url(#{$id}_bg1)"/>
  <svg:text stroke="blue" x="75" y="22" font-size="20" text-anchor="middle" fill="yellow" font-weight="900">
<xsl:value-of select="@value"/>
</svg:text>
  <svg:rect x="2" y="2" width="146" height="17" rx="8" ry="8" fill="url(#{$id}_light1)" filter="url(#{$id}_gb)"/>
  <svg:rect x="4" y="21" width="142" height="7" rx="8" ry="8" fill="url(#{$id}_light2)" filter="url({$id}_#gb)"/>
 </svg:svg>
</xsl:template>
        
 </xsl:stylesheet>
