<svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
        
        <text x="0" y="15">There should be only one animated image here, rotated, and not clipped:</text>
        <g transform="rotate(45,100,250)" >
            <rect fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" />
                <foreignObject x="70" y="70" width="150" height="150" >
                        <xhtml:img src="resources/3dolph.gif" width="150" height="150" />
                </foreignObject>
        </g>
        <text x="0" y="400">The animated image below should look like the one above:</text>
        <g transform="translate(0, 400) rotate(45,100,250)" >
            <rect fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" />
            <image xlink:href="resources/3dolph.gif" x="60" y="60" width="170" height="170" />
        </g>
</svg>