XForms/SVG

Motivation

You want to dynamically load and render SVG.
Sample Program

<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ev="http://www.w3.org/2001/xml-events"	
      xmlns:xsd="http://www.w3.org/2001/XMLSchema" 
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xmlns:xf="http://www.w3.org/2002/xforms" 
      xmlns:svg="http://www.w3.org/2000/svg">
  <head>
    <title>SVG Browser</title>
    <style type="text/css">
      #svgimg .xforms-value {
        width: 400px; 
        min-width: 400px; 
        height: 400px; 
        min-height: 400px;
      }
    </style>
    <xf:model>
      <xf:instance id="current">
        <current xmlns=""/>
      </xf:instance>
      <xf:instance id="names">
        <names xmlns="">
          <name fname="mozilla.svg">Mozilla</name>
          <name fname="wii.svg">Wii</name>
          <name fname="duke.svg">Duke</name>
          <name fname="git.svg">Git</name>
          <name fname="cartman.svg">Cartman</name>
          <name fname="tiger.svg">Tiger</name>
          <name fname="gcheck.svg">GCheck</name>
          <name fname="pencil.svg">Pencil</name>
          <name fname="python.svg">Python</name>
          <name fname="ietf.svg">IETF</name>
          <name fname="osgr_pie.svg">OSGR Pie</name>
        </names>
      </xf:instance>
      <xf:instance id="inlinesvg">       
        <svg xmlns='http://www.w3.org/2000/svg'/>
      </xf:instance>
      <xf:submission id="loadsvg" 
                     method="get" 
                     replace="instance"  
                     instance="inlinesvg" 
                     serialization="none"  
                     mode="synchronous">
        <xf:resource value="concat('svg/',.)"/>
      </xf:submission>

      <xf:action ev:event="xforms-ready">
        <xf:setvalue ref="." value="instance('names')/name[1]/@fname"/>
        <xf:send submission="loadsvg"/>
      </xf:action>
    </xf:model>
  </head>
  <body>
    <h1>SVG Browser</h1>
    <xf:select1 ref="." appearance="minimal" incremental="true">
      <xf:label>Select SVG: </xf:label>
      <xf:itemset nodeset="instance('names')/name">
        <xf:label ref="."/>
        <xf:value ref="@fname"/>
      </xf:itemset>
      <xf:send ev:event="xforms-value-changed" submission="loadsvg"/>
    </xf:select1>

    <xf:trigger>
      <xf:label>Next</xf:label>
      <xf:setvalue ev:event="DOMActivate" 
                   ref="." 
                   value="if(
                          instance('names')/name[
                            preceding-sibling::name[1]/@fname 
                            = current()
                            ],
                          instance('names')/name[
                            preceding-sibling::name[1]/@fname 
                            = current()
                            ]/@fname,
                          instance('names')/name[1]/@fname)"/>
    </xf:trigger>

    <br/>
    <xf:output id="svgimg" 
               value="xf:serialize(instance('inlinesvg'))" 
               mediatype="image/svg+xml"/>
  </body>
</html>
Credits

This was created by Alain Couthures on the XSLTForms mailing list. A working copy can currently be found on the AgenceXML web site.