SVG in xhtml document - how?

I looked in the manuals for SVG stuff and they all say just to put in the 
tags and use them.
<svg width="450" height="500" viewBox="0 0 450 500">
    <script type="text/ecmascript">

    function showDialog(msg) {
        alert(msg);
    }
    </script>
    <g>
        <circle cx="137.5" cy="110" r="20" style="fill:crimson"
          onmousedown="showDialog('onmousedown')"/>
        <circle cx="312.5" cy="110" r="20" style="fill:crimson"
          onmouseup="showDialog('onmouseup')"/>
    </g>
    <g transform="translate(0 80)">
        <circle cx="137.5" cy="110" r="20" style="fill:crimson"
          onmouseover="showDialog('onmouseover')"/>
        <circle cx="312.5" cy="110" r="20" style="fill:crimson"
          onmouseout="showDialog('onmouseout')"/>
    </g>
    <g transform="translate(0 160)">
        <circle cx="137.5" cy="110" r="20" style="fill:crimson"
          onmousemove="showDialog('onmousemove')"/>
        <circle cx="312.5" cy="110" r="20" style="fill:crimson"
          onclick="showDialog('onclick')"/>
    </g>
</svg>
well, it doesn't work.  it's like inserting XML into an HTML document. 
nothing in the browser to interpret the SVG tags. anybody got any ideas?so
I 
looked at Batik http://xml.apache.org/batik/
and nothing in the docs say
how 
to include their jar files on a web page.their demo points to a .jnlp file

(xml javastart), which starts batik and gives a socket error on svg files
on 
my web site because my host locked down their server too much - won't
allow 
socket connections on port 80.