<?xml version="1.0" encoding="UTF-8"?>

<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title xml:lang="en">XHTML + MathML + SVG + CSS</title>
  <link rel="stylesheet" type="text/css" href="../chocolate.css" title="chocolate" />

</head>
<body>
<h1>An example of a compound document</h1>
<h2>XHTML + MathML + SVG + CSS</h2>
<p>This page was first built in mid-October 2006 and has been tested only with Firefox 2.0.</p>
<p>
This page uses MathML fonts. Please refer to the 
<a href="http://www.mozilla.org/projects/mathml/fonts/" title="MathML fonts">math fonts page</a> at Mozilla for further information.
</p>
<p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>f</mi>
  <mo>&#x2061;</mo>
  <mo>(</mo>
  <mi>x</mi>
  <mo>)</mo>
  <mo>=</mo>
  <msqrt>
    <mi>5</mi>
    <mo>-</mo>
    <mn>x</mn>
  </msqrt>
 <mtext>?</mtext>
</math>

</p>
<p>

<svg version="1.1" width="600px" height="200"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  xmlns:ev="http://www.w3.org/2001/xml-events">


<g transform="translate(10,10)">
 <text x="50" y="15" font-weight="bold">Week 1</text> 
 <rect x="0" y="30" width="170" height="65" rx="5" stroke="black" stroke-width="1" fill="lightyellow" />
 <text x="10" y="50">Submitted to member</text>
 <text x="10" y="65">of curriculum</text>
 <text x="10" y="80">committee</text>
</g>

<g transform="translate(10,95)">
 <rect x="0" y="15" width="170" height="65" rx="5" stroke="black" stroke-width="1" fill="aliceblue" />
 <text x="10" y="35">Reviewed by</text>
 <text x="10" y="50">content</text>
 <text x="10" y="65">expert</text>
</g>

<g transform="translate(200,90)">
 <polygon stroke="black" stroke-width="1" fill="lavender" points="0,10 30,10 30,0 50,20 30,40 30,30 0,30" />
</g>

<g transform="translate(260,10)">
 <text x="30" y="15"  font-weight="bold">Week 2</text> 
 <a xlink:href="../vpia/cc/index.html" xlink:title="Rectangle destination">
 <rect x="0" y="65" width="110" height="65" rx="5" stroke="black" stroke-width="1" fill="palegreen" />
 </a>
 <a xlink:href="../vpia/cc/index.html#cc20061010" xlink:title="Text destination">
 <text x="10" y="95">First reading</text>
 </a>
</g>


<g transform="translate(380,90)">
 <polygon stroke="black" stroke-width="1" fill="lavender" points="0,10 30,10 30,0 50,20 30,40 30,30 0,30" />
</g>

<g transform="translate(435,10)">
 <text x="30" y="15"  font-weight="bold">Week 3</text> 
 <rect x="0" y="65" width="110" height="65" rx="5" stroke="black" stroke-width="2" fill="mistyrose" />
 <text x="10" y="95">Vote</text>
</g>

</svg>

</p>
<p>A Newtonian ROYGBIV rainbow via an SVG linear gradient and X11 color keywords. Note that each element can be and is linked to different destinations - all without using image maps.</p>
<svg version="1.1" width="600px" height="200"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  xmlns:ev="http://www.w3.org/2001/xml-events">

 <defs>
  <linearGradient id="rainbow">
   <stop offset="0.00" stop-color="red" />
   <stop offset="0.17" stop-color="orange" />
   <stop offset="0.33" stop-color="yellow" />
   <stop offset="0.50" stop-color="green" />
   <stop offset="0.67" stop-color="blue" />
   <stop offset="0.83" stop-color="indigo" />
   <stop offset="1.00" stop-color="violet" />
  </linearGradient>
 </defs>

 <g>
  <a xlink:href="http://www.redhat.com/" xlink:title="Redhat software"><text x="10" y="15">Red</text></a>
  <a xlink:href="http://www.orange.co.uk/" xlink:title="Orange UK"><text x="75" y="15">Orange</text></a>
  <a xlink:href="http://www.yellow.com/" xlink:title="Yellow pages"><text x="175" y="15">Yellow</text></a>
  <a xlink:href="http://www.gp.org/" xlink:title="Green party"><text x="275" y="15">Green</text></a>
  <a xlink:href="http://en.wikipedia.org/wiki/Blue" xlink:title="Wikipedia blue"><text x="375" y="15">Blue</text></a>
  <a xlink:href="http://www.indigochild.com/" xlink:title="Indigo children"><text x="475" y="15">Indigo</text></a>
  <a xlink:href="http://www.sweetviolets.com" xlink:title="Flowers!"><text x="550" y="15">Violet</text></a>

  <a xlink:href="../statistics/s53/farawayrainbow.html" xlink:title="A statistics final with rainbow data">
   <rect fill="url(#rainbow)" stroke="black" stroke-width="2" x="10" y="25" width="600" height="140"/>
  </a>
 </g>
</svg>

<p>
 <a href="http://www.w3.org/Style/CSS/" title="Cascading Style Sheets">
 Cascading Style Sheets
 </a><br />
 <a href="http://www.w3.org/Math/" title="Mathematical Markup Language (MathML)">
 Mathematical Markup Language (MathML) 
 </a><br />
 <a href="http://www.w3.org/MarkUp/" title="HyperText Markup Language (HTML)">
 HyperText Markup Language (HTML)
 </a><br />
 <a href="http://www.w3.org/TR/SVG11/" title="Scalable Vector Graphics (SVG) 1.1 Specification">
 Scalable Vector Graphics (SVG) 1.1 Specification
 </a>
</p>

</body>
</html>