<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg">
  <head>
    <style>
      circle:hover {fill-opacity:0.8;}
    </style>
  </head>
  <body>
    <svg:svg height="435">
      <svg:g style="fill-opacity: 0.3;">
        <!-- svg:switch 
          <svg:foreignObject x="0" y="0" width="100" height="100" 
                             requiredExtensions="http://www.mozilla.org/SVGExtensions/EmbeddedXHTML">
            <img src="croc1.jpg" />
          </svg:foreignObject>
         /svg:switch -->
        <svg:image xlink:href="croc1.jpg" width="678" height="435" style=""/>
        <svg:circle cx="6cm" cy="2cm" r="100" style="fill: red; stroke: none; stroke-width: 0.01cm;" transform="translate(0, 50)"/>
        <svg:circle cx="6cm" cy="2cm" r="100" style="fill: blue; stroke: none; stroke-width: 0.01cm;" transform="translate(70, 150)"/>
        <svg:circle cx="6cm" cy="2cm" r="100" style="fill: green; stroke: none; stroke-width: 0.01cm;" transform="translate(-70, 150)"/>
      </svg:g>
    </svg:svg> 
  </body>
</html>