<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Processing Instruction generated by Amaya; the stylesheet is
     available on the W3C site at http://www.w3.org/Math/XSL/pmathml.xsl -->
<?xml-stylesheet type="text/xsl" href="pmathml.xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
      "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Integration of MathML and SVG</title>
  <meta name="generator" content="amaya 8.5, see http://www.w3.org/Amaya/" />
</head>

<body>
<h1>Integration of MathML and SVG</h1>

<div style="font-style: italic; margin-left:2em">
<p><a href="mailto:quint@w3.org">Vincent Quint</a>, W3C</p>

<p>17 July 2002</p>
</div>

<p>This document is an experiment to implement the test cases provided by
Michael Kohlhase in his note ``<a
href="http://www-2.cs.cmu.edu/~kohlhase/varia/svg-mathml-usecases/">Some Use
cases for the Integration of MathML and SVG-2</a>''. To display this document
you need a Web client that supports at least XHTML, SVG and MathML and allows
for free mixing of namespaces. You can try <a
href="http://www.w3.org/Amaya/">Amaya</a>, which was used to create this
document.</p>

<h2>Commutative diagrams</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="10em" height="5.6em"
     style="stroke:black font-family:serif">
  <defs>
    <polygon id="ArrowHead" points="0,0 4,0 2,6"
             transform="translate(-2,-6)"/>
  </defs>
  <text x="0" y="1em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msub>
        <mi>C</mi>
        <mi>&theta;</mi>
      </msub>
    </math></text>
  <text x="2em" y="1em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msub>
        <mo><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
          <line x1="0" y1="0" x2="0" y2="10"/>
          <line x1="0" y1="5" x2="10" y2="5"/>
        </svg>
        </mo>
        <mrow>
          <mi>R</mi>
          <mi>C</mi>
        </mrow>
      </msub>
    </math></text>
  <text x="4em" y="1em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msubsup>
        <mi>C</mi>
        <mi>&theta;</mi>
        <mo>&prime;&prime;</mo>
      </msubsup>
    </math></text>
  <text x="6em" y="1em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msub>
        <mo><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
          <line x1="0" y1="0" x2="0" y2="10"/>
          <line x1="0" y1="5" x2="10" y2="5"/>
        </svg>
        </mo>
        <mrow>
          <mi>R</mi>
          <mi>C</mi>
        </mrow>
      </msub>
    </math></text>
  <text x="8em" y="1em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msubsup>
        <mi>C</mi>
        <mi>&theta;</mi>
        <mo>&prime;</mo>
      </msubsup>
    </math></text>
  <text x=".3em" y="3em" text-anchor="end"><math
    xmlns="http://www.w3.org/1998/Math/MathML">
      <mi>&omega;</mi>
    </math></text>
  <text x=".7em" y="3em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <mi>&theta;</mi>
    </math></text>
  <text x="4.3em" y="3em" text-anchor="end"><math
    xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>&omega;</mi>
        <mo>&prime;&prime;</mo>
      </msup>
    </math></text>
  <text x="4.7em" y="3em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>&theta;</mi>
        <mo>&prime;&prime;</mo>
      </msup>
    </math></text>
  <text x="8.3em" y="3em" text-anchor="end"><math
    xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>&omega;</mi>
        <mi>&prime;</mi>
      </msup>
    </math></text>
  <text x="8.7em" y="3em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>&theta;</mi>
        <mi>&prime;</mi>
      </msup>
    </math></text>
  <text x="0" y="5em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <mi>C</mi>
    </math></text>
  <text x="2em" y="5em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msub>
        <mo><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
          <line x1="0" y1="0" x2="0" y2="10"/>
          <line x1="0" y1="5" x2="10" y2="5"/>
        </svg>
        </mo>
        <mi>p</mi>
      </msub>
    </math></text>
  <text x="4em" y="5em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>C</mi>
        <mo>&prime;&prime;</mo>
      </msup>
    </math></text>
  <text x="6em" y="5em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msub>
        <mo><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
          <line x1="0" y1="0" x2="0" y2="10"/>
          <line x1="0" y1="5" x2="10" y2="5"/>
        </svg>
        </mo>
        <mrow>
          <mi>I</mi>
          <mi>H</mi>
        </mrow>
      </msub>
    </math></text>
  <text x="8em" y="5em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>C</mi>
        <mi>&prime;</mi>
      </msup>
    </math></text>
  <line x1=".5em" y1="1.4em" x2=".5em" y2="4.1em"/>
  <use x=".5em" y="4.1em" xlink:href="#ArrowHead"/>
  <line x1="4.5em" y1="1.4em" x2="4.5em" y2="4.1em"/>
  <use x="4.5em" y="4.1em" xlink:href="#ArrowHead"/>
  <line x1="8.5em" y1="1.4em" x2="8.5em" y2="4.1em"/>
  <use x="8.5em" y="4.1em" xlink:href="#ArrowHead"/>
</svg>

<p>or</p>
<svg xmlns="http://www.w3.org/2000/svg" width="12em" height="7.6em"
     style="stroke:black font-family:serif">
  <defs>
    <polygon id="VertHead" points="0,0 4,0 2,6" transform="translate(-2,-6)"/>
    <polygon id="HorizHead" points="0,0 6,2 0,4"
             transform="translate(-6,-2)"/>
  </defs>
  <text x="0" y="2em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msub>
        <mi>C</mi>
        <mi>&theta;</mi>
      </msub>
    </math></text>
  <line x1="1.2em" y1="1.7em" x2="4.6em" y2="1.7em"/>
  <use x="4.6em" y="1.7em" xlink:href="#HorizHead"/>
  <text x="2.5em" y="1.2em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msub>
        <mo><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
          <line x1="0" y1="0" x2="0" y2="10"/>
          <line x1="0" y1="5" x2="10" y2="5"/>
        </svg>
        </mo>
        <mrow>
          <mi>R</mi>
          <mi>C</mi>
        </mrow>
      </msub>
    </math></text>
  <text x="5em" y="2em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msubsup>
        <mi>C</mi>
        <mi>&theta;</mi>
        <mrow>
          <mo>&prime;</mo>
          <mo>&prime;</mo>
        </mrow>
      </msubsup>
    </math></text>
  <line x1="6.2em" y1="1.7em" x2="9.6em" y2="1.7em"/>
  <use x="9.6em" y="1.7em" xlink:href="#HorizHead"/>
  <text x="7.5em" y="1.2em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msub>
        <mo><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
          <line x1="0" y1="0" x2="0" y2="10"/>
          <line x1="0" y1="5" x2="10" y2="5"/>
        </svg>
        </mo>
        <mrow>
          <mi>R</mi>
          <mi>C</mi>
        </mrow>
      </msub>
    </math></text>
  <text x="10em" y="2em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msubsup>
        <mi>C</mi>
        <mi>&theta;</mi>
        <mo>&prime;</mo>
      </msubsup>
    </math></text>
  <text x=".3em" y="4em" text-anchor="end"><math
    xmlns="http://www.w3.org/1998/Math/MathML">
      <mi>&omega;</mi>
    </math></text>
  <text x=".7em" y="4em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <mi>&theta;</mi>
    </math></text>
  <text x="5.3em" y="4em" text-anchor="end"><math
    xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>&omega;</mi>
        <mrow>
          <mo>&prime;</mo>
          <mo>&prime;</mo>
        </mrow>
      </msup>
    </math></text>
  <text x="5.7em" y="4em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>&theta;</mi>
        <mrow>
          <mo>&prime;</mo>
          <mo>&prime;</mo>
        </mrow>
      </msup>
    </math></text>
  <text x="10.3em" y="4em" text-anchor="end"><math
    xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>&omega;</mi>
        <mo>&prime;</mo>
      </msup>
    </math></text>
  <text x="10.7em" y="4em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>&theta;</mi>
        <mo>&prime;</mo>
      </msup>
    </math></text>
  <text x="0" y="6em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <mi>C</mi>
    </math></text>
  <line x1="1.2em" y1="5.7em" x2="4.6em" y2="5.7em"/>
  <use x="4.6em" y="5.7em" xlink:href="#HorizHead"/>
  <text x="2.5em" y="6.7em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msub>
        <mo><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
          <line x1="0" y1="0" x2="0" y2="10"/>
          <line x1="0" y1="5" x2="10" y2="5"/>
        </svg>
        </mo>
        <mi>p</mi>
      </msub>
    </math></text>
  <text x="5em" y="6em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>C</mi>
        <mrow>
          <mo>&prime;</mo>
          <mo>&prime;</mo>
        </mrow>
      </msup>
    </math></text>
  <line x1="6.2em" y1="5.7em" x2="9.6em" y2="5.7em"/>
  <use x="9.6em" y="5.7em" xlink:href="#HorizHead"/>
  <text x="7.5em" y="6.7em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msub>
        <mo><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
          <line x1="0" y1="0" x2="0" y2="10"/>
          <line x1="0" y1="5" x2="10" y2="5"/>
        </svg>
        </mo>
        <mrow>
          <mi>I</mi>
          <mi>H</mi>
        </mrow>
      </msub>
    </math></text>
  <text x="10em" y="6em"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msup>
        <mi>C</mi>
        <mo>&prime;</mo>
      </msup>
    </math></text>
  <line x1=".5em" y1="2.4em" x2=".5em" y2="5.1em"/>
  <use x=".5em" y="5.1em" xlink:href="#VertHead"/>
  <line x1="5.5em" y1="2.4em" x2="5.5em" y2="5.1em"/>
  <use x="5.5em" y="5.1em" xlink:href="#VertHead"/>
  <line x1="10.5em" y1="2.4em" x2="10.5em" y2="5.1em"/>
  <use x="10.5em" y="5.1em" xlink:href="#VertHead"/>
</svg>

<h2>Links in Mathematical Formulae</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="15.2em" height="45px"
     style="stroke:black font-family:serif">
  <text y="22px" x="0"><math xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <mo>(</mo>
        <mi>&lambda;</mi>
        <mi>x</mi>
        <mo>.</mo>
        <mi>f</mi>
        <mrow>
          <mo>(</mo>
          <mi>x</mi>
          <mo>,</mo>
          <mi>f</mi>
          <mrow>
            <mo>(</mo>
            <mi>x</mi>
            <mo>)</mo>
          </mrow>
          <mo>)</mo>
        </mrow>
        <mo>)</mo>
      </mrow>
      <munder>
        <mrow>
          <mi>g</mi>
          <mrow>
            <mo>(</mo>
            <mi>a</mi>
            <mo>)</mo>
          </mrow>
        </mrow>
        <mo>&UnderBrace;</mo>
      </munder>
      <mo>&RightArrow;</mo>
      <mi>&beta;</mi>
      <mspace width="0.3em"/>
      <mi>f</mi>
      <mrow>
        <mo>(</mo>
        <mi>g</mi>
        <mrow>
          <mo>(</mo>
          <mi>a</mi>
          <mo>)</mo>
        </mrow>
        <mo>,</mo>
        <mi>f</mi>
        <mrow>
          <mo>(</mo>
          <mi>g</mi>
          <mrow>
            <mo>(</mo>
            <mi>a</mi>
            <mo>)</mo>
          </mrow>
          <mo>)</mo>
        </mrow>
        <mo>)</mo>
      </mrow>
    </math></text>
  <path fill="none" d="M 15,13 C 14,11 20,6 24,7 C 27,7 34,12 34,14"
        style="stroke: #BEBEBE"/>
  <path fill="none"
        d="M 15,13 C 12,9 20,3 24,2 C 29,0 39,2 44,4 C 46,5 54,9 54,12"
        style="stroke: #BEBEBE"/>
  <path fill="none"
        d="M 53,23 C 51,25 54,31 57,33 C 63,37 75,37 82,36 C 84,35 89,32 89,31"/>
  <path fill="none"
        d="M 32,23 C 29,26 36,35 41,38 C 49,43 67,44 77,42 C 81,40 89,35 89,31"/>
</svg>

<p>The end.</p>
</body>
</html>

