<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg" >
  <head>
    <title>Compound Documents</title>
    <style>
      circle:hover {fill-opacity:0.9; stroke-width:2mm;}
    </style>
  </head>

  <body>
    <h1>Compound Documents</h1>
  <ul>
    <li>Different XML vocabularies can be mixed by using XML namespaces.</li>
    <li>Can mix SVG with XHTML, MathML, etc.</li>
    <li>Uniform object model throughout document</li> 
    <li>Only available in Mozilla SVG</li>
  </ul>
  <pre style="background-color:#DDDDFF;">
  &lt;doc xmlns:html="http://www.w3.org/1999/xhtml"
       xmlns:svg="http://www.w3.org/2000/svg" &gt;
    &lt;html:button onclick="getElementById('A').r.baseVal.value-=5;"&gt;
      Decrease radius
    &lt;/html:button&gt;
    &lt;html:button onclick="getElementById('A').r.baseVal.value+=5;"&gt;
      Increase radius
    &lt;/html:button&gt;
    &lt;html:button onclick="alert(getElementById('A').r.baseVal.value);"&gt;
      Show radius
    &lt;/html:button&gt;
    &lt;html:br/&gt;

    &lt;svg:svg  width="12cm" height="12cm"&gt;
      &lt;svg:g ... &gt;
        &lt;svg:circle id="A" ... /&gt;
        &lt;svg:circle ... /&gt;
      &lt;svg:circle ... /&gt;
    &lt;/svg:svg&gt;
  &lt;/doc&gt;
  </pre>

  <button onclick="document.getElementById('circle1').r.baseVal.value-=5;">Decrease radius</button>
  <button onclick="document.getElementById('circle1').r.baseVal.value+=5;">Increase radius</button>
  <button onclick="alert(document.getElementById('circle1').r.baseVal.value);">Show radius</button>
  <br/>
  <svg:svg  width="12cm" height="12cm">
    <svg:g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
      <svg:circle id="circle1" cx="6cm" cy="2cm" r="100" style="fill:red;" transform="translate(0,50)" />
      <svg:circle id="circle2" cx="6cm" cy="2cm" r="100" style="fill:blue;" transform="translate(70,150)" />
      <svg:circle id="circle3" cx="6cm" cy="2cm" r="100" style="fill:green;" transform="translate(-70,150)"/>
      <svg:rect x="0" y="0" width="12cm" height="12cm" style="fill:none;stroke:black; stroke-width:1;"/>
    </svg:g>
  </svg:svg> 
</body>
</html>